I am making use of the Lavalamp plugin from http://nixboxdesigns.com/projects/jquery-lavalamp/ and everything seems to be working fine except that there is a little quirk when using the back button.
For example:
If you are starting off from the home page, the hover is underneath the home menu.
Click on a new menu item, the hover appears underneath it
Click on the browser's back button, and the hover does not return to the home menu item, it stays at the previously clicked one.
I need to find a way to call the Lavalamp function when the back button is being triggered.
Hope to get some help here
It sounds like the OnBeforeUnload event is what you are looking for.
Related
I have a wordpress site and i used a template to do it. So when i'm on mobile it has a mobile menu i managed to make it fixed to stay at the top when i scroll down, but the problem is. When i'm on a certain place at the site and i wanna open the menu with the "three line" icon it's opening the menu but takes me to the top of the page as well. And when i wanna close the menu with the X button it takes me to the top of the page as well, so basically the menu is unusable. I know it's a Jquery problem, but i can't find which file contain the codes for it and even how to fix it.
My website is: www.autoberles-szombathely.hu
So i wanna make the open menu button and close menu button to only open and close the menu and don't take me to the top of the page.
you can use:
$(selector).click(function(event) {
event.preventDefault();
//other stuff you might want to do on event
});
For the record you should not remove the href entirely, it should always exist to prevent unexpected behavior. If you don't want the href to be be acted on then just use that preventDefault() method, easy and keeps everything running smoothly.
Your menu has the following structure in a mobile viewport:
<i class="fa fa-bars"></i>
The # will cause the page to jump to the top, see here for a detailed answer why.
You have two possibilies to prevent this behavoir:
Add an event handler to this link and use event.preventDefault()
For jQuery
$('.menu-toggle').on('click', function(event){
event.preventDefault();
});
VanillaJs
document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
event.preventDefault()
});
Remove the attribute href completly (See here). When using this solution you have to use a css-reset or add e.g. cursor:pointer to these links again, because the standard browser css is not applied anymore.
I have a specific page that I want full screen, so I hide the top bar and have a custom back button that calls ionicNavBarDelegate.back(), it does nothing. I even tried to call the parent controllers ionicNavBarDelegate.back() with an event, with no success. I can make it go back using javascript but then the history gets all messed up. It's basically trying to have back button on pages with out a top menu. Any idea? Thanks
I've hit a problem I can seem to find a way around.
Essentially, I have a button with the "addthis_button" class, hovering over the button displays the AddThis box. Works perfectly :)
However I need to turn this on and off based on the users other actions around the page, is it possible to turn the AddThis hover event on and off as and when I need to?
For example, I have a button that says "Share" at the top of my page. Rolling over it displays AddThis. I then go and click a few things on the page. The share button has greyed out nicely but when I roll over it I still get AddThis.
I've tried re initializing AddThis completely but to no avail.
Thank you for any help you can give.
Edit: jsFiddle link hjsfiddle.net/49Pgf/
I think this should work to disable AddThis from showing the menu on hover:
addthis.button('.addthis_button', {ui_click:true}, {});
This requires an actual click on your link to show the menu. And then of course, you can re-enable it by calling the opposite:
addthis.button('.addthis_button', {ui_click:false}, {});
Hope this works for you.
To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html
I'm working on a website where I'm using Javascript (via JQuery) to add pop-up boxes containing extra information for items in a list. I'm using JQuery's mouseeneter and mouseleave events to make the popups appear and disappear which of course all works fine in desktop browsers.
In Mobile Safari the popup appears when I click an item (which is what I expect and what I want to happen) and I have added an ontouchstart which triggers the mouseleave JQuery event thus hiding any visible pop-up when the user does anything else. This works fine too except that when a user taps an item the pop-up of which they've just looked at and cancelled (either by scrolling or by doing anything else that triggers the ontouchstart event), rather than it showing the pop-up again it activates the link attached to that item.
If a user were to tap another item instead of tapping the same item again then that new item's pop-up would show and then if they were to tap the first item again then that item's pop-up would show. Again, this is both expected and what I want to happen.
It would seem that once an item with a hover event has been tapped and Mobile Safari as been forced to make that event happen, that item is then flagged as having had its hover event triggered and so the next tap doesn't have to pretend to be a hover, it can be a normal click. Tapping another item with a hover event seems to "reset" the flag set for the previous item.
I'd like to be able to 'reset' this flag for myself so that, rather than how things work currently where clicking an item shows the pop-up and the next click on that item, even if the pop-up has been closed, will activate the link, instead when I close the pop-up with my ontouchstart, and so to my mind the item is no longer being "hovered over", a second click on that same item should show the pop-up again and then only by clicking on the item whilst the pop-up is visible should the link activate.
The secret would seem to be in getting Mobile Safari to exit its "pseudo-hover" mode when I use ontouchstart to trigger mouseleave but I have been unable to find anything useful anywhere on exactly what's going on when Mobile Safari pretends to hover over anything and whether any of this is accessible via Javascript events.
I know I could write a version of my pop-up code to work specifically for Mobile Safari but it seems much more efficient to me to get the browser to do most of the hard work of mimicking hover events. If only I could get this final little niggle sorted out.
I'm guessing the hover state is tied into which element has focus rather than as a flag. One tap gives focus, second tap activates the link.
Try closing the pop-up by giving another element focus, and see if that works out any better.
$('body').focus();
tl;dr but try this:
# :hover fix
# e.g.: body:not(.stoppedhovering) .styled:hover
hoverFix = ->
window.clearTimeout hoverFix.delay if hoverFix.delay?
$('body').removeClass 'stoppedhovering'
delayed = -> $('body').addClass 'stoppedhovering'
hoverFix.delay = _.delay delayed, 600
$('*').live 'touchstart', hoverFix