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.
Related
I have a slider in a <div>. The slider takes an array of slides and each element has a text where there is no word-limit on the text. When I slide left or right, and the different texts are of different lengths, the height of the <div> varies, making it look ugly. I tried using a min-height or a fixed height, but those don't solve the problem, since there will either be too much empty space underneath the text, or, a text once in a while will be longer than the min-height and the size of the <div> will vary again.
What could I do now? Is there a way for me to find out what maximum height the div should have (based on what's the longest text in my array of slides) and then give my div this height? This way there would still be some empty space with the shorter texts, but at least it wouldn't be arbitrary.
Does this sound like an ok solution? I am wondering how I can measure this beforehand though? So I'm thankful for any clues!
If I understand your situation, you have a <div> element that wraps multiple "slide elements" where;
each slide element varies in height based on their text content and,
you'd like the wraping div to natually expand to fit around all slides regardless of the arbitrary height of their content
One solution to this would be to use flex-box which would allow your slides to be arranged horizontally within the wrapper div, while also ensuring that the wrapper naturally expands to fit around it's children (of arbitrary height).
To illustrate this approach, consider the following example where flex box is used to ensure the pink div correctly wraps green slides (of differing height):
#wrapper {
display:flex;
flex-direction:row;
overflow-x:scroll;
background:pink;
}
#wrapper > div {
min-width:30rem;
margin:1rem;
background:green;
}
<div id="wrapper">
<div><p>Short</p></div>
<div><p>Tallest<br>Tallest<br>Tallest<br>Tallest<br>Tallest</p></div>
<div><p>Tall<br>Tall<br>Tall</p></div>
</div>
You could try to use flex display to achieve this. Not sure if it will work with your slider tho, since tho have not posted your code.
You can find an example here
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
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.
Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.
Have you tried simply using overflow-x: visible; or hidden
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.