I'm trying to get Foundation dropdown menus to work across browsers, but run into issues will ALL versions of IE (7-10, specifically).
I've implemented the JS dropdown menu that is described here (http://foundation.zurb.com/docs/components/dropdown.html) as a filter menu. It works in Chrome and FF but not in IE.
The console in IE gives me no indication of what's going on. My guess is it has something to do with IE caching the activeClass so that the dropdown menu never gets updated with new absolute coordinates? I can't tell, and I'm a bit lost.
Here's my code and a link to the live page (http://lp-beta.myshopify.com/collections/all -- password is 'stack') --
<div class='row options-style'>
<ul class='large-block-grid-3'>
<li><a href="#" data-dropdown='brand-filters'>BY BRAND</a></li>
<li><a href="#" data-dropdown='percent-filters'>BY COCAO PERCENTAGE</a></li>
<li><a href="#" data-dropdown='flavor-filters'>BY FLAVOR PROFILE</a></li>
</ul>
</div>
<ul class='f-dropdown options' id='brand-filters' data-dropdown-content>
<li><div class='option-value'><a href='/collections/all'>All brands</a></div></li>
{% for product_vendor in shop.vendors %}
<li><div class='option-value'>{{product_vendor | link_to_vendor }}</div></li>
{% endfor %}
</ul>
<ul class='f-dropdown options' id='flavor-filters' data-dropdown-content data-option-key='filter'>
<li><a class='option-value' id='chocolatey' data-option-value='.chocolatey'>Chocolatey</a></li>
<li><a class='option-value' id='citrus' data-option-value='.citrus'>Citrus</a></li>
<li><a class='option-value' id='fruity' data-option-value='.fruity'>Fruity</a></li>
<li><a class='option-value' id='floral' data-option-value='.floral'>Floral</a></li>
<li><a class='option-value' id='earthy' data-option-value='.earthy'>Earthy</a></li>
<li><a class='option-value' id='nutty' data-option-value='.nutty'>Nutty</a></li>
<li><a class='option-value' id='spicy' data-option-value='.spicy'>Spicy</a></li>
<li><a class='option-value' id='creamy' data-option-value='.creamy'>Creamy</a></li>
</ul>
<ul class='f-dropdown options' id='percent-filters' data-dropdown-content data-option-key='filter'>
<li><a class='option-value' id='forty' data-option-value='.forty'> Below 40%</a></li>
<li><a class='option-value' id='sixty' data-option-value='.sixty'> 41% to 60%</a></li>
<li><a class='option-value' id='eighty' data-option-value='.eighty'> 61% to 80%</a></li>
<li><a class='option-value' id='hundred' data-option-value='.hundred'> Above 80%</a></li>
</ul>
Foundation 4 does not support IE 8 and below.
Foundation 3 supports IE 8 but not IE 7. Check web site for Foundation 3 IE 7 patches.
Your page have multiple references to jquery.js (1.7, 1.9...) and zepto.js.
Zepto.js does not support IE; you can replace it with jquery.js; they are compatibile.
If possible, try to standardize on one jquery version.
Related
I have been on a project to build a website to help students with revision.
I decided to make use of a cool navbar I found online in the website as I am not much of a professional myself. However, the navbar elements (the navbar is a unordered list which has been styled) don't show when i put any sort of background picture in the 'top' div. When it doesn't have a background picture (like in the fiddle) it is impossible to use the navbar properly.
This is the navbar I used:
http://cssmenumaker.com/menu/responsive-flat-menu#
I have fiddled about the position on the cssmenu div, tried putting it in the nav id and classes (both have styles set in the CSS).
Here is the fiddle
https://jsfiddle.net/jgs5uqxr/
It says I need to attach some code with the fiddle so here is the formating of my navbar
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
I would have expected my chnages to make a working multi-level navbar which I can work with so I can add links to the educational material for students.
Thanks in advance.
I am trying to replicate the "tabs" section as explained in this tutorial: Google material Design. Everthing works fine except when I insert a date which uses a datepicker widget from this url: Datepicker. As soon as I select the date all the tabs in Megamenu become unresponsive
HTML code for the tabs:
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">Home</li>
<li>Reminder</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="bootstrap-elements.html" data-target="#">
Reports <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Insurance History Between Dates</li>
<li class="divider"></li>
<li>Insurance history of Account</li>
<li class="divider"></li>
<li>Insurance Amount between dates</li>
</ul>
</li>
<li>Bulletin Board</li>
<p class="user" data-toggle="tab">Welcome Wasim(1117004017)</p>
</ul>
Script for datepicker:
$("#dtBox").DateTimePicker();
This renders Megamenu like this:
One more strange thing I came across is that as soon as tabs become unresponsive and I click on "Reports" tab I get this:
It was the fault of the DatePicker plugin. This line of code
$(document).unbind('click')
stopped bootstrap's propagation of the menu.
Is there are any custom implementation of ComboBox element (i.e. drop-down list) without tag? May be some div with CSS or JavaScript?
you can try my code, only use html, css and jquery :
create html :
<div class='dropdown'>
<b>My Dropdown</b>
<span>▼</span>
</div>
<ul class='option'>
<li><a href='#'>Dropdown 1</a></li>
<li><a href='#'>Dropdown 2</a></li>
<li><a href='#'>Dropdown 3</a></li>
</ul>
for complete code visit : http://jsfiddle.net/g6jrt8ey/
Happy Coding.
I'm trying to create a long dropdown nav bar. The HTML structure is the following:
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Visually it looks like this, but for now,
I'd like to add those red arrows for a horizontal scroll/slide the root <li> elements:
The demo of navbar with css is here: http://cssmenumaker.com/builder/800017
I have searched up the web but still could not find any solutions. If somebody has some ideas please share. Thank you!
I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.
My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.
I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.
Here is the existing function which tells a link to be active or selected:
var Lst;
function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
and here is the menu code:
<ul class="topnav">
<li>Home</li>
<li><a onclick="CngClass(this);" href="#">Top Link 2</a>
<ul>
<li><a onclick="CngClass(this);" href="#">Cookies</a></li>
<li><a onclick="CngClass(this);" href="#">Events</a></li>
<li><a onclick="CngClass(this);" href="#">Forms</a></li>
<li><a onclick="CngClass(this);" href="#">Games</a></li>
<li><a onclick="CngClass(this);" href="#">Images</a></li>
<li><a onclick="CngClass(this);" href="#">Navigations</a>
<ul>
<li><a onclick="CngClass(this);" href="#">CSS</a></li>
<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
<li><a onclick="CngClass(this);" href="#">JQuery</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Tabs</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Tutorials</a>
<ul>
<li><a onclick="CngClass(this);" href="#">HTML</a></li>
<li><a onclick="CngClass(this);" href="#">CSS</a></li>
<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
<li><a onclick="CngClass(this);" href="#">Java</a>
<ul>
<li><a onclick="CngClass(this);" href="#">JSP</a></li>
<li><a onclick="CngClass(this);" href="#">JSF</a></li>
<li><a onclick="CngClass(this);" href="#">JPA</a></li>
<li><a onclick="CngClass(this);" href="#">Contact</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Tabs</a></li>
</ul>
</li>
<li><a onclick="CngClass(this);" href="#">Contact</a></li>
<li><a onclick="CngClass(this);" href="#">Upload script</a></li>
Many thanks for any help or ideas...
Oh dear, may I ask why you're not simply using JQuery? It simplifies your task so much more.
I've got a live example with JQuery (took me about 3 mins) you can try. I assume this is what you're trying to accomplish?
You can use the same method in normal javascript as well, except it's more work and probably less efficient.
The general idea is:
remove active class from the current li
find the 3rd parent from the clicked link (li, ul, li) and then apply the active class to
that one instead.
Here's the JQuery
$(document).ready(function(){
$(".topnav li a").click(function(){
//get the ul element
var checkElement = $(this).next();
if(checkElement.is('ul')) {
//check if it's visible
if(!checkElement.is(':visible')) {
$(this).parent().addClass('opened');
checkElement.slideDown();
}else{
$(this).parent().removeClass('opened');
checkElement.slideUp();
}
}
//get the tree node
var parentElement = $(this).parent().parent().parent();
if(parentElement.is('li')){
$(".topnav li.active").removeClass('active');
parentElement.addClass('active');
}
});
});
Here's an example where it highlights the li element you clicked.