I purchased a theme off of http://themeforest.net and now the them was taken off.
The original theme functionality was to have all of the links pages inside of their own divs in the index page however I changed the functionality so that each link is on its own controller since I am using Codeigniter.
What I want to happen is when a new link is clicked it still rolls up the content div and goes to the clicked link and then rolls down the content of that page. As of right now it rolls up ALL the way up the page and doesn't even load the new page. The commented section of code is what the original code was from the template.
/*****************************************************
MENU TRANSITION EFFECTS
******************************************************/
$("#menu1 ul li a").click(function(e){
e.preventDefault();
$('#container').animate({top:'-500px'},500,'easeInQuart');
/*
var id = $(this).attr("href");
if(id == aid) return false;
$('#menu1 ul li a').removeClass('a');
$(this).addClass('a');
if($("#container > div:visible").size() > 0) {
$("#container > div:visible").animate({top:'-500px'},500,'easeInQuart',function(){ $("#container > div:visible").css({display:'none',top:'-500px'}); $('#container > div#' + id).css({display:'block'}).delay(400).animate({top:'500px'},800,'easeOutQuart');
$(function() {
$('.scroll').jScrollPane();
});
});
} else {
$('#container > div#' + id).css({display:'block'}).animate({top:'500px'},200,'easeOutQuart');
}
aid = id;
return false;
*/
});
Edit: I tried it on my regular site and for some reason it wasn't working the same. Here's the template. I uploaded it to one of my other sites for display. Keep in mind the difference is that each link is a new controller and each div is a new view. Does that explain any further the differences between the original template and what I"m trying to accomplish.
http://www.justmyfiles.me/
Does anybody have any ideas?
The "transition" javascript code could look like :
$("#menu1 ul li a").click(function(e){
var a = this;
e.preventDefault();
$('#container').animate({top:'-500px'},500,'easeInQuart',function() {
location.href = a.href;
});
});
And the document ready code :
$(document).ready(function() {
$('#container').animate({top:'0px'},500,'easeInQuart');
});
/*CSS*/
#container { top: -500px; }
Related
I want to add class in link if previous link was home link i am trying so hard but I am not getting the answer of it.
it is simple nav bar, if active link home then clicked link will be added a class..thats it
$('ul li').click(function(){
var prevLink = ??; // how can i get prevLink here
if(prevLink == 'Home') {
$(this).addClass("addext");
$('ul li').removeClass("addext");
}
});
how to check previous active link ?
Hope this will help:
var globalPrevLink = "";
$('#Home').onclick(function(){
globalPrevLink = window.location.href; // this is clicked last time so remember it in globalPrevLink variable
});
Put above code somewhere in your js and change Home to whatever ID you have given to your home link tag.
then change your code as
$('ul li').click(function(){
var prevLink = globalPrevLink; // globalPrevLink is assigned here
if(prevLink == 'Home') { // change this also as accordingly, use console log
$('ul li').removeClass("addext"); // switch as suggested in other comment
$(this).addClass("addext");
}
});
Not the complete answer, because of your missing html, but you should switch these two lines:
$(this).addClass("addext");
$('ul li').removeClass("addext");
To:
$('ul li').removeClass("addext");
$(this).addClass("addext");
Otherwise you set, and instant remove the class.
Use $('ul li.addext').text(); to get the li text which has addest class
$('ul li').click(function(){
var prevLink = $('ul li.addext').text();
if(prevLink == 'Home') {
$('ul li').removeClass("addext");
$(this).addClass("addext");
}
});
I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});
You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle
I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/
I want the current content to slideUp and then slideDown the clicked content and I am stumped on why the code I have won't work. It just slides down the text . content. Any help much appreciated!
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
$(".contentContainer").html('.content');
}).slideDown(1500);
});
});
});
When you do .html('.content'), you're telling jQuery to literally make ".content" the innerHTML of the container (ex.: div or span with class .contentContainer).
It's a little unclear what content you are trying to place in .contentContainer, but assuming it is the html of the first tag with the class ".content", you could use this:
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
// Change this line...
$(".contentContainer").html($('.content').html());
}).slideDown(1500);
});
});
});
Edit: Updated to make it take the content of the first tag with the class ".content".
http://jsfiddle.net/nn0x6da8/2/
I am trying to add a class to links in the navigation by detecting a div with a specific id, each div is on a different page and located at the top.
If I use this for each individual instance, changing out divs and classes respectively
$(document).on("scroll ready", function() {
if ($(this).scrollTop()>=$('#contact').position().top){
$("#nav .contact a").addClass("ur-here");
}
});
the code works, unless I use that code repeatedly like this
$(document).on("scroll ready", function() {
if ($(this).scrollTop()>=$('#contact').position().top){
$("#nav .contact a").addClass("ur-here");
}
});
$(document).on("scroll ready", function() {
if ($(this).scrollTop()>=$('#blog').position().top){
$("#nav .blog a").addClass("ur-here");
}
});
at which point only the first instance works (by first instance I mean it doesn't matter which part I put first, the rest seems to be ignored).
.
I have also tried including them all into one function
$(document).on("scroll ready", function() {
if ($(this).scrollTop()>=$('#intro').position().top){
$("#nav .home a").addClass("ur-here");
}
else if ($(this).scrollTop()>=$('#services').position().top){
$("#nav .service a").addClass("ur-here");
}
else if ($(this).scrollTop()>=$('#contact').position().top){
$("#nav .contact a").addClass("ur-here");
}
else if ($(this).scrollTop()>=$('#blog').position().top){
$("#nav .blog a").addClass("ur-here");
}
});
But yet again only the first instance works.
I've also tried switching out
$(document).on("scroll ready", function() {
with
$(document).ready(function() {
and
$(window).load(function() {
with similar results, except if I use
$(window).load(function() {
in the second instance the code works for it and the first, but continues to ignore the rest after it no matter what I use.
help please
edited
its a wordpress site if that helps
solved
I just targeted the individual "#"s with
if ($("#mydiv").length > 0){
If the targeted div exists and has a length greater than 0, I can make the nav links do stuff.
If your goal is to make sure that as you scroll either direction, you show the ur-here class on the bottommost element that the user has scrolled the top of the window into, then: Live Example
$(document).on("scroll ready", function() {
// Remember scrollTop
var scrollTop = $(this).scrollTop();
// Remove the class from all relevant elements
$("#nav a").removeClass("ur-here");
// Working from the BOTTOM up, add it to the first matching element
if (scrollTop >=$('#blog').position().top) {
$("#nav .blog a").toggleClass("ur-here");
}
else if (scrollTop >=$('#contact').position().top) {
$("#nav .contact a").addClass("ur-here");
}
else {
// ...and so on
}
});
How can I do so that the menu does not ride up when I click inside subbmenyn?
(Subbmenu will go up when you click on the main link or outside.)
Can it be done without javascript?
Then the menu goes over and works with muse over if you do not have javascript enabled.
FIDDLE
CODE:
$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
})
Simply change the else to check that the clicked element isn't in that container, and that it's not the container.
Though you have several elements with the same Id, you should change them to a class
<div class="contentHolder">
so your jQuery would then be
else if (!$($elem).parents('.contentHolder').length && !$elem.hasClass('contentHolder')) {
And you'll need to update the CSS #contentHolder to .contentHolder
http://jsfiddle.net/6ddvq/5/