I have a standard css/jquery menu where I use addClass/removeClass to set whatever li I am on to 'current'. However, the code to do this uses $(this). I want to also do this same set of procedures from links not in the menu. For example, I would like the menu 'active' flag to be in the right place after following a page link that is somewhere buried in the page content and not in the menu itself.
Menu HTML
<ul class="nav2">
<li class="current">Page one</li>
<li>Page two</li>
<li>Page three</li>
<li>Page four</li>
</ul>
Page HTML
<p>Herein you will find a further description of
page two.
Javascript
$('a[rel=panel]').click(function (e) {
$('a[rel=panel]').parent('li').removeClass('current');
$(this).parent().addClass('current');
//$("a [href='" + $(this).attr('href') + "']").parent('li').addClass('current');
});
(The commented out line is my failed attempt to make the "secondary" link act just like the "primary" link in the menu.)
Help? Thanks!
This should work:
$('a[rel=panel]').click
(
function (e)
{
$('.current').removeClass ('current');
var Targ = $(e.target).attr ('href');
if (Targ)
$("ul.nav2 a[href*='" + Targ + "']").parent ().addClass ('current');
}
);
.
See it in action at jsbin.
As the link (a element) inside the content has no list item (li) element as parent (it is p and you don't show further ancestors), it should just be:
$("a [href='" + $(this).attr('href') + "']").addClass('current');
But that assumes that you defined you CSS accordingly and the class current has effects when attached to a link element.
$('a[rel=panel]').click(function (e) {
$('a[rel=panel]').parent('li').removeClass('current');
// $(this).parent("li").addClass('current');
$(".nav2 a[href='" + $(this).attr('href') + "']").parent('li').addClass('current');
});
this worked fine over at:
http://jsfiddle.net/s2vxe/
let me know if you need more in this one.
Thanks for the help, I see what you guys are doing, but it isn't working for what I need.
# Felix: I need to set 'current' class for the parent (li) not for (a). Also this is all just 1 page. I am using jquery scrollTo to slide things around onClicks.
# Brock: Your example works perfectly, however:
I am trying to use this in conjunction with jquery lavalamp, and even though the 'current' class gets correctly applied to the right (li) I still cannot get the visual current indicator to stick to the right menu item.
More fully, my code in (head) is:
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/scrollto.js"></script>
<script type="text/javascript">
$(function() {
$(".nav2").lavaLamp({fx: "backout", speed: 500, click: function(event, menuItem) {
return true;
} }); });
</script>
where scrollto.js contains
$(document).ready(function() {
//Get the height of the first item
$('#mask').css({'height':$('#tab-1').height()});
//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div.tab').length));
//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div.tab').width($('#mask').width());
//Get all the links with rel as panel
$('a[rel=panel]').click(function (e) {
//Get the height of the sub-panel
var panelheight = $($(this).attr('href')).height();
//Resize the height
$('#mask').animate({'height':panelheight},{queue:false, duration:500});
//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
$('#mask').scrollTo($(this).attr('href'), 800);
//Set class for the selected item
//.parent() added for toggling li classes instead of a classes
//$('a[rel=panel]').parent('li').removeClass('current');
$('.current').removeClass ('current');
//$(this).parent().addClass('current');
var Targ = $(e.target).attr ('href');
if (Targ) {
$("ul.nav2 a[href*='" + Targ + "']").parent ().addClass ('current');
}
//Discard the link default behavior
//return false;
e.preventDefault();
});
$('#mask').scrollTo('#tab-1', 400 );
});
Thanks for any further help!
Related
I have an overlay menu (Wordpress betheme)
After I click on a menu item it doesn't close automatically.
Can anybody help to close the menu after the click?
/* ---------------------------------------------------------------------------
* Menu | Overlay
* --------------------------------------------------------------------------- */
$('.overlay-menu-toggle').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Overlay').stop(true, true).fadeToggle(500);
var menuH = $('#Overlay nav').height() / 2;
$('#Overlay nav').css('margin-top', '-' + menuH + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Overlay">
<nav id="overlay-menu">
<ul id="menu-felso-menu" class="menu overlay-menu">
<li id="menu-item-112" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-112">Miért mi?</li>
</ul>
</nav>
</div><a class="overlay-menu-toggle" href="#"><i class="open icon-menu-fine"></i>TOGGLE</a>
this worked for me with the Side Slide menu. Just put the code in the JS window in the "Theme Options" and adapt the menu IDs to your code. Betheme does nothing else than slide in and out the mobile menu (e.g. right: -250px;), slide the whole body to the left (e.g. left: -125px;) and display a dark "body_overlay" when the menu is active. I have links with #anker and links for normal subpages so I addressed each #anker separately (#menu-item-155).
The class .icon-menu-fine is from the burger menu to get things working again after closing the menu through JS.
jQuery( document ).ready( function( $ ) {
$('#menu-item-155 a').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Side_slide').stop(true, true).fadeToggle(500);
$('#Side_slide').css('right', '-250px');
$('body').css('left', '0px');
$('#body_overlay').css('display', 'none');
});
$('.icon-menu-fine').click(function(e) {
e.preventDefault();
$('#Side_slide').css('right', '0px');
$('body').css('left', '-125px');
$('#body_overlay').css('display', 'block');
$('#Side_slide').css('display', 'block');
});
});
I've just copied part of BeTheme code, that closes menu with a little modifications.
Just put this code in the JS window in the "Theme Options" > "Custom CSS & JS":
jQuery(document).ready(function($) {
/* Close Side Menu on item click */
$('#Side_slide .menu-item a').click(function(e) {
e.preventDefault()
/* globals jQuery, mfn */
var mobileInitW = (mfn.mobileInit) ? mfn.mobileInit : 1240
var slide = $('#Side_slide')
var overlay = $('#body_overlay')
var ssMobileInitW = mobileInitW
var pos = slide.hasClass('left') ? 'left' : 'right'
var shiftSlide = -slide.data('width')
var shiftBody = shiftSlide / 2
var duration = 300
if (pos === 'left') {
slide.animate({ 'left': shiftSlide }, duration)
$('body').animate({ 'right': 0 }, duration)
} else {
slide.animate({ 'right': shiftSlide }, duration)
$('body').animate({ 'left': 0 }, duration)
}
overlay.fadeOut(300)
// if page contains revolution slider, trigger resize
if ($('.rev_slider').length) {
setTimeout(function() {
$(window).trigger('resize')
}, 300)
}
})
})
This is what worked for me. It seems the action button that is used will go to the set anchor on the page but wouldn't close the slide menu. Really weird behavior. Not sure ever why you would like that effect, especially when a dark overlay is placed over the page.
It seemed for in my case I needed to remove all the dollar signs. Manuel had the solution just had to change things because of the $'s
Of course, you will see I had to adjust the initial tag that I wanted to be detected for the closing of the slider.
jQuery(document).ready(function()
{
jQuery('a.action_button.scroll').click(function(e) /* Change this line with the ones below for different menu behaviours*/
{
e.preventDefault();
jQuery(this).toggleClass('focus');
jQuery('#Side_slide').stop(true, true).fadeToggle(500);
jQuery('#Side_slide').css('right', '-250px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'none');
});
jQuery('.icon-menu-fine').click(function(e)
{
e.preventDefault();
jQuery('#Side_slide').css('right', '0px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'block');
jQuery('#Side_slide').css('display', 'block');
});
});
Really sweet stuff. It was super sweet seeing the menu close finally on click.
Of course, I have since adjusted it so that if any menu element is clicked/touched on then the slide menu will disappear with the below adjustment to the above code.
jQuery('ul#menu-main-menu-1').click(function(e)
I found the most pleasing behavior was to use this one though as it will trap any click on the menu and close it.
jQuery('div#Side_slide').click(function(e)
btw: this code is inserted into the "Theme Options --> Custom CSS & JS --> JS
I have created one page where that page contained the menu bar as tabs.
My url is mydomain.com/UI/ID=2?#about
Where with respective # the other tabs are there like photo,comment and setting.
When i reload any other tab like mydomain.com/UI/ID=2?#comment it going to about tab fraction of seconds then again it will come back to respect comment section.
Here is my code
<script type="text/javascript">
$(document).ready(function() {
$(".menu_content").hide();
var tabvalue=document.location.hash;
var activetab=$(this).find("a").attr("href")
$(".menu_content"+tabvalue).show();
//$(".menu_content:first").show();
$("ul.menu li:first").addClass("active");
$("ul.menu li").click(function() {
var activeTab = $(this).attr("rel");
$("ul.menu li").removeClass("active");
$(this).addClass("active");
$(".menu_content").hide();
$("#"+activeTab).fadeIn();
});
var firstLi = $("ul.menu li:first").attr('rel');
if('#' + firstLi !== tabvalue) {
$("ul.menu li:first").removeClass('active');
$('li[rel="'+tabvalue.substring(1)+'"]').addClass('active');
}
});
</script>
where menu_content is class name for all tabs.
Can any one guide me how to resolve this problem.
It sounds like you're running this code after the entire page has loaded therefore you're getting a flash while the HTML is rendered in it's default state, and then to the changed version once the code executes.
The nicest way to do this would be to not use a hash for this, rather have the page in the URL i.e. mydomain.com/UI/?ID=2&page=about and use server side code to render it correctly first time, and then update the url using history.pushState in JavaScript.
But if this is all a JavaScript based page, then I would say the easiest way would be to have all of the tabs 'inactive' by default, and then only add the 'active' class when you load the page (either to the hash value, or 'about' by default).
Example:
Style
<style type="text/css">
.menu_content .panel {
display:none;
}
</style>
Script
<script type="text/javascript">
$(document).ready(function() {
//if there's a hash, get it but remove the hash, or use 'about' as a default
var selectedTab = document.location.hash ? document.location.hash.replace("#", "") : "about";
$("li#" + selectedTab).addClass("active");
$("#" + selectedTab + "_panel").show();
$("ul.menu li").on('click', function() {
$("ul.menu li").removeClass("active");
$(this).addClass("active");
$(".panel").hide();
$("#" + $(this).attr("id") + "_panel").show();
});
});
</script>
HTML
<ul class="menu">
<li id="about">About</li>
<li id="comment">Comment</li>
<li id="contact">Contact</li>
</ul>
<div class="menu_content">
<div id="about_panel" class="panel"></div>
<div id="comment_panel" class="panel"></div>
<div id="contact_panel" class="panel"></div>
</div>
I would like to change the src of an img when the parent of listed children is clicked. I am using some code I have been working with that I found on StackOverflow because I was having problems with slideup and slidedown.
Next to each uppermost item (parent), to the left will be an arrow icon pointing to the right. Upon clicking the icon, this image should change to an arrow pointing down.
I can get the image to change onClick, but unless you click on the image, the image does not change back. Therefore, I believe I need the change to be pegged to the slideup and slide down functions. The image should also change back if you click on the close link or when clicking on a new Parent.
I can live without the 'only one list can be shown at a time' functionality, which would eliminate the need for the image to also change on clicking a new parent.
For this fiddle, I have only applied what I was trying to do to the first parent of the list: http://jsfiddle.net/9aa5n/51/
HTML:
<li><img src="arrowright.png"></li>
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
Close
</li>
jQuery / Javascript:
$(document).ready(function() {
$('.show_hide').slideUp(0);
$('.edit_this').click(function() {
$('.show_hide').slideUp(300);
var takeID = $(this).attr('id');
$('#' + takeID + 'C').slideDown(300);
});
$('.close').click(function() {
var takeID = $(this).attr('id').replace('Close', '');
$('#' + takeID + 'C').slideUp(300);
});
});
$('#img-tag').on({
'click': function() {
var src = ($(this).attr('src') === 'arrowright.png')
? 'arrowdown.png'
: 'arrowright.png';
$(this).attr('src', src);
}
});
I updated your jsfiddle: http://jsfiddle.net/9aa5n/53/
Since you didn't provide absolute paths to images, I added some from the net.
I removed your click event, and replaced it with this, I believe your issue was how you were referencing the elements in jQuery.
$(".edit_button").click(function() {
var img = $(this).find("img").first();
console.log(img.attr("src"));
if (img.attr("src") === 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png') {
img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');
console.log(img.attr("src"));
} else {
img.attr("src", 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png');
console.log(img.attr("src"));
}
});
This should get you started to finish polishing up the UI,
i.e. closing all .edit_button and then open only the $(this).find("img").first() element ...
I'm trying to set accordion menu "active" after click on link and change the page...
<div class="menu">
<dl>
<dt>HOME</dt>
<dt>QUEM SOMOS</dt>
<dd>
<ul>
<li>EMPRESA</li>
<li>INSTITUCIONAL</li>
<li>NOSSOS PRODUTOS</li>
<li>RESPONSABILIDADE SOCIAL</li>
<li>RESPONSABILIDADE AMBIENTAL</li>
</ul>
</dd>
<dt>PRODUTOS</dt>
<dd>
<ul class="produtos">
<%do while not rscat.EOF%>
<li><%= rscat("categoria")%></li>
<% rscat.MoveNext
if rscat.EOF then Exit do %>
<% Loop %>
</ul>
</dd>
<dt>INFORMATIVO</dt>
<dt class="no_border">CONTATO</dt>
</dl>
</div>
jquery:
<script type="text/javascript">
$(document).ready(function(){
$('dd').hide();
$('dt a.submenu').click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
i'm trying too, use this https://stackoverflow.com/questions/10681033/accordion-menu-active-state-after-link-click but dont work...
what i try (but don't work):
<script type="text/javascript">
$(document).ready(function(){
$('dd').hide();
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$("dt a.submenu[href='" + sPage + "']").parents("dd:visible").show();
$('dt a.submenu').click(function(){
$("dd:visible").slideUp("slow");
var checkElement = $(this).next();
if ((checkElement.is("dd")) && (checkElement.is(":visible"))) {
return false;
}
if ((checkElement.is("dd")) && (!checkElement.is(':visible'))) {
$(this).parent().next().slideDown("slow");
checkElement.slideDown("normal");
return false;
}
});
});
</script>
Well, the first sublinks ul point to especific pages, but the another sublink ul class=produtos show the categories that's on database, and uses same link on each categories like: produtos_categoria.asp?categoria=xxxxxx...
If the user, click on "EMPRESA", on the page empresa.asp the QUEM SOMOS menu need to be opened. And if the user click on some categories under the menu PRODUTOS, on the page produtos_caegoria.asp the PRODUTOS need to be opened..
I'm clear?
So.. what i need to do?
FIDDLE: http://jsfiddle.net/Qf7Js/1/
check this jsfiddle to see if it does what you require. As far as I could understand the problem, you want to, on page load, automatically open the accordion menu that contains the current link.
This can be achieved with following code
//say this is the current link which can be retrieved in real website using window.location object
var init_link = 'institucional.asp'
//then instead of hiding all <dd>, using $('dd').hide(), you only hide the ones that don't contain an <a> that has href equal to init_link.
$('dd').filter(function () {
return $('a[href="' + init_link + '"]', $(this)).length == 0
}).hide();
Just change the init_link value to what the current URL. Watch out for the hostname part because your <a> might not contain absolute URL. This might help Get current URL in web browser.
To get currnet URL without the hostname part, you could (not must) use following code
var init_link = window.location.href.replace(window.location.protocol+'//'+window.location.hostname+'/', '')
To clarify, it seems like all you are looking to do is apply a class to the dt in addition to hiding/showing the next dd item? This can be achieved with callback functions, or by simply chaining the method on. Something like this:
<script type="text/javascript">
$(document).ready(function(){
var $menu = $('dl.menu');
$('dd', $menu).hide();
$('dt a.submenu', $menu).on("click", function(e){
e.preventDefault();
var $parent = $(this).parent('dt');
if($parent.hasClass('active')){
$parent.removeClass('active').next('dd').slideUp("slow");
} else {
$parent.siblings('.active').removeClass('active').siblings("dd").slideUp("slow", function(){
$parent.addClass('active').next('dd').slideDown("slow");
});
}
$("dd:visible", $menu).slideUp("slow", function(){
$(this).removeClass('active');
});
$(this).parent().next().slideDown("slow");
});
});
</script>
Hope this helps provide some direction.
I am new to JQuery. I'm using a menu bar shown in the following link
http://tympanus.net/Tutorials/UIElements/LargeDropDown/
The source code can be downlloaded from
http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/
I have attatched the code and files to my project.
The problem is that when i first open the page, it showing the contents in the right way as shown in the image below
and on mouse enter the list item expands and shows the sub details below correctly
but when i move the mouse away from the item, the text overflows and comes down. if it is a single word then there is no problem but it there are two or more words this happens. You can see this in the image below
I'm also giving the javascript code
<!-- The JavaScript -->
<script type="text/javascript" src="Styles/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/**
* the menu
*/
var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function () {
var $this = $(this);
var $span = $this.children('span');
$span.data('width', $span.width());
$this.bind('mouseenter', function () {
$menu.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({ 'width': '510px' }, 300, function () {
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave', function () {
$this.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({ 'width': $span.data('width') + 'px' }, 300);
});
});
});
</script>
Can you please help me out???
You could try to add a min-width via CSS for your li (W3School min-width). The following code affects all your li coming after your ul with the id ldd_menu.
#ldd_menu li {
min-width:200px
}
You could also use for only one specific li.
<li style="min-width:200px">
Or via jquery in your each-block (jQuery CSS)
$span.css("min-width", "200px");