I have a problem with jQuery.
I have the following code which is inside a $(document).ready(function() {...})
$("#one_div").hide();
$('#button').click(function(){
if (this.src == 'img/img1.png'){
this.src = 'img/img2.png';
}
else {
this.src = 'img/img1.png';
}
$("#one_div").slideToggle(800);
});
#button is the ID of an image. one_div is the ID of a div.
Actually, clicking on the image toggles the div, but the problem is that the image is swapped only once, from img1 to img2, and never switched back. What I did I do wrong?
You forgot your second =
(this.src == 'img/img1.png'){
Put the code inside of a $(window).load(function() { ... }); instead to be sure the images are loaded before toggling them.
$(document).ready(function() {
$("#one_div").hide();
});
$(window).load(function() {
$('#button').click(function(){
if ($(this).attr('src') == 'img/img1.png'){
$(this).attr('src', 'img/img2.png');
}
else {
$(this).attr('src', 'img/img1.png');
}
$("#one_div").slideToggle(800);
});
});
why don't you toggle the image using a class?
Code is untested, but it should become something like this:
$("#one_div").hide();
$('#button').click(function(){
this.toggleClass('active');
if (this.hasClass('active')){
this.src = 'img/img2.png';
} else {
this.src = 'img/img1.png';
}
$("#one_div").slideToggle(800);
});
Try this:
$('#button').click(function(){
var el = document.getElementById('button');
if (el.src == 'img/img1.png'){
el.src = 'img/img2.png';
}
else {
el.src = 'img/img1.png';
}
$("#one_div").slideToggle(800);
});
I think that this has returned a JQUERY object not a DOM object that you can manipulate using .src
Related
I have 4 div bars in my home page. I'm loading those div bars by on click. But I want to load the the 1st div when page loading, then the 2nd div should load after 5 seconds. after 5 sec 3rd div should load like wise. this is my code : -
$(document).ready(function () {
$('#click1').click(function () {
$('#desc1').toggle(400);
$('#desc2').hide();
$('#desc3').hide();
$('#desc4').hide();
$('#desc5').hide();
});
});
Thnx,
var delay=5000;
$(document).ready(function () {
$('#desc1').toggle(function(){
$('#desc2').toggle(delay,function(){
$('#desc3').toggle(delay,function(){
$('#desc4').toggle(delay,function(){
$('#desc5').toggle(delay,function(){
});
});
});
});
});
});
Try this
You can show them with delay(ms);
$('#desc2').delay(5000).show();
$('#desc3').delay(10000).show();
$('#desc4').delay(15000).show();
$('#desc5').delay(20000).show();
You should consider setInterval();, cleanest way to achieve that IMHO.
Something like:
$('#click1').click(function () {
var nb = 1;
var int = setInterval( function(){
var el = $('#desc'+ nb);
el.addClass('show');
nb++;
if( nb > 5) {
clearInterval(int);
}
}, 400);
});
I copied that from an old project. Note that I use CSS to toggle the div.
Try this code
$('#click1').click(function () {
$('#desc1').fadeIn(400);
$('#desc2').delay(5000).fadeIn();
$('#desc3').delay(10000).fadeIn();
$('#desc4').delay(15000).fadeIn();
$('#desc5').delay(20000).fadeIn();
})
(function(s){
var i = 2, flag, url;
function load(){
if( i == 6){
console.log("complete output!");
clearTimeout(flag);
return ;
}
//make something
$(selector+i).load(ulr+"&index="+i, function(){
i++;
flag = setTimeout(load,5000);
})
}
load();
})('desc');
toggle can complete display or hide , i would like to use load and setTimeout
I was successful in getting the id of all images within a div when clicking the div with the following codes below:
<script type="text/javascript">
function getimgid(){
var elems = [].slice.call( document.getElementById("card") );
elems.forEach( function( elem ){
elem.onclick = function(){
var arr = [], imgs = [].slice.call( elem.getElementsByTagName("img") );
if(imgs.length){
imgs.forEach( function( img ){
var attrID = img.id;
arr.push(attrID);
alert(arr);
});
} else {
alert("No images found.");
}
};
});
}
</script>
The codes above works perfectly, doing an alert message of the image id when clicking card div. Now what I want is to run this function without clicking the div in every 5 seconds. I have tried setInterval (getimgid, 5000), but it doesn't work. Which part of the codes above should I modify to call the function without clicking the div. Any help would be much appreciated.
JSFiddle
You should be calling it this way:
setInterval (function(){
getimgid();
},5000);
also remove binding of click event for element.
Working Fiddle
Use elem.click() to trigger click
function getimgid() {
var elems = [].slice.call(document.getElementsByClassName("card"));
elems.forEach(function (elem) {
elem.onclick = function () {
var arr = [],
imgs = [].slice.call(elem.getElementsByTagName("img"));
if (imgs.length) {
imgs.forEach(function (img) {
var attrID = img.id;
arr.push(attrID);
alert(arr);
});
} else {
alert("No images found.");
}
};
elem.click();
});
}
setInterval(getimgid, 1000);
DEMO
Problem: You are not triggering the click in setInterval. You are only re-running the event binding every 5 secs.
Solution: Set Interval on another function which triggers the click. Or remove the click binding altogether if you don't want to manually click at all.
Updated fiddle: http://jsfiddle.net/abhitalks/3Dx4w/5/
JS:
var t;
function trigger() {
var elems = [].slice.call(document.getElementsByClassName("card"));
elems.forEach(function (elem) {
elem.onclick();
});
}
t = setInterval(trigger, 5000);
There were a few topics about this already but they didn't quite help in my case. I've written a small script to change the image source of some social icons when hovered over. I'm trying to add a fadeIn and fadeOut effect so it isn't just a straight up image swap. Here is my script:
$(".social_icons").live('hover', function() {
if ($(this).attr("class") == "social_icons") {
this.src = this.src.replace("-black","-color");
} else {
this.src = this.src.replace("-color","-black");
}
$(this).toggleClass("on");
});
How can I add a fadeIn/fadeOut effect to this?
Try this
$(".social_icons").live('hover', function() {
var $curr = $(this);
if ($(this).attr("class") == "social_icons") {
$curr.fadeOut('slow', function () {
$curr.attr('src', this.src.replace("-black","-color"));
$curr.fadeIn('slow');
});
} else {
$curr.fadeOut('slow', function () {
$curr.attr('src', this.src.replace("-color","-black"));
$curr.fadeIn('slow');
});
}
$(this).toggleClass("on");
});
I'm using the Pixastic plugin in JavaScript. I have a table filled with images that are blurred. When I go over them with the mouse I want them to get normal. And when the mouse leaves an image I want it to blur back. For some reason my code doesn't work. Here's the code:
Before, I copied the wrong code part, and I apologize for that this one is the one I'm asking about.
<script type="text/javascript">
$(document).ready(function(){
$('.photography').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
function () {Pixastic.revert('this');};
}
else {
function(){Pixastic.process('this', "blurfast", {amount:0.5});};
}
});
});
</script>
OK, so I managed to find my old code that actually works half way (when I hover over the image for the first time it works, but when I try for the second time it doesn't).
$(document).ready(function(){
var blur = function() {Pixastic.process(this, "blurfast", {amount:0.5});};
var unblur = function () {Pixastic.revert(this);};
$('.photography').each(blur);
$('.photography').hover(unblur,blur);
});
OK, so now I'm also adding the code for the function called revert:
revert : function(img) {
if (Pixastic.Client.hasCanvas()) {
if (img.tagName.toLowerCase() == "canvas" && img.__pixastic_org_image) {
img.width = img.__pixastic_org_width;
img.height = img.__pixastic_org_height;
img.getContext("2d").drawImage(img.__pixastic_org_image, 0, 0);
if (img.parentNode && img.parentNode.replaceChild) {
img.parentNode.replaceChild(img.__pixastic_org_image, img);;
}
return img;
}
}
else
if (Pixastic.Client.isIE()) {
if (typeof img.__pixastic_org_style != "undefined")
img.style.cssText = img.__pixastic_org_style;
}
}
So yesterday my friend discovered how this could be done ... the problem was that the plugin converts images into canvas anyway her's the code :
$(document).ready(function(){
$('.pic').each(function(){
this.onmouseout = function(){
var canvas1 = Pixastic.process(this, "blurfast", {amount:0.5});
canvas1.onmouseover = function(){
Pixastic.revert(this);
}
}
this.onload = function(){
var canvas = Pixastic.process(this, "blurfast", {amount:0.5});
canvas.onmouseover = function(){
Pixastic.revert(this);
}
}
});
});
Try doing this
$('.photography').live('mouseenter', function(event){
Pixastic.revert(this);
}).live('mouseleave', function(event){
Pixastic.process(this, "blurfast", {amount:0.5});
});
I'm trying to use jquery to switch between three images once you click on the image. Upon clicking on the third image, it switches it back to the first picture.
Is there a way to adapt the following to switch between more than two pictures, and for it to allow more than it switching once?
jQuery
$(document).ready(function() {
$("#clickMe").click(function() {
$("#myimage").attr({src : "picture2.png"});
});
});
HTML
<div id="clickMe"><img id="myimage" src="picture1.png" /></div>
Thanks.
This should do that:
$(document).ready(function() {
$("#clickMe").click(function() {
var src = $('#myimage').attr('src');
//if the current image is picture1.png, change it to picture2.png
if(src == 'picture1.png') {
$("#myimage").attr("src","picture2.png");
//if the current image is picture2.png, change it to picture3.png
} else if(src == "picture2.png") {
$("#myimage").attr("src","picture2.png");
//if the current image is anything else, change it back to picture1.png
} else {
$("#myimage").attr("src","picture2.png");
}
});
});
This works:
$(document).ready(function () {
var i = 1; // Used to keep track of which image we're looking at
$("#clickMe").click(function () {
i = i < 3 ? i + 1 : 1;
$("#myimage").html("picture#.png".replace("#", i));
});
});
Online demo: http://jsbin.com/afito
This is link might be helpful
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/