Edit: Example - http://jsfiddle.net/JWx7z/9/
I'm using a lightbox plugin https://github.com/premasagar/nitelite and I'm hacking it a bit to get it to behave how I want.
The lightbox is made up of two elements: the overlay (dark slightly transparent window), and the content containing window.
Normally when a lightbox is closed the overlay is faded out and removed. When opening a lightbox it is added and faded in.
However when traversing from lightbox to another lightbox this makes the transition undesirable. I have hacked it so the old overlay remains, and the new overlay is aborted if we are going between 2 lightboxes, so it is just the content window that changes.
This means of course the overlay is a seperate instance of the lightbox to the current content window. Which in turn means when I try and close the lightbox by clicking on the overlay, only the overlay is removed - leaving the content window still on my page.
...
$(this.overlay)
.bind('add', function() {
this.node
.one('click', function(){
lb.close();
});
});
Note: Each instance of the lightbox is called lb.
I can remove this window by adding an artificial click to the close button:
$('#lightbox p.close a').click();
but this has reprecussions later as some remnants of lb still exist - for example if I want to open a new lightbox it thinks a lightbox already exists and we're moving between the two, so doesn't add an overlay as it thinks there is already one there.
How can I work it so all instances of lb are closed when clicking on the overlay?
Thanks
Edit: Code for aborting addition of overlay if coming from a lightbox
...
open: function(contents, transition){
var lb = this;
if (transition !== 0) {
this.overlay.add();
}
...
You can change your overlay click function to fadeOut the .nitelite-lightbox-container as well on close:
$(this.overlay)
.bind('add', function(){
this.node
.one('click', function(){
...
$(this).next('.nitelite-lightbox-container').fadeOut();
lb.close();
});
});
See fiddle.
It alerts "lb already exists" when you reopen the lightbox, however it still behaves correctly.
Related
On our Magento Website we have a mega-menu which appears when the mouse hovers over a parent li element in the menu.
However, if you hover over the menu immediately as the page loads, the mega menu does not appear properly.
It's much worse if the user has a poor internet connection.
After checking the chrome inspector I see this is because the class over is not added to the parent li. If you wait a second or two and move the mouse out & back over the parent li element the over class is added and the display css property of the mega menu is changed to block.
I've found the javascript adding the over class, it's part of the theme that we are using script.js.
// CODE OMMITED FOR BREVITY
jQuery(window).load(function() {
// CODE OMMITED FOR BREVITY
if(jQuery('#nav-wide').length){
jQuery('#nav-wide li.level-top').mouseenter(function(){
jQuery(this).addClass('over');
if(mobileDevice == true){
document.addEventListener('touchstart', wideMenuListener, false);
}
});
jQuery('#nav-wide li.level-top').mouseleave(function(){
jQuery(this).removeClass('over');
});
// CODE OMMITED FOR BREVITY
}
// CODE OMMITED FOR BREVITY
});
Any idea why this javascript would take so long to load? Or how I could improve it?
I think I've figured this out.
The theme is adding the over class within the jQuery(window).load(function(){}); which loads when everything on the page has loaded i.e. when all images, objects & frames have loaded. And we are using facebook widget (frame) on most pages.
The jQuery(document).ready(function(){}); function loads when just the HTML Document is ready, which would be much sooner, almost a second in our case.
So I simply moved theme's mouseover event listener within to the jQuery(document).ready() function
I am Playing around with
http://codepen.io/ettrics/pen/Jdjdzp
But because of the
var closers = $qsa('.modal__close'); // an element used to close the modal
If you put a link inside the container it wont work with left click but does with right click -> open link in new tab.
Is there anyway to keep the close element but also make it so links work?
We have a baffling issue whereby when we try to open a modal dialog box from a parent page it opens with 2 vertical scrollbars next to each other. One controls the modal box, the other one controls the main page behind it.
To have 2 scrollbars is not ideal and have tried to implement a solution for this.
We added some javascript in the dialog box page which would set the style to overflow:hidden when the modal dialog is open.
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
and used....
<body onload="myOnLoad()">
This works and effectively removes the scrollbar in the page behind it (i.e it does what it should) however we also want to set the overflow back to ‘auto’ when the modal dialog is closed…
We have done this by adding this code..
<script type="text/javascript">
// close Modal
$("#close").click(function () {
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
However this does not seem to work as the modal dialog closes but the scrollbar is still hidden on the main page.
Can anyone tell me what I might be doing wrong here? I have tried different overflow properties but nothing seems to work
Ok try this, I think your page is reloading on click and thus executing your onload:
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
I think that using window.parent might be the problem since this refers to the parent of the iframe wich is gone. or something like that. just use jquery
you can try by just getting the body directly $("body"), asuming you are getting that click function to fire.
edit: i see this has been mentioned above
Add style to body as
body
{
padding-right:0px !important;
overflow-y:hidden !important;
}
So I have a website using the fancybox plug-in (http://fancybox.net/). I want the text inside of fancybox to be printable, so I wrote a function that sets everything but the elements in fancybox to have a display:none. Here's my function:
var everything = [];
var hideEreythang = function () {
var everything = document.querySelectorAll(':not(.fancybox-opened):not(body):not(html):not(#shervani)');
var i = 0;
while (everything) {
everything[i].style.display = "none";
i++;
}
}
Problem is, once you close fancybox everything is still set to display:none. Is there an event handler I can use that will be triggered by the close of fancybox (either by clicking the x button or clicking outside the box), so I can reset everything back to normal? I'm still pretty new at js; I know fancybox has something that does that (since it's how theirs works) so I went through their source but had no idea what to look for. It seems pretty complicated. Is there a way I could manage to do this?
Thanks a million.
By the way, I'm using an onClick to run this function (the same link they click to open the fancybox)
EDIT: I think I'm just going to have it load two stylesheets, once for when they click on fancybox and (the normal one) when they close fancybox. How (and where) do I put my onClose to get it to work?
In order to do something when fancybox was closed you can use onClosed event
onClosed: Will be called once FancyBox is closed
Sample
$("#tip5").fancybox({
'onClosed': function() {
// your logic
}
});
I am using this sliding top panel using mootools (for orientation, the code is basically the same).
I want it to appear when the page is loaded, means, index.html is loaded.
I achieved this simply by adding the corresponding JavaScript to index.html:
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
(Of course this is also the top-panel itself)
When you click a link in this top panel, a new page will be loaded into a specified div, and then, the top panel should be hidden.
I think you can do this by adding
var mySlide = new Fx.Slide('top-panel').hide();
or
mySlide.hide();
in some JavaScript. I think it should execute, when the ahah.js-javascript is done loading the content into the div, I tried adding both the JavaScript quoted above and the two variations of mySlide.hide() in ahah.js. (into ahahDone(), after the last getElementById).
Using this setup, I get the following rendering. (This is after clicking the corresponding link which loads content from an html-file into a div and clicking on the "More (mehr)" link on top of the page which should slide down the top panel.) But only the button which is visible always (sub-panel) slides down and is visible, the actual panel content does not show up.
Any ideas? It would be great, if you could leave an answer with a short explanation.
This looks like a scoping problem. You declare mySlide inside an anonymous function, and its scope will be limited to that function. Later, when $('toggle') is clicked, the event that is fired is outside the scope of that function so it does not have access to mySlide.
A quick fix (if you don't mind using globals) could be declaring var mySlide=null in the main javascript so that you have a closure, and then change your current var mySlide=new Fx.Slide(...) to just mySlide=new Fx.Slide(..)
(or it could be something else entirely...)