I am working on website which uses Jquery and CSS3.
I have image and on hover i want to scale image. Hover works with CSS but i want it to via JQuery following code i have tried till now. Please help.
HTML
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body >
<img class="img-responsive" id ="thumbnail" src="my-image-src">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#thumbnail").on({
mouseenter: function () {
$(this).addClass("scaleout");
},
mouseleave:function () {
$(this).removeClass("scaleout");
}
},'img');
});
</script>
</body>
</html>
CSS
.scaleout {
transform: scale(1, 0.80);
-ms-transform: scale(1, 0.80);
-webkit-transform: scale(1, 0.80);
}
I also tried hover() method instead of mouseenter and mouseleave in above script code
$(document).load(function(){
$('#thumbnail').hover(function(){
$(this).toggleClass('scaleout');
},
function(){
$(this).removeClass('scaleout');
});
});
Please help why hover not working.
fiddle
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body >
<img class="img-responsive" id ="thumbnail" src="my-image-src">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$( "#thumbnailtest" ).hover(
function() {
$(this).addClass("scaleout");
}, function() {
$(this).removeClass("scaleout");
}
);
});
</script>
</body>
</html>
Remove 'img' from event handler,
Its work for me
<script>
$(document).ready(function(){
$("#thumbnail").on({
mouseenter: function () {
$(this).addClass("scaleout");
},
mouseleave:function () {
$(this).removeClass("scaleout");
}
});
});
</script>
I've created a fiddle that works using code pretty similar to your second solution (use document.ready and no need for the removeClass function). https://jsfiddle.net/L5bj38me/
<script>
$(document).ready(function(){
$('#thumbnail').hover(function(){
$(this).toggleClass('scaleout');
})
});
</script>
Update OP's issue is due to Angular see - Run jQuery code after AngularJS completes rendering HTML
There are many ways to do it, one solution is -
$(document).ready(function(){
$('#thumbnail').on('mouseenter', function (e) {
$(this).toggleClass('scaleout');
});
});
Here's another one -
$("#thumbnail").mouseenter(function (e) {
$(this).toggleClass('scaleout');
});
Few more -
$( "#thumbnail" )
.mouseover(function() {
$(this).toggleClass('scaleout');
})
.mouseout(function() {
$(this).toggleClass('scaleout');
});
Same output but with different approach -
$( "#thumbnail" )
.mouseenter(function() {
$(this).toggleClass('scaleout');
})
.mouseleave(function() {
$(this).toggleClass('scaleout');
});
Related
Just recently made this sticky navbar with a little bit of jquery and realised that it doesn't work . When i tried copying my code to jsfiddle everything worked fine
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js\scripts.js"></script>
</head>
<body>
<header onmouseover="this.style.background='white'" onmouseout="this.style.background='#e6e6e6'">
<img src="Photos\logo.png" width="210px" height="150px">
</header>
<ul class="navbar">
<li>Model</li>
</ul>
<div class="main">lots of words......</div
</body>
</html>
And the scripts.js file :
var n=$(".navbar"),
ns="navbar-scrolled",
head=$('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > head) {
n.addClass(ns);
}
else {
n.removeClass(ns);
}
});
The css file is the same as in my JSFiddle
By default JSFiddle runs your script on window load, which means it runs after the DOM has been loaded. You need to do this yourself normally. Just a slight change will fix it...
$(function() {
var n=$(".navbar"),
ns="navbar-scrolled",
head=$('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > head) {
n.addClass(ns);
}
else {
n.removeClass(ns);
}
});
});
You just need to wrap your code like this...
$(function() {
// your code goes here
});
There are other ways to do the same, but that will fix your problem.
Starting from the snippet:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body>
<ul>
<li><a class="parentClass" href="#">Parent</a></li>
</ul>
<script>
jQuery(document).ready(function($){
$('.parentClass').append("<span class='childClass'> || Child</span>");
$('.parentClass').click(function(e){
alert('parent');
});
$('.childClass').click(function(e){
//$('.childClass').removeClass('parentClass');
alert('child');
});
});
</script>
</body>
</html>
If I click on "Parent" I can view the alert('parent') only, but if I click on "Child" I will fire not only alert('child') but also alert('parent').
I tried to insert $('.childClass').removeClass('parentClass'); but it doesn't work. I can't figure out how to avoid to launch the parent from child, without modify the nested classes inside the anchor...is it possible?
Events bubble, you can stop the propagation
jQuery(document).ready(function($) {
$('.parentClass').append("<span class='childClass'> || Child</span>");
$('.parentClass').click(function(e) {
alert('parent');
});
$('.childClass').click(function(e) {
e.stopPropagation();
alert('child');
});
});
FIDDLE
or make sure the parent was actually the target
jQuery(document).ready(function($) {
$('.parentClass').append("<span class='childClass'> || Child</span>");
$('.parentClass').click(function(e) {
if ( this === e.target ) {
alert('parent');
}
});
$('.childClass').click(function() {
alert('child');
});
});
FIDDLE
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body>
<ul>
<li><a class="parentClass" href="#">Parent</a></li>
</ul>
<script>
jQuery(document).ready(function($){
$('.parentClass').append("<span class='childClass'> || Child</span>");
$('.parentClass').click(function(e){
alert('parent');
});
$('.childClass').click(function(e){
//$('.childClass').removeClass('parentClass');
alert('child');
e.stopPropagation();
});
});
</script>
</body>
</html>
All you need is to use .stopPropagation()
You need to use event.stopPropagation():
$('.childClass').click(function(e){
e.stopPropagation();
alert('child');
});
I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well
I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});
Hi by any chance anyone will know how to do the fade in fade out change page effect in JavaScript?
Like this..
http://soulwire.co.uk/hello
I have tried this..
But when fadeout is not linking together..I mean not smooth like the above website.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(1000);
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
</script>
Sorry am just think of....does background slideshow will work??? But on top can I add php/html code?
Another example...http://www.louisebradley.co.uk/portfolio/
Hey try the below code
See its WORKING DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script type="text/javascript">
function Close()
{
$('#div1').animate({ height: 50 });
}
function Open()
{
$('#div1').animate({ height: 100 });
}
</script>
</head>
<body>
<div id="div1" style="width:100%; height: 50px; background-color: #C0C0C0;" onmouseover="Open()" onmouseout="Close()"></div>
</body>
</html>
Also take a look at these stuffs
Fade in div on page load
JavaScript Fade Tutorial – Fading Elements In/Out
How to: javascript fade in fade out text
.fadeIn() Tutorial