We Keep Coding

jquery swap image on element click not functioning

I am trying to swap an image on click with jquery. I have got it to work with the click being bound to the image class. However, if I try and wrap the function and bind the event to a button or anchor, it will not swap the images. Here is the jquery:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".test_toggle").click(function(){
$(this).find(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
});
</script>
This worked:
jQuery(document).ready(function( $ ) {
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
Any help is greatly appreciated.

I don't think there's any need to delegate the event listeners so I've removed them. Simply add the click event to the image and then you can manually 'trigger' a click on it when the .test-toggle is clicked. E.G:
$(function() {
//add on click event
$(".img-swap").on('click', function() {
if (this.src.indexOf("_off")>0) {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
});
//add remote trigger
$(".test_toggle").on('click', function(){
$(".img-swap").trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-swap" src="https://placehold.it/300?text=_off" />
<button class="test_toggle">test toggle</button>

Thats because unlike like img.
a or button doesn't have a src attribute.
So when you bind the event to a button or anchor, this.src in your second instance of the code will be invalid.

I would delete this line:
$(this).find(".img-swap").live('click', function() {
What is it's purpose? You can swap this image right after the first click, right?
Also, make sure that .img-swap is inside the tag with class test_toggle.
You are using:
$(this).find(".img-swap")
find() searches only in children of selected element.
If it's not nested use
$(".img-swap")
instead of:
$(this).find(".img-swap")

I have re-written the js, but not tested. Can I nest clicks?
$(".test_toggle").click(function(){
$.find(".img-swap").click(function(){
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});

Jquery Delay overrule on next link or div hovered

I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});

You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle

Scroll up button for website not working properly

I'm trying to put a "scroll up" button on my website, and for some reason it isn't working correctly. The button does appear on the page, but for whatever reason whenever I attempt to click it it just redirects me to the front page of the site. I have no idea what I'm doing wrong.
<script>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="100"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="1000"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function(){$("#toTo_button").scrollToTop();});
</script>
<style>
#toTo_button { width:70px;text-align:center;padding:5px;position:fixed;bottom:10px;right:12px;cursor:pointer;color:#666;text-decoration:none; }
#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); }
#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }
</style>
<div id="ups">
<img src="http://full4dl.ucoz.com/Support/ups.png" alt="" />
</div>

You have to prevent the default action when you click the anchor, as <a href="/" ... will surely redirect to the home page:
$(function () {
$.fn.scrollToTop = function () {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "100") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function () {
if ($(window).scrollTop() <= "1000") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function (e) {
e.preventDefault(); // ding ding ding
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function () {
$("#toTo_button").scrollToTop();
});

You have a couple issues with your code.
First, you have to trigger the function by binding it to a click event.
$('#toTo_button').click(function(event) {
//do your scroll magic here
});
Secondly, when you trigger that click event, you should pass the event and call event.preventDefault(). This prevents the browser from automatically calling a redirect.

Use event.preventDefault() on the click event of the anchor tag, this will stop the default redirect to the homepage of the site(as you have written a href="/").
This should resolve the issue.

Swap back image on hover out with Jquery

I have this HTML code:
<img class="swap" src="/Static/Images/Meny_normal_01.png" alt="" />
and this is my Jquery code and what it does is that when I hover over my img it swaps to another img, but I would like to have a hover out and then it swap back to the old img.
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
});
});
Would appreciate any kind of help

.hover() binds two handlers to the matched elements, to be executed when the mouse pointer enters and when you leaves the elements.
$(".swap").hover(
function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);

You can pass 2 handlers into the hover - like this:
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);
});
Have a look at: http://api.jquery.com/hover/ for more info
Or a similar item on SO: jquery change image on mouse rollover

$(".swap").hover(function() {
$(this).attr("src", function(i, val) {
return val.indexOf("hover") == -1
? val.replace("normal", "hover")
: val.replace("hover", "normal");
});
});
DEMO: http://jsfiddle.net/UJR8M/

jQuery changing images with animation and waiting for it to trigger hyperlink

I want to switch images on .click() using the url attr I can do so, but I can't figure out how to make it wait, until the animation is done to redirect to the new webpage.
Here's the js
$(function() {
$('.cv').click(function() {
$("#cv img").fadeOut(2000, function() {
$(this).load(function() {
$(this).fadeIn();
});
$(this).attr("src", "images/cv2.png");
return true;
});
});
});
Here's the html:
<div id="cv" class="img one-third column">
<a class="cv" target="#" href="cv.joanlascano.com.ar">
<img src="images/cv1.png" alt="Curriculum"/>
<br />CV</a>
</div>

You need to prevent the browser default of following link by returning false from click handler. Then do redirect in callback of fadeIn()
$(function() {
$('.cv').click(function() {
/* store url*/
var href = this.href;
$("#cv img").fadeOut(2000, function() {
/* bind load to image*/
$(this).load(function() {
$(this).fadeIn(function() {
/* redirect in callback of fadeIN*/
window.location = href;
});
/* change src*/
}).attr("src", "images/cv2.png");
});
/* prevent browser default following href*/
return false;
});
});

$('.cv').click(function(e) {
e.preventDefault(); // prevent browser reload
$("#cv img").fadeOut(2000, function() { // fadeout the image
$(this)
.attr('src', "images/cv2.png") // change src of image
.load(function() { // load image
$(this).fadeIn(); // display the image
});
});
});