Showing a slide out menu across tabs - javascript

I've got this requirement where we have to have slide out menu for our app (left or right). However, I was querying if it would be possible to show the same slide out menu across tabs of the browser.
For example, when I load my app on "tab1", it loads the menu. Now, I opened another tab, "tab2", from the application (a link or button). Is it possible to show that same menu on the page that opened in "tab2", given that the page opened in "tab2" can be originating from anywhere on the Internet, i.e., I cannot code that page in "tab2".
I did some search over google and here but this particular issue is not queried anywhere. It would be awesome if you can tell about any possibility and then I can try to do some POC around it.
Regards,
Ankur

Related

Prevent scrolling to bottom of page when using hash URL only in Firefox

I have a parallax website, in which all different sections are accessible via anchor tags in navigation. It works fine when I am on the home page, but when I am trying to access these sections from an external page navigation(thankyou page down below), I land on the appropriate section momentarily but then the page scrolls to the bottom. I have tried a few things, but I cannot exactly pinpoint what's causing it, or how to prevent it from happening.
Home page with sections- http://www.gwcconferences.com/
Navigation via hamburger menu on top-right of header here-
http://www.gwcconferences.com/thankyou.html
Also, it works fine for the first item in navigation- "Meetings"
I'm afraid I don't think there's a way around this - the page renders as it is is loaded, so until the anchor you want has been rendered, the browser will show the top of the page, then it will zoom down.

Bootstrap Umbraco menu Dropdown click

I work for a site which has a site which is built upon Umbraco and utilizes bootstrap and Jquery.
We have a top navigation menu which has pages and sub-pages. When you hover over a navigation menu it opens up the sub-menu and lets you go to them.
When this menu is viewed on a mobile device it becomes a hamburger and when you click on it it drop-down and the main tabs are shown. Here when you click on the main tab it shows the sub-menu quickly but then goes to the main tab instead of allowing you to click on the sub-menu.
The problem is that this is a large site which is about to launch so that there is no easy way to find what links to what. What is a elegant way to fix this?
I cannot provide the link due to the fact that it is a company.
Thank you!
You could try using this bit of JS (requires jQuery):
$(".dropdown").on('click', function (e) {
e.preventDefault();
});
Or you could change your menu partial to just not put the URL in for menu items that have a dropdown and instead put a # in its place.

Extension bar always visible

I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]

Wordpress top navigation menu links inactive

I'm using a theme called Ironbull and when wordpress generates a menu the custom links are inactive. They are shown and when I hover the links the URL shows, but it wont load the link or open a new window.
There are a few "scroll to ID" links which works on the frontpage, but thats it. If I right-click on the link and press open in new window it loads.
I'm working on this site localy so please tell me if you need me to post any part of the code.
Many thanks

tap working throught layer bootstrap iphone

I need help regarding mobile website on iPhone. I have implemented slide panel jquery plugin with bootstrap. The left-slide panel contains category links, positioned absolutely below the homepage. When I click the navigation button to open the slide-panel opens but the link below in slide-panel also get triggered. As a result page redirects to link after opening the slide-panel. Seeking for help...
Thanks

Categories

Resources