JQuery calls function that shouldn't be called onclick? - javascript

Have a look at this JSFiddle: http://jsfiddle.net/kZ3Af/25/
I have the base navigation pinned down nicely. However when I try to click any of the navigation items, the whole menu dissapears? What's that about?

Why are you doing
$('.navcontent').hide();
See update 30.
[Two minutes later...]
Ok, I think I get it: you want to switch between both list interior and exterior. I restructured your HTML a bit (don't put <div>s into <a>s), that's why your styling is a little bit off. Then I changed the selector as Steven Lu suggested: try update 36

You're calling $('.navcontent').hide(); which hides all your <ul> with the class navcontent which is why the whole menu disappears.

Your statement:
$('#column1 a').click(function(){
switchlist($(this));
});
Is matching the inside content of ALL links, causing your switchlist function to be fired.
You will need to wrap your top nav with a new id and change the the selector to something like
$('#topnav a').click();

You call $('.navcontent').hide(); in your click handler. Just remove that and it should work.

select direct anchor childs: $('#column1 > a').click

Related

Left menu like wordpress

I'm trying to find a javascript library (better if can be done usiny jquery) to replicate more or less the functionality of the left menubar of wordpress once you are logged.
This menus has images with names, you can expand/collapse, if you hover you can see the options in a new extended window, if you click on it the menu expand with the same previously show options, ...
I've found some libraries/jquery plugins but they are not too close ...
I'm not tied to find a free open option, it can be a commercial one.
Maye it can be done with jquery collapse, but well, if it already exists, better ...
thanks,
Basic javascript and css will do the job, the menu is an ul and each menu-item is a li with another ul inside of it, which has display:none; in css. When you click it just use javascript to show it. For the hover just add an event listener to hover on each li-element and either show/hide the ul or append it.
Or am I missing something you're after?
Something like this?
Look at this demo
$('ul#tabs li').hover(function() {
$(this).find('ul').hide().stop().animate({height: 'toggle'});
}, function(){
$(this).find('ul').stop().animate({height: 'toggle'});
});
Works also with JS disabled.

Jquery menu: default active DIV container

The above-show code works fine excepting the following case. When I open web-page, the content of DIV container is empty and I can see just the navigation menu. Once I press on menu or submenu items, the content is filled with correct data. So, my question is how to use the DIV container 'submenu11' by default? The code line $active = $('#submenu11').addClass('active'); does not solve this issue.
Look at jFiddle.
Can you add css to the fiddle? I am not understanding the question completely.
From what I understand you want to show the submenu11 by default right? so I am assuming the rest of the stuff should be hidden which I assume it is done in the css already. your code
$active = $('#submenu11').addClass('active');
does not do anything because you are assigning it to $active
I think you are looking for something like this maybe?
$(document).ready(function() {
$('#submenu11').addClass('active');
});
this is assuming all your css classes are defined correctly
$(document).ready(function() {
//code for ajax calling
$('#submenu11').addClass('active').trigger('click);
});

jQuery show list items

I have two ul's that when the top li is clicked it shows the others below and hides another opened in other ul's.
My problem is I had to add a View All link beside the main li which I want to direct the users to a view all page while still allowing them to click main li to display the list.
I have put another a tag beside the main li's but now I cant get the show feature too work. Not sure what might be wrong.
I am not a great at traversing the dom and I know I have the siblings worng.
http://jsfiddle.net/ukkpower/En7KV/8/
EDIT: Sorry, I missed the hide all others requirement. Thanks for the comment. Please look at the link now and that issue should be resolved.
Note that I've wrapped the lists in a div called _sidenav. I much prefer this approach to looking for siblings as it's a bit easier to read and interpret at a glance and has less room for confusion in the future.
I think I understand what you want. Take a look at this fiddle:
http://jsfiddle.net/CU9zg/3/
I'm assuming the View All link is suppose to take you to another page, while the main li for a list acts like an accordian, hiding or showing the other items when clicked.
$('ul li.cat-item', $('#_sidenav')).hide();
$('.cat-item', $(this).closest('ul')).toggle();
Try this - http://jsfiddle.net/En7KV/10/
$('a.show_list').on('click', function(e){
e.preventDefault();
$(this).parent().siblings().toggle();
$(this).closest('ul').siblings().find('li a.show_list').parent().siblings(':visible').hide();
});

Why does displaying/hiding an HTML element via Javascript put it on a new line?

I have this page: http://www.problemio.com/problems/problem.php?problem_id=214
On it there is a link "suggest a solution" towards the middle bottom of the screen. If you click it, it calls a JS function to hide it, and show a diff element in its place. For some reason it places the other element on the next line which looks awkward.
Would you know why this is happening? I can't figure it out :)
The <a> tag containing the link Suggest a solution is set to display: block; This causes the breaks before and after.
Use $("#show_existing_suggestions").hide() / show() to achieve the same rather than adding the style. I tried it on Chome Developer tool and it worked as expected... Give it a try :)
Anchors are block elements by default. You'll need to style them to be inline.

CSS-sprite menu and jQuery addClass() method

I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)
Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.
I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.

Categories

Resources