Weird behavior of template and google maps - html

I downloaded this template from themeforest: http://themeforest.net/item/-medic-medical-health-and-hospital-html5-theme/full_screen_preview/8331329
Move your mouse over navigation item "Contact" and you will see a google map. Remember position of the map. Then close contact item and move your mouse over position, where map was placed. Contact window should appear again, without opening it by clicking on Contact item. I am unsuccessfuly trying to repair this bug. Is there a way how to do it?

You can hide the maps when the menu is hidden and show it before it is showed, that will solve the bug. Do $('.map').hide() when the menu is hidden and $('.map').show() before the menu is showed

Related

How save "modification" that doesn't affect the link on a web page

On my university website, when I pull down the drop-down menu to display my schedule (which is quite long), the website shows my schedule, but the link doesn't change and when I refresh the page, I have to make to pull down the drop-down menu again if I want to display my schedule again.
Here's a simple example that I've found on google translate. When I click here ...
A menu is displaying without modifying the link
So when I click where my mouse is on the first picture, it displays a menu that doesn't affect the link, but when I refresh it disappears.
I think it's the same thing that on my university website. How can I manage it ?
Thank you !

Why HTML/CSS Dropdown Menu links not clicking thru on 1st click, only 2nd+ click works?

Strangely, all of the links in a HTML/CSS/JS dropdown menu (top right with parent menu items "Home" "Shop" "Create" as shown in example image), do not click-thru to their href= destinations on the 1st click. Clicking 1 time does nothing. Wait a few seconds to verify nothing happens, then click again - works browser follows the link to the destination on the 2nd click fine.
I am testing in Google Chrome.
This is the only menu or set of links having this issue in the entire site...
I've already right-clicked on them to inspect-element with the developer panel in Chrome, expecting to find some other element blocking it or something but it's not the case, the target seems clickable and the hover states work fine and everything.
View example here: http://www.PuckStyle.com
Thank you!
Update:
Here is a screenshot as requested-
(source: puckstyle.com)
I managed to find something using the Chrome dev tools checking for events.
If I remove that click event (1) then I can single click the link in the menu.
When I click the link to the script (2), the code block (3) is highlighted.
Looks like a script to double-tap. You could remove it from your site. Double-taping in your website is probably not needed.

Google Maps iframe - automatically make left locations menu visible on load

I have a div that slides down on click to reveal an iframe Google map. However, I would like the left locations side menu to automatically be visible when the map is loaded. I have tried a few things but no luck whatsoever.
Here is a screenshot to the map of mine. I have purposely hidden the locations for client privacy.
Is there a parameter that I can pass in the URL to make this happen or maybe a piece of jQuery that will make the menu pop out on map load?

how to stop webpage click events from like firefox/chrome developer console inspector tools?

Question #1:
I am working on a chrome extension where it requires an inspector like tool to let user hover on a webpage. And to show outline on hover on a DOM element.
When user clicks on any element, I need to show a popup besides the element.
But at the same time that elements click event must not execute. It is very similar to developer consoles inspector tool. Can you please help how to do this ?
Question #2:
Can you please suggest why Chrome developer console's inspector tool does not work in this case ?
To reproduce:
1. Go to https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjQ377A-8vQAhUHQY8KHUHxCv0QFggaMAA&url=https%3A%2F%2Fconsole.developers.google.com%2F&usg=AFQjCNF0eH059mv86nMIlRmfsf42kde-wA&bvm=bv.139782543,d.c2I
2. Click on "products & services" menu (3 horizontal lines icon) in left top. A slide menu will open.
3. Start developer console (click F12).
4. Select anything on this menu.
Actual result: Side menu closes.
Expected result: Side menu should not have closed and developer console should have shown its html.
I got a solution to this. I created a div (of size 4x4 px). I move
this div with the mouse move event. I set the div coordinates so
that mouse tip is exactly at the middle of the div.
Div background is kept transparent, so that it is not visible to
users. So when user clicks on element, he is actually clicking on
the div.
And inside the div mouse down event, I stop event propagation.
Please let me know if anyone reading need any more pointers.
You may have tried this already, but I'd suggest adding a click listener to any clickable items, by adding these lines:
$(document).click(function() {
event.stopPropagation();
event.preventDefault();
});
Though because of the way things bubble up in the DOM, events attached to children may still fire, depending on the browser.

popup when cursor moves on image

How to make a prog. for popup window when mouse cursor moves over a specific area of the image a liitle window (popup) should open. when another area of same image different popup should open.
Using an unordered list, a couple of images, and a little CSS, we can
create an accessible "image map" with pop-up tool tips that provide
our readers more information on the links the map contains.
http://csshowto.com/effects/css-image-maps-with-pop-up-tool-tips/