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.
Related
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've built a jsfiddle. It is my first, so I am not certain that it is correct but all the code from my small example is there. Nothing cahnges when I run it. On my machine, the click handler is called but I see no change to the position of the viewport. That is the problem, I would like the image to move to the top of the viewport.
Hope this is a better question.
My original question is below:
I have a relatively positioned div that contains some absolute imgs. I want this arrangement to appear at the top of the viewport. I believe that if I can set the top of the div (position:relative) to the top to the viewport, the images it contains will come along.
Problem is, I can't figure out how to do this. The relative div is at the bottom of the page, and when I click on it, I want the document to reposition so it is displayed at the top with its content. I've tried scrollTop with large positive and negative numbers and I can't get the div to reposition.
I've been trying things like:
$(#view2").scrollTop(xxx);
With no luck.
My html looks like the following. Everything but #view2 is absolute, #view2 is relative. The content of #view1 is set dynamically.
<div id="view2">
<img>
<img>
<div id="view1" ></div>
<img>
<img>
</div>
Since you didn't provide some further it's pretty difficult to analyse your problem:
but scrollTop is used like this:
$('html, body').animate({
scrollTop: elementToScrollTo.offset().top
},200);
the parent element of your position absolute container must have position relative.
As i said, it's difficult to answer without proper code snippets of yours
If you just want your container element to sit at the top of your page then use:
#view2 {
position:fixed;
top:0;
left:0;
width:100%;
box-sizing:border-box;
padding:10px;
}
Just an example - obviously if you didn't need padding etc just remove them, the above is just a typical use for a fixed header.
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
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