OK, so here it the thing...
I cannot get overflow:hidden to work.
I need to apply it to the body so that the .content div is not visible before the animation ends...
Here is the jsFiddle, you should see what the problem is right away:
http://jsfiddle.net/bzbNg/
EDIT: OK so it was pointed out to me that I was not specific enough:
I want the .content div to slide out with the body but not change it's height, so as if it was just pulled out of a pocket, if you know what i mean...
I did not quite understand, why u want to use overflow: hidden. Since you want the .content to be shown when animation ends, why dont you hide it in css and .fadeIn() in .animate() callback? Is that what you want to achieve? Example:
http://jsfiddle.net/bzbNg/2/
Related
demo http://www.bootply.com/pK8YqTHQXr
I want to add hover to the block to make appear the 3 Images but now I seem stuck at the overflow thing. The lower part of the box didn't wrap within the main block. Why?
I tried height 100% it become even worse.
try something like this
.box{
height:auto;
}
LINK TO CHECK http://www.bootply.com/ukAgZY9WBu
I have a span element which I want to be present at teh right corner of the page. For that I have used margin-right:10px. But it shows no effect. Where as margin-left works. Why is this? And how to make the span element appear at the right side of the page?
Try this (jsFiddle)
.right-corner {
float:right;
}
or this (jsFiddle)
.right-corner {
position:absolute:
top:0;
right:0;
}
The reason that margin-right doesn't work is because it's just giving your element a right margin not repositioning it. To help you understand, if you put something after your element with margin-right there will be a gap between them which is the margin.
margin-left does this as well, it's just doing it on the left side and since elements are places from left-to-right there is the gap on the left side which looks like it just shifted to the right.
Have a look at this little example to try to understand. You should read up on the CSS box model if you don't understand.
Margin-right is the right margin.
If you want to align it to the right you can use right:10px that is if position is absolute.
otherwise you can use float:right
You can also set the display:inline-block to the span.
You can learn more about margins
http://phrogz.net/css/htmlvsbody.html
http://www.htmldog.com/guides/cssbeginner/margins/
I think what you're looking for is float:right;
In order to complete #Tyriar answer, here's a fiddle also showing you the use of text-align: right. And why a margin can exist but have no observable effect. Also how to use the clear property after a floating element and/or a clearfix on containers of floating elements (both are not necessary here)
http://jsfiddle.net/rLQbk/
One more advice: do NOT use absolute positioning if you're not really (really) sure of what you want to achieve and how; most of the time it's not the best solution to a CSS problem. Completely out of the flow, its content will display over other content without any care...
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.
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.
I have been using a lot of position:relative; in my design, I just find it the easiest way to get everything where I need them to be.
However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.
This leaves a lot of empty space at the bottom, and I thought that adding height: 1000px; would limit the scrolling a bit, but this method doesn't seem to work.
I've even tried adding height: 1000px; to the wrapper and it's still not working.
How can I limit vertical scrolling, to the number of pixels I choose?
Thanks so much in advance.
Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?
If so you should look into floats.
Here are some tutorials.
Floatutorial
Learn CSS Positioning in Ten Steps
You can specify both the height and the overflow:
.someClass
{
height:1000px;
overflow:scroll;
}
The most common values for overflow are scroll, auto, and hidden.
To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.
If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.