Well, hopefully I can articulate this and get my point across. I've done some searches, but nothing really hits it.
The JSfiddle page: JS Fiddle Also, some of the CSS isn't going to be sized correct since that's not the right image.
But here's the Javascript code:
//mouse over
for(var i = 0; i<10; i++){
$("#client"+i).on("mouseover", function(){
$(this).removeClass("clientsOff").addClass("clientsOn");
for(var e = 0; e < 10; e++){
(function(){
$("#overlayC"+e).css({'display':'block'});
})();
};
});
};
//mouse leave
for(var i = 0; i<10; i++){
$("#client"+i).on("mouseleave", function(){
$(this).removeClass("clientsOn").addClass("clientsOff");
(function(){
for(var e = 0; e<10; e++){
$("#overlayC"+e).css({'display':'none'})
}})();
});
};
Ok, to the point. There are two hover activities going on here. One of them (that is working correctly) is just switching classes, with each hover, and doing them one at a time.
Now, the second is another hover effect, but instead of doing it one at a time all of them show up.
Now the simplest way to fix this is to just a hover for each id, but that will take forever/not very inefficient. Thus why I'm using a loop here. Now, I know it needs to have another closure, but it's not working correctly.
I've tried a few different ways of doing this, but either they throw the same result or just don't work at all.
And yes the starting loop could all be one, but for now it helps keep things separated so I can read things better
It looks like you are displaying all overlayCs on each mouse over
for(var i = 0; i<10; i++){
(function(i){
$("#client"+i).hover(function(){
$(this).removeClass("clientsOff").addClass("clientsOn");
$("#overlayC"+i).css({'display':'block'});
}, function(){
$(this).removeClass("clientsOn").addClass("clientsOff");
$("#overlayC"+i).css({'display':'none'})
});
})(i);
};
Demo: Fiddle
Here's you jsFiddle edited
$('[id*="client"]').each(function(){
$(this).hover(function(){
$(this).removeClass("clientsOff").addClass("clientsOn")
.find('[id*="overlayC"]').eq(0).css({display:'block'});
},function(){
$(this).removeClass("clientsOn").addClass("clientsOff")
.find('[id*="overlayC"]').eq(0).css({display:'none'});
})
});
if your code is in the head do a $(function(){//code});
Your CSS still looks creepy, but however, in order to stop the entire parenting tree's mouseover events to fire, edit line 3 and 4 like below:
... function(elem){
if (elem.target!=this) {return false;}
...
Related
I've got a container that includes several icons the user can hover over and be shown a block of text next to it. I'm grabbing the blocks of text from an array and have a randomize function so that they're always shown a different block of text when revisiting the page.
I ran into an issue where every time you hover over an icon, it keeps adding more array elements, because the function gets called each time you hover over the icon. So I decided to use the one() method so the function only runs once, however that's where my real issue is. Using the one() method doesn't show ANY text, and I'm pretty sure it's due to the nested function I have.
You can test this out here: http://www.evanvolmering.com/bootstrap/docs/examples/carousel/eyeswideshut.html
In the banner a video will play, and shortly into it a little icon will appear in the bottom of left of the banner. Hovering over it will show some text. When you hover over it again it adds another array item, and so on. It works, but I don't want it to keep adding array items.
10 seconds later another icon will appear to the top right, which currently has the one() method applied to it. As you can see nothing happens when you hover over it. Not sure where to go from here.
My randomize code (which I got from another StackOverflow answer):
var numRandoms = 14;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = 0; i < numRandoms; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
My code which currently 'works' but keeps adding more array items on hover:
$('img.button1').hover(function(){
$('p.trivia1').fadeIn("slow");
$( 'p.trivia1' ).append(makeUniqueRandom());
},
function(){
$("p.trivia1").stop().fadeOut("slow");
});
My code that uses one() but doesn't do anything on hover:
$('img.button2').one("hover",function(){
$('p.trivia2').fadeIn("slow");
$( 'p.trivia2' ).append(makeUniqueRandom());
},
function(){
$("p.trivia2").stop().fadeOut("slow");
});
Use mouseenter/mouseleave instead of hover
$('img.button1').on('mouseenter',function(){
$('p.trivia1').fadeIn("slow");
$( 'p.trivia1' ).append(makeUniqueRandom());
}).on('mouseleave',function(){
$("p.trivia1").stop().fadeOut("slow");
});
My goal: fade in a div with text, after n seconds fade out. Do this again with 4 another divs, without interfere the div before (like showing up when the div before is still on screen) with consistent distances.
Here you can what I want to accomplish: https://www.youtube.com/watch?v=2PsCgs8rVHE (only the first moments).
Probably I am thinking too complicated.
I tried this for some time (hours, eh) now and tried thousand things. Here is my current code:
$('.quote').each(function(divID){
fadeContent(divID);
});
function fadeContent(childID)
{
$('.quote:nth-child('+childID+')').fadeIn(1000).delay(8000*childID).fadeOut(1000);
}
Before that I create the divs from array (works fine)
for(var i = 0; i < quotes.length; i++){
var quote_container = $('<div>').addClass('quote').append(quotes[i]).css('display', 'none');
$('.quotes').append(quote_container);
}
Appreciate your help a lot.
I had to code this: https://jsfiddle.net/dmpk42vd/
Here's an example of how you might go about it with jQuery:
$(".txt1").fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt2").delay(6000).fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt3").delay(12000).fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt4").delay(18000).fadeIn("slow").delay(4000).fadeOut("slow");
$(".txt5").delay(24000).fadeIn("slow").delay(4000).fadeOut("slow");
EDIT: Added more or less delay depending on text length and made the entire thing work with one class. See comments and answers below for OPs.
I also made this a little bit more like Zelda :)
https://jsfiddle.net/dmpk42vd/2/
var delay = 0;
$('.txt').each(function (index) {
$('.txt').eq(index).delay(delay).fadeIn("slow").delay($(this).text().length * 30).fadeOut("slow");
delay += 6000;
});
Here is a slightly more dynamic way, wouldn't require adding additional CSS classes or Jquery
var delay = 0;
$('.quote').each(function (index) {
$('.quote').eq(index).delay(delay).fadeIn("slow").delay(4000).fadeOut("slow");
delay += 6000;
});
https://jsfiddle.net/80w1hnqh/
We are using jQuery and Javascript to build a CV/resume from data. To help with the page breaks with these tables we are utilizing a jQuery plugin called Columnizer. It works pretty well, but we still have the occasional header that doesn't render properly at the end of a page.
Rather than try to fix the plugin, we really just need to hide the "empty" table which is really just a couple of header rows. It's proving difficult. Either I am not detecting the rows that need to be removed or the order of operations is off. It seems to me that it would be easiest to remove these rows as the very last operation. That doesn't seem to be happening though.
Here is the script we trying. It's at the very bottom of the HTML page.
<script>
$(document).load(function () {
var x = document.getElementsByTagName("table");
//alert(x.length);
//alert(x[0]);
for (var i = 0; i < x.length; i++) {
alert(x[i].innerHTML);
try {
var childBody = x[i].getElementsByTagName("tbody");
//alert(childBody[0].innerHTML);
var childRows = childBody[0].getElementsByTagName("tr");
} catch (e) {
//alert("no child rows");
x[i].className = "hidden";
//$(x[i]).removeClass().addClass("hidden");
}
}
});
</script>
I appreciate your help. If you need more info, please let me know. I am a novice at this!
This can be solved with :not(:has(*)) and .closest:
$('tbody:not(:has(*))').closest('table').hide();
DEMO
I am trying to make a auto expanding div on a website I am designing, but it does not seem t work on the page (while working fine on jsfiddle.net)
Script: http://jsfiddle.net/tJugd/1057/
var lol;
lol = 0;
$('#question').click(function(){
if (lol==0){
$('#question').animate({height:'300'});
lol = 1;
}else{
$('#question').animate({height:'0'});
lol = 0;
}
})
And here is the page I am trying to implemet it on: http://www.trulyscience.com/test/index.html (the red "questions" thing on the sie)
I really don't know what I am doing wrong, I've checked many related threads, and most of the worked but also only on Jsfiddle and not my page.
Can anyone please help?
You can use the trigger method to do this, calling it after declaring the event click on the "#question":
function loadQuestion(){
var lol;
lol = 0;
$('#question').click(function(){
if (lol==0){
$('#question').animate({height:'300'});
lol = 1;
}else{
$('#question').animate({height:'0'});
lol = 0;
}
});
$('#question').trigger('click'); // Simulating click
}
$(document).ready(function(){
loadQuestion();
});
http://jsfiddle.net/tJugd/1058/
You use two time the id question in the same html document, this may cause the issue. If you want to use the same name for elements use class instead id.
Also try to wrap your code with $(document).ready(function(){ /*your code*/ });
Well, for starters, on your website, $ is not jQuery. It's a shortcut for document.getElementById.
I ran this code in the console after the page loaded, and the animation worked fine:
var lol = 0;
jQuery('#question').click(function (){
if (lol === 0){
jQuery('#question').animate({height:'300'});
lol = 1;
}else{
jQuery('#question').animate({height:'20'});
lol = 0;
}
});
I need help with changing a function that is called once the page loads, and anytime afterwards when the user clicks on a certain div with an ID. So far I have this:
window.onload=function() {
//Do your stuff, JS!
}
Yes, I barely know any JS...
EDIT: I will include my JS function (I didn't make it myself, obviously another nice and smarter person did :P)
function() {
var maxHeight = 0;
//get the column containers
var colsA = document.getElementById("Content").childNodes;
//get the height of the tallest column
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
}
//set all the column containers heights to maxHeight
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
}
}
What it does: I have a div container that houses x number of column divs. These columns vary at height due to content. This function makes all the divs heights the same.
When my page loads, this code runs flawlessly. However afterwards, it doesn't. I have some collapsible divs that house extra information, when a user clicks it will push the height further. This is why I thought of an onclick for that id... unfortunately the id is dynamically generated by php.
You can define a function separately and then bind it to multiple event handlers:
function myHandler(){...}
window.onload = myHandler;
myElement.onclick= myHandler;
...
This should fix it:
function f() {
// do your stuff
}
window.onload = f;
document.getElementById("myButton").onclick = f;
Another way:
window.onload=function() {
//Do your stuff, JS!
}
yourElement.onclick = window.onload;
In the end it does not matter how you do it. Functions are first class objects, so you just need to have a reference to the function.
To learn more about JavaScript, have a look at the MDC JavaScript Guide.