I have a list ul (its id is menu_) with multiple elements li, these lis are initially in class in-active, I want when the client click on one li to be redirected to another page and then change the CssClass of this li to active. I've tried this JS code but didn't work, it didn't redirected to the another page after client click an li (it remains in the same page):
$(function () {
$('#menu_ li').click(function () {
$("li.active").removeClass("active");
$(this).addClass("active");
return false;
});
});
You can do this inside each page.
$("li.active").removeClass("active");
$( "ul#menu li:nth-child(n)" ).addClass("active");
Keep this code in ready event.
n is number of li that you want to add class to.
You are mixing server-side/client-side functionality here. Your JS code is purely client-side and it will toggle the classes correctly, but having return false; means that the link will not be followed, so no redirection will be performed (no server side code will be run).
You could remove return false; and then the classes will be changed and the redirection will be performed, but once the redirect has been done, you have a new page and the class changes will not persist.
You basically have three options:
Have a JS code as Imadoddin Ibn Alauddin suggest above inside each child page which takes care of setting the correct element in the navigation to active once the page loads.
Somehow persist the state between requests, once you add the active class, save the state in a cookie or local storage for example. Then every time a page loads, check if the cookie/local storage contains such data and update the state accordingly.
Change the state of the navigation on the server side, so once each page loads, add the active class to the corresponding page.
I'd recommend option 3.
Bottom line: You cannot mix things like you are doing now. Having return false; will cancel the redirection out. Once the redirection is performed, a new page will load and the navigation will be reset so any change you made using JS before the redirection was done is gone.
Related
I have some links on the page and when user click on link, page is reloaded.
All links have some ID and all have the one same class.
I need to click on some other link after page is reloaded, but only if user click on some of the link with particular class (not anywhere, like menu link).
How I can do something like this using JS or jQuery?
It sounds like you are attempting to build a single page application, ie the application is mostly run by JavaScript instead of server side rendering. In this case page reloads are you enemy. A page reload is basically a restart of your page, and while you can keep state using cookies or localStorage, this will provide you with a rather poor user experience.
In this case, you would just add event handlers to any actions your user would take, and simply handle them in javascript without reloading the page from the server. If you need to get more data in response to the user's actions, you can use AJAX to pull that data from the server.
If you have to use links with urls (still unclear to me why that would be necessary), I would recommend using hash urls like so '#some-action' which will not reload the page when clicked. You can then attach an event handler to the link, or even listen for the url hash to change using the hashchange event. In this way you can know what link the user pressed.
If you are not trying to build a single page application, you will need to add code on the server to store the information you need in the page.
I did it.
So, I created function:
/**
* Click on delivery link after page reload
*
* #return {boolean} [loacalStorage is available]
*/
$.fn.openDelivery = function(){
if (localStorage) {
var addedToCart = localStorage["addCart"];
if (addedToCart) {
setTimeout(function() {
$('#showRight').trigger('click');
}, 1500);
localStorage.removeItem("addCart");
}
$(this).click(function(e) {
localStorage["addCart"] = true;
});
return true;
}
return false;
};
And then called that function:
$(document).ready(function () {
// Trigger delivery click
$('.class-of-my-link').openDelivery();
});
In my case, page reloads after user add some item in shopping cart. With this function I click on link (with 1.5s delay) that opens cart of the user that is shown on the right side of the screen.
I am creating a website where all my content is loaded into a div name content. my menubar is also loaded in to a div name menu.
The problem arises when i click the same link for a second time. So for instance i would click on members.php for a second time, the content is loaded into the div but some of my functions dont work as expected as they rely on and id which has been set. An ID can only be used once so when i load the page for the second time the ID doenst work. I would have to remove it before loading the content another time (which isnt an option) - as there are many ids.
i would be using jquery to load the content into the div. for instance $('#content').load('members.php');
but upon doing this the second time my id's would not work (content of the first page load stays intact) is there a way to reload that div.
Also is this normal behavior?
You can use a flag to define if this content loaded before or not, check it every time you call the loading function if it is not loaded before then load it, else no need to reload it again.
//initialize members_loaded variable when your page start.
var members_loaded = false;
//then when you want to load data check for it, change it to true in your complete function (when ajax done)
if(!members_loaded){
$( "#content" ).load( "members.php", function() {
members_loaded = true;
});
}
Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!
Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active
Script:
$(".classname li a").each(function() {
var hreflink = $(this).attr("href");
if (hreflink == location.href) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
CSS:
.classname li a.active{color:#ef9223;}
Whenever I do a page refresh, if the same link is on a different page, the active class is no longer applied to that link.
Actual exmple
i have the following Navigation links A B C D E F G H .... Z. And the same Navigation is in the main page(header section).. so when i click on any one link .. it needs to be active on when i arrive to any one A B C D E..or Z pages. And even on page refresh it needs to retain the active link. Hope that explains...and helps :)
Any help, inputs, solution would be much appreciated.
Inside of your each loop, this is actually the anchor tag not the tag that has the class 'classname'. Your css should be:
.active {color:#ef9223;}
Also, you do not need the remove class if this code is being run on page load.
CHeck out this jsFiddle for an example - http://jsfiddle.net/XWLWL/7/
A class, or anything that you add with JavaScript does not persist on page refresh. That's just how it works.
JavaScript is only modifying your locally loaded HTML elements and structure. Once you refresh the page, or go to another page, all of that state is cleared out by the incoming page load. The server has no knowledge of anything you did on that page. It will send a new page with the default state, and any JavaScript will then run. This script also has no knowledge of any previous page loads or script execution.
If you want state to persist across page loads, you need to do it at the server side, which involves making AJAX calls to the server to let it know what links you want to be "active", and then the server would be responsible for adding that class on subsequent page loads.
Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite )
$('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});
nav li is as follows
<nav>
<li class="highlt">
<span>Home</span>
</li>
The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work
Thanks in advance!
siblings has your current element selected, you don't want to remove his 'on' class.
$('nav li a').click(function() {
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
});
edit : nvm, your code works fine : look at this jsfiddle.
re-edit : I'm totally wrong, siblings does not contain the current element.
re-re-edit : If you link to another page (href="index.php"), the page will be reloaded (or a new one will be loaded) and your JavaScript click action will be forgotten, could it be the error?
You might wanna try it like this:
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
What you did is add the class "on" to the LI and then removed it with .siblings().removeClass('on');