I am trying to integrate a simple slider within my website and found this example on jsfiddle
I do want to place the slider "relative" within my website, but if I change the css to
position: relative; the slider does not work properly anymore, as it now displays the fading images above one another like this
Why is this happening and how can I position the slider-div "relative" within my website?
I tried wrapping it with another div-layer but without success.
Try a wrapper div as you say.
You should put your slider inside another div and then position this wrapper div relative.
HTML:
<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
<img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
<img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
<img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
<img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>
CSS:
#wrap{
position:relative;
top:100px;
left:100px;
}
DEMO
UPDATE
To float within the website add a height to the #wrap
#wrap{
position:relative;
top:0px;
left:100px;
height:250px;
}
DEMO2
You don't need a wrapper. You are setting position: relative on the wrong element. Set it on #banner_area, not #banner_area img. DEMO
Related
I am setting up a webpage so that it has multiple images on it, and each image has a 50% opacity mask over it. When the mask is moused over, it is supposed to disappear, and then when the mouse leaves the image (below the mask), the mask is supposed to reappear. This worked well when I tested it for one img inside my div, but when I added a second img, the disappear function affected the image with no id, which is confusing me greatly.
HTML:
<div id="images">
<img id="testimage1" src="url" onmouseover="appear1()"/>
<img src="url"/>
</div>
<div id="masks">
<img id="testmask1" src="url" onmouseover="disappear1()"/>
<img src="url"/> <!-- This is the one that disappears -->
</div>
CSS:
#images{
position:absolute;
top:0px;
}
#masks{
position:absolute;
top:0px;
}
JS:
function disappear1(){
//Makes the first test mask disappear. This is a test function.
document.getElementById("testmask1").style.display = 'none';
}
function appear1(){
//Makes the first test mask appear. This is a test function.
document.getElementById("testmask1").style.display = 'block';
}
EDIT: Roko asked why I didn't do this in pure CSS. Aside from the fact that I didn't think about how to configure the images correctly, when I eventually finish this page, I will want to have masks 'linked', where I mouse over one mask and both disappear. I'm not sure that's possible in pure CSS.
EDIT #2: As it turns out, the function was working as written. It was just that because I had a single div for each row of images, when the first image in the row appeared, everything else slid over, thus poor coding on my part.
Don't duplicate your ID. ID should be unique-per-page.
Also, why not do it in pure CSS? (no JS required)
jsBin demo
<div class="imgBox">
<img src="cat.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="bear.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="elephant.jpg">
<img src="mask.png">
</div>
CSS:
.imgBox{
position:relative;
/*width, height etc... */
}
.imgBox img{
position:absolute;
top: 0;
transition: opacity 0.5s; /* yey! */
}
.imgBox:hover img + img{ /* on hover target the second image */
opacity: 0;
}
I'm making a Chrome extension which stops all requests of images and will allow you to click on the broken image icon in order to load the image without the blocking. This is in order to save bandwidth.
I have setup the request blocking but I'm not sure how to go about the next step.
The next step would be adding a layer on top of that broken image icon which would intercept any clicks on that image. The reason I do this is because often an image will be anchored to another link so clicking on it would do something else to what is desired.
I thought of perhaps using the z-index CSS rule but I'm not entirely sure of how this works and also I'm not sure if this would be the best way to go about this.
Any suggestions? Thanks! :)
Add this css to your html
<style type="text/css">
//container div
.container{
width:300px;
position:relative;
}
//image css property
.imageHolder{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:10px;
}
// overlay css property
.imageOverlay{
position: absolute;
z-index:11px;
top:0px;
left:0px;
width:100%; height:100%;
text-align:center;
}
</style>
This is your html code will be
<div class="container">
<img src="myimage.png" class="imageHolder" />
<div class="imageOverlay"> Load </div>
</div>
Hope it helps... Thanks.
you'll have to do something like:
create a base div with css relative position
create your img tag with css absolute position, left:0px, top:0px, width:100%, height probably 50 and z-index probably 10.
create a top layer div with css position:absolute, z-index higher than that of the img, top:0px, left:0px, width: 100px and height probably 50.
The Code would look like
<div style="position:relative; width:50px;">
<img src="image.ext" border="0" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:10px;" />
<div style="position: absolute; z-index:11px; top:0px; left:0px; width:50px; height:50px; line-height:50px; text-align:center;"> Load </div>
</div>
I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/
Let's say I have something like below:
<div id="outer">
<img src="my_first_image.gif" alt="My first image" />
<div id="inner_div">Some text here...</div> <img src="my_second_image.gif" alt="My second image" />
</div>
My inner_div contains some texts. How do I make it so that I not only display my first image, my inner div and my second image next to one another and also make sure that the total width of my outer div expand to take the full width of the browser window (with my elements still displayed one next to each other no matter how long the text in my inner div becomes). Is this possible with just straight css or am I gonna need some jQuery to do that?
NOTE : The elements must also be vertically centered with regards to each other and within the outer div
Thank you
Actually, for the web standard, you shouldn't place <div> next to <img> or <img> next to <div>.
The solution to your question is to wrap all contents within #outer, say each item wrapped up in a tag, then applied some CSS to them (like float: left).
For example,
<div id="outer">
<div class="inner"><img src=".."/></div>
<div class="inner"><img src=".."/></div>
<div class="inner">some very long text</div>
</div>
Which
<style type="text/css">
.inner {
float: left;
}
</style>
If you also want it to vertically centered to outer, your css would be like this.
<style type="text/css">
#outer {
display: table;
}
.inner {
display: table-cell;
vertical-align: middle;
}
</style>
There are more approach to this, but I think this is the easiest one.
Hope this helps.
I think this is what you want, if I understand you correctly?
<style>
#outer #inner_div{float:left;}
#outer img{clear:left;}
</style>
Try this
CSS
#outer{
width:100%;
}
#outer div, #outer img{
width:33%;
display:inline-block;
vertical-align:middle;
text-align:center;
}
HTML
<div id="outer">
<img src="my_first_image.gif" alt="My first image" />
<div id="inner_div">Some text here...</div>
<img src="my_second_image.gif" alt="My second image" />
</div>
Need some cross-old-browser work for inline-block, but you get the idea.
Presto http://jsfiddle.net/EPpAn/
I expect this is what you want: http://jsfiddle.net/linmic/CCut8/
Cheers
Its pretty simple to see what I mean if you look at the image, which I also need to shrink back if you click it again, it needs to be animated as well:
The image link http://www.keironlowecreative.x10hosting.com/Help.png
jquery
$(document).ready(function(){
$("#what > img").click(function () {
$("img").toggle("slow");
});
});
html
<div id="what">
<img src="small_img" />
<img src="big_img" style="display: none" />
</div>
toggle
You could use one of the horizontal accordion plugins for this.
Excuse the inline styles... Pixels aren't exact. Use the same image twice, one div on top of the other:
<div id="wrapper" style="position:relative; height:20px;">
<div id="top" style="background:url(...) top left no-repeat; position:absolute; height: 20px; width:18px; top:0; left:0; z-index:2;"></div>
<div id="under" style="background:url(...) top right no-repeat; position:absolute; height:20px; width:20px; top:0; left:2px; z-index:1;"></div>
</div>
So the top div is showing the plus and the left corner. The bottom div is showing the right corner - over two pixels so it's not showing under the corners of the top element. If the image is opaque, this doesn't matter...
Animate the width of the under div to get the effect. No fading, only one image. Should be small and quick to animate.