I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute
Related
For my site, I need an area to sit along the edge of the viewport to reveal a menu when dragged. The div that defines that area cannot be position:fixed, and I am trying to accomplish this without javascript.
Here's my basic html:
<div id="content" class="snap-content">
<div id="toolbar">
<h1>Default</h1>
</div>
// Content
<div id="do-drag"></div>
</div>
That #do-drag div I need to sit along the left edge of the viewport, running top to bottom, about 25px wide, regardless of how much content there is. It cannot be position:fixed. It needs to always be there. And the drag div must sit inside the content div.
Now, I see two possibilities:
A 100% tall absolute div that doesn't actually scroll, or...
A div that scrolls, but that is never shorter than 100% of the viewport
I have tried placing the #do-drag inside of another div and mixing up absolute and relative positioning. I have tried extending the drag div to 800% and using overflow settings to clip it. These, and a couple other attempts, have failed.
I'm not sure if that title made sense but I'll try to explain to the best of my ability.
I want to add a div basically on top of an image, which is simple. I wrap the image around a div and then give things like top:, left:, from that.
Yet this div that the image is inside of exceeds the border of the actual image and goes all the way out to the parent div. How do I make it so that the border of the div just wraps around the actual image inside the div.
The black square is an image. But the div with the class of image, does not have a border that wraps around the image.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
Add display: inline-block to the .image div:
display: inline-block;
http://jsfiddle.net/wwRhB/4/
I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.
I have a div inside another div which has a fixed position at the bottom of the page. I need the outer div to scroll all the way past the inner div allowing all the content to be shown.
.outer{position:relative; }
.inner{position:fixed; bottom:0; z-index:999;}
<div class="outer">
<p>Lots of content......</p>
<div class="inner">
<p>More content fixed in a box at the bottom of the page.....</p>
</div>
<div>
Maybe this well help describe it better- http://jsfiddle.net/winchendonsprings/dDgjQ/2/
What I need in this example is the yellow text to scroll all the way to the top of the red box.
You just need to add some padding to the bottom of the div.outer and adjust as necessary for the size of the red div.
In this instance, I did padding-bottom:100px;
http://jsfiddle.net/jasongennaro/dDgjQ/3/
EDIT
To respond to your comment re div.inner not appearing on each page, you could do the following with jQuery:
$('.inner').parent().css('paddingBottom','100px');
Here it is applied:
http://jsfiddle.net/jasongennaro/dDgjQ/4/
And here it is with the div.inner removed:
http://jsfiddle.net/jasongennaro/dDgjQ/5/
EDIT 2
You could also create another class and only add it to that page.
http://jsfiddle.net/jasongennaro/dDgjQ/6/
I have a div with style position:fixed and i want it to scroll down the page, but i don't want the div to spill into the page footer. How could i accomplish this?
thanks in advance,
shawn
Try this.
CSS
body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/
.mainBody {height:90%;overflow:auto;}
HTML
<div style="border:1px solid black;">TOP</div>
<div class="mainBody">
<div style="height:800px;"></div> <!-- To for scroll -->
HERE IS Main Body
</div>
This will transfer the scroll bars from the window, to the div that is showing your content.
The TOP div will stay put where ever you want it, so you can position it aboslutely or leave it as is, and have it never collide with your footer, which you can put in your main body div.
I've had the same problem in the past and used a Javascript onscroll event to detect if the position:fixed element is going to collide with the footer. If it is, I change it to position:absolute with a top attribute just above overlapping the footer.
Then when they start scrolling back up the page and it's no longer overlapping the footer, I change it back to position:fixed.
Also, if you're planning to have this element scroll in IE6, I recommend CSS expressions for position:fixed emulation.