jQuery enter url and loads content into div - javascript

I don't know if i described the title correctly ...
Basically i have a jquery script that loads content when link is clicked.
I would like to know to say lets say i loaded /contents/about.php via jquery into the div i specified.
<li class="nav__item ">
<a class="header__link subdued" href="#home" data-target="contents/home">
<span class="complimentary push--left">Home</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#news" data-target="panel/admin/news/news">
<span class="complimentary push--left">News</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#/contents/about" data-target="contents/about">
<span class="complimentary push--left">About Us</span>
</a>
</li>
Is it possible for me to enter http://localhost/#/contents/about or even http://localhost/contents/about and it would as the same function as the jquery click load script.
Alternatively is there a simple way to have a back/forward setup in jquery content load?
script:
<script>
$(document).ready(function(){
var trigger = $('#nav ul li a'),
container = $('#wrapper');
trigger.on('click', function(){
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
Hope it makes sense.

jQuery:
$(document).ready(function(){
var cur = window.location.href;
var a = cur.split("/");
var pos = a.indexOf("#");
if(pos != -1){
var trigger = $('#nav ul li a');
var container = $('#wrapper');
target = a[pos+1]+""+a[pos+2];
container.load("http://localhost/"+ target + ".php");
return false;
}
});
Try this, if not useful then i will remove this, cause i don't understand what you want.

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');
}
});
});
});

jQuery Tab Menu Set Active Menu and load the content

I have jQuery tab menu call ajax.
Menu is working perfect, but now I want when page loaded it always show the first tab to be loaded (means active).
You can see the fiddle here: https://jsfiddle.net/waspinator/rw8ujfg3/
<ul class="nav nav-tabs tabs-up " id="friends">
<li active> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
JS
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
In this case, I want Contact content loaded on page loaded. How can set this?
$('#contacts_tab').trigger('click'); if you are allowed to use the id.
This should work. Just abstract the function, and bind it to the event, but also call it on load with the first tab selected to call it on. (EDIT: Sorry I got the spacing on your function wrong before because I mis-copied it. Also, tested it and changed a few things to work out a kink or two.)
function doAjaxStuff(event, tab) {
var $this = tab || $(this)
var $this = tab || $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
}
doAjaxStuff(null, $('.nav-tabs li:first-child a'))
$('[data-toggle="tabajax"]').click(doAjaxStuff);

active class is removed when page refreshes jQuery

