I have the following HTML:
<div class="listing ref_1">
...
<div><img src="toggleON.png" /></div>
...
</div>
<div class="listing ref_2">
...
<div><img src="toggleON.png" /></div>
...
</div>
<div class="listing ref_3">
...
<div><img src="toggleON.png" /></div>
...
</div>
What I want to do is programmatically change the toggleON.png image to toggleOFF.png.
I'm trying to use the following code to do so but it's not working:
$('.ref_2').src("toggleOFF.png");
Anyone know what I'm doing wrong because the code above doesn't work.
Also, is there a better way to handle this?
'.ref_2' points to the div, you'll have to get to the image within the div
$('.ref_2 img').attr("src","toggleOFF.png");
would probably do it for you.
You need to select the img tag in side .ref_2
$('.ref_2 img').attr("src","toggleOFF.png");
It might be better though to put the image definition in css and swap classes.
<style>
.toggleOn div{
background: url('toggleOn.png') no-repeat;
}
.toggleOff div{
background: url('toggleOff.png') no-repeat;
}
</script>
<div class="listing ref_1 toggleOn">
...
<div></div>
...
</div>
<div class="listing ref_2 toggleOn">
...
<div></div>
...
</div>
<div class="listing ref_3 toggleOn">
...
<div></div>
...
</div>
<script>
$('.ref_2').removeClass('toggleOn').addClass('toggleOff');
</script>
This makes it really easy to change the image and lets you use the class as a state toggle if you need to check on it later.
Also it looks like you are using ref_# as a unique identifier, if so then it would be better to make it the ID of the div, will speed up jQuery's ability to find the element.
What I like to do is put both images in my main document in a hidden div, like:
<div style="position: absolute; visibility: hidden">
<img id="toggleON" src="/whatever/toggleON.png" .../>
<img id="toggleOFF" src="/whatever/toggleOff.png" .../>
</div>
That way they're both in the browser's cache. Then, to toggle an image from one to the other, you can do something like:
$(".whatever img").replaceWith($("#toggleON").clone());
Another solution is to put both image on absolute position, with the default one is set to the front (Using z-index property).
On mouse hover, you can hide the one in the front and the toggled-off image will showed up. The advantage of using this method is you could actually use animation technique to make it even smoother. It's what I did here. (It would be better if you have an additional wrapper div and set the mouse hover event on it)
Related
more you ask, more knowledge you get. Right ? I don't know this question is basic or not but a little make me think hard.
Look pic 1 what do i have.
pic 1: http://imgur.com/YFpfo69
When i upload an image, it will show up to the container called <img id="image"/> and the image is horizontally draggable. My problem is, how do i hide the rest of unused image ? When i dragging the image, the rest will not showing up
To fix this you can place overflow: hidden in the CSS of the parent element of the #image element.
Add the style overflow: hidden; to the parent element, like this:
<div style="overflow: hidden;">
<img src="img.png" id="image" />
</div>
I need many images to change when mouse hover on a image.Me try one but its change only one image how can i change many images on hover on image.My try fiddle
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
If I correctly understand your problem, you want an image slider when you hover on the container.
The images are in inline-block are they are set to white-space: nowrap. So, that they don't wrap. container is set to overflow: hidden, it hides the extra images.
The images are shown by animating the margin-left of the inner div. So, it is like the inner container is moving but the container stays still.
You can modify it however you like, vertical animation, using css transitions and stuff.
I cannot post the code here because of the shortened url of the images.
You can test and modify it here, it's a pen.
tIt seems that I did as it is in example here but my background moving faster than text. What did I do wrong?
My HTML:
<div id="loader-bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;"></div>
<div id="skrollr-body">
Content text...
</div>
The demo uses background-attachment:fixed to get full control of the movement.
Maybe you forgot to set the class attribute on your loader-bg div
class="skrollable skrollable-between"
I'm making a practice website and I'm trying to add a hover effect to an image, the image being arrows to click back or forward. I assume something is wrong with the code, within its structure, or perhaps I would need to use javascript to achieve a rollover effect.
I made a fiddle to show the current work: http://jsfiddle.net/Z7VTy/1/
...I'm new to everything.
<body>
<div id="slider_wrapper">
<div id="slider_container">
<div class="controllers" id="previous"></div>
<div id="slider">
<img src="Images/slide_two.png" width="960" height="425" />
<img src="Images/slide_one.png" width="960" height="425" />
<img src="Images/slide_three.png" width="960" height="425" />
</div>
<div class="controllers" id="next"></div>
</div>
</div>
</body
not sure I understand your issue
demo
#previous:hover {
background-image: url(left_on.png);
}
would change the image
You can change slider_wrapper container from div to a tag and use hover state for the slider_wrapper. change display mode for #previous and #next to none, and add following style
#slider_wrapper:hover #previous, #slider_wrapper:hover #next{
display:block;
}
see an example here http://jsfiddle.net/Z7VTy/3/
I have several divs like:
<section class="card-container">
<div class="card over" data-direction="right" gal="gal1">
<div class="front">
<h2>yellow flowers</h2>
<h4>(Right)</h4>
</div>
<div class="back">
<img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249398_1693_1413.jpg"
width="100%;" height="100%;" alt="" />
</div>
</div>
</section>
Also Ihave a jquery that depending on div, it searches a efect "right,left,bottom,top" to apply to div, then searches the type of gal, and changes the image it has as a value for other image stored in corresponding array
So, I think to improve the code, I would make a dictionary with the values for each div, instead of applying
img = $(this).find('img');
every time the user is hovering...
Is there a way to improve the code, also i was wondering is it good to wait till all images are loaded or something? here is the fiddle
You can load the images on loading by put the images in a div and set the prop of the div in css to: position: absolute; left: -5000px;
HTML:
<div id="allimages"><img 1><img 2> etc.. </div>
Css:
#allimages {
postion: absolute;
left: -5000px;
}
And there alot other way to:
you can catch all img with Jquery and put them in the div when dom is ready