Show/Hide Menu on mouse out - javascript

We have menu which works on onclick/on mouse enter and on mouse leave. All of sudden after chrome got updated the menu is not working.
Especially windows XP/Chrome 40. Strangely not showing any errors is console. Please help us to get out of this.
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeft = document.getElementById('showLeft'),
navigationEdge = document.getElementById('navigationEdge'),
navigationMenu = document.getElementById('cbp-spmenu-s1'),
body = document.body;
$("#navigationEdge").mouseenter(function () {
classie.toggle(menuLeft, 'cbp-spmenu-open');
});
$("#cbp-spmenu-s1").mouseleave(function () {
classie.toggle(menuLeft, 'cbp-spmenu-open');
});
showLeft.onclick = function () {
classie.toggle(navigationEdge, 'active');
classie.toggle(this, 'active');
classie.toggle(menuLeft, 'cbp-spmenu-open');
};
Here is the JsFiddle.

Yes, it's a Chrome 40 bug. I reported it yesterday, some functions aren't working (even in Developer Tools, the Toggle Element State isn't working).
Only thing I can say is... let's wait :)
BTW, test your fiddle in Firefox, here in v35 it worked well.

Related

Double click in Ionic 3

I am trying to run out the (dbclick) event for Ionic3, but there is no way to make it run correctly ( it does nothing).
Is actually to somebody work this? Or Do we have to create it by ourselves with timeouts, etc...?
I've been searching for a while and it seems this option don't exist.
Thank you so much.
you can look here!
scrollmain(elementId, index) {
console.info('elementId', elementId)
var el = document.getElementById(elementId);
el.scrollIntoView({ behavior: "smooth" });
}

Scroll event won't fire what so ever

I have a (fairly simple) issue and I'm breaking my head over it.
The issue is pretty simple - scroll event won't fire (ever).
I'm writing this angular project, so I've tried the following:
angular.element($window).bind('scroll', ()=> {
console.log('scroll!');
if (!scope.scrollPosition) {
scope.scrollPosition = 0;
}
// Alerting for test cause wtf is going on
scope.boolChangeClass = this.pageYOffset > 600 ? alert(true) : alert(false);
scope.scrollPosition = this.pageYOffset;
scope.$apply();
}
);
but nothing happened. (assume $window is intact and that i'm using webpack etc.)
This example works great if I change the scroll to click. weird.
So I've tried vanilla~~!
window.addEventListener('scroll',function(){
console.log('test')
})
This attempt works on every other website except mine (gotta admit it's classic).
So - has anyone ever dealt with this and knows what's going on?
I assume that some other element is consuming this event at early stage thus not letting it bubble up. Yet this is just an assumption.'
Would love to understand this :)
=== EDIT ===
I've tried to see all the fired events using monitorEvents(window) (using Chrome) and I see every event that's being fire except the scroll..
Looks like it's the body element that is scrolling. Try adding the following code in the console.
document.body.addEventListener('scroll', function() {
console.log('test');
});

$window.onblur randomly stops working

I have it running fine on safari right now and not always working in chrome:
app.controller(.... function($window){
$window.focus();
$window.onfocus = function(){
$scope.inFocus = true;
};
$window.onblur = function (){
console.log("onblur");
$scope.inFocus = false;
};
});
The console.log is not always triggered. I was wondering if that was a bug or something I am doing wrong?
Update: I tried the solution given by #Gabe. It is still breaking sometimes, I am wondering if another action is interfering with it. It does look random though...
Update 2: I still don't know how it gets stuck, but I know how to get it unstuck:
I click on an input in the window to focus it.
I click outside of the input to unfocus.
I switch tab and back in. It works again.
Try using the API for angular.element instead
angular.element($window).bind('blur', function (){
console.log("onblur");
$scope.inFocus = false;
});
http://plnkr.co/edit/khYHeJlvn2uCzKeTjndM

setInterval not working in Opera

I am trying to make an element blink (by toggeling visibility of the element) but its not working in Opera for whatever reason. Works fine in Firefox and Chrome.
Here's a fiddle with a working sample: http://jsfiddle.net/UDWkK/2/
I don't think I have made any obvious errors.
Tested in Opera 12
Code:
var blinker;
function blink(elem) {
clearInterval(blinker);
blinker = setInterval(function() {
if ($(elem).css('visibility') === 'hidden'){
$(elem).css('visibility', 'visible');
} else {
$(elem).css('visibility', 'hidden');
}
}, 500);
}
As #nevermind noted in the comments above the problem is not with Opera. The problem is with the jsFiddle iframes. Note that jsFiddle is still in alpha stage. Hence there are bound to be some quirks. Hopefully the developers will fix it soon.
Nevertheless the code you provided doesn't really need jQuery, and setInterval works perfectly fine in Opera 12. For example this is what I did, and it blinks away nicely: http://jsfiddle.net/XwEhj/
I think you are in a corner buggy case.
When it's comes to user interface, it's not a good practice to rely on the state of the graphic objects to find out the state of the view. In other terms, you don't want to "read" the state of the view in the HTML elements, but rather in a variable or a set of variables called a view model.
I suggest that you rewrite your code this way, and I think there's a good chance to work around the bug:
var blinker;
function blink(elem) {
clearInterval(blinker);
var visible = false;
blinker = setInterval(function() {
visible = !visible;
$(elem).css('visibility', visible ? 'visible' : 'hidden');
}, 500);
}

Javascript Drag&Drop in Firefox

I implemented a Drag&Drop function for a website. Chrome works fine, IE9 does too (somehow), but Firefox refuses to accept my code someway.
I can click on the draggable object and Firefox fires the ondragstart event, but doesn't go any further. The draggable object does not show up and nothing is following my mouse movement. If I click another time on it, the same thing happens, so Javscript doesn't get killed.
This is my code:
self.allDraggables.on({
dragstart:self.startDragging,
dragend:self.stopDragging
});
self.allDroppables.on({
dragenter:self.enterDroppable,
dragover:self.overDroppable,
dragleave:self.leaveDroppable,
drop:self.dropped
});
this.startDragging = function () {
$('div.insidePopup span.close').trigger('click');
self.createWidget(this);
self.allDroppables.animate({opacity:self.options.light}, self.options.animation);
};
this.stopDragging = function () {
self.destroyWidget();
self.allDroppables.animate({opacity:self.options.unlight}, self.options.animation);
};
this.enterDroppable = function (event) {
event.preventDefault();
$(this).animate({opacity:1}, self.options.animation);
};
this.overDroppable = function (event) {
event.preventDefault();
};
this.leaveDroppable = function () {
$(this).animate({opacity:self.options.light}, self.options.animation);
};
self refers to the main this pointer and since in Chrome and IE9 everything works okay, it can't be something in the syntax, can it?
This is really a problem, I got a presentation on monday and need to fix this.
Any help would be much appreciated!
Edit: I'm using Firefox 11.

Categories

Resources