Javascript function affecting other areas of page than what is specified - javascript

<div id="logo"><!-- logo -->
My Site
</div><!-- end logo -->
<?php
if ($_SESSION['uid'] == "")
{
echo "<div id='main_menu' class='log'>You are not logged in • <a href='login.php'>Login</a><br \></div>";
exit();
}
else
{
echo "
<div id='main_menu'>
<ul>
<li class='bar'> </li>
<li><a href='index.php' id='ajax_link'>Edit Site</a></li>
<li class='bar'> </li>
<li><a href='docs.php' id='ajax_link'>My Documents</a></li>
<li class='bar'> </li>
<li><a href='contacts.php' id='ajax_link'>Web Contacts</a></li>
<li class='bar'> </li>
<li><a href='social.php' id='ajax_link'>Social Media</a></li>
<li class='bar'> </li>
You are logged in as ".$_SESSION['username']." • <a href='logout_parse.php'>Logout</a><br \>
</ul>
</div>
";
}
?>
I've got this menu system built(above) and i'm using ajax and jquery to change in and out the main content(below) depending on the menu item selected.
var hash = window.location.hash.substr(1);
var href = $('#ajax_link').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').fadeOut('fast',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length);
function loadContent()
{
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent()
{
$('#content').fadeIn('normal');
}
return false;
});
however for some reason this code is affecting the login and logout links as well and i don't want that to happen.
I only recently added #ajax_links to try fix this problem as i was using #main_menu ul li a and #logo a before.
Can anyone tell me how i can fix this