I have a UL on my page which is acting as navigation. In my footer I have some jQuery code so when I click the link it removes the active class on the li and then places it on the current li that has been clicked. This works as I click however when the page reloads the active class goes back onto the previous li.
Here is my code
jQuery(document).ready(function () {
"use strict";
// Init Demo JS
Demo.init();
// Init Theme Core
Core.init();
$('.sidebar-menu > li').click(function (e) {
$(".active").removeClass("active");
$(this).addClass("active");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav sidebar-menu">
<li class="sidebar-label pt20">Menu</li>
<li class="active">
<a href="/dashboard">
<span class="glyphicon glyphicon-home"></span>
<span class="sidebar-title">Dashboard</span>
</a>
</li>
<li>
<a href="/fixtures">
<span class="fa fa-calendar"></span>
<span class="sidebar-title">Fixtures</span>
</a>
</li>
<li>
<a href="/players">
<span class="glyphicon glyphicon-book"></span>
<span class="sidebar-title">Players</span>
</a>
</li>
</ul>
Am I missing something in my jQuery to keep the class on the desired li?
Your JS is losing context with the refresh.
What you can do is run another function on load to check which url you're on, and set active state based on that. Something like this:
var setDefaultActive = function() {
var path = window.location.pathname;
var element = $(".sidebar-menu a[href='" + path + "']");
element.addClass("active");
}
setDefaultActive()
My solution is based on this link.
I needed nav pills to remain active after page refresh.
You can probably format this to fit your needs.
$(document).ready(function () {
// On page load
$('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
// Get the id for the pill that was last shown and set it to local storage
localStorage.setItem('activeLink', $(e.currentTarget).attr('id'));
});
// After page loaded
// Get the id for the pill from local storage
var activeLink = localStorage.getItem('activeLink');
// If it's there, click it
if (activeLink) {
$(`#${activeLink}`).click();
}
});

get an html element from the title of a child element

I have list that has one active class element
<ul class="tabs clearfix" >
<li>
<a title="abc" href=# >ABC</a>
</li>
<li>
<a title="xyx" href=# >XYZ</a>
</li>
<li class=active >
<a title="all" href=# >All</a>
</li>
I am using local storage to store the title of a tag which is then used to loadcontent accordingly. I am having difficulty in getting the specific li element when i fetch the titel back from local storage. I would like to add an active class to li element that corresponds to the specific title. Here's the javascript code:
$(document).ready(function(){
var tabs = $('.tabs > li');
if (localStorage.getItem("tabIndex") === null) {
$( "#content" ).load( "{{url_for('mypage', query=query)}}" );
}else{
var lastIndex = localStorage.getItem('tabIndex');
**Do something to get the specific li element for the title**
**addclass('active') for the li**
LoadContent(lastIndex);
}
tabs.on("click", function(){
tabs.removeClass('active');
localStorage.setItem('tabIndex', $('a', this).attr('title'));
$(this).addClass('active');
var index = $(this).children('a')[0].title;
LoadContent(index);
})
});
I tried $("a[title=lastIndex]").parent().addClass('active'); but this doesnt seem to work. As always, I really appreciate all the help that this site provides me. Thanks
You can use $('a[title="'+ lastIndex +'"]') to get the desired element,
Eg: say your lastIndex = xyz then the selector becomes $('a[title="xyz"]')

Show/Hide content based on anchor - Almost there

I am very close but just can't see what I am missing in the jQuery script to only display the correct block of content based upon the anchor clicked and want to display initially to a visitor the first block of content from the anchors. Any help is appreciated.
I have dynamically generated anchor links with a class of .link
The content is also dynamically generated and each anchor point (A, B, C...) has it's content contained in a ul class of .test-full-list. Any help is appreciated.
Generated content:
Anchor links:
<span class="link">A</span>
<span class="link">B</span>
Content:
<div class="test-listing-container">
<ul class="test-full-list">
<ul class="test-category-list">
<a name="A"></a>
<div class="anchor-header">- A -</div>
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
Script:
jQuery(document).ready(function () {
jQuery('.test-listing-container').hide();
jQuery('.link a').click(function () {
var jQuerydiv = jQuery('.test-full-list').eq(jQuery(this).index('.link a'));
jQuerydiv.show('.test-full-list'); // show the relevant div
});
});
If you're bringing in content dynamically, your .click() will not work. This is because the element you are trying to attach the click to hasn't been generated.
You can replace this:
jQuery('.link a').click(function() {
With this:
jQuery('.test-listing-container').on('click', '.link a', function() {
If that doesn't work:
jQuery(document).on('click', '.link a', function() {
Edit: Adding a fiddle to demo the code: http://jsfiddle.net/Fm6bR/1/
Assuming you can't change the markup slightly, you may do the following
A
B
<div class="test-listing-container">
<ul class="test-full-list">
<ul class="test-category-list">
<a name="A"></a>
<div class="anchor-header">- A -</div>
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
jQuery(document).ready(function(){
jQuery('ul.test-category-list').hide();
jQuery('ul.test-category-list').first().show(); //show the first one by default
jQuery(document).on('click', '.link a', function (evt) {
var $a = jQuery(evt.currentTarget),
name = $a.attr('href').substr(1),
$a2 = jQuery('.test-listing-container').find('a[name="' + name + '"]'),
$ul = $a2.parents('ul.test-category-list').first();
jQuery('ul.test-category-list').hide(); // hide all
$ul.show(); // show the relevant one
});
});
Generate the content with an id based on the anchor name or some other unique identifer of the content. set data-content on each link to the id of the contents id. then use jquery to get the content by using .data function on the link in the click function
HTML
<span class="link">A</span>
<span class="link">B</span>
<div class="test-listing-container">
<ul class="test-full-list" id="fulllistA">
<ul class="test-category-list">
<li id=test-list>
Some Link 1
Some Link 1
</li>
</ul>
</ul>
</div>
Javascript
jQuery(document).on("click",".link a",function(e){
e.preventDefault();
e.stopPropagation();
var content = jQuery("#"+jQuery(this).data("content"));
jQuery(".test-listing-container > ul").not(content).hide(); // hide the others.
content.show();
});

Categories

Resources