Variable not being set correctly; how to fix? - javascript

I want my JQuery to select one of the navigation links—based on the page that I'm on—and then I want it to move it to the top of the list.
This is the HTML of my navigation bar:
<nav>
<ul id=nav>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
This is the JQuery I'm using to try and reorder the list:
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
var ul = $('nav').children('ul'),
li = ul.children('li'),
href = $('a[href*='+page+']');
//move element to top
ul.prepend(href.parent());
});
It isn't working and I would assume that it's because the href variable isn't being set correctly. alert(href); and alert(href.parent()); output nothing.
Any ideas? Thanks!

As #user3064914 said, you missed '#', but you missed quotes either:
<ul id = "nav">

var href = $('a[href*="'+page+'"]');
EDIT
Also, you can write a bit shorter with child selectors:
var ul = $('nav > ul'),
href = ul.find('> li a[href*="' + page + '"]');
ul.prepend(href.parent());

Try this, it will work.
<script>
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function()
{
var href = $('a[href='+'"'+page+'"'+']').parent();
var parent = $("#nav");
var childToMoveLast = href.remove();
parent.prepend(childToMoveLast);
});
</script>
Here is the HTML
<nav>
<ul id='nav'>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

Related

Find #ID, AddClass by URL in Navigation Jquery

I am making a website. I want to go from link to next page with ID. Like the following
Page Name: index.html
Rings
Page Name: collection.html
<ul class="nav navbar-nav" id="nav">
<li id="rings" class="active">Rings</li>
<li id="earrings">Earrings</li>
<li id="neckwears">Neckwear</li>
<li id="purses">Purses</li>
<li id="mini">Set an mini set</li>
</ul>
I try to take code and implement in this but not get any success.
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(function(){
var current = location.pathname;
var url = window.location.hash;
$('#nav li').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
});
});
});
</script>
I wan to put active class automatically in #nav list via using URL # value.
You can just use the pathname as a selector, like this: $('#nav li#'+current)
There is no reason to loop through all of them.
$(document).ready(function() {
$(function() {
var current = "rings"; //location.pathname
$('#nav li#' + current).addClass("active");
});
});
.active a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav" id="nav">
<li id="rings" class="">Rings</li>
<li id="earrings">Earrings</li>
<li id="neckwears">Neckwear</li>
<li id="purses">Purses</li>
<li id="mini">Set an mini set</li>
</ul>
You were just comparing to the wrong variable. Just change your code to the below
$(document).ready(function () {
$(function(){
var current = location.pathname;
var url = window.location.hash;
$('#nav li').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if("#" + $this.attr('id') == url){
$this.addClass('active');
}
});
});
});

How to insert a anchor tag into list item with Javascript?

