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');
});
});
Related
below is my jquery code for a dropdown menu :
$(function(){
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".menu").toggle();
});
var ww = document.body.clientWidth;
if (ww < 1000) {
$(".toggleMenu").css("display", "inline-block");
$(".menu").hide();
$(".menu ul li a").click(function() {
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".menu li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
})
what i am trying to do is add the class "hover" to the "li" of the clicked "a" so that the drop down menu works properly on mobile deivices(device with less than 1000px in my case). but with the code above, i need to click twice to any "a" element for the dropdown to apper, as far as i am concerned when i click on "a" element, the class "hover" should be added to its parent "li" element and the hidden "ul" under it should be shown(because i have written the css in that manner) but at the moment i should click on the "a" element two times(not double click).The html structure is like:
<ul>
<li>
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
I am new to Html,jQuery coding.I want to change background color of item selected(clicked) of an li.
I have my code below :
#In HTML#
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li style="list-style: none; display:inline;padding-left:5px;" class="text-primary" ng-click="GetProducts(x.code)" ng-repeat="x in Major">{{x.code}}</li>
</ul>
</div>
# In controller#
$('#major li').click(function () {
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
});
What am I doing wrong ? When I click on li item, It doesn't call that function.
IF I use this dynamic list it doesn't hit that function but if I use static list it does hit that function.How should I implement click function for dynamic list?
When I click on li item, It doesn't call that function.
Are you sure JQuery is loaded properly?
Are you sure, you're not setting another click event for your list items?
Is your CSS defined correctly?
Anyway, this works for me:
$(document).ready(function () {
$('#major li').click(function () {
$('li').removeClass('selected');
$(this).addClass('selected');
console.log("HERE");
});
});
.selected{
background: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li>XXXXX</li>
<li>YYYY</li>
</ul>
</div>
The click event is triggered (check with console.log function) but the action you execute are not defined properly.
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
should be
$('li').removeClass('selected');
$(this).addClass('selected');
If your list is dynamically generated (not in the DOM on page load), the problem may come from the click function. In this case, just use :
$(document).on('click', '#major li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
where you can replace document by the container of your list. Per example :
$('#major').on('click', 'li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
Here is a JSfiddle with working example: https://jsfiddle.net/ztvdnh86/2/
Try this:
# In controller#
$('#major li').click(function () {
$('li.selected').removeClass('text-primary selected');
$(this).addClass('text-primary selected');
});
what you've written 'text-primary.selected' tries to select the element with the tag-name text-primary with the class .selected
what you want to do is to remove the selected class from all the lis with the class text-primary and then add the class selected to the clicked (selected) element:
$('#major li').click(function () {
$('li.text-primary.selected').removeClass('selected');
$(this).addClass('selected');
});
I have the following dropdown that opens when the mouse hovers it:
Now is it possible to open the same dropdown when the user highlights it via the tab key.
I've tried learning from this: Selecting div in custom dropdown using Keyboard (Up, down and enter keys)
But this not seems to be working.
Thanks to anyone who can help!
HTML:
<div class="choose_language">
<a class="btn_choose_language" href="#" title="Change language">
<abbr title="English">EN</abbr>
<img alt="" height="11" src="/assets/nav_btn_choose_language.png" width="15">
</a>
<ul class="radius5" style="overflow: hidden; display: none;">
<li>
<a href="/jobs?locale=fr">
<abbr title="Français">FR</abbr>
</a>
</li>
<li>
<a href="/jobs?locale=nl">
<abbr title="Nederlands">NL</abbr>
</a>
</li>
</ul>
</div>
JS:
$(document).ready(function () {
/* =============================================================================
PORTAL NAV -> highlight clicked element + show/hide and equalize heights of Main Nav level 2
========================================================================== */
$('header nav#nav > ul li a h3, header nav#nav-mystib > ul li a h3').click(function(e) {
e.stopImmediatePropagation();
//alert($(this).html())
if(e.target != this) return;
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box except clicked one
$('.context_box').not($(this).parent().parent().children('.context_box')).fadeOut(100);
//hide more_info box and .my_space box if open
$('.my_space .more_info_box, .my_space .opened').hide();
//show/hide THIS context box
$(this).parent().parent().children('.context_box').fadeToggle(0);
//set level2 columns at same height
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:lt(5)").equalHeights();
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:gt(4)").equalHeights();
//reset the selected item
$('#nav_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
/* =============================================================================
NAV -> highlight clicked element
========================================================================== */
$('header nav#nav-mystib > ul li a h3').click(function() {
//reset the selected item
$('#nav-mystib_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
// Nav -> show/hide language selector
$('.choose_language').hover(function() {
if (detectmob()) { return;}
$('.choose_language ul').slideToggle(200)
});
/* open mySpace*/
$('.my_space .closed').click(function() {
$('.my_space .opened').show()
return false;
});
/* close mySpace*/
$('.my_space .opened .btn_close').click(function() {
$('.my_space .opened').hide();
return false;
});
$('.my_space .info').click(function(e) {
e.stopImmediatePropagation();
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box
$('.context_box').hide();
$('.my_space .more_info_box').fadeToggle(200)
});
// Hide context_box, .more_info_box when click outside of it
$(".context_box, .more_info_box").bind( "clickoutside", function(){
$(this).hide();
});
$(".choose_language").bind( "clickoutside", function(){
if (detectmob()) { return;}
$(this).children('ul').hide();
});
// Hide context_box, .more_info_box when mouse is outside of it
$(".context_box, .more_info_box").hover(function(){
var el=this;
$(el).stop(true,false)
},function(){
var el=this;
$(el).delay(700).hide(10)
});
});// end of dom ready
you can do it like this:
You check if the element got focus, and then show it via jQuery.
You can also use blur to check if the element lost focus and hide the drop-down (I added the class last to the last li element, you can do it in a variety of ways).
<a href="/jobs?locale=nl" class="last">
$(document).ready(function () {
$( ".btn_choose_language" ).focus(function() {
$( ".radius5" ).show();
});
$( ".last" ).blur(function() {
$( ".radius5" ).hide();
});
});// end of dom ready
I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});
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>