I'm using Foundation 6 for a one-page website. And I'm using a Top Bar to take users to different sections of the website. So when visiting the website on mobile, when I click a link from the collapsed Top Bar, I want the Top Bar to hide after taking the user to a certain section of the website.
Here's my HTML:
<div data-sticky-container>
<div data-sticky data-sticky-on="small" data-options="marginTop:0.9;" style="width: 100%">
<div class="top-bar">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
<span class="menu-icon dark" data-toggle></span>
</span>
</div>
<div id="responsive-menu">
<div class="top-bar-section">
<ul class="menu" data-magellan>
<li class="title"><a class="title-link" href="#home">HOME</a></li>
<li class="title"><a class="title-link" href="#events">EVENTS</a></li>
<li class="title"><a class="title-link" href="#about">ABOUT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
I could have achieved this functionality by using this (I think):
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").css({display: none});
});
});
But the problem is when I click the menu icon, Foundation adds and inline style of display: block; and I can't seem to change it through to JS.
Is there a way to override the inline styles, or should I use a different layout? Thanks for the help!
.css() overrides inline style. Just change this line :
$("#responsive-menu").css({display: none});
To :
$("#responsive-menu").css({"display": "none"});
Similar topic for more info : How to override inline css through javascript?
Try this one:
JS:
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").toggleClass('myStyle');
});
});
CSS:
.myStyle {
display: block!important;
}
or
.myStyle {
display: none!important;
}
depend what you want to do.
Related
I have inside my html code repeating elements like this:
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div> <!-- synth-faq-content -->
</li>
and I use the following command so I can toggle the class 'content-visible' that will make this element slide to reveal the contents of <p>, in this case Text.
What I am trying to do is before doing this in my code, find the previous element that had a class of 'content-visible' and toggle it, so only one element remains visible at all times.
$(this).next('.synth-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');
I tried various things lastly being
$(this).closest('synth-faq-trigger').next().find('.synth-faq-content').toggleClass('content-visible');
that has no effect at all. Moreover the suggestions from w3school on finding an element by class failed all together.
How can I make sure that I find all my items containing 'content-visible' and I remove this class from them?
I notice you are already using hash links in your example code, and because of this, you can achieve what you are trying without any JavaScript. Browsers already have functionality to handle displaying elements depending on the hash target, so let's exploit this browser feature rather than implementing it again in JavaScript.
Live demo: http://jsfiddle.net/g105b/cj5fscah/
The href of the anchor is to a hash link, which will be put into the URL bar of the browser. Each li element has an ID that corresponds to the hash targets, and using the :target CSS selector, you can style elements differently depending on what the hash is.
With some fancy CSS you can add animations too, that will perform much better than any JavaScript can.
<ul>
<li id="0">
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for one</p>
</div> <!-- synth-faq-content -->
</li>
<li id="1">
<a class="synth-faq-trigger" href="#1">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for two</p>
</div> <!-- synth-faq-content -->
</li>
<li id="2">
<a class="synth-faq-trigger" href="#2">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for three</p>
</div> <!-- synth-faq-content -->
</li>
</ul>
ul {
width: 320px;
}
li {
background: #aaf;
}
.synth-faq-content {
overflow: hidden;
height: 0;
transition: height 200ms ease-in-out;
}
li:target .synth-faq-content {
height: 3em;
}
Edit: if you still need to manipulate the class names, a simple piece of JavaScript can trigger when the hash changes to accomplish having a class added to the correct LI element.
window.addEventListener("hashchange", function(e) {
// Remove all .content-visible elements:
[].forEach.call(document.querySelectorAll(".content-visible"), function(li) {
li.classList.remove("content-visible");
});
// Add .content-visible to the li that contains the clicked anchor:
document.querySelector("a[href='" + location.hash + "']").parentElement.classList.add("content-visible");
});
Updated demo: http://jsfiddle.net/g105b/cj5fscah/1/
You can use the sibling relation like
$('a').click(function() {
var $li = $(this).next('.synth-faq-content').slideToggle(200).closest('li').toggleClass('content-visible');
$('li.content-visible').not($li).removeClass('content-visible').find('.synth-faq-content').slideUp();
})
.content-visible > a {
color: green;
}
.synth-faq-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
</ul>
I am trying to position charts on a page. Here is screenshot for you to have a look.
I want it so that only one element (chart) is visible at a time. I know margin and padding stuff. But i do not think that will work for all resolutions.
What you suggest?
How about this:
FIDDLE
<ul>
<li id="one">onetwothree</li>
<li id="two">onetwothree</li>
<li id="three">onetwothree</li>
</ul>
(Relevant) CSS
li
{
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height*/
}
Another way is to use jQuery tabs.
For this FIDDLE I copied the code directly from jQuery UI site and modified it.
HTML
<div class='charts'>
<ul>
<li>Daily Use</li>
<li>Monthly Use</li>
<li>Annual Use</li>
</ul>
<div id="tabs-1">
<div class='chart1'>This is your daily use of electricity</div>
</div>
<div id="tabs-2">
<div class='chart2'>This is your monthly use of electricity</div>
</div>
<div id="tabs-3">
<div class='chart3'>This is your annual use of electricity</div>
</div>
</div>
You can use the display property (references are available in MDN and W3C) to make one of the charts invisible when you show the other. For example:
CSS
.visible {
display: block;
}
.invisible {
display: none;
}
HTML
<div class="visible">This text is visible.</div>
<div class="invisible">But this one isn't.</div>
<div class="invisible">Neither is this one.</div>
<div class="visible">But this is. :)</div>
Take a look in the demo JSFiddle.
Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers the images in a div "container".
The styling of the submenu is such that it is semi-transparent so the images inside the div "container" also appear in the background of the menu, which doesnt look that good.
I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div "container" hide and appear again when I move my mouse away from the menu. The div "container" should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??
HTML Code:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">Home</li>
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
<ul class="submenu">
<li>
<a id="one" href="">One</a>
</li></br>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">Image1<img src="images/image1.png"></div>
<div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>
CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}
$('.submenu').hover(function() {
$('#container').hide()
}, function() {
$('#container').show()
});
You basically want to detect on the hover event whenever the current menu item (one of the .menu > a elements) contains a submenu (.submenu).
What about :
$('.menu > a').hover(function(){
if ($(this).find('.submenu').length != 0) {
$('#container').hide();
}
}, function(){
$('#container').show();
});
Also, some of your html closing tags have issues, you should ensure that they are all closing in a correct order to prevent unexpected glitches.
firstly give that div 2 class names like-class1,class2
in Css :
.class1{
display: none;
position: absolute;
}
.class2{
display : block;
}
in jquery :
//this would track mouse pointer in/out events
$("#menu").hover( function(event){ $("#div").attr("class","class1"); },
function(event){ $("#div").attr("class","class1"); } );
You forgot to close this
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
to
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>
for the Jquery i think this will help
$('.submenu').mouseenter(function() {
$('#container').hide()
}).mouseleave(function(){
$('#container').show()
});
I have the following menu:
<div id="menuItem">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
Animated like this:
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
Unfortunately, as the mouse leave the submenu, the submenu dissapears. How do I make the submenu only disapears when the mouse leave the menuitem OR the submenu list ? I would like to be able to hover the mouse on the submenu. Notice that there is a gap bewteen the two menus.
jsFiddle here
make the sub-menu actually "inside" the menu-item you are attaching the event to, this way the in/out event only happen when the user actually leaves the menu area
like this:
css
#menuItem {
cursor: pointer;
width: 100px;
}
#menuItem .title {
background-color: orange;
}
#subMenu {
background-color: grey;
margin-top: 5px;
cursor: pointer;
display:none;
width: 80px;
}
html
<div id="menuItem">
<div class="title">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
js
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
friendly note:
you might want to use some form of .stop(true, true) prior to animating the menu, or else moving a cursor back and forth rapidly over the menu will cause the animations to "stack" and it will just feel strange to the user. see discussion here: Where to put clearQueue in jQuery code
so it would look like this:
$('#menuItem').hover(function() {
$('#subMenu').stop(true, true).slideDown(200);
}, function() {
$('#subMenu').stop(true, true).slideUp(200);
});
Try this:
<div id="menuItem">Item1
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
This works in my browser (firefox)
Assuming you wanted to keep the exact same html structure, you could use the following code:
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).next('#subMenu').mouseleave(function() {
$('#subMenu').hide(400);
});
Notice that I've told jQuery to hide the #subMenu only when the mouse has left the #subMenu.
It is always good to have the Menu and Sub Menu inside the same container so you don't need to have a separate mouse handler when navigating sub menu.
DEMO
HTML:
<div id="subMenu">
<div id="menuItem">Item1</div>
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
JS:
$('#subMenu').mouseenter(function() {
$('#subMenu ul').slideDown(400);
isInsideSubMenu = true;
}).mouseleave(function() {
$('#subMenu ul').hide(400);
});
CSS:
#subMenu ul { display:none;}
Alternatively if you don't want to have the submenu inside menuitem (which could mess with your CSS, you can wrap everything in a parent div like:
HTML:
<div id="all">
<div id="menuItem">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
jQuery:
$('#all').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
I am having problems implementing the following jQuery effect to my navigation.
There will be the following image on the top of the screen:
menu link http://img820.imageshack.us/img820/2707/linkz.jpg
When the user clicks on this, the following menu should scroll out:
nav http://img805.imageshack.us/img805/2383/menue.jpg
my HTML is as follows:
<div class="left_corner"><img src="images/homepage_menu_lft.gif" alt="corner" /></div>
<div class="header_buttons typeface-js" style="font-family: Palatino LT Std">
<ul>
<li> womens swimsuits <span class="bars">|</span></li>
<li> womens wetsuits <span class="bars">|</span></li>
<li> artist series <span class="bars">|</span></li>
<li> blog <span class="bars">|</span></li>
<li> short film <span class="bars">|</span></li>
<li> photo gallery <span class="bars">|</span></li>
<li> store locator </li>
</ul>
<div class="right_corner"><img src="images/homepage_menu_rght.gif" alt="corner" /></div>
</div>
Any help would be greatly appreciated.
If that menu-button is all the way left in the browser, you could just do a negative margin-left, and pull the entire menu (except for the menu-button) out of the screen. When the user clicks the button, you can (with the jQuery "animate" function) slide the menu out.
function MenuSlideOut () {
$("div#Menu").animate({
left: 0
}, "slow");
}
function MenuSlideIn () {
$("div#Menu").animate({
left: "-600px"
}, "slow");
}
Haven't tested that code though, but something like that. You can perhaps do it with some sort of toggle instead. Try http://api.jquery.com