I am trying to understand the Skrollr javascript script library, and am having difficulty understanding data values, and how they differ between absolute and relative.
I have a background image on a div (about 2x taller than the div) that I would like to scroll down as I scroll down the page. Here is what I have so far.
<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >
What are data-top and data-bottom? As near as I can figure from the documentation, data-top is the top of the div #jumbotron. What I want is that when #jumbotron is at the top of the viewport, the background position is right bottom. Then, as I scroll and the the bottom of #jumbotron reaches the top of the viewport, I want the background image to be right top. This isn't happening. What am i doing wrong?
The skrollr library will transition the CSS on an element based on its data elements. For example, if you had an element as follows:
<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>
At scroll position 0 (user has not scrolled), the opacity of the element would be 1. Once the user has scrolled 100px down the page, the element would have faded to opacity 0. You can add as many data increments as you'd like.
Regarding data-top, the readme on the skrollr repo says the following:
data-top: When the element's top is aligned with the top of the
viewport
I don't however see anything about data-bottom in the docs. I only see:
data-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
So you might try:
<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >
Just consider that the first data is your starting point, and the final data is your finishing point with as many increments along the way as you need.
Skrollr.js needs a data-attribute with two values.
The first describes the alignment to the viewport.
The second the edge (or center) of the element.
It can be a bit confusing, that both are named in the same manner (top, center or bottom).
You can further position the background with percentage values.
This way skrollr can transition between the values.
See this example.
https://jsfiddle.net/4frjantk/
<div class='section'
data-bottom-top="background-position: 50% 100%"
data-top-bottom="background-position: 50% 0%" >
</div>
PS:
The example contains a workaround for containers with 100% height as described here https://github.com/Prinzhorn/skrollr/issues/347
Related
I'm having a problem trying to make my sidebar stick in the correct height and making the desired effect, this is my code:
https://jsfiddle.net/oavgLrf9/
I want my sidebar to add a fixed class when the second module reaches top, the problem is that both of the modules use height auto so their height change depending of the monitor.
<div class="sidebar">
<div class="mod-1"></div>
<div class="mod-2"></div>
</div>
Also I want that when the user scrolls top the side bar goes top too, and when it reaches bottom changes to absolute, like this example:
http://jsfiddle.net/gmolop/y3tdL9wd/
I tried using the sticky-kit plug in it does almost exactly what I want, would be the example 4, but it doesn't stick in the height I need because of these changing values.
you can use HcSticky to solve your problem.
http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/
see examples:
http://someweblog.com/demo/hcsticky/
I have checked other posts but none mentioned about a precise location to overlay.
Consider that I have an image, for eg. a traffic light. I need to overlay (not sure if this is the correct term or not) a div on top of the precise location of, the green lamp, for example. This is so that I can animate the div via jQuery to change the colour of the div in order to have an effect that the image is being animated.
The problem now is how to be precise in this, so that the location of the div completely matches that part of the image? Does it mean having to measure the pixels before setting the top and left of the divs? Or is there a smarter way?
I have considered other options such as using canvas (or svg, or silverlight) to redraw the whole thing instead of embedding the image (i.e. redraw a whole new traffic light picture). However, for this I believe it will be way more complicated than what I asked. Correct me if I am wrong here.
Please advise.
One way is to put the image inside a div which is either positioned relative if you want it to be inline with other elements or positioned absolute if you want to set its position on the page. Then position absolutely the overlapping div inside the same div as the image.
for example
Styles
#holder {
position:relative;
}
#over {
position:absolute;
width:40px;
height:40px;
left:20px;
top:30px;
}
Body
<div id='holder'>
<img src='IMAGE SOURCE'>
<div id='over'></div>
</div>
You will need to adjust the width, height, left and top of the div with id='over' as necessary.
You could replace the div with id='over' with an image use position absolute on this image and set left and top as needed.
How do I move background images with the window upon resize? I am using a sprite, but if it is too difficult to do it that way that I can change the background image to single images. I have my code below:
html:
<nav class="topNav">
<ulstyle="list-style-type:none">
<li id="daily_sale" style="display:inline"></li>
<li id="my_account" style="display:inline"></li>
<li id="support" style="display:inline"></li>
<li id="shopping_cart" style="display:inline"></li>
</ulstyle="list-style-type:none"></nav>
I also included 2 images. The first one is what is happening at about 1200px. The second is what it looks like at 1000px. What I want to do is slide the 'account, support, shopping cart' images over so that the space between them does not change. The 'sale' image should not move. Do I need javascript or can I do this with CSS?
I think the key question is the size of <a> is zero. so you should add a div into the <a> tag.
please refer to my amendment. by the way, the you should add ul li{float:left} to let the li stand Horizontally
http://jsfiddle.net/Uh5Uh/3/
Try this CSS:
#my_account, #support, #shopping_cart{
position:fixed;
}
In your jsFiddle, I'm getting the entire image stretching horizontally as I change window width. This isn't so much to do with your spacing increasing, it's occurring because your items are all positioned absolutely (so each item's left edge will always be that distance away from each other) and the width of the item itself is widening as you change page width.
Which stops once the window width is less than 1335px.
In short: your media query is mucking with your icons. It's stretching the images (because you used % for background-size, it is sizing the background to the width of the item, which is also a %, so is also getting wider.)
http://jsfiddle.net/Uh5Uh/2/
#daily_sale a{
background: url('http://phantomsupply.com/v/vspfiles/templates/223/images/homepage/daily sale button black site.png');
background-repeat:no-repeat;
}
Basically, removing the background-size (so the image doesn't stretch) don't muck with the min- and max-widths, exchange the left properties on those three items for a right property, set the distances, and it will be fine.
You just have to set a min-width on body so that the items now don't overlap each other (since they're still positioned absolutely.) Alternatively, achieve it with floats instead of absolutely positioned elements.
I was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/
Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/
I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?
I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image...
So is there any way to make the divs does not affect each other but also place them inside the container div?
Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot
Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.
<div style="position:relative" id="parentDiv">
<div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
<div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>
hope that helps
I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.
The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html
I've tried encasing my code in a div like this:
<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">
But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.
The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.
How can I do this using javascript?
is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.
If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.