In my client's website, the navigation links are used for anchor scrolling and also for internal pages. When I click a link for an internal page, obviously the menu disappears once the new page is loaded. However, when I click a link for an anchor, it scrolls to the desired page section, but the menu won't toggle. It's confusing because it seems like nothing happened and the user can't see the content because the menu is hiding it.
How can I toggle the mobile menu after clicking a link for an anchor?
I've tried this approach, but nothing happened:
<script>
$('#menu-mobile-open a').click(function (e) {
$('#menu-mobile-open').collapse('toggle');
});
</script>
The website is: www.amgeventoss.com.br
Thank you!
i have just gone through you site and found this solution is working
jQuery(document).ready(function(){
jQuery('.menu-mobile .menu-link').on('click',function() {
jQuery('#menu-mobile-close').click();
});
});
just add this to your js and it should work like charm
Related
Important: Please read until the end !!!
Hey. I'm building a responsive single-page. There is a Bootstrap navbar on top with some anchor links.
What I look for: When it's in the mobile view with the "hamburger", and the user clicks on the hamburger so the anchors show up, and he clicks on one of the anchor links, it's scrolling great, but the menu does not close automatically. It stays open until you manually close it again by clicking on the hamburger.
I already found a solution, but it has a problem!
This code solved the problem great so far (function-wise), but has a visual bug:
$('.nav a').on('click', function(){$(".navbar-toggle").click() //bootstrap 3.x});
The Problem: It affects the site visually negative in non-mobile, desktop mode. All the words in the navbar like "About Me", "Contact" etc. disappear like wiped out, just for a half second, and then are back in. So everything works, but it's not looking nice. Is there a code fix to make this solve? I'm a total beginner, thats the problem in this case I dont know a lot about it yet and dont understand JS, just copied the code. Thanks in advance!!!
Try this:
JS
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
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.
I have a drop down menu on this development Wordpress site: http://zap2dev.redzephyr.biz/ the mobile menu appears to be working fine however upon pressing the mobile menu icon the menu displays and promptly the page begins reloading. Obviously on reload the mobile menu is collapsed again so begins the vicious cycle.
Any ideas what could be causing the page to reload?
Any help would be greatly appreciated.
Change <a class="navicon mtoggle" href=""> to <div class="navicon mtoggle">
then update your css
nav#mobile .navicon{
cursor:pointer;
}
Try making your toggle not a link and instead a div. Otherwise with javascript assign on click or touch to prevent.default which would cause the browser from trying to open the link which doesn't have an assigned href and reloads the page.
I had a complicated situation that involved a variety of sliders that just wouldn't work as tabbed content even though it was designed that way, on a one page wordpress site.
The site is here: http://carubba.brandconstructors.com/ and the "project" section is the issue.
So I made different wordpress page templates for each category. I used onlick=window.location to navigate through the so-called tabs. However, when you click through to the next tab, the page jumps to the very top for a brief second then back down. Is there a way to make this not happen and go straight to the anchor location? I tried adding return false, and javascript:void(0) and that didn't work either.
Here is the code for the links:
<ul class="projects-cat">
<li>Commercial</li>
<li>Marine</li>
<li>Institutional</li>
<li>Civil</li>
<li>Specialty</li>
<li>Residential</li>
</ul>
Any help would be awesome.
EDIT*
This is in the footer:
<script>
$(document).ready(function() {
$('.projects-cat li a').click(function(e) {
e.preventDefault();
});
});
</script>
No, the browser is always going to jump down as it renders the page and calculates how far down to move.
You should stay on the same page, and either load all content, and hide and show as needed, or load the content for each page via AJAX.
I am planing to use sliding panels as pages for this website.
Even tough I am a JS noob I managed to find and edit scripts until I got pretty much the perfect script
Problem is that the sliding panels are closing when clicked outside. I want then to close when another panel opens but not when somebody clicks outside the panel.
Also this will be an one page design except the portfolio. I a link to index.html with the portfolio panel open. Can I do that? To understand better what I mean please check this image.
Edit: Okay I will explain better.
This will be a one page design, since I will be using sliding panels for pages. However each gallery item will have it's own html page because I do not want the site to be slow.
So I need to link portfolioitem1.html to the index.html with the portfolio panel open just like in the image I posted
Here's a jsFiddle that solves the first part of the problem:
http://jsfiddle.net/aUHwA/1/
The thing that was causing the panels to collapse was the document.click() function you were using. I've moved everything into a $(document).ready() function, added some generic wrappers for the sliders and buttons, and used a generic click function that's shared across all three buttons.
The click function uses the data-rel property of the button that was clicked to decide what panel it should toggle. It also hides any panels that are already visible within the #content div.
To open the portfolio panel by default, you can add this immediately after the on('click') function:
$('#portfolio_button').click();
That will trigger the portfolio animation (see http://jsfiddle.net/aUHwA/3/). Alternatively:
$('#portfolio').slideToggle(0);
will open the portfolio panel instantly, without the sliding animation (see http://jsfiddle.net/aUHwA/2/).