Any suggestions would be good. It is very simple but I cannot figure it out.
I am using a simple jQuery accordion script. Here is the HTML:
<ul id="menu">
<li>
<a>Weblog Tools</a> <!-- THIS IS MY LINK BUTTON -->
<ul>
<li>PivotX</li>
<li>WordPress</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<li>
<a>Programming Languages</a> <!-- THIS IS MY LINK BUTTON -->
<ul>
<li>PHP</li>
<li>Ruby</li>
<li>Python</li>
<li>PERL</li>
<li>Java</li>
<li>C#</li>
</ul>
</li>
</ul>
And here is the script:
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('a.collapse').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {initMenu();});
Nice simple script, nice and light.
This is my question, any suggestions would be amazing!
I need to get the <a>Link Button</a> in the current visible menu to be display: none and alternate between open menus.
So the idea is, when the current visible menu is open, the link that opens it has a the style display: none added to it. But all the other <a>Link Buttons</a> should be visible and not have the style display: none applied. This is so the menu can still be functional.
Only the visible open menu should have display: none.
This would be so awesome if you can help. Thanks in advance.
Modify menu.js from
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
To this:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu li a').show();
$(this).hide();
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
I modified the first part so it won't show the first sub menus.
Then I added this lines so that it will show the other links, but hide the active link.
$('#menu li a').show();
$(this).hide();
EDIT:
You can also check a working implementation at http://jsfiddle.net/3cmPz/
Related
Im trying to create a dropdown with jQuery.
So far I have written my code to show the menu, but once open and my users clicks an item, the menu then closes.
Anybody have an idea of how to combat this?
http://jsfiddle.net/8fnhb6yr/
// Language selector
$('.sub-lang').on('click', function(e){
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
Just check also if e.target parent is li.sub-lang like the following
$('.sub-lang').on('click', function(e){
if ($(this).hasClass('active') && $(e.target).parent().hasClass('sub-lang')) {
$(this).removeClass('active');
$(this).css('height', 'auto');
} else {
$(this).addClass('active');
$(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});
li ul {display:none;}
li.sub-lang.active ul {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="sub-lang">
English
<ul style="">
<li>International</li>
<li>UK & Ireland</li>
</ul>
</li>
The menu close because you listen to the click event on the menu (.sub-lang).
When you click on a children, the event will "bubble" and the parent will have the event too. So you have to listen to the click event on children too to prevent it to bubble :
$('.sub-lang ul a').click(function(event) {
event.stopPropagation();
event.preventDefault();
});
I edited your fiddle
Here I use tab menu for select different tab i want to change the color of selected button, when I select button change it color
<div id="tabs">
<ul>
<li><a class="active" href="#" name="tab1">Tempu Services</a></li>
<li>Buy and Sale</li>
<li>Job Service</li>
</ul>
</div>
and my css id
and my JavaScript is
<script>
$(window).load(function(){
$("#tabs ul li a").click(function () {
$("#tabs ul li a").not(this).removeClass("active").addClass('unactive')
$(this).toggleClass("unactive").toggleClass("active");
});
});//]]>
</script>
i also use this script for this
<script>
$(document).ready(function() {
$("#contenty").find("[id^='tab']").hide();
$("#tabs li:first").attr("id","currenty");
$("#contenty #tab1").fadeIn();
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "currenty"){
return;
}
else{
$("#contenty").find("[id^='tab']").hide();
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current");
$('#' + $(this).attr('name')).fadeIn();
}
});
});
</script>
and i use jquery 1.9.1
The most minimal approach would be,
$("#tabs ul li a").click(function () {
var active_link = $("#tabs ul li a").filter('.active').removeClass('active'); // filter elements only with class active and remove it.
$(this).toggleClass("active"); // toggle active class of this element
});
DEMO
Try,
$("#tabs ul li a").click(function () {
$("#tabs ul li a").removeClass("active").addClass('unactive')
$(this).toggleClass("active unactive");
});
DEMO
$(document).ready(function () {
$("#tabs ul li a").click(function () {
$('#tabs ul li a.active').removeClass('active').addClass('unactive');
$(this).addClass('active');
});
});
Try wrapping the code in ready event handler instead of load.
I am using jQuery to turn my css dropdown menu into a touch enabled menu when on devices that support it. The problem I am having is that I have the parent li's behavior stopped using e.preventDefault() and I cant seem to figure out how to get the children li's to function as normal. Here is the code I am using:
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
$('#menu > li:has(ul.sub-menu)').click(function (e) {
e.preventDefault();
$('#menu > li > a.sub-menu').toggle(300);
$('#menu > li > ul > li > a').trigger('click');
})
}
The functionality of keeping the main li from going through and toggling the sub-menu works perfectly. I now just need the sub-menu a to go through when clicked.
Stop the propagation from those anchor elements
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
$('#menu > li:has(ul.sub-menu)').click(function (e) {
e.preventDefault();
$('#menu > li > a.sub-menu').toggle(300);
$('#menu > li > ul > li > a').trigger('click');
})
$('#menu ul.sub-menu a').click(function (e) {
e.stopPropagation();
})
}
I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.
Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
I'm looking for a cross browser compatible solution to highlight tabs. On page load the first tab should highlight and on click of the other tabs, the first tab would unhighlight and the selected tab would highlight. Can't get this functionality working in same fashion in IE and Firefox at the same time. Any inputs on that?
Note: The below code works but when I click on any other link on the page, the focus on the tabs is lost and hence the currently selected tab is not highlighted.
JS
$(document).ready(function () {
activate('focusmeplease');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function () {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
});
});
function activate(link) {
if (document.getElementById) document.getElementById(link).focus();
else if (document.all) document.all(link).focus();
}
HTML
<div id="tabs">
<ul>
<li class="clas" onclick="javascript: addPlayer('tab-1','1649028604001');">
First tab
</li>
<li class="clas" onclick="javascript: addPlayer('tab-1','1651558610001');">
Second tab
</li>
</ul>
<div id="tab-1"></div>
</div>
In your click event, just call the focus method. Like so:
$(document).ready(function () {
activate('focusmeplease');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function () {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
$(this).focus(); //i've added this
});
});
See this Fiddle HERE
Finally this is the code that worked across browsers. I had to move the addPlayer function from the onClick action of the anchor tag to within the jQuery li click function.
jQuery(document).ready(function(){
addPlayer('tab-1', '1649028596001');//on page load, display this.
jQuery('#tabs ul li:first').addClass('active');
jQuery('#tabs ul li').click(function () {
addPlayer('tab-1', playerIdArray[jQuery(this).index()]);
jQuery('#tabs ul li').removeClass("active");
jQuery(this).addClass("active");
});
});
<ul>
<li class="class4" >Bond</li>
<li class="class5" >Stock</li>
</ul>
<div id="tab-1">
</div>