I am trying to make a jquery menu that when I click on one of the links (with reloading the page), it changes its class to "active" and removes this class when I click on another link.
here is my code :
enter code here`$(document).ready(function(){
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
});
<ul id="mainMenu">
<li class="hover-width1">STRONA GŁÓWNA</li>
<li class="hover-width3">OFERTA</li>
<li class="hover-width3">CENNIK</li>
<li class="hover-width2">PRZEPISY</li>
<li class="hover-width2">GALERIA</li>
<li class="hover-width1">NASI KLIENCI</li>
<li class="hover-width2">NARZĘDZIA</li>
<li class="hover-width1">CIEKAWOSTKI</li>
<li class="hover-width2">KONTAKT</li>
</ul>
Can someone tell me why my code is not working when I reload the page:(
You can use $(document).ready(function(){ or $(function(){ to init jquery code, but not both at the same time.
$(function(){
$("a").click(function(){
$(this).parent().addClass('inny').siblings().removeClass('inny');
});
});
The code should work fine, and when you reload the page the markup changes won't stay up, so you must make use of the uri / cookies to determine what item to show active.
Related
So what I'm trying to accomplish is I'm building a website using Wordpress. I have a menu and one of the items is "Products" under products I have 4 items, electronics, cars, house supplies, and other. For this example I'm focusing on electronics. So under electronics i have another submenu. So this is the 3rd level, which looks like the code below.
<li class="dropdown menu-products"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://mywebsite/products/">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu menu-electronics">Electronics
<ul class="dropdown-menu">
<li class="menu-tv">Tvs</li>
<li class="menu-phones">Phone</li>
<li class="menu-games">Games</li>
<li class="menu-other">Other</li>
</ul>
</li>
Now when I click on any of the links on the 3rd level it will take you to the parent page and open up an accordion for that id. So I set that up and it works. However the problem I'm having is since all of these items example (tv, phones, games, others) are technically on the same page. When I click on one of the links, and i go back to the menu, all the links in the 3rd level are active. So if I were to click on a different item, the url changes but the page doesn't refresh nor does the new target accordion open. Here is what I have so far for this area. I'm assuming I have to add something to this script to check every time a link is clicked?
<script type="text/javascript">
(function( $ ) {
$(document).ready(function() {
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide');
$("#" + anchor).collapse('show');
});
})( jQuery );
</script>
Tried to set up a JSfiddle to show this but failed at it.
I am creating a megamenu and it works fine until I try to delay the slideDown. I use jQuery. The code for slideUp and slideDown is as follows:
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).delay(500).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("fast");
$(this).toggleClass('open');
}
);
});
When I refresh the page and hover over the ".dropdown" element it slides down without any delay. However, when I hover over it again, it delays just fine, as if I called it when i hovered over it the first time.
Same is true for each menu button (do each ".dropdown" element) separately.
I thought that fault lays in $(document).ready(), so I waited for the whole page to load, but that didn't help.
Do you have any suggestions as to what I am doing wrong?
Let me show you a fragment of my menu. It also uses bootstrap.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
OLEJE
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header" style="color:#F96211">Syntetyczne</li>
<li class="divider"></li>
<li>Oleje silnikowe 0W30</li>
<li>Oleje silnikowe 0W40</li>
</ul>
</li>
</ul>
</li>
</ul>
I stripped it down, so it just shows the basic skeleton.
I don't think it's DOM ready's fault.
Without going much into details (since I cannot test your code) here's how I would write the above
jQuery(function($){ // DOM ready. $ alias secured.
$(".dropdown").hover(function(evt) {
var mEnt = evt.type==="mouseenter";
$(this).toggleClass('open')
.find('.dropdown-menu')
.not('.in') // without seeing your HTML I'm not sure about this line
.stop()
.delay(mEnt?500:0)
.slideToggle("fast");
});
});
So I have a simple menu and I'm trying to remove/add an active class to the clicked menu item.
$(function(){
$('ul.navbar-nav li').click(function(){
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
});
});
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
<li>methods</li>
<li>blog</li>
<li>team</li>
<li>contact</li>
</ul>
The issue I'm having is this works but since going to a new page refreshes the site once I'm in the new page the active class always goes back to the initial active class in my HTML. I feel like I've done this a number of times and never had this issue. Maybe I'm missing something.
As you redirecting new page on each link click, so dynamically added active class is removed on page load. You can do it like following.
Remove the active class from home menu and add specific href to this like below.
<li class="active">Home</li>
jQuery
$(function () {
$('ul.navbar-nav > li > a').each(function () {
if (window.location.pathname.indexOf($(this).attr('href')) > -1) {
$(this).closest('li').addClass('active');
return false;
}
});
});
There is more than just one file in your project, right?
I would copy the whole ul navbar and paste it into every single page. All you have to do after that, is to put the active class on the respective li element.
Update: None of your li's should have an active class and then add the active class on page load.
/menu.html
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="work">work</li>
<li class="methods">methods</li>
<li class="blog">blog</li>
<li class="team">team</li>
<li class="contact">contact</li>
</ul>
js could be something like this
var page = window.location.pathname.split('/')[1];
$('li.' + page).addClass('active');
You can try following things
$(function()
{
$('ul.navbar-nav li').click(function(event)
{
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});
Prevent default would avoid anchor tag tag default action to reload the page. So this should work.
Or if you do not need to go to another page then you can use div instead anchor tag.You can simulate anchor tag behaviour using :hover css selector.
div:hover
{
color:blue;
cursor:pointer;
font-style:underline;
}
This seems to be working:
HTML:
<ul class="nav navbar-nav">
<li id="liHome">home</li>
<li id="liWork">work</li>
<li id="liMethods">methods</li>
<li id="liBlog">blog</li>
<li id="liTeam">team</li>
<li id="liContact">contact</li>
</ul>
The event handler:
$('ul.navbar-nav li').click(function(){
window.sessionStorage.activeMenuItem = this.id;
});
When the page has loaded:
if (window.sessionStorage.activeMenuItem) {
$("#"+sessionStorage.activeMenuItem).addClass('active');
}
From https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage:
A page session lasts for as long as the browser is open and survives over page reloads and restores.
One problem with this solution is that you cannot open links in a new window, since:
Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.
You're likely in one of three scenarios:
A) You have a collection of static HTML pages with unique content.
B) You're using a server-side language and doing some basic includes
C) You're using a framework with routing logic.
A If you have two pages both containing the menu code, then it's as simple as moving the default active class.
<!-- Home -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
…
</ul>
<!-- Work -->
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">work</li>
…
</ul>
B Assuming you're using PHP then something like the following is an easy way to pass this info around:
// menu.php
<ul class="nav navbar-nav">
<li <?php if($page = 'home'){ echo 'class="active"' } ?>>Home</li>
…
</ul>
// home.php
<?php
$page = 'home';
include(menu.php);
…
C This will largely depend on the framework you're using, but most will have template helpers that can access the current route, something like:
<ul class="nav navbar-nav">
<li <% is_route('home') class="active" %>>Home</li>
But adding classes after DOM load with javascript or using session or cookie states is likely over the top.
I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?
Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>
JAVASCRIPT(jQuery)
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load
You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...
I want to refresh a mobile web page on-swipe. The html code is very basic, and just need the necessary jquery/javascript to get the swipe to reload the current page.
Here is the HTML: http://jsfiddle.net/yKpLJ/1/ I am pulling in jquery and jquery ui as well, but don't know how to move forward.
<div id="fact-footer">
<ul>
<li class="share facebook">
Share It
</li>
<li class="share twitter">
Tweet It
</li>
<li class="refresh">
Refresh Fact
</li>
<li class="logo">
Logo
</li>
</ul>
</div>
Thanks!
Check out HammerJS http://eightmedia.github.io/hammer.js/
Include the script on your page and then do something like this:
var element = $('body');
Hammer(element).on("swipeleft", function() {
location.reload();
});