I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
Related
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
So I have a little javascript code that swaps my main image on hover of the thumbnails that works perfectly well! is their a way to return to main on hover out I am sure there is a little if statement but i cannot figure it out!
<div class="product"><img id="main" src="mainImage.jpg" width="550"/></div>
<div class="products">
<img src="img.jpg" width="200"/>
<img src="img1.jpg" width="200"/>
<img src="img2.jpg" width="200"/>
</div>
and the javascript is
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.products img').mouseover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var def_url = $('#main').attr('src');
$('.products img').hover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
}, function() {
$('#main').attr('src', def_url);
});
});
</script>
Try this...
$('.products img').mouseover(function() {
//do some action...
},function (){
//undo the action..
});
You can achieve this by using hover(). when you move mouse out of it , it restores original state and hovered gives you the required functionality.
So, it is a combination of two functions mouserover() and mouseout()
hope this helps..
You can make it in two ways:
1) use jQuery hover hover documentation
$(selector).hover(
function(){ alert("Hover in"); },
function(){ alert("Hover out); }
);
2) use <div> with background image and change it on hover with css
#selector{
background: url('image1.png');
}
#selector:hover{
background: url('image2.png');
}
I have tried plenty of things and nothing appears to be working.
I am not sure if I am using .siblings() correctly so I had to remove it and made it simple without the actual thing that I want.
Currently I have made it to be as: fade currently selected/hovered div.
$('.recent_each').hover(function () {
$(this).stop().fadeTo(300, '.5')
}, function () {
$(this).stop().fadeTo(300, '1');
});
Can anyone tell me how I can set the opacity of '.5' to all of the siblings and have the currently hovered div on opacity of '1'
I am really confused. Here's html structure tho.
echo "
<div class=\"recent_each\">
<div class=\"recent_title\">
<a href=\"http://www.youtube.com/watch?v='{$info["yt_id"]}'\">
{$info["yt_name"]}
</a>
</div>
<div class=\"recent_thumbnail\">
<a href=\"http://www.youtube.com/watch?v='{$info["yt_id"]}'\">
<img src=\"{$info["thumb"]}\" alt=\"Recently Converted Thumbnail\">
</a>
</div>
</div>
";
As of CSS, there's no opacity at all set in there.
You can use .siblings:
$('.recent_each').hover(function () {
$(this).siblings('.recent_each').stop().fadeTo(300, '.5')
}, function () {
$(this).siblings('.recent_each').stop().fadeTo(300, '1');
});
I want to blur my images by clicking on it. I am using javascript on click event for this purpose. But it is not working exactly as I want. My code is given below:
<script>
$(document).ready(function(){
$(".ww").click(function(){
$(this).css("opacity","0.2");
});
});
</script>
<div class="bg">
<div class="img ww1"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
<div class="bg">
<div class="img ww2"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
I want that when I click first image then its opacity would set. And that when I click second image so the opacity of first image would finish and second image would set.
As the others already tried to explain, you have to use a selector which actually selects both elements, since you want to bind the event handler to both of them. $('.ww') does not select any element in the code you posted.
Toggling the opacity can be easier done when using a class:
.selected {
opacity: 0.2;
}
Add the class to the clicked element and removed it from the element currently having the class:
$(".img").click(function(){
$('.img.selected').add(this).toggleClass('selected');
});
Have a look at this DEMO. This should give you enough information to apply it to your situation.
Because a selector .ww does not match ww1 and ww2.
You can see that with
console.log($(".ww").length);
Use the common class img or add the class ww.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<body>
<div id="my">asdf</div>
</body>
</html>
This really should not be this complicated, but can't figure it out.
Have several tabs vertically on the left along the body content section.
On page load, the "leftKanji" css = display:none. Want when mouse enters the link or "leftTab" class, then "leftKanji" css = disply:block
Currently either all the "leftKanji" shows or hides, not the one the mouse is hover over with. Bonus would be if I can add a "slow" or animate to it.
HTML:
<script type="text/javascript" >
$(document).ready(function(){
$('.leftTab').hover( function(){
$(".leftKanji").css('display', 'block');
},
function(){
$(".leftKanji").css('display', 'none');
});
});
</script>
<div class="mainTabSection">
<a href="#" class="leftTab">
<div class="mainTab"><img src="../" /></div>
<div class="leftKanji"><img src="../" /></div>
</a>
</div>
<div class="mainTabSection">
<a href="#" class="leftTab">
<div class="mainTab"><img src="../" /></div>
<div class="leftKanji"><img src="../" /></div>
</a>
</div>
When you say $('.leftKanji'), you refer to all elements with that class. The code below will get the element that is a child of the .leftTab element. You can change .children() to be any one of the traversing selectors in the jQuery api, but I used that one as an example. The important thing though is to use $(this), as it corresponds with the element that was hovered.
$(document).ready(function(){
$('.leftTab').hover( function(){
$(this).children(.leftKanji').css('display', 'block');
},
function(){
$(this).children(.leftKanji').css('display', 'none');
});
});
You could probably also do something like the following:
$('.leftKanji', $(this)).css('display', 'block')
or
$('.leftKanji', this).css('display', 'block')
Though I can't remember the exact syntax at this moment.
http://api.jquery.com/category/traversing/
$(document).ready(function(){
$(".leftKanji").css('display', 'none');
$('.leftTab').hover( function(){
$(".leftKanji").fadeIn('slow');
},function(){
$(".leftKanji").fadeOut('slow');
});
});
or
$(document).ready(function() {
$(".leftKanji").hide();
$('.leftTab').hover( function(){
$(".leftKanji").hide();
$(this).children().next(".leftKanji").show();
});
});