Search the Community

Right now I have a mobile dropdown that works fine. The only issue I have is that when viewing it on my smartphone, the dropdown gets cut off at the bottom and I am unable to scroll it down to rest of it. Is there a way to fix it so that It's scrollable? Here's my js code of the dropdown. $(document).ready(function() { $(".nav-mobile li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent-arrow"); } }) $(".toggle-mobile-menu").click(function(e) { e.preventDefault(); $(this).toggleClass("active-mobile"); $(".nav-mobile").toggle(); }); adjustMenu(); }); $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { var ww = document.body.clientWidth; if (ww <= 850) { $(".toggle-mobile-menu").css("display", "block"); if (!$(".toggle-mobile-menu").hasClass("active-mobile")) { $(".nav-mobile").hide(); } else { $(".nav-mobile").show(); } $(".nav-mobile li").unbind('mouseenter mouseleave'); $(".nav-mobile li a.parent-arrow").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww > 850) { $(".toggle-mobile-menu").css("display", "none"); $(".nav-mobile").hide(); $(".nav-mobile li").removeClass("hover"); $(".nav-mobile li a").unbind('click'); $(".nav-mobile li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } }

I have a simple setup where I have a collapsed menu. When you click on the button, it will open a menu. If the menu is already opened and you open another menu, the previous menu will collapse. All that works. The only thing I noticed is that It will not collapse the opened menu if I click the same button. That menu will only collapse if I open a different menu. I was wondering how the code below will look with that extra function added? Here's the code for that. <h5 class="mobile-collapse__title">Title Button</h5> <div class="mobile-collapse__content"> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> </ul> </div> <script> $(document).ready(function($){ $(".mobile-collapse__title").click(function(e) { e.preventDefault(); $('.mobile-collapse__content:visible').hide(); $(this).next('div.mobile-collapse__content').show(); }); }); </script>

http://www.tirerack.com/content/tirerack/desktop/en/wheels.html See the window where it says "Shop by Vehicle"? Is there a script already out there that does the dropdown search by make/model/year? I am only looking for the front-end code; javascript/jquery code in particular.

Hi I'm using PHP for my Navigation Menu, My navbar is in a file named "home.php" looks like this: <ul class="nav navbar-nav navbar-right"> <li><a href="?page=home">Home</a></li> <li><a href="?page=about">About</a></li> <li><a href="?page=services">Services</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="?page=service2">Service 2</a></li> </ul> </ul> Then in my index.php: $page = $_GET['page']; if (!isset($page)) { include('home.php'); } if ($page == "home") { include('home.php'); } if ($page == "about") { include('about.php'); } if ($page == "services") { include('services.php'); } if ($page == "service2") { include('service2.php'); } It all works how I want it to except for one thing; I'd like to add; <li class="active"> To the page that is currently being viewed. How can I do this? Thank you in advance.