I have a weird kind of problem.I have hover event on DIV .On run time i have to insert some elements in to DIV .Hover event should not happen after inserting div elements.But problem is if i hover on DIV before inserting elements in to the DIV .Hover event is getting carried after inserting the elements.I tried removing attribute its not working for me...
Please let me know If you have a solution
As gmcalab said, please provide some code.
But, a wild shot from here. Since a class is always applied to an element, no matter the state of that element. Maybe you can write a little javascript to change the class of the DIV after you're done.
<div id="yourdiv" class="foo">
You do your things and finally call:
document.getElementById('yourdiv').className = 'bar';
Then in css something like
.bar:hover { background:#EDEDED; or-whatever-styling:you-need;}
But then again, without a codesample it's a hard guess...
Related
I have a dropdown, and a list of elements that default to display:none with css.
Currently, when an element is selected from the dropdown it's changed to display:block
What I'm missing, is how to change the element back to display:none once a new one is selected. I know I could write a loop to constantly check every element and change it to display:none but that seems cumbersome.
My real problem has about 100 elements, and it seems wasteful to re-hide all of them when 99 of them will already be hidden.
Curious what the most elegant way to do this in jQuery (or javascript) is. A fiddle of what I have is here:
https://jsfiddle.net/3w66k51z/4/
Thanks!
I've added $(".sReport").hide(); before your .show() call in order to hide all of the elements.
jQuery.hide() will set the element's display to none
jsfiddle
You could add state so that you know the currently shown item (if any) and hide just that one element. I understand you don't want to hide all items when most of them will already be hidden.
Here is a simple implementation of this idea.
(I imagine your real problem involves many more hidden items than the fiddle. If not — maybe even if so — this may be a premature optimization, and there’s nothing wrong with calling .hide() or whatever on all items.)
Create array of your element then create a function to hide all elements but not the one you want to be display.
I have a script on my site and using jQuery it makes the variation-value div element clickable.
Unfortunately the areas with the p & div tags aren't clickable. Is there an easy fix for this?
jsfiddle example ::: http://jsfiddle.net/xb4qkdLu/ :::
<div class="variation-value">
<p class="left" style="background:green">left aligned text</p>
<div class="right" style="background:red">right aligned text</div>
<p></p>
</div>
What I'm seeing in the jsfiddle you posted afterward, is that you are binding the click to the td element within the variation class ($('.variation').on('click', 'td', function(event){...).
Based on what you wrote, and the comment I've left under your original post, hooking a click trigger listener to the .variation-value' class would solve this for you (as you've currently got no events tied to it).
If you would like to supplement you original script, you would either have to go around with some CSS "hack", by adding to the css of p and span within the td the following pointer-events:none; (will require some extra IE fine-tuning), or you could also add the other elements within the td to the trigger listener.
Code sample:
The CSS would be like (considering normal-case browser):
.variation-value > p, .variation-value > div { pointer-events:none; }
The Jquery would be:
$('.variation-value').on('click', function(event){ ... }
Do keep in mind that your left element is bound to reset your values list if it is visible (haven't found any trigger set for the right element). If you are enabling a click-through effect for all the elements within your .variation-values, you are losing the reset-effect bound to the left element. Is that surely what you are looking to achieve? If so, just go wihout the above CSS snippet, and you will have it all function as you would like.
Also just to note, in your HTML markup, you are putting elements in the following hierarchy:
div.variation-value
p[left]
div[right]
You aren't closing your p element before adding in the div for the right element that is it becomes a child of the p. I'm assuming you should've closed the p tag to ensure functionality as intended.
http://jsfiddle.net/hasecbinusr/pctgs5ke/
$(document).ready( function(e) {
$('.variation-value').click(function () {
alert('You clicked it!');
});
});
$('#button').click(function(){
$('body').css('-webkit-filter', 'blur(4px)');
});
When button is clicked, body is turned blur, but i don't want the div inside the body to turn blurred as well. How to do that? can i do that with the .not() jquery function?
No, the not([selector]) function is used for discarding elements from the current jQuery selection. It can't be used for exempting an element from an effect that is applied to one of its ancestor elements.
You could try to apply the blur to everything inside the body, except the div itself.
$('body').children().not('div').toggleClass('blur');
Fiddle
I would use something like this.
$('#button').click(function(){
$('body').css('-webkit-filter', 'blur(4px)');
$('body').find("div").css('-webkit-filter', 'blur(0px)');
});
Maybe I misunderstand the question, but couldn't you just add
$('#DIV').css('-webkit-filter', 'blur(0px)');
(where #DIV is the div you don't want blurred) and turn off the blurring on that specific element?
Edit: They were saying in the above answer that it couldn't be done, so maybe something like a container for everything except the div?
http://jsbin.com/eDIPoYU/1/
I want to make my htmlelement hide while the page renders. For this I set display:none. However, when I use $.show(), the element isn't showing up. I want to make the element show using $.show() itself. Please help!
Yes. jQuery or the browser rendering engine has a problem with this. If you are not using any animation, you can very well define a class:
.hidden {display: none;}
And using jQuery, you can remove the class by:
$(element).hide().removeClass("hidden").fadeIn();
$(element).toggleClass("hidden");
Now, this on execution, hides the DOM, removes the CSS class and then fades in!
Use the below code:
$("element_Selector").css("display","block");
Looks like there might be 2 issues in such cases..
Either you are not waiting until the DOM is ready .. Encase you code inside $(function() { });
Else style="display:none"
Is taking precedence and your div will never be seen.
To counter that add a class to the element. .hide { display : none }
And then $(selector).show() should get the work done.
I'm having an issue with special characters triggering events in jQuery. I've got a div containing some text, when it's hovered I call a hover function, when it's "unhovered" I call another function. This works fine if I don't have any quotations: ' or " in the div contents, but causes the unhover event to trigger prematurely if those characters are in the div.
That is to say, the unhover event is being called when I'm still mousing over the div. I've tried using htmlentities, htmlspecialchars on the text in the div, but neither seem to help. Any ideas?
$('#elementID').hover(hoverIn, hoverOut);
EDIT: I should add that the div's contents are being passed to it by php via a TWIG template variable.
It sounds weird. Content should not affect the hover event. It sounds like the div you are asigning the hover function doesn't cover the whole area and possibly another element inside is breaking your code, but without ckecking the actual code is hard to tell what's wrong.