I have added a space on my site that dynamically loads pages using jquery. To do this it attaches a hash onto the url of the page it is on i.e. -
example.co.uk/html/print.html#../php/letterheads.php
which loads the information for each section. Subsequently when i the go to use my main navigation it changes the url to -
example.co.uk/html/print.html#furniture.html
instead of -
example.co.uk/html/furniture.html.
Here is my html :
<div id="section" style="margin-bottom:40px;">
<article>
<br/>
</article>
<div id="page-wrap" style="margin-top:0px;">
<header>
<nav id="printProducts">
<ul>
<li>Business Cards</li>
<li>Letterheads</li>
<li>Leaflets</li>
<li>Promo-Gifts</li>
<li>Banners</li>
<li>Posters</li>
<li>A Boards</li>
<li>NCR</li>
<li>Compliments Slip</li>
<li>Order of Service</li>
<li>Canvas</li>
<li>Sublimation</li>
</ul>
</nav>
</header>
<section id="main-content">
<div id="guts">
<h3 style="font-family:'kreon-bold-webfont';line-height:25px;font-weight:200;text-align:center">Click a tab for more information on the many different types of print we do in-house here at Cawthornes!</h3>
</div>
</section>
</div>
</div>
here is myjquery that deals with this :
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Here is my main nav HTML
<nav id ="main">
<ul>
<li><a href="http://example.co.uk" alt="home"/>Home</a></li>
<li><a href="print.html" alt="Print"/>Print</a></li>
<li><a href="stationery.html" alt="Stationery"/>Office Supplies</a></li>
<li><a href="furniture.html" alt="Furniture"/>Furniture</a></li>
<li><a href="design.html" alt="Design"/>Design</a></li>
<li><a href="webDesign.html" alt="Web Design"/>Web Design</a></li>
<li><a href="ourStore.html" alt="Our Store"/>Retail Store</a></li>
<li><a href="http://82.163.59.97/" alt="Online Store"/>Online Store</a></li>
<li><a href="workwear.html" alt="Workwear"/>Workwear</a></li>
<li><a href="http://example.promoideas.info/" alt="Promotional Goods"/>Promo Goods</a></li>
</ul>
</nav>
Is there any way of rectifying this so that my main navigation will work as i want it to?
Related
I want to create a link that will target a specific tab, in another page of my site.
I have tried to create link like this: www.example.com/test.html#tab2, but it always targets the first tab (I guess the tab with show class).
index.html
link for catalog
text.html
<ul class="nav nav-tabs">
<li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
<li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
<li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
<li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
...
</div>
<div id="menu1" class="tab-pane fade">
....
</div>
<div id="menu-catalog" class="tab-pane fade">
...
</div>
<div id="menu3" class="tab-pane fade">
...
</div>
</div>
When I click the link from index.html to target and open the tab with the right ID.
If you're using the bootstrap + jquery setup, you can get this behavior pretty easily with the following:
$(() => {
const {
hash
} = document.location;
if (!hash) return false;
$(`.nav.nav-tabs [href="${hash}"]`).tab('show');
});
Try this
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
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");
});
});
After applying styles of Codrops in nav bar, I cannot make links go to the area id in a single page.
If I press "Clients" (for example), the link does not go to the id Clients area.
I need help in identifying the source of the problem.
Here is my HTML:
<nav class="menu menu--ferdinand">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="#Services">Services</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#Clients">Clients</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#Us">About Us</a>
</li>
<li class="menu__item menu__item--current">
<a class="menu__link" href="#Contact">Contact</a>
</li>
</ul>
</nav>
script on the bottom of my index.html (I have classie.js, clipboard.min.js on js folder)
<script src="js/classie.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
var menuItems = menu.querySelectorAll('.menu__link'),
setCurrent = function(ev) {
ev.preventDefault();
var item = ev.target.parentNode; // li
// return if already current
if (classie.has(item, 'menu__item--current')) {
return false;
}
// remove current
classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
// set current
classie.add(item, 'menu__item--current');
};
[].slice.call(menuItems).forEach(function(el) {
el.addEventListener('click', setCurrent);
});
});
[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
new Clipboard(link);
link.addEventListener('click', function() {
classie.add(link, 'link-copy--animate');
setTimeout(function() {
classie.remove(link, 'link-copy--animate');
}, 300);
});
});
})(window);
</script>
Areas (example):
<section id="Clients" class="Clients">
</section>
<section id="Services" class="Services">
</section>
ev.preventDefault() Prevents a link from doing it's default thing (i.e. follow the link to a new page or bookmark).
I'm having problems integrating a navigation bar that highlights the current section being viewed on the website. I just want the currently viewed section to be bold in the navigation bar.
Here is the codepen:
HTML
<nav id="nav-wrap">
<ul>
<li class="current"><a class="page" href="#home">Home</a></li>
<li><a class="page" href="#about">About</a></li>
<li><a class="page" href="#portfolio">Portfolio</a></li>
<li><a class="page" href="#scrapbook">Scrapbook</a></li>
<li><a class="page" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="header-content">
<img id="logo" src="img/logo.png" alt="logo" height="200px" width="200px">
<h3>Joseph Cooper</h3>
<h3>Graphic Designer</h3>
<p> 10.03.97 </p>
</div>
<img id ="down" src="img/down.png" height="42px" width="42px">
I added two line of code, one to remove bold from all href in navigation, and one to add bold to href that is clicked. Take a look at codepen: http://codepen.io/anon/pen/doaRjy
function smoothScroll (duration) {
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
$("#nav-wrap a").css('font-weight','normal')/*this line remove bold from all href*/
$(this).css('font-weight','bold')/*this line add bold to clicked href*/
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, duration);
}
});
}
I tried to solve this by using the jQuery's offset().top and checking it against the window's scrollTop.
var $window = $(window),
homeLink = $("a[href='#home']"),
aboutLink = $("a[href='#about']"),
portfolioLink = $("a[href='#portfolio']");
$window.on("scroll", function(e) {
if ($window.scrollTop() < $("#about").offset().top) {
$("#nav-wrap").find("a").css("font-weight", 400);
homeLink.css("font-weight", 900);
} else if ($window.scrollTop() > $("#about").offset().top && $window.scrollTop() < $("#portfolio").offset().top) {
$("#nav-wrap").find("a").css("font-weight", 400);
aboutLink.css("font-weight", 900);
}
});
<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(){
....