First off, id attribute should be unique. Change all those links to use a class instead:
<li><a href='index.php' class='ajax_link'>Edit Site</a></li>
Now use that to improve the selector
$('a.ajax_link').click(function(){
....
And
$('.ajax_link').each(function(){
....

Related

Trying to add active class to menu item

I've spent 2 hours trying to create an active menu with no success, so I figured I would ask for help. I have an html menu, some js & css...
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$("#index li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
.active { font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='index'>
<div class='container'>
<div class='top'>
<h1><a href='/' title='The Maths Project'>The Maths Project</a></h1>
</div>
<ul class='section active_section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_106' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a>
</li>
<li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
When the user is on a specific page, the "a" link which they have clicked should become bold. However, for whatever reason it's not working.
I would greatly appreciate any help,
Regards,
Jack
I am not clear with your question but do you want set active class to menu, so you try the below code
$('#navlist a').click(function(e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$(this).addClass('selected');
});
.nav {
color: green;
}
.selected {
color: red;
}
.san ul li{
float:left;
margin-right: 25px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<div class="san">
<ul id="navlist">
<li><a class="nav" href="">Home</a></li>
<li><a class="nav" href="">About Us</a></li>
<li><a class="nav" href="">Services</a></li>
<li><a class="nav" href="">Contact</a></li>
</ul>
</div>
This line gets the page name:
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
you need to apply the same logic to each of your links to see if they match:
$("#index li a").each(function() {
var aurl = $(this).attr("href").substr($(this).attr("href")
.lastIndexOf("/")+1);
if (aurl == pgurl || aurl == '')
$(this).addClass("active");
})
Snippet below (tweaked to match as location.href won't match)
$(function() {
//var pgurl = window.location.href.substr(window.location.href
// .lastIndexOf("/") + 1);
var locationhref = "mysite.com/against-the-odds/introduction"
var pgurl = locationhref.substr(locationhref.lastIndexOf("/")+1);
$("#index li a").each(function() {
var aurl = $(this).attr("href").substr($(this).attr("href")
.lastIndexOf("/")+1);
//console.log(aurl)
if (aurl == pgurl || aurl == '')
$(this).addClass("active");
})
});
.active { font-weight:bold;color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='index'>
<div class='container'>
<div class='top'>
<h1><a href='/' title='The Maths Project'>The Maths Project</a></h1>
</div>
<ul class='section active_section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_106' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a>
</li>
<li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
Try following and check if it works.
$(function() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$("#index li a").each(function() {
var href = "";
if($(this).attr("href") != '')
href = $(this).attr("href").substr(($(this).attr("href").lastIndexOf("/")+1);
if (href == pgurl || href == '')
$(this).addClass("active");
})
});
Just traverse the whole links and when any link will clicked then change the font-weight:normal to all links and then apply the font-weight:bold to currently clicked link.
$().ready(function () {
$("ul>li").click(function () {
$("ul>li").css("font-weight", "normal");
$(this).css("font-weight", "bold");
});
});

The h1 tag does not change via jquery .html()

Im pretty novice at jquery. I have a navbar and im trying to change my tag based on what i have selected.
$(document).ready(function () {
$('a').click(function (){
the = $(this).html();
linkvalue = $(this).attr('data-link');
$('#whatItIs').html(the);
console.log(the);
console.log(linkvalue);
switch(the) {
case "Steel Products":
{
window.location.href = linkvalue;
break;
}
case "Steel Doors":
{
window.location.href = linkvalue;
break;
}
case "Digital Safes":
{
window.location.href = linkvalue;
break;
}
case "Security Equipment":
{
window.location.href = linkvalue;
break;
}
case "Storage Solutions":
{
window.location.href = linkvalue;
break;
}
case "Steel Furniture":
{
window.location.href = linkvalue;
break;
}
default:
{
console.log("Not Found");
//window.location.href = "404.html";
}
}
});
});
<li class="dropdown" class="active">
Manufactured Products <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a data-link="securityEquipment.html">Steel Products</a>
</li>
<li>
<a data-link="securityEquipment.html">Steel Doors</a>
</li>
<li >
<a data-link="securityEquipment.html">Digital Safes</a>
</li >
<li>
<a data-link="securityEquipment.html">Security Equipment</a>
</li>
<li >
<a data-link="securityEquipment.html">Storage Solutions</a>
</li>
<li>
<a data-link ="securityEquipment.html">Steel Furniture</a>
</li>
</ul>
</li>
<h1 class="page-header" id="whatItIs">
Untitled
<!-- <small>Subheading</small>
--> </h1>
The problem is that the h1 changes for only a second and then changes back to the original i have set it to.
This seems pretty simple. i dont know what i am doing wrong
If you want to change the content of h1 to match that of a clicked link inside your list, then you can simply store the text() of the link in a variable once it is clicked, then updating the h1 with it:
$('.dropdown-menu a').on('click', function(e){
e.preventDefault();
var title = $(this).text();
$('#whatItIs').text(title);
});
.dropdown-menu a { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown" class="active">
Manufactured Products <b class="caret"></b>
<ul class="dropdown-menu">
<li><a data-link="securityEquipment.html">Steel Products</a></li>
<li><a data-link="securityEquipment.html">Steel Doors</a></li>
<li><a data-link="securityEquipment.html">Digital Safes</a></li>
<li><a data-link="securityEquipment.html">Security Equipment</a></li>
<li><a data-link="securityEquipment.html">Storage Solutions</a></li>
<li><a data-link="securityEquipment.html">Steel Furniture</a></li>
</ul>
</li>
<h1 class="page-header" id="whatItIs">Untitled</h1>
jsFiddle: https://jsfiddle.net/azizn/ajqLu9vy/

Ajax success callback unexpected behaviour

I have a href link for my unordered list.
When the page loads for the first time, only the welcome page is visible as expected.
When I click on the list for the first time after the page loads, I get the desired results on the desired div after clicking on the href link on the ul li.
However, if I subsequently click on the other tab, the results are displayed on the one I had clicked before. For example, if i click on href #tab2a, the results will be displayed on #tab2b and vice versa. AJAX will direct results to the div I clicked on previously.
I'm at a loss here! How can I force the results to be displayed in the div that's referenced by the href id tag? I'm using an if else if condition; is this the right approach?
JS
$(document).ready(function() {
$("#tab2").hide();
$("#tab3").hide();
$("#tab6").hide();
$("#tab2a").hide();
$("#tab2b").hide();
$('ul li a').click(function() {
href = undefined;
if (($(this).attr('href')) == "#tab2a") {
var href = $(this).attr('href');
$.ajax({
url: "http://mypage1_action=execute"
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
} else if (($(this).attr('href')) == "#tab2b") {
var href = $(this).attr('href');
$.ajax({
url: "http://mypage1_action=execute"
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
} else {
$(href).show();
$('form#tab div:not(' + href + ')').hide();
};
});
HTML
<form id="cssmenu">
<ul>
<li class='active'><a href='#tab1'><span>Home</span></a>
</li>
<li class='has-sub'><a href='#tab2'><span>Tab2</span></a>
<ul>
<li><a href='#tab2a'><span>Tab 2a</span></a>
</li>
<li><a href='#tab2b'><span>Tab 2b</span></a>
</li>
<li class='last'><a href='#tab2c'><span>Tab 2c</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#tab3'><span>Tab 3</span></a>
<ul>
<li><a href='#'><span>Tab 3a</span></a>
</li>
<li><a href='#'><span>Tab 3b</span></a>
</li>
<li class='last'><a href='#'><span>Tab 3c</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#tab4'><span>Tab 4</span></a>
<ul>
<li><a href='#'><span>Company</span></a>
</li>
<li class='last'><a href='#tab5'><span>Contact</span></a>
</li>
</ul>
</li>
<li class='last'><a href='#tab6'><span>Contact</span></a>
</li>
</ul>
</form>
<form id="tab" class=".allclass">
<div id="tab1" class='active'>
<h1>Welcome Page</h1>
</div>
<div id="tab2">
</div>
<div id="tab2a">
</div>
<div id="tab2b">
</div>
<div id="tab3">
</div>
<div id="tab6">
</div>
</form>
Here is the fiddle: https://jsfiddle.net/kBoni/1ag0ymh/#&togetherjs=m9pPoV3yoy
This is probably caused because by the time the .done() executes, the value of the href variable may have changed because you've clicked another tab, a simple way to avoid that is to wrap the ajax() code into a new function, and pass the href value as a parameter
function changeTab(href) {
$.ajax({
url: "http://mypage1_action=execute"
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
}
$(document).ready(function() {
$("#tab2,#tab3,#tab6,#tab2a,#tab2b").hide();
$('ul li a').click(function() {
href = undefined;
if (($(this).attr('href')) == "#tab2a") {
var href = $(this).attr('href');
changeTab(href);
} else if (($(this).attr('href')) == "#tab2b") {
var href = $(this).attr('href');
changeTab(href);
} else {
$(href).show();
$('form#tab div:not(' + href + ')').hide();
};
});
});
Now, if you also want to have a different url for every tab, (which you probably do), you can add it as a data-attribute to your a and pass it to the function:
function changeTab(href,url) {
$.ajax({
url: url
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
}
.
.
.
if (($(this).attr('href')) == "#tab2a") {
var href = $(this).attr('href');
var url = $(this).attr('data-url');
changeTab(href,url);
}

Highlight Parent Menu when on child page also

I have a simple multilevel menu and a script which works to highlight the menu item irrespective of being parent menu or child menu.
In below example when I am on child page then it will only change the colour of child page, while I also want to change the colour or it parent item.
I tried few thing but it is not working as intended.
Here's a codepen of what I have so far.
In case that doesn't work, here's a code snippet:
jQuery(document).ready(function() {
var url = window.location.href;
$('#cssmenu a[href="' + url + '"]').addClass('active-menu');
// Will also work for relative and absolute hrefs
$('#cssmenu a').filter(function() {
return this.href == url;
$(this).parents("li a").addClass('active-menu');
}).addClass('active-menu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button"></div>
<ul>
<li>About Us
</li>
<li class="has-sub">
<span class="submenu-button"></span>Gallery
<ul>
<li>Photo Gallery
</li>
<li>Video Gallery
</li>
<li>Instagram Gallery
</li>
</ul>
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
UPDATE
Here's my new code, but this works but keeps keeps other links highlighted as well:
$('#cssmenu a').filter(function() {
$(this).parents("li.has-sub").find('a:first').addClass('active-menu');
return this.href == url;
}).addClass('active-menu');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button"></div>
<ul>
<li>About Us
</li>
<li class="has-sub">
<span class="submenu-button"></span>Gallery
<ul>
<li>Photo Gallery
</li>
<li>Video Gallery
</li>
<li>Instagram Gallery
</li>
</ul>
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
I guess, this is what you were after.
var $menu = $("#cssmenu");
//Get the anchor based on the page URL
var $current = $menu.find('a').filter(function() {
return location.href.indexOf(this.href) > -1;
//Or (whatever works)
//return location.href === this.href;
});
//Add it's parent's anchor
$current = $current.add($current.closest("li.has-sub").find(' > a'));
//Set the desired class
$current.addClass('active-menu');
Here is a demo along the same lines.

Add active/selected state to link when click

I have a list of links i would like to add css class of "active" to, to show what is being displayed ie styled different
Fiddle:http://jsfiddle.net/zangief007/rj8g0yh4/7/
HTML:
<ul class="filter-desk" id="selectMe-desk">
<li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
<li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
<li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>
<ul class="category-1 group">
<li class="name">JOHN Smithe QC</li>
<li class="call">DDI <span>09 333 45335</span></li>
<li class="call">MOB <span>027 545 69873</span></li>
<li>david.heaney#heaneypartners.com</li>
</ul>
<ul class="category-3 group">
<li class="name">Barry White</li>
<li class="call">DDI <span>021 487 5896</span></li>
<li class="call">MOB <span>024 387 9854</span></li>
<li>susan.thodey#heaneypartners.com</li>
</ul>
<ul class="category-2 group">
<li class="name">Peter Pan</li>
<li class="call">DDI <span>231234</span></li>
<li class="call">MOB <span>234234</span></li>
<li>23423423423</li>
</ul>
JS:
$(function() {
var curPage = "";
$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function() {
var $a = $(this);
curPage = $a.data("page");
$(".group").hide().filter("."+curPage).show();
});
});
CSS
.active{
color:red;}
You have it almost working just add the lines in below see the fiddle
http://jsfiddle.net/rj8g0yh4/9/
$(function() {
var curPage = "";
$('.group').hide();
$('.category-1').show();
$("#selectMe-desk li a").click(function(e) {
var $a = $(this);
// hide currently active
$(".filter-desk .active").removeClass("active");
// make this one active
$a.addClass("active");
curPage = $a.data("page");
$(".group").hide().filter("."+curPage).show();
});
});

Categories

Resources