Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.
My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?
I hope this makes sense. Thank you.
Here is the basic idea of the current code:
#index {
position:fixed;
background:rgba(0,0,0,0.3);
width:500px;
height:500px;
top:0;
left:50%;
margin:-430px 0 0 -500px;
transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;}
#index:hover {
background:rgba(0,0,0,0.8);
margin:0 0 0 -500px;}
jsFiddle:
http://jsfiddle.net/wZ8zX/1/
html:
<div id="slider"><div id="trigger"><br></div></div>
js:
$('#trigger').hover(function(){
$(this).parent().animate({'top':0},500);
});
$('#slider').mouseleave(function(){
$(this).animate({'top':-150},500);
});
solution without jQuery:
http://jsfiddle.net/wZ8zX/3/
sorry i usually just browse jquery questions, so i didn't check the tags lol
Using only CSS you can use another block, or a pseudo-element to overlay the parts of block where you don't want to have transition, and then, after hover, make z-index for the element with transition bigger than overlaying element, so all the contents of it would be accessible.
Here is a fiddle with an example: http://jsfiddle.net/kizu/Y3px6/1/
This comes from the position:relative property. I strongly feel that your current div tag has position relative property. Please remove that.
Related
I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.
The height of this parent div is fixed and set to 200px, and needs to remain this way.
How can I make chosen-select go over the parent div when clicked upon?
EDIT: jsFiddle updated with more CSS.
If I comment the div.content, it doesn't mess up the layout.
The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.
Is there something I need to do for the header's positions?
EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.
What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.
Simply add this CSS class:
Added border to show you the definition of your other box is staying fixed.
div.content {
position:absolute;
}
View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/
When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.
Does this answer the question? I can elaborate further if you'd like.
EDIT:
absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).
Try just adding a spacer like so:
CSS:
div.filler {
height:30px;
}
HTML:
...
<div class="filler">
<div class="content">
<select class="chosen-select">
...
FIDDLE: http://jsfiddle.net/e62Wu/7/
ANOTHER Edit:
Try this:
JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/
Add CSS:
.hider {
position:static;
}
Add ID in HTML:
<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>
Add jQuery if/else:
if($this.attr('id')==='dropper'){
$('.content').toggleClass('hider').toggleClass('content');
}
I added
border: 1px solid black;
to the parentbox, and removed "overflow: hidden" and the dropdown stays in front of the div.
It was not based on any prior knowledge, just dumb luck. I was trying to figure out the exact borders of the divs...oh well.
It's always something...
I have a fixed position div with CSS styles applied to it via a class. The class looks like this:
.DataBox {
background-color:rgba(200,200,200,0.2);
/* border-radius:32px; Seems to make things super laggy... */
border-color:#606060;
border-style:solid;
border-width:2px;/**/
box-sizing:border-box;
color:#606060;
display:none;
left:0px;
margin:0;
overflow-x:hidden;
overflow-y:scroll;
padding:16px;
position:fixed;
top:0px;
}
Everything works fine when I comment out border-radius, but I would love a round rect for the style of my div. Now, keep in mind that the rest of the CSS works fine with no lag at all when I comment out border-radius, so I know that that is the problem. The display:none is changed in JavaScript, so don't pay any attention to that.
Does anyone know why the round rect is a problem? Does it have something to do with how it culls elements inside the div when they begin to overlap the rounded corners? I am hoping there's a way to work around this without cheap hacks like a second styled div on top of my actual div... The contents of the div, by the way, are just a few <p> elements.
Thanks for your help!
Here is a fiddle demonstrating the bare minimum of the problem code. You won't really be able to see the lag on a desktop/laptop. My main problem is with mobile devices... If you actually take the time to view the fiddle on a mobile device, zoom in on the output pane, because it's kind of hard to tell it's lagging, but it definitely lags. https://jsfiddle.net/oL1fh65a/1/
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
This is a longer story I'm trying to cut short. Generally I'm playing around with a website menu that is supposed to partly slide under a partly transparent background gif image, and fully reveal itself only upon mouseover. To do that, I'm using the z-index parameter on both the background image and the menu. But since you can't use z-index on a body background image, I'm using a "regular" image, which I'm setting to 100% width and height - AND for the z-index paramenter to work, I need to specify "position" as well. It seems though that with that combo, I'm basically creating an invisible shield that'll make all links untouchable. I've cooked it down to the following lines:
<style>
#style {
position: absolute;
width:100%;
height:100%;
}
</style>
<div id="style"></div>
test
If you try this, you will see that the "test" link is unclickable (cross-browser).
Does anyone have an idea how I can solve this? Thanks!
<style>
#style {
background-color:#ccc;
position: absolute;
width:100%;
height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>
<div id="style"></div>
test
<style>
#style {
position: absolute;
width:100%;
height:100%;
z-index: -1;
}
.test {
z-index: 99;
}
</style>
<div id="style"></div>
test
Will work too, along with campino2k's answer.
Thanks for the replies, which pointed me in the right direction. It seems like the div does indeed create an invisible shield, and that shield is (more or less) inpenetrable when it comes to underlying links.
Click through a DIV to underlying elements
#Logan: I'm afraid that approach doesn't work for me. You're suggesting to simply raise the link above the div shield - that, however, defeats the original purpose I've described above (the one with the background image and the menu sliding underneath it).
#campino: I thought this was it, but adding a z-index definition to "style" broke it again. The fact that you colored the entire div field helped me understand what you obvously already knew: As long as the div is over the link, it's not clickable, period.
So all in all, I'm concluding that my approach doesn't work. For the actual project I'll probably cut up my asymmetric background image into several pieces, so the div doesn't cover the entire screen, and is only where I absolutely need it.
I think setting a z-index, though it might work doesn't really address the problem but a kind of a hack that achieves what you want.
The root cause of unclickable links is mostly an element that is improperly positioned through floating, display, or position property. This element is displayed in the foreground of your link creating a shield that prevents you from clicking the link.
The solution to this I found is to use javascript/jquery to console.log or alert the id or class of the element in the foreground when you click.
$('*').click(function (){
alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id'));
});
above will alert the element in the foreground. Now that you know the cause look at its style.
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.