I'm using .load to switch content in my #content div but when I click on a link it brings me to a white page saying "cannot get /index" or whatever.
The initial content does get loaded so I know the first three lines of code work.
Any ideas why I "cannot get" my other files?
Here's my HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
</ul>
</div>
And the Jquery
$(document).ready(function() {
// initial
$('#content').load('content/index.html');
// handle menu clicks
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.html');
return false;
});
});
Here is the answer -
$(document).ready(function() {
// initial
$('#content').load('content/index.html');
// handle menu clicks
$('div#nav ul li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/' + page + '.html');
return false;
});
});
Shortly, the #nav is the id of the div not the ul so $('ul#nav li a'). should have been $('div#nav ul li a'). more precisely $('div#nav > ul > li > a').
If you want animations like fade, try this -
$('div#nav ul li a').click(function() {
var page = $(this).attr('href');
$('#content').fadeOut('fast', function(){
$('#content').load('content/' + page + '.html', function(){
$('#content').fadeIn('fast');
});
});
return false;
});
But for sliding animation its gonna be a little tricky, cause you have to do something like that -
Fist slide left by animating width
Then take the div to the right end of the window using css left
Load it and make the width normal
change the left to make it slide left again.
This will give you a space between animations, but if you want spaceless animation, then you will have to use more divs and a little more logics. Happy experimenting.. :)
When the content is loaded dynamically the actions on html elements will not be catched by direct .click() function So:
Use $(document).on('click', 'ul#nav li a', function() {
Instead of $('ul#nav li a').click(function() {
This Worked for me
As per your edit
You have a wrong jQuery selector, it should be -
$('#nav ul li a').click...
Related
I have used jQuery to generate a sequential numbering for my menu items.
When clicked, the hyperlink text becomes red.
However, the problem here is that I want the respective number to turn into red as well when the hyperlink is clicked (active).
Such as when 'WHY YOU NEED IT' is clicked, the text turns red perfectly. But I need the number 1's background color to change into red as well.
I tried replacing classes but it didn't work.
This is the JS.
jQuery(function ($) {
$(".menu-solutions-menus-container ul li").each(function (i, el) { $(this).children('a').prepend("<number>" + (i + 1.) + "</number>");
});
$('.local-scroll').click(function (event) {
event.preventDefault();
var full_url = this.href;
var parts = full_url.split('#');
var trgt = parts[1];
var target_offset = $('#' + trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({
scrollTop: target_top
}, 500);
});
$('.menu-solutions-menus-container a').click(function () {
$('.menu-solutions-menus-container a').removeClass('active');
$(this).addClass('active');
});
$('.number').click(function () {
$('.number').removeClass('active');
$(this).addClass('active');
});
Here's the jsfiddle workspace. (Change jQuery version to jQuery 1.7.2 or above if you don't see the numbers.)
The secondary menu in this site is where I would really want to implement it.
Thanks a lot in advance.
Your class names just need a tweek and this'll work fine
change
number.active {
background: white;
}
To
.active number {
background: red;
}
Edit (explanation)
The CSS selector number.active is looking for an html element number that has a class of active like this <number class="active" /> but what your HTML shows is that you wanted the parent <a> to have the active with a child node of <number>.
So to do that you put the parent class first, followed by a space to note a child node of the parent, followed by the element you want to target.
so:
parentElement.parentClass childElement.childClass {
defs
}
you could write
a.active number {
background: red
}
Edit 2 for top bars:
There's a few things, the first being that the grey areas are actually background colors, as opposed to borders. Second the CSS selector is looking for a parent class of "active" but your "active" is a child of the <li>'s
<li id="menu-item-205" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-205">
</li>
what you can do is make the li the get the active class like this
$('.menu-solutions-menus-container a').click(function () {
$('.menu-solutions-menus-container a').removeClass('active');
$(this).parent('li').addClass('active');
});
$('.number').click(function () {
$('.number').removeClass('active');
$(this).parent('li').addClass('active');
});
$('.menu-solutions-menus-container a').click(function(){
$('ul.shortcode_menu.solution-menu li').removeClass('active');
$(this).parent('li').addClass('active');
});
Then change your CSS to reflect the <li> is the element with the active class.
ul.shortcode_menu.solution-menu li.active {
background: black;
}
Again I've changed it to background: black instead of border-top, as I think that's the effect you want.
My problem is that my navbar has scroll to link function, because my site is in one page.
But I tried to add a new link to menu, with an external link (not in the same page).
When I click it, it won't open the link (I assume jQuery script tries to scroll to it instead of opening...)
How should I fix it or add exception?
This is the html:
<ul class="menyy">
<li>Mis on Rahapuu?</li>
<li>KKK</li>
<li>Kes me oleme?</li>
<li>Laenud</li>
<li>Kontakt</li>
</ul>
And this is the jQuery script for smooth scrolling:
//smooth scroll to href value
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
jQuery('html,body').animate({scrollTop:dest}, 1000,'swing');
});
Any advice?
You could filter it to only include anchors with a hash based link
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").filter('[href^=#]').click(function(event){ ...
Since someone else threw out adding a class (which is by far the best way to do this, however I recommend just applying that class across the board and simplifying the selector), I figured I would provide an alternative that was universal and didn't require modding the HTML (in case you couldn't for some reason):
$(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").filter(function(){
return (!this.target || this.target !== '_blank');
}).click(function(e){
e.preventDefault();
//calculate destination place
var dest = 0,
htDiff = $(document).height() - $(window).height(),
hashOffset = $(this.hash).offset().top;
if(hashOffset > htDiff){
dest = htDiff;
} else {
dest = hashOffset;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1000,'swing');
});
This will only filter your original collection of objects down to items that either do not have a target listed, or do not have a target with a value of _blank. I also took the liberty of caching your calculations, since you use them multiple times.
You can give all the others a class name and leave the link one out
<ul class="menyy">
<li><a class="yourclass" href="#info">Mis on Rahapuu?</a></li>
<li><a class="yourclass" href="#kkk">KKK</a></li>
<li><a class="yourclass" href="#meist">Kes me oleme?</a></li>
<li>Laenud</li>
<li><a class="yourclass" href="#kontakt">Kontakt</a></li>
</ul>
And change to this:
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a .yourclass").click(function(event){
I'm pretty new to jquery and I decided to build a jquery tabber. So far so good but I have a little problem!!! I cant see how I can activate the tabber based on the URL. For instance when the link is www.myweb.com#tab2, the second tabber becomes activated. My jquery is as follows. Now I know jquery has it's own tabber script but I don't want to use it. So anybody else help me accomplish this please
Javascript
$(document).ready(function() {
var hash = location.hash;
var link1 = ("ul#tabs li a[href='" + hash + "']")
var link2 = ("ul.tabs li a[href='" + hash + "']")
var link3 = ("ul#tabs li[href='" + hash + "']")
$(".tab_content").hide(); //Hide all content
if ((link3.length)(link2.length)(link1.length))
{ //check if such link exists
$(link3, link2, link1).parent().addClass("active"); //Activate tab
$(hash).show();
}
else {
$("ul.tabs li a:first, ul#tabs li:first, ul#tabs li a:first").addClass('active');
$(".tab_content:first").show()
// On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
HTML
<ul class="tabs">
<li>Design Team</li>
<li>Publications</li>
<li>Awards & Recognitions</li>
<li>Our Mission</li>
<li class="last-item">Company Profile</li>
</ul>
this is how far I have come. Since I have 3 selectors the jquery code is weirdly not working how do I achieve this so tabber is activated based on URL? Thanks
Look at JQueryUI, they have pre-built components like this.
Specifically: http://jqueryui.com/tabs/
Edit:
Or is their a specific reason why you are building your own?
You can set the selected tab using the following :
$(document).ready(function() {
$('#tabs').tabs(); // make jquery tabs
$("#tabs").tabs("select", window.location.hash);
});
Second parameter of $.tabs function accept either index or a selector.
Basically I have 2 buttons that when hovered show/hide 2 hidden unordered lists so I use .toggle() for these
What I would also like to do however is when i hover and then click the link the unordered list remains visible, then when i hover and click the other link the previous hidden list is hidden again and the new clicked list is shown? Just not managing to work out how this can be best achieved, at the moment when i hover and then click as soon as i hover off the list disappears.
Hope this makes sense, fiddle is here http://jsfiddle.net/kyllle/D5Lmp/5/
Thanks
EDITED: I see now, updating based on your comment.
Basically, you just have to walk through the set of possibilities:
Hover over something active
Hover over something not active
Click on something active
Click on something not active
It's a logic problem more than anything, and here's the code and the fiddle to solve it:
$('#menu > li > a').hover(function() {
if(!$(this).is('.active')) {
var anyActive = $('#menu > li > a.active');
if (anyActive.length == 0) {
$('ul.inner:visible').hide();
$(this).next().show();
}
}
});
$('#menu > li > a').click(function(e) {
if(!$(this).is('.active')) {
var anyActive = $('#menu > li > a.active');
if (anyActive.length > 0) {
anyActive.next().hide();
anyActive.removeClass('active');
}
$(this).addClass('active');
$(this).next().show();
}
e.preventDefault();
});
Working fiddle: http://jsfiddle.net/D5Lmp/22/
I think I was able to get your desired functionality by excluding the hover toggle based on the active class. You can see it here: http://jsfiddle.net/D5Lmp/9/
code:
$('#menu > li a').hover(function() {
$(this).not(".active").next().toggle();
});
I am struggling with a collapsible vertical menu. The first part of the script below works, so that the upper UL display its sibling LIs, while the other ULs keep their sibling LIs hidden.
My difficult task (to me at least) is to make the parent UL to the active link keep its sibling LIs visible. This is what I tried in the lower part of the script.
My a-links some times get a trailing hash (#) which I want to remove in order to compare i to the active URL. This is done through the trimHash(string)-function--which works when tested on a simple string, but not in this script.
Any good advice out there?
$(document).ready(function() {
// Collapse everything but the first menu:
$(".mainmenu > li > a").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$(".mainmenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
$(".mainmenu li").each(function () {
var li = $(this);
var a = rtrimHash(li[0].firstChild);
if (a.href == location.href) {
$(this).find("+ ul").slideDown(1);
}
});
I ended up with this solution. As it is a Wordpress site, while stepping through the menu items in the menu I could check if each link is active by comparing the link to the active post, and insert the class "current" to these menu items:
echo '<li class="child';
if ( $menuPost->ID == $post->ID ) { echo ' current'; }
And then use jQuery to find all instances of the li "current" class, and trigger the parent ul's to slideDown:
$(document).ready(function() {
// Collapse everything:
$("li.cat").find("+ ul").slideUp(1);
// Collapse everything but the first menu:
//$("li.cat").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$("li.cat").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
$("li.current").parent().slideDown(1);
});
Sorry I didn't solve this through javascript as I intended, but I achieved what I wanted.