I have two events that on placed on $('$gallery_slide_main_thumbs img') that are not being fired when I call them. Neither the hover nor the click functions are being called. the mouse pointer changes as it should when I hover over the image.
Jquery::
$('#gallery_slide_main_thumbs img').hover(function(){
$(this).animate({
opacity: 1
});
}, function(){
$(this).animate({
opacity: .66
});
});
<div id="gallery_slide_main_thumbs"></div>
#gallery_slide_main_thumbs{
width: 100%;
height: 100px;
position: absolute;
z-index: 6;
bottom: 0;
opacity: 0;
visibility: hidden;
margin: 0;
text-align: center;
}
#gallery_slide_main_thumbs img{
margin: 5px;
cursor: pointer;
opacity: .66;
}
$('#gallery_slide_main_thumbs img').click(function(){
$('#gallery_slide_main_thumbs img').eq(gallery_active_id).css({
'border': '',
'border-radius': '',
'margin-bottom': ''
});
});
The div with the id "gallery_slide_main_thumbs" is created on start up, and is populated with images when another function is called,
EDIT: The on.('click','img',function(){}) Does not fix the issue.
You need to use event delegation for dynamically created elements by applying .on():
$('#gallery_slide_main_thumbs').on('click','img',function() {
$('#gallery_slide_main_thumbs img').eq(gallery_active_id).css({
'border': '',
'border-radius': '',
'margin-bottom': ''
});
});
for .hover() event, you can use:
$('#gallery_slide_main_thumbs').on('mouseenter', 'seconddiv', function( event ) {
$(this).animate({
opacity: 1
});
}).on('mouseleave', 'seconddiv', function( event ) {
$(this).animate({
opacity: .66
});
});
I believe that images will be inserted dynamically in the following div:
<div id="gallery_slide_main_thumbs"></div>
So this means that images are not present in the initial markup and will be added into the div as a result of some other event.
In this case the good old event binding just does not work. So here another phenomena is involved that is called Event Delegation
Read more about this => https://learn.jquery.com/events/event-delegation/
So the generic code in your case would be.
$(element).on('click',function(){});
$(element).on('hover',function(){});
I hope this works for you. Let me know if you need any more help regarding this.
Agreeing partially with Talha Masood, but this event as a complete code needs to be written on document.ready event or called as a function. So, probably something like below:
$(document).ready(function(){
$(element).on('click',function(){});
$(element).on('hover',function(){
});
});
Let me know if everyone agrees here.
Related
I am trying to make it so that there is an overlay on the page till the page is fully rendered. I can do this by using timeouts but that is probably not the right way to do this. Is there a better way to achieve this?
Issue I am having is that $(window).load doesn't trigger.
JS:
$(document).ready(function() {
$(".overlay").fadeIn();
$(window).on('load', function() {
$(".overlay").fadeOut();
});
});
CSS:
.overlay{
display: none;
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
opacity: .8;
pointer-events: none;
}
JSFiddle Demo
jQuery's document.ready event is fired asynchronously and hence may fire after the window.load event in some cases.
https://github.com/jquery/jquery/issues/3197
https://github.com/jquery/jquery/issues/1823
https://github.com/jquery/jquery/issues/3447
This happens e.g. in your fiddle, because there is almost nothing on the page to load.
Your fiddle can be fixed using this js and setting the Load Type of the js to "No wrap - in < body >":
$(".overlay").fadeIn(function(){
console.log('fadedin');
});
$(window).on('load', function(){
$(".overlay").fadeOut(function(){
console.log('fadedout');
});
});
Try also:
$(document).ready(function(){
$(".overlay").fadeIn(function(){
console.log('fadein');
});
});
$(window).on('load', function(){
$(".overlay").fadeOut(function(){
console.log('fadedout');
});
});
to see that the document.ready event is fired after the window.load event.
This will help you. First document is loaded then window is loaded.
$(document).ready(function() {
$(".overlay").fadeIn();
});
$(window).on('load', function() {
$(".overlay").fadeOut();
});
For more ref -
http://javarevisited.blogspot.in/2014/11/difference-between-jquery-document-ready-vs-Javascript-window-onload-event.html?m=1
I'm trying to add an effect on a div, where once you hover over the block the block will move up. I'm using Jquery transitions as I'm aware that anything under ie10 doesnt really support css transitions. At the moment I can get it to move but there is no effect on the movement (just using css). I'm not sure how I would start to add the jquery transition.
At the moment I got it so that once you hover over the block it adds a class.
$(document).ready(function () {
$(".container").hover(function () {
$(this).toggleClass("animated-effect");
});
});
Heres my jsfiddle, I can't manage to get the code to work something up with my js:
http://jsfiddle.net/4bgj4959/
You are looking for the animate method. Note that hover method takes two parameters, the second parameter is for onmouseout (when you are done hovering).
$(document).ready(function() {
$(".container").hover(function() {
$(this).animate({
top: '20px'
})
}, function() {
$(this).animate({
top: '0px'
})
});
});
.container {
width: 500px;
height: 100px;
border: 1px solid #00c;
position: relative;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
you code is working you didn't include jquery see updated fiddle
demo
Hi how may I make a simple mouse over animation to this logo?
What I want is the id logo may come down 300px and inside I will put my links as navigation
<body>
<div class="content">
<div id="logo"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/Google-Wallet-logo.svg/283px-Google-Wallet-logo.svg.png" alt="" /></div>
<h1 class="title">Hello Moto</h1>
</div>
</body>
FIDDLE
Use mouseenter and leave
A working example Fiddle where I move the text around on hover: http://jsfiddle.net/hzbRb/1/
$('#logo').mouseenter(function(){
$('.content > h1').css('marginTop','30px')
}).mouseleave(function(){
$('.content > h1').css('marginTop','0px')
});
modify this CSS
#logo {
background: #f8b133;
width: 200px;
height: 200px;
max-height: 500px !important; // this is critical!!
margin: 0 auto;
z-index: 1;
}
jQuery
$("#logo").on('mouseover', function () {
$("#logo").animate({
opacity: 0.95,
height: "+=300"
}, 250, function () {
// Animation complete.
// Show Navigation
});
});
$("#logo").on('mouseleave',function () {
// Hide Navigation
$("#logo").animate({
opacity: 1,
height : "-=300"
}, 250, function() {
});
});
I gave it a little opacity so your navigations might show up a bit better and you'll notice I use the .one() delegation so it doesn't continue to move down every time you mouseover.
AFTER EDIT Animations will run a bit faster now and you'll have the ability to hover and leave as many times as is needed rather than being limited to once, as long as you change the CSS.
working jsFiddle
I have a invisible div that on top z-index which I want to act as a clicktag button. But it does not get any mouse event I try to associate with it. Neither it does show the hand pointer specified with css.
This is the example: http://www.miguelrivero.net/test/MS-20_mini/index.html
As you can see I'm using this simple code (just focus on console.log's):
function bgExitHandler(e) {
Enabler.exit("Background Exit");
console.log("click");
}
function onMouseHandler(e) {
console.log("click");
}
document.getElementById("bg-exit").addEventListener("click", bgExitHandler, false);
document.getElementById("bg-exit").addEventListener("onmouseover", onMouseHandler, false);
This is the css:
#bg-exit {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: pointer;
opacity: 0;
}
Any light on this, please?
Thanks!
If you are using addEventListener, the name of the event is just mouseover, not onmouseover:
i.e.
document.getElementById("bg-exit").addEventListener("mouseover", onMouseHandler, false);
I'm experiencing some problems with jQuery's slideUp and slideDown functions. If you go to this site
www.confide.re/confide
and click on one of the boxes, it normally works fine, but after you scroll the page and it loads some more boxes, then the slide function bugs and does it twice for no reason, if you get what I mean.
Is this something I've done wrong somewhere or is this a known bug?
Thanks
Here is the code:
var state = 'down';
$('.overlay').click(function() {
if(state == 'down') {
$(this).next().slideDown(155);
state = 'up';
} else {
$(this).next().slideUp(150);
state = 'down';
}
.overlay is a transparent div on top of each of the boxes.
Define your click event outside your ajax success callback like this (Use a better selector that body, it is just for the example)
$("body").on("click", ".overlay", function(e){
$(this).next().slideToggle(150);
$(this).css('background-color', 'rgba(0,0,0,0)');
});
you should do something like this: http://jsfiddle.net/chanckjh/Jak6Q/
html:
<div class="something">
<div class="bar">
</div>
</div>
jquery:
$(function() {
$('.something').click(function() {
$('.bar').slideToggle();
});
});
css:
.something{
width: 500px;
height: 500px;
border: 1px solid red;
}
.bar{
display: none;
width: 500px;
height: 50px;
background: blue;
}
or like this for the child: http://jsfiddle.net/chanckjh/Jak6Q/1/
$(function() {
$('.something').click(function() {
$(this).find('.bar').slideToggle();
});
});
You can not share a single variable state amongst many elements which need to record their specific status. Instead, you have to keep state for each of the elements.