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.
Related
I have a construct like the following:
<div class="content">
<div class="menu">--- mymenu ---</div>
<div class="edit">--- myeditor ---</div>
</div>
The menu and edit classes are display:inline so they will sit side by side.
I give the user the option to 'scale' the editor (using css scale) but when I do, the content div remains the same height as the un-scaled edit div. The edit div has set width and height, bit is then modified with something like:
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
which works fine for scaling the edit div, but the content div won't scale to accommodate it. I can make the content div overflow:visible and that will show the contents of edit, but overwrites anything below it on the page.
How can I get my content div to scale when I scale the edit div?
I've messed around with a few responsive designs, and I'm curious about what CSS properties determine how float elements are positioned vertically when the overall resolution is reduced and they are scrunched together.
For example, if I have a div block with float:left and a div block with float:right, which of those end up on top when the max width of the container is reduced to the point where they can't fit inline anymore.
If you look at my fiddle, the left side element ends up on top when you reduce the width to the point where they both can't fit. Is there a property that makes it so? Does it do it in order? Is there anything I can add to the right div block that would make it above the left element when width is reduced?
http://jsfiddle.net/JXXLK/
Many thanks SO
The simplest solution to put your right div on top when the window is rescaled is to define it first in your html code:
<div class="container">
<div class="rightside">
RIDE SIDE HOMBRE!
</div>
<div class="leftside">
LEFT SIDE DUDE!
</div>
</div>
I'm not sure how this can be controlled using purely css properties.
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
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.
I have been trying to add a scroller to my context section that will only allow the box to scroll horizontally within the visible of the viewer's screen, not vertical.
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
Also, here is a link to a website that has the exact scroll effect I am trying to recreate: http://patrickhoelck.com/home.html
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
'overflow: auto' will add the scroll bar when necessary.
The trick is to make sure the content inside the scrollable element exceeds the normal width of the element, instead of simply reflowing onto a new row in which case it'll never trigger a scroll bar. One way to do this is by using 'white-space: nowrap'.
You probably want to take a look at overflow-x: scroll, which, along with setting a fixed size on the parent, will force a horizontal scrollbar if the content is too wide.
Some example html:
<div style="width: 50px; overflow-x: scroll">
<p>Hello world!</p>
<p>Here is a div with a horizontal scrollbar!</p>
</div>