I'm pretty new to jQuery and I am practicing a fade in that starts with one image and then continues to the next image and so on. I have written a piece of code (below) but was wondering if there was an easier or more elegant way to write it? I tried the each() function but didn't seem to work:
<script type="text/javascript" src="jquery/jquery-1.8.2 .min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert($("div img").length);
$("div img").css("display","none");
var delayAmt=0;
for(var x=0;x<$("div img").length;x++){
$("div img:eq("+x+")").delay(delayAmt).fadeIn(1000);
delayAmt+=250;
}
});
</script>
</head>
<body>
<h1>Ripple fade in.</h1>
<div>
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>
HTML:
<body>
<h1>Ripple fade in.</h1>
<div id="images">
<img src="images/hot.jpg" id="target0">
<img src="images/hot.jpg" id="target1">
</div>
</body>
</html>
jQuery:
$(document).ready(function(){
var delay=0;
$('#images').children('img').each(function () {
$(this).css("display","none");
$(this).delay(delay).fadeIn(1800);
delay += 1000;
});
});
jsFiddle link here: http://jsfiddle.net/salih0vicX/6GZt6/
Related
when I set the content of function to "alert();", It recognizes when I hover the image. When I implement what I wants it do, which is hover another image over the original picture. Nothing happens? If anyone could some guidance I'd appreciate it.
<script type="text/javascript">
function SetNewImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
}
function SetOldImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
}
</script>
</head>
<body>
<img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg" alt="Death of Marat" class="artThumb"/>
</body>
you use document.getElement by id But id not founfd
<img id="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg" alt="Death of Marat" class="artThumb"/>
you can try this -
<script type="text/javascript">
function SetNewImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
}
function SetOldImage()
{
document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
}
</script>
</head>
<body>
<img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg" alt="Death of Marat" class="artThumb"/>
</body>
thumbnail is a class, so you can do something like
<script type="text/javascript">
function SetNewImage()
{
document.querySelector(".thumbnail").src="https://i.ytimg.com/vi/XCpHNOAzLqA/maxresdefault.jpg";
}
function SetOldImage()
{
document.querySelector(".thumbnail").src="https://th.bing.com/th/id/R.31a5d99ff4d1fac186599a7decd1cf85?rik=SpU2aqLepkVuuA&riu=http%3a%2f%2fwww.hickerphoto.com%2fimages%2f1024%2fpictures-f76t7426.jpg&ehk=SWYUsFxxPWF2LYjSRna6Yfukj3Ng60iCBzZ%2b%2buDP7g8%3d&risl=&pid=ImgRaw&r=0";
}
</script>
<img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="https://th.bing.com/th/id/R.31a5d99ff4d1fac186599a7decd1cf85?rik=SpU2aqLepkVuuA&riu=http%3a%2f%2fwww.hickerphoto.com%2fimages%2f1024%2fpictures-f76t7426.jpg&ehk=SWYUsFxxPWF2LYjSRna6Yfukj3Ng60iCBzZ%2b%2buDP7g8%3d&risl=&pid=ImgRaw&r=0" alt="Death of Marat" class="artThumb"/>
try modify class to id, Class in the img and getelementbyid in JS
$("#button").click(function(){
$(document).ready(function() {
$('#wrapper').load('page.php');
});
});
<div id="wrapper"></div>
<div id="button">click me</div>
I want show loading before send (load) page.php after click #button
Here is the jsfiddle script https://jsfiddle.net/1uwopptv/ or inline script assuming this is what you want. You can again hide the loading gif, after request is completed.
$("#button").click(function(){
$('#img').show();
$('#button').hide();
$(document).ready(function() {
$('#wrapper').load('page.php');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>
<div id="button">click me</div>
<img src="https://loading.io/assets/img/landing/curved-bars.svg" id="img" style="display:none"/ >
Disclaimer : Image used belongs to site loading.io, as came up in first google search.
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');
}
});
});
});
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>
For my purposes, I need to set the div height as quickly as possible.
Using the document.ready() event is not fast enough, so I want to set the inline CSS style of the div.
How can achieve something like this?
<div id="map-container" style="height:javascript(getwindowheight)px;">
<div id="map">
</div>
</div>
function getwindowsheight() {
return window.height;
}
Any suggestions?
Since you want it to be dynamic, you will need to pay attention to the following events:
window resize
window ready
Set your HTML first:
<div id="map-container"></div>
And then inside your JavaScript, setup a function to detect those:
var applyMapContainerHeight = function() {
var height = $(window).height();
$("#map-container").height(height);
};
document.ready(function() {
applyMapContainerHeight();
});
$(window).resize(function() {
applyMapContainerHeight();
});
Then don't use document.ready
just execute your js after div
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
$('#map-container').css({ height: 'your height'});
</script>
Provided that jQuery is script files are included in the very beginning of your HTML, place some scripting right after the div declaration:
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
$("#map-container").height(getwindowsheight());
function getwindowsheight() {
return window.height;
}
</script>
<div id="map-container">
<div id="map">
</div>
</div>
<script type="text/javascript">
document.getElementById("map-container").style.height= $(window).height() + "px";
</script>