I'm trying to create function that will do this same thing for 3 different classes. The only problem is that every time when I hove over any of the divs it affect all the others instead just one.
Could anyone advice me please how can I make it work separately for each class on hover stage:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
Thank you for your help in advance.
Dom
If the divs have only one kind of subclass each, then it's pretty simple:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
If they have multiple subclasses, you'll have to first check which class the current div belongs to and build the selector based on it.
Related
A have a this jquery function....
$(".rolled-wrap").on('click', function() {
$(this).each(function() {
$('.button-text span').text($('.button-text span').data('hover'));
$('.button-text span').attr("data-hover", $('.button-text span').data('hover'));
});
});
this function need working only for subclasses, current .rolled-wrap (e.g. .rolled-wrap (this) .button-text span)..... however clicking on one class, result summbit for all .button-text span.... I do not know what to do, I will be grateful for any help. thank you in advance
To look inside the target element use .find()
$(".rolled-wrap").on('click', function() {
$(this).find('.button-text span').text($('.button-text span').data('hover'));
$(this).find('.button-text span').attr("data-hover", $('.button-text span').data('hover'));
});
Is it possible to return a class immediately after it's removed by hover? So when you're no longer hovering, the class returns?
$("#all").hover(function() {
$('.morenav').removeClass('active');
$(this).closest(".morenav").toggleClass("hovered")});
$("#all").click(function() {
$(this).closest(".morenav").toggleClass("active") });
The way it's set up now, the active class doesn't come back when the element is no longer hovered. Can anyone help me out?
$("#all").hover(function() {
$('.morenav').removeClass('active');
$(this).closest(".morenav").toggleClass("hovered")
}, function() {
$('.morenav').addClass('active');
});
$("#all").click(function() {
$(this).closest(".morenav").toggleClass("active")
});
It is clearly stated in jQuery documentation. You can try something like this. Hope it helps.
$("#all").hover(function() {
$('.morenav').removeClass('active');
$(this).closest(".morenav").toggleClass("hovered")
}, function() {
$('.morenav').addClass('active');
});
$("#all").click(function() {
$(this).closest(".morenav").toggleClass("active")
});
I have one script that shows a tooltip on click and the other script shows a menu after a certain point in the page.
If the menu doesn't load, then I can click on the buttons to show the tooltips just fine. But when the menu does show up, the tooltips script doesn't show anymore.
<script>
$(document).ready(function() {
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
});
$(document).ready(function() {
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
});
</script>
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 650) {
$("#nav-block:hidden").css('visibility', 'visible');
$("#nav-block:hidden").fadeIn('650');
$("#nav-wrap:hidden").css('visibility', 'visible');
$("#nav-wrap:hidden").fadeIn('650');
$("#header-wrap:hidden").css('visibility', 'visible');
$("#header-wrap:hidden").fadeIn('650');
} else {
$("#nav-block:visible").fadeOut("650");
$("#nav-wrap:visible").fadeOut("650");
$("#header-wrap:visible").fadeOut("650");
}
});
});
</script>
Thanks in advance for the help!
update: Here is all the code I have for this. http://jsfiddle.net/parachutepenny/82J6G/11/
I'm sorry in advance for any beginner errors that I may have all over the place. I'm still learning how to code.
This doesn't answer your question, but there are some great opportunities to optimize here. Aside from best practice, they may also sort out the bugginess. Something like:
$(document).ready(function() { // combine doc.ready
var win = window, // store window as a variable
$bod = $('body');
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
$(win).scroll(function() {
if (win.scrollY > 650) { // use scrollY from window variable so you're not retrieving from the DOM
$bod.addClass('navVisible'); // use classes on body to trigger CSS transitions on the children
} else {
$bod.removeClass('navHidden');
}
});
});
Put your multiple click function into single ready function.It may cause readability problem.
Follow this link.
Multiple document.ready() function
I'm trying to achieve a simple hover effect. When a user hovers an image (a view filled with images), it should show an extra div. No problem there.
But when I want to do the opposite thing, hide the same div when the user leaves the area of the div, it doesn't work: the div won't go away when leaving the div area (which should be done by default when using the hover, no?).
This is the code I use:
$(document).ready(function () {
$('.views-field-field-photo-fid').out(function () {
showDiv($(this), $('.views-field-title'));
});
$('.views-field-field-photo-fid').out(function () {
hideDiv($(this), $('.views-field-title'));
});
});
function showDiv(sender, object) {
$(object).show();
}
function hideDiv(sender, object) {
$(object).hide();
}
So far, I've tried .mouseenter, .mouseleave, .hover, .out, but nothing works to hide the div after leaving the div area.
UPDATE
I found the solution, more or less:
$(document).ready(function() {
$('#uicarousel-news-preview-block-2 .views-field-field-photo-fid').hover(
function() { $(this).find('.views-field-title').show(); },
function() { $(this).find('.views-field-title').hide(); }
)
});
But since there are a lot of .views-field-title, it's hiding/showing them too. So I figured to use the find, but no solution there.
Any ideas?
There is no jQuery function called out, I am not sure whether you are using a plugin or not. Anyway, this how a correct hover declaration should look like:
<script style="text/javascript">
$(document).ready(function() {
$('.views-field-field-photo-fid').hover(
function() {
showDiv($(this), $('.views-field-title'));
},
function() {
hideDiv($(this), $('.views-field-title'));
});
});
function showDiv(sender, object) {
$(object).show();
}
function hideDiv(sender, object) {
$(object).hide();
}
</script>
I suggest that you take a look at the jQuery.hover documentation.
I've got following JavaScript functions but want to refactor the $(document).ready() as I've got 2 instance of it. How can I achieve this?
FlashMessenger = {
init: function() {
setTimeout(function() {
$(".flash").fadeOut("slow", function () {
$(".flash").remove();
});
}, 5000);
}
}
SelectLanguage = {
init: function() {
$('#selectLanguageId').change(function() {
$('#frmSelectLanguage').submit();
});
}
}
$(document).ready(FlashMessenger.init);
$(document).ready(SelectLanguage.init);
It’s perfectly acceptable to set multiple handlers for $(document).ready, although you may have a good reason to do otherwise that I’m not aware of. You might be interested in knowing that $(handler) can be used as shorthand for $(document).ready(handler):
$(FlashMessenger.init);
$(SelectLanguage.init);
If you really want them in one call though, try this:
$(function() {
FlashMessenger.init();
SelectLanguage.init();
});
First off, there's no reason you have to combine them.
But if you want to:
$(document).ready(function(jq){
FlashMessenger.init(jq);
SelectLanguage.init(jq);
});
Breaking it down:
Create a function to do all your init (it can be named or anonymous; the one above is anonymous).
Have it call the other init functions, passing in the jQuery instance that jQuery passes you just in case they use it.
You might choose to wrap each init call in a try/catch block as well, so that errors in one init don't prevent the next init from occuring, but that depends on your needs.
Just combine them into one call with an anonymous function:
$(document).ready(function()
{
FlashMessenger.init();
SelectLanguage.init();
});
$(document).ready(function() {
FlashMessenger.init();
SelectLanguage.init();
});
Option 1
FlashMessenger = {
init: function() {
setTimeout(function() {
$(".flash").fadeOut("slow", function () {
$(".flash").remove();
});
}, 5000);
}
}
SelectLanguage = {
init: function() {
$('#selectLanguageId').change(function() {
$('#frmSelectLanguage').submit();
});
}
}
$(function(){
FlashMessenger.init();
SelectLanguage.init();
});
Option 2
FlashMessenger = {
init: function() {
setTimeout(function() {
$(".flash").fadeOut("slow", function () {
$(".flash").remove();
});
}, 5000);
}
}
SelectLanguage = {
init: function() {
$('#selectLanguageId').change(function() {
$('#frmSelectLanguage').submit();
});
}
}
$(document).ready(function(){
FlashMessenger.init();
SelectLanguage.init();
});
Option 3
You actually don't need those 2 objects since the only hold the init methods, so here's the ultimate solution, in my opinion, unless you use those objects elsewhere.
$(function(){
$('#selectLanguageId').change(function() {
$('#frmSelectLanguage').submit();
});
setTimeout(function() {
$(".flash").fadeOut("slow", function () {
$(".flash").remove();
});
}, 5000);
})
I prefer 2 and 3 for this reason.
I think what the op is saying is, "If in the future I have a third function to be invoked at document.ready, then how do I do it without touching that piece of code?"
If you do not want multiple $(document).ready() calls, you could just create an array called startupHooks and add each method to it:
startupHooks[ startupHooks.length ] = myNewStartupHook;
and your startup script could look like
$(document).ready(function() {
for( var i=0; i<startupHooks.length; i++ ) {
startupHooks[i]();
}
}
I know that is not mighty useful, but if that appeals to you, you can do it this way.
Personally, I'd go with multiple $(document).ready() calls.
Personally I'd go for not using document.ready at all.
If you place the scripts at the end of your html-page(just before the tag) you can just write in any way you like.
Maybe this doesn't work for 0.01% of the scripts but it never failed to work for me.
Positive effect of this is that the initial HTML+CSS rendering goes faster.
You can also read about it on yahoo. http://developer.yahoo.com/performance/rules.html#js_bottom