I am struggling with onmouseover and onmouseout.
Every site I have been to shows this syntax almost exactly. I practically copied pasted it from Mozilla. The problem I’m having is that it calls the largeDiv and smallDiv functions immediately. (Eventually, I am hoping to apply a new class to the div when during the mouseover event, and return to the old class when mouseout.) I am pretty sure that my mouse events are to blame. I was also wondering if my onload function caused any problems, but when I commented it out, the only thing that changed was the small div did not load, as expected.
I tried to use an event listener, thinking I wasn’t calling the event properly, but that did not work at all, although I am not sure I coded it properly, and didn’t spend more than an hour on the damn thing! I have tried numerous tweaks, camelcasing onmouseover, using parenthesis, etc… Anyway, here is the code:
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();
I coded this in my browser and when I copied it to jsFiddle to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on CodePen and it worked as I have described. Not sure what caused this but this is the second time this has happened.
By the way, if you go to CodePen or jsFiddle, I know my design skills are lacking. I am just doing this for a playground, and for a place to keep code that works, like a notebook. I promise you it will get much much worse.
As always, any help is appreciated.
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions
Please go to following fiddle i have made some small changes and its working fine for me
fiddle
Also You could have used
<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
Mouse over this text
</div>
See working example here fiddle 2
Related
I was working on some code I wrote and I had this problem where an eventListener I added to a dynamically created element, but it does not "fire" aka work.
var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
...
eleButtonContainer.appendChild(eleButton);
And the eventlistener was a basic "click"
eleButton.addEventListener("click", function() {
console.log("Hello World");
});
That did not work, so i searched around and could not find any answers. I finally found a work around of using document and checking whether or not that element was check or not. So my resulting code became this:
var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
eleButton.id = "usrResponseSubmit";
console.log(eleButton);
document.body.addEventListener('click',function(){
if(event.target.id == "usrResponseSubmit"){
console.log("ok now it works");
}
});
This works fine, but it still makes me question about the code atop. I willing to take the "if it werks it works" route, but I would also still like to use the eleButton.addEventListener route because that was what I always used.
So my two questions are:
is using document.addEventListener bad?
why does eleButton.addEventListner not work?
Before you say, but it works on my end, my code is kinda crap and long. Essentially, I have this eleButton nested in a container that is nested in a container ... (x~10-20). I don't think this is necessarily the problem. But I also have some other eventListeners that "may" overlay with eleButton. I'm not too sure that's the case as i've been trying and testing everything I can.
I have also pulled the eleButton and appended it to an existing object and the event did fire. Can someone give me a run down of when events do not fire?
Nothing is wrong with your code, maybe you just misspelled something. here i made a codepen example you can check.
html:
<div id="btnCon"></div>
...
JS:
const eleButtonContainer = document.querySelector('#btnCon')
var eleButton = document.createElement("button");
eleButton.innerText="Post";
eleButton.type="submit";
eleButtonContainer.appendChild(eleButton);
eleButton.addEventListener("click", function() {
console.log("Hello World");
});
the example on codepen
Plugin I'm working with: 3D Gallery (Source code here)
I can get this gallery to work with no issue, but I'm having trouble extending the functionality to include a play and pause button. I've set up a fiddle with how I'm currently getting the slideshow up and running.
I believe the bit that matters is here:
_startSlideshow: function() {
var _self = this;
this.slideshow = setTimeout(function() {
_self._navigate('next');
if (_self.options.autoplay) {
_self._startSlideshow();
}
}, this.options.interval);
}
From what I gather, all I need to do is update the gallery object's autoplay property so that the next time it hits the start slideshow function, it just pauses instead. The problem I'm having is I have no idea how to access that once I've started the slideshow up. Just to have a little more control over things, I've even pulled out the javascript from the fiddle and entered it into the Chrome console to run it there so I can see all the worky bits, still can't seem to update it. One last note, it seems the only public function in there is destroy, which I'm also not able to call on my object after starting the slideshow. If I could get that working, I'd absolutely have just written a setAutoplay(bool) function.
I assume this is just some sort of scope issue mixed with my novice understanding of syntax, but I'd sure appreciate some help.
-- Here's an updated fiddle that includes some of the ways I'm trying to access/update the autoplay stuff, none working. Also showed the destroy function doing nooothing. https://jsfiddle.net/wzrooqof/2/
I've took a look at the library's code. You can do it without needing to change its code. It is exposed, so you can temper with it and leave the source code as is.
In your JS code add this before using it:
$.Gallery.prototype.pause = function() {
clearTimeout(this.slideshow);
this.options.autoplay = false;
}
$.Gallery.prototype.resume = function() {
this.options.autoplay = true;
this._startSlideshow();
}
Then you can pause/resume a slide show like this:
var slideshow = $('#dg-container').gallery({autoplay: true});
slideshow.data("gallery").pause();
slideshow.data("gallery").resume();
JSFiddle example.
I can't figure out how to get it to work. The documentation seems a little sparser than last time and doesn't include examples. Any help would be appreciated.
http://foundation.zurb.com/sites/docs/equalizer.html#applyheight
$('.tabs').on('change.zf.tabs', function() {
// Trying to trigger equalizer to equalize
console.log('test'); // This is working
});
Update - I think this might be closer, but it's still not working
var elem = new Foundation.Equalizer($('.parent-row'));
$('.tabs').on('change.zf.tabs', function() {
elem.applyHeight();
});
Does your content equalize if your browser is resized? If so, you can try to force it on tab selection by adding Foundation.reInit('equalizer'); in your change.zf.tabs event handler.
Please note: I'm experiencing similar issues and found this to work..but it may not be the most optimal.
I'm using Jquery Mobile, and my touch events are being triggered twice. At first I thought it might be an overlap between mouse events and touch events, but I tried to unbind mouse events on tablets/smartphones and the events are still being triggered twice.
Here is my code
//Tablet Features
var eventType = {
swipeleft: '-=100',
swiperight: '+=100'
}
$('#navMenu').bind('swipeleft swiperight',
function(e) {
$('#prbBtnHolder').animate({left:eventType[e.type]});
//alert(e.type);
}
);
//Device Detection
(function () {
var agent = navigator.userAgent.toLowerCase();
var isDevice = agent.match(/android/i);
if (isDevice == 'android') {
//alert(isDevice);
$('*').unbind('mousedown').unbind('mouseout').unbind('mousemove').unbind('mouseup');
}
})();
I've been trying to figure this out for a while, please help if you have any ideas.
UPDATE
I managed to solve the problem locally by placing the touch handlers outside the .ready() method. However, when i run the page on the server, the double trigger happens again. Now I'm completely stumped. Why are two identical pages (literally identical) behaving differently locally and on the server?
I had the same problem and fixed it with a little tweak around... I don't recommend this for the exact solution but my take you out of the problem fast.
I define a global Flag
var bDidPan=true;
and inside the trigger wrote the following:
if (bDidPan) {
bDidPan = false; // IT'S IMPORTANT TO PUT THIS FIRST
//code to execute when triggers
}
else
{
bDidPan = true;
}
and that did the trick. You can do the trick with numbers (It worked better with numbers for me!)
Hope it helps!
This sounds like you're putting your scripts into the <body> tag. If you do that, they'll get run twice. I've had this very same thing happen and went a little balder for the trouble and frustration. Make sure all your scripts are inside the <head> tag.
I'm running into a little problem that's driving me crazy, and I'd welcome any thoughts as to the cause. At this point I feel like I'm just going 'round in circles.
I have the following code:
function JSsortTable(phase) {
dynaLoadingDivShow();
createSortArray();
dataArr = do2DArraySort(dataArr, orderList, orderDir);
sortArrayToRs();
dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
dynaLoadingDivHide();
}
function dynaLoadingDivShow() {
document.getElementById('dynaReportGuiWorking').style.display = 'block';
document.getElementById('dynaReportGuiWorking').style.visibility = 'visible';
}
function dynaLoadingDivHide() {
document.getElementById('dynaReportGuiWorking').style.display = 'none';
document.getElementById('dynaReportGuiWorking').style.visibility = 'hidden';
}
<div style="visibility:hidden; display:none; z-index:25;" class="tableControlHeader" id="dynaReportGuiWorking">
Working...
</div>
I call JSsortTable as an onclick event. When I run the above code as is, I never see the div in question. The JSsortTable function takes some 800-2500 ms to run so it's highly unlikely I just missed it the 10+ times I tried. If I change the style of the div to start out visible, then it will remain visible until after JSsortTable has finished running and then disappear; exactly as expected. So I figured the problem was in dynaLoadingDivShow.
Now, I tried removing dynaLoadingDivHide to see what would happen and found something completely unexpected. The div will not appear when you the JSsortTable function fires. Instead, after all the other code has been run, when JSsortTable finishes, the div becomes visible. It's alomst as though IE (version 8) is saving up all the changes to the DOM and then waiting until the end to paint them. This is, obviously, not the desired behavior.
Anyone have any thoughts on this? I'm only allowed to have IE at work so I haven't tried this on other browsers. I have enough CSS/JS knowledge to be dangerous, but am by no means an expert yet. ;)
Thanks!
You'll need to use a timeout:
function JSsortTable() {
dynaLoadingDivShow();
setTimeout(JSortTableWork);
}
function JSortTableWork()
createSortArray();
dataArr = do2DArraySort(dataArr, orderList, orderDir);
sortArrayToRs();
dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
dynaLoadingDivHide();
}
Note that I took out the parameter phase because it's not used in the function. If you do need the parameter then you'll need to modify the timeout as
setTimeout(function(){JSortTableWork(phase);});
and also add the parameter to JSortTableWork