Sadly, SKROLLR doesn't support position: fixed; in it's skrollr-body element. skrollr-body is the div that moves to fake scroll on mobile. The problem is that I want to do animation on a object with position: fixed;, So I thought about adding it:
<div data-0="top: 0;" data-1000000="top: 1000000px;"> [...] </div>
This will keep the div at the top of the page. The problem is that SKROLLR uses animation. I know I can add smoothScrolling=false, but I do want animation, on every change except top's changes. How can I do it?
I found the answer! All you need to do is to set data-smooth-scrolling to on or off.
In my example, what I should do is this:
<div data-0="top: 0;" data-1000000="top: 1000000px;" data-smooth-scrolling="off"> [...] </div>
Related
I wanted to use this 3D clouds in my Bootstrap Header, but after using the code, I can't scroll anymore and also the buttons & text get covered with the animation if the mouse is on certain positions on the screen.
I have then deactivated all functions, which relate to the mouse, but it still doesn't work properly.
Here is a jsfiddle of it.
If you delete the html comment and use the following tags, then you are using the JS Animation and the complete highlight box is hidden by it.
<div id="viewport" >
<div id="world" ></div>
</div>
Is there a possibility to put it into a container or a row?
To fix the scroll problem, comment / delete this:
body {
...
overflow: hidden;
}
To fix the overlay problem, assign a z-index to your layer:
#viewport {
...
z-index: -100;
}
This should fix your problem.
I have a div that I want to always move such that it is stuck to the top of the page. Let's just say that I cannot use position: fixed;
I originally used $(document).scroll(function(){}) to move the div with the scrolling. But this makes the site extremely slow after 10 seconds of scrolling.
My current solution is to use setTimeOut() to prevent multiple calls. However, this causes a delay, and the div only sticks to the top of the page once I have stopped scrolling.
Is there a way to get the continuous smooth moving of the div without killing my speed?
EDIT:
I have the following code:
<div id="outerDiv">
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
</div>
So .outerDiv has a fixed width, and there are many .div, such that outerDiv has overflow-x: scroll. If I use position: fixed on .fixed, then they will not show up properly. I want each .div to be like a column, with the heading of each column to move down
How about using two different divs. One containing the fixed content, and one containing the content which should be scrollable?
So you don't scroll within the document itself but only within the second div?
Or... use position:fixed
I'm interested in adding squeezeback to the videos in my webpages.
Is there an easy way to do this without implementing it inside the video itself?
Put the video inside a div with an id.
Use jquery to change the size of the video element (probably with %s).
Add an element to the div after the video element (.appendElement())
Fill it with another thing.
<video> is an HTML element just like any other, so you could use CSS and javascript to resize it, place other elements around and over it, and so on.
I'd probably put the video inside a relatively positioned div. At the appropriate moment, use a bit of script to scale the video accordingly, then introduce more elements absolutely positioned above/below/beside it. The world is your oyster, give it a go then report back!
Thinking about it, Mozilla's Popcorn.js might be helpful with this sort of thing.
That would be overlapping absolute divs:
<div id="container">
<div id="background">contents here</div>
<div id="videoWrapper">
<video></video>
</div>
</div>
#container{
position:relative;
}
#container > *{
position:absolute; /*to allow stacking*/
top: 0; /*stretch to container*/
bottom:0;
left: 0;
right: 0
}
Then, to scale the video, take a look at this post regarding "scaling" an element and preserve the aspect ratio.
I have a div whose position has been fixed. Everything is fine till the window is re-sized. On re-size, when we scroll to the rightmost part of the webpage, the fixed div still remains at the left-most end of screen. I wish it to scroll left along with the window, but not scroll down along with the window.
If I am unclear in expressing my doubt. You can have a live demo here.
Search for any product say Apple Ipod Touch there. Once the results are displayed , resize window and scroll to rightmost part .
Can anyone suggest some CSS or Javascript to resolve the same.
Thanks !
I would restructure your layout and remove position fixed. For example something like this. Obviously this isn't exactly like your code. But the concept is the same. If you have your div with the control inside of the same container as the results and the history, it should then move with it.
#wrapper {
width:960px;
margin:0 auto 0 auto;
}
#left-col,
#right-col {
width:100px;
float:left;
}
#mid-col {
width:710px;
float:left;
}
<!-- holds your column containers -->
<div id="wrapper">
<!-- your control -->
<div id="left-col">
</div>
<!-- your search results -->
<div id="mid-col">
</div>
<!-- your history -->
<div id="right-col">
</div>
</div>
Either use CSS Media Queries or Javascript. A quick way is on Jquery $(window).resize method.
I think you just need to remove
position: fixed from #completeSlider
at least that worked for me on chrome.
EDIT:
then I'd say you need to use JQuery to handle this. You can't have both a fixed positioning and still relative to other elements. Still remove position: fixed as mentioned above and add some JQuery magic like follows:
$(window).scroll(function() {
$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0});
});
Seems like the standard $ for jQuery is reserved for some other function on your page... try this:
jQuery(window).scroll(function() {
jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0});
});
I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?
That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.
In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.
In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.
And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).
To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:
Firebug addon for Firefox
It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.
You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.
As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.
This can be done in CSS using the "position:absolute;" clause
Here is an example template:
http://www.demusdesign.com/bipolar/index.html
From http://www.demusdesign.com/
The browser is scrolling the page, its just that part of it is fixed in position.
This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.
They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.
Try this for scrolling a particular part of web page......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>
For a div, you can add in the cSS
overflow: auto
For example,
<div style="overflow:auto; height: 500px">Some really long text</div>
Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.
For example:
<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.</div>
with css file
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
To put scroll bars on an element such as a div:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.