I modified my asp.net 2.0 website to be mobile friendly. On desktops and tablets, the navigation menu is a horizontal bar styled with the class mobilemenu, and on all other devices it is a dropdown menu, styled with class mobiledropdown. Everything works except on mobile devices with the dropdown menu, the home page menu item does nothing when selected, but all the other dropdown items navigate correctly. In both cases the url for home page is "./" but I also tried hardcoding it with the full http://www plus my domain and that also works for mobilemenu but not mobiledropdown.
I am thinking it must be related to the javascript which is used only for the dropdown.
The code is below. it is contained in an include file. the css hides or shows the appropriate menu based on media queries and that all works great.
The first div element is for larger devices and is the code that has been used for several years without any issues. I added the mobilemenu class for hiding it on smaller devices. I added the second div for showing the dropdown on smaller devices.
<div class="mobilemenu" style="width:90%; margin-left:5%; margin-right:5%; margin-top:0%; margin-bottom:1%; padding:0px;">
<div id="menu" style="text-align:center;width:100%;height:22px; padding:0px;">
<ul id="nav" style="line-height: 22px; width:100%; margin:0px; padding:0px;">
<li style="width:15%;">
<a class="custom" href="./">Home</a>
</li>
<li style="width:20%;">
<a class="custom" href="Order.aspx" >Order</a>
</li>
<li style="width:15%;">
<a class="custom" href="Company.aspx" >Company</a>
</li>
<li style="width:20%; ">
<a class="custom" href="Download.aspx" >Downloads</a>
</li>
<li style="width:15%; ">
<a class="custom" href="Blog.aspx" >Blog</a>
</li>
</ul>
</div>
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="./" selected="">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div>
</div>
Remove the dot (.):
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="/" selected="">Home</option>
{rest of your code goes here}
</select>
I found a solution, although I do not understand why it works so maybe someone could explain.
I changed the html code for the dropdown menu by inserting a "Menu" option as the first option and removed the selected attribute on the Home option. It seems illogical that I have to add a menu item that I dont want.
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option>Menu</option>
<option value="./">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div
Related
I have a drop down menu that semantic-ui overrides as a semantic-ui drop down menu although i removed every class related to semantic-ui. It inserts a div to contain the whole and apply semantic styling.
My problem is that semantic drop down is wide and i need it to be small, so I tried many workarounds to change the size or remove semantic's control all together. The only thing that seemed to work was using Jquery to remove the elements that semantic inserts. Which is a lousy way to do it, and which also my team condemned.
To give you some context, I am changing the navbar to make it responsive, that's why i'm removing semantic classes from the navbar and using custom css classes and I'm using it with Vue.js
Here's the source drop down code:
<a style="padding:6px 0px !important;">
<select class="language-select" id="locale-dropdown" v-model="locale">
<option value="en">En</option>
<option value="ar">ع</option>
</select>
</a>
Below is the actual code i got by using inspect in chrome:
<a data-v-65731896="" style="padding: 6px 0px !important;">
<div class="selection ui dropdown" tabindex="0">
<select data-v-65731896="" id="locale-dropdown" class="language-select">
<option data-v-65731896="" value="en">En</option>
<option data-v-65731896="" value="ar">ع</option>
</select>
<i class="dropdown icon"></i>
<div class="text">En</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="en">En</div>
<div class="item" data-value="ar">ع</div>
</div>
</div>
</a>
Jquery code used to remove elements:
mounted () {
$('.ui.search.dropdown.selection').removeClass('ui search dropdown selection')
$('.search').remove()
$('.text').remove()
$('.menu').remove()
$('.dropdown.icon').remove()
}
css that should be applied -but doesn't-:
.language-select{
background-color:#fff;
padding: 5px 5px;
width: 20px;
}
The solution I found is as follows. The solution is to put the drop down menu inside a div with certain height and give the a class of 'fluid' to fill the container's size. And this would make it resizable.
<a style="padding:6px 0px !important;">
<div style="width: 70px">
<select style="background-color:#e3e3e3; padding: 5px 5px;" id="locale-dropdown" class="fluid" v-model="locale">
<option value="en">En</option>
<option value="ar">ع</option>
</select>
</div>
</a>
Credits go to Tarek AlQaddi
I am using the foundation dropdown that comes out of the box and I have a select tag so a user can choose a language.
But when a user clicks on the select tag foundations dropdown menu closes not allowing them to pick a language.
so ideally I'd like them to be able to select a country and language then when they click on the button to then close the menu and obviously this will cause a refresh of the page.
I've looked into using the aria-autoclose attr in the documentation but I can't get my head round how or where to use it.
<li>
<a href="">
UK
<i class="icon-arrow_down"></i>
</a>
<ul class="menu country-selector">
<li class="country-selector__item">
<h6 class="country-selector__heading">Your Country</h6>
<select name="" id="" aria-autoclose="false">
<option value="">Germany</option>
<option value="">United Kingdom</option>
<option value="">France</option>
<option value="">Spain</option>
<option value="">Belgium</option>
</select>
</li>
<li class="country-selector__item">
<h6 class="country-selector__heading">Your Language</h6>
<select name="" id="" aria-autoclose="false">
<option value="">German</option>
<option value="">English</option>
<option value="">Italiano</option>
<option value="">Dansk</option>
<option value="">Norsk</option>
</select>
</li>
<li class="country-selector__item">
<button type="submit" class="small expanded button" aria-autoclose="true">CHANGE</button>
</li>
</ul>
Let me know if I need to explain anything in a better way.
/*
* Language Select Tag
*/
$('.country-selector select').on('click', function(event) {
event.stopPropagation()
})
I just needed to stop the event from bubbling on the element that I wanted to not close for anyone else wondering how to do this
After click on select options are show just in second and after user can't choose option for wizard.
We using Hogan.js and bootstrap and on other elements work great but on one specific modal its not working, on other modals working also great.
<select name="date-range" class="form-control">
<option value="week-over-week">Week Over Week</option>
<option value="month-over-month">Month Over Month</option>
<option value="quarter-over-quarter">Quarter Over Quarter</option>
<option value="year-over-year">Year Over Year</option>
<option value="false">-------------</option>
<option value="custom">Custom Date Range</option>
UPDATE: We found that maybe is problem when calling div over modal container and inside div we have select option, also this happen only in FF.
UPDATE: Select option is inside ul tag and look like
<ul class="dropdown-menu hasdaterange" role="menu" style="position: absolute; top: 175px; left: 803px;">
<li>
<div class="calendar"><select>..</select>
</li>
</ul>
This is because you have dropdown in dropdown in modal. Try to re-factor yours html elements.
This is a tricky question to phrase but I'll try my best:
If you go to http://msukkar.tumblr.com and resize your window (if you're using a desktop/laptop) until the hamburger menu icon appears then click on it to get the drop-down menu, click on it again to hide it. You'll find that when you resize your window back up full-width the original navigation is gone.
I'm curious as to how I can prevent this exactly. I'm adept at HTML & CSS but very new to Javascript.
The Javascript that I used is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
/* prepend menu icon */
$('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');
/* toggle nav */
$("#mobile_menu").on("click", function () {
$("#menu_border_wrapper").slideToggle();
$(this).toggleClass("active");
});
});
});
</script>
The HTML for the menu is
<div id="menu_wrapper">
<!-- Begin logo -->
<a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
MATT SUKKAR
</a>
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<div class="menu-home-container">
<ul id="main_menu" class="nav">
<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.tumblr.com" style="color: #ff0000">
Blog
</a>
</li>
<li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.com/contact/">
Contact
</a>
</li>
</ul>
</div>
<select>
<option selected="selected" value="">
- Main Menu -
</option>
<option selected="selected" value="http://msukkar.tumblr.com">
Blog
</option>
<option value="http://msukkar.com/contact/">
Contact
</option>
</select>
</div>
</div>
</div>
I hope I explained that well enough for you all. Thanks in advance for your help and if need be I'll try to clarify further.
Here's your problem:
$("#menu_border_wrapper").slideToggle();
Which shows and hides your menu when you click the hamburger.
The problem is that when you are in desktop view, your entire menu is contained within #menu_border_wrapper and is displayed as it should. Then you resize down to mobile and click the hamburger. On your first click, #menu_border_wrapper slides down and your menu becomes visible. On your second click, #menu_border_wrapper slides up and your menu becomes invisible. This is fine on mobile since the hamburger icon itself isnt contained within #menu_border_wrapper, but when you resize the window back to desktop, the menu is gone! Remeber how on the second click the menu was sliding up and was set to display: none. Well now since your desktop size menu is contained within #menu_border_wrapper, it's not there anymore.
There are probably a lot of ways you can solve this. Move the actual menu buttons outside #menu_border_wrapper on desktop aswell, make two completely unique menues for mobile and desktop or set #menu_border_wrapper to display: block !important on desktop.
Hope it helps!
I have a nested dropdown list created using the latest version of Twitter BootStrap. I need to have a select list containing many elements in the nested dropdown. I am able to get the nested dropdown working fine and the select option shows up no problem. Unfortunately in IE9 after clicking into the select list, moving the mouse over any item causes the dropdown to close. This problem does not manifest in other browsers. What's even more unlucky is that I must support IE7+ as part of this work.
There is a jsfiddle of the error at: http://jsfiddle.net/GtbSE/2/
Can anybody shed any light?
From your example I can change it to allow the dropdown within the 'channel' menu option in IE with a few minor changes to your fiddle: http://jsfiddle.net/amelvin/XxSTF/ - but you'll need to re-style.
I wonder if bootstrap was getting confused by the dropdown-menu items.
<span class="dropdown" id="filter-add">
<a href="#filter-add" id="addFilter" class="dropdown-toggle" data-toggle="dropdown" >
More
</a>
<ul id="Channels" class="nav nav-pills">
<li class="dropdown">
Channel
<ul class="dropdown-menu">
<li>
<select>
<option value="1" >LIst Item 1</option>
<option value="2" >LIst Item 2</option>
<option value="3" >LIst Item 3</option>
<option value="4" >LIst Item 4</option>
<option value="5" >LIst Item 5</option>
<option value="6" >LIst Item 6</option>
</select>
</li>
</ul>
</li>
<li><a>Cancel</a></li>
</ul>
</span>
$('.dropdown select').click(function(e) { e.stopPropagation(); });
$("#Channels").hide();
$("#addFilter").click(function() { $("#Channels").show(); });