I have one list item which have a class name in html5
<li class="navi"> HOME </li>
that list item I want to insert a anchor tag via class name in javascript. anchor is here:
HTML
how can i do this to be:
**<li class="navi"><a href="#HOME" >HOM E</a> </li>**
pure vanilla javascript:
function makelink() {
var li = document.getElementsByClassName('navi')[0];
li.innerHTML = 'HTML';
}
<ul>
<li class="navi"> HOME </li>
</ul>
<button onclick="makelink()">click here to make HOME link</button>
Try this
$(document).ready(function(){
$("ul").append("<li class='navi'><a href='#HOME' >HOM E</a></li>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul>
<li class="navi"> HOME </li>
</ul>
If you're using jQuery, you can do this:
$li = $('li.navi');
$li.html("<a href='#"+ $li.text() +"'>"+ $li.text() +"</a>");
Without complete code example showing what you are attempting, we are guessing. But you could try:
$('.navi').append('HOME');
Document.createElement and Node.appendChild
var listItem = document.querySelector('navi');
var name = listItem.innerText;
var anchor = document.createElement('a');
var anchor.href = "#"+name;
var anchor.innerText = name;
listItem.appendChild(newNode);

How Get Name Class With Javascript?

Hi everyone i need get name class menu li for load this page
html
<body>
<div class="menu">
<ul>
<li class="page2" id="page2">PAGE TOW</li>
<li class="page3" id="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
</body>
js
$(document).on('click','.menu li',function(){
var Get_Name_Class = //Get Name Class
if(/* var Get_Name_Class*/).hasClass("page2")) {
$(".load").load('page2.php');
}
else if(/* var Get_Name_Class*/).hasClass("page3")) {
$(".load").load('page3.php');
}
});
how can i this ( get id or class not difference )
Use this to refer the clicked element inside the handler callback.
$(document).on('click','.menu li',function(){
// cache the reference
var $this = $(this);
// check using the cached element
if($this.hasClass("page2")) {
$(".load").load('page2.php');
}
else if($this.hasClass("page3")) {
$(".load").load('page3.php');
}
});
You can do it using jQuery. If it is class you can do:
$(".className")
if it is id you can do:
$("#idName")
if it is just html element you can do:
$("elementName")
Pass this.className with ".php" concatenated to .load()
$(document).on('click','.menu li',function() {
$(".load").load(this.className + ".php")
});
$(document).on('click','.menu li',function(){
// cache the reference
var $this = $(this);
// check using the cached element
if($this.hasClass("page2")) {
$(".load").load('page2.php');
}
else if($this.hasClass("page3")) {
$(".load").load('page3.php');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="menu">
<ul>
<li class="page2" id="page2">PAGE TOW</li>
<li class="page3" id="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
</body>
use "#" symbol for id so your code becomes
("#idname")
or u can use "this" which points to the present class u are working on
Don't use classnames. One day you'll add an extra class to those elements and your site will stop working and you'll be left wondering why - or in the worst case it'll slip unnoticed.
Say you have one or even more buttons for page2 triggering - than it's the perfect place to use the data-* attribute!
$(document).on('click', '[data-load]', function() {
var page = $(this).data("load");
console.log(page); // Just to test
$(".load").load(page +'.php');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-load="page2">PAGE TWO :) me too</a>
<div class="menu">
<ul>
<li data-load="page2">PAGE TOW</li>
<li data-load="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>

Add class to another page attribute using URL id - Jquery

I have attached id with URL. Ex: When I click Link 1, it has #tab-2 id and it takes me to landing page. In landing page I have find which element has #tab-2 id then i have to add class .active.
I tried but no luck. Please any one correct my code. Thanks
JS Fiddle link
HTML
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
Landing Page
<div class="tab">
<ul>
<li><a id="tab-2" class="active" >LINK 1 Content</a></li>
<li><a id="tab-44" >LINK 2 Content</a></li>
<li><a id="tab-74" >LINK 3 Content</a></li>
</ul>
</div>
Jquery
$(document).ready(function(){
$(".menu ul li a").each(function(){
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);
var land = $('.tab').find("id");
if( land == id ) {
$('this').addClass('active');
}
})
});
Assuming I've understood your requirement, you can retrieve the hash value from the URL of the page using window.location.hash. You can then use that to directly select the required element and add a class to it on load of the new page:
$(function() {
var id = window.location.hash; // = '#tab-2', in your first link.
$(id).addClass('active');
});
Try this:
http://www.w3schools.com/jsref/prop_loc_hash.asp
$(document).ready(function(){
var hash = window.location.hash;
$(hash).addClass('active');
});
I hope it helps.
Replace $('this').addClass('active'); by $(this).addClass('active');
if( land == id ) {
$(this).addClass('active');
}
Use event.preventDefault it prevents the default action and Use window.location.hash to getting the hash element in the url
$(".menu ul li a").click(function(event){
event.preventDefault();
var url = window.location.hash;
$(".tab ul li a").removeClass('active');
$(url).addClass('active');
})

Adding classes and other things to html elements you append?

Right now my code is:
var carDiv = $("<div/>").appendTo("#content");
var eUl = $("<ul/>").appendTo(carDiv);
How do I make it into
<ul data-role="listview"> content </ul>
Instead of
<ul> content </ul>
Pretty straightforward:
var eUl = $("<ul/>").attr('data-role', 'listview').appendTo(carDiv);

Categories

Resources