I'm faily new to jquery and coding in general. I'm having a few troubles with this.
What i want is for when the page loads, the 'Vlogging' link is active and 'Details 1' is shown. Then when you click on either 'Filmmaking' or 'Beme'... 'Details 2 or 3 is shown and which ever one was there goes away.
I have everything set up right so far just need to get it to where when you click on one of the other links the correct 'Details' text shows itself.
Thank you so much and i have it in a fiddle right now!
http://jsfiddle.net/t1huc43d/
Here is the code than needs tuned:
$(function() {
$("togglediv1").click(function() {
$("#togglediv1").removeClass("display-start");
$("li").removeClass("display");
$(this).addClass("display");
});
});
This code will save you a lot of time. I added a custom attribute called "data". This attribute is used to tie the link to the tab you wish to display. This code will make it a lot easier to add additional tabs and etc. Look at the bottom for the changed HTML and JavaScript.
<div id="wrap">
<ul id="divtoggle">
<li><a class="link" data="1">Vlogging</a></li>
<li><a class="link" data="2"> Filmmaking</a></li>
<li><a class="link" data="3"> Beme</a></li>
</ul>
<div class="text">
<div class="tab" data="1">Details 1</div>
<div class="tab" data="2">Details 2</div>
<div class="tab" data="3">Details 3</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
$(".link").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
dataAttr = $(this).attr("data");
$(".tab").hide();
$(".tab[data="+dataAttr+"]").show();
});
$(".link:first").click();
});
</script>
$(function() {
$("#togglediv1").click(function() {
$("#one").removeClass("display");
$("#one").addClass("display-start");
$("#two").removeClass("display-start");
$("#two").addClass("display");
$("#three").removeClass("display-start");
$("#three").addClass("display");
});
});
$(function() {
$("#togglediv2").click(function() {
$("#one").removeClass("display-start");
$("#one").addClass("display");
$("#two").removeClass("display");
$("#two").addClass("display-start");
$("#three").addClass("display");
$("#three").removeClass("display-start");
});
});
...
Updated jsfiddle: http://jsfiddle.net/t1huc43d/3/
Since your ids aren't that conducive in tracking what is clicked and what isn't, I decided to just use this to find what you've clicked in correspondence with the details.
Your updated javascript:
$(function() {
$("li").click(function() {
$("#togglediv1").removeClass("active-start");
$("li").removeClass("active");
$(this).addClass("active");
let temp = $("#divtoggle").children();
var index;
for (let i = 0; i < temp.length; i++)
{
if (this == temp[i] )
{
index = i;
break;
}
}
$(".display-start").addClass("display");
$(".display-start").removeClass("display-start");
let text_children = $(".text").children()
let the_child = text_children[index];
$(text_children[index]).addClass("display-start");
$(text_children[index]).removeClass("display");
});
});
JQuery actually has some components to help you out, but to me, the shortest and CLEANEST way of doing this is the following:
The first thing I'd do is set an id of each of the titles, incrementing them by 1. Then, I'd do the same for the details like so:
<div id="wrap">
<ul id="divtoggle">
<li><a class="title" id="title-1">Vlogging</a></li>
<li><a class="title" id="title-2"> Filmmaking</a></li>
<li><a class="title" id="title-3"> Beme</a></li>
</ul>
<div class="text">
<div class='display' id="detail-1">Details 1</div>
<div class='display' id="detail-2">Details 2</div>
<div class='display' id="detail-3">Details 3</div>
</div>
</div>
After that, the JQuery is pretty simple. Setup a click event on the class title. The first thing to do is to parse the id of the clicked title. Once you have that, target the related detail and show it:
$(document).ready(function() {
$(".title").click(function() {
//*** get id
var id = $(this).attr("id").split("-")[1];
if (typeof id != "undefined"){
//*** hide other descriptions and show yours
$(".display").hide();
$("#detail-" + id).show();
}
});
});
DEMO: http://jsbin.com/volikofihe/edit?html,js,console,output
Here you go. Simplified your CSS a little. Toggling a .active class on the top links, and a .display class on the text divs. When you click on a link, the code uses the $.index() of that link in the list as the index of the text div to show. So if you click on the 2nd link, it will show the 2nd text box.
$(function() {
$toggleLinks = $('#divtoggle a'),
$displays = $('.text div');
$toggleLinks.on('click', function(e) {
e.preventDefault();
$toggleLinks.removeClass('active');
$(this).addClass('active');
$displays.removeClass('display');
$displays.eq($(this).closest('li').index()).addClass('display');
});
});
li {
color: grey;
font: effra;
font-weight: bold;
}
a:hover {
color: #aaaaaa;
cursor: pointer;
}
.active {
color: orange;
}
.text div {
display: none;
}
.text .display {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<ul id="divtoggle">
<li><a class="active">Vlogging</a></li>
<li><a>Filmmaking</a></li>
<li><a>Beme</a></li>
</ul>
<div class="text">
<div class='display'>Details 1</div>
<div>Details 2</div>
<div>Details 3</div>
</div>
</div>
Preserved as much of your existing code as possible. Updated fiddle.
I added a data-controls custom attribute to each of your li elements so as to associate them to each of the corresponding data divs:
<li data-controls="one"><a id="togglediv1" class="active-start">Vlogging</a></li>
<li data-controls="two"><a id="togglediv2"> Filmmaking</a></li>
<li data-controls="three"><a id="togglediv3"> Beme</a></li>
Then I updated the JavaScript to remove and add the classes, as needed.
In my web site, I have three pages: Home, About, and Contact. I want the current page's link to give some visual indication that clicking the corresponding link would be senseless as the user is already on that page. Is this task better handled by CSS or jQuery, and in either case, what is the most elegant solution that will also automatically apply to any pages which may be added in the future?
Here's my HTML diesbezueglich:
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
UPDATE
I wonder why this didn't work; I added to Site.css this:
nav ul li a.current {
color: blue;
}
And the relevant HTML is:
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Yet the links remain the same (as Led Zeppelin predicted).
UPDATE 2
I tried this to test out kind of an amalgam of the various ideas proposed here:
In Site.css:
.current {
color: blue;
}
In _SiteLayout.cshtml:
<ul id="menu">
<li id="home" name="home">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
In Default.cshtml:
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$(".fancybox").fancybox();
$("home").addClass('current');
});
</script>
...but no go; the "Home" link is as homely as ever (no pun intended).
I also tried giving all of the links an id of "location" and adding this to Default.cshtml's "ready" function:
if ($(#location).attr('href').indexOf('home') != -1) $('home').addClass('currentPage');
else if ($(#location).attr('href').indexOf('about') != -1) $('about').addClass('currentPage');
else if ($(#location).attr('href').indexOf('contact') != -1) $('contact').addClass('currentPage');
(where "currentPage" is the css class that sets the color to blue, and each nav link has an id of "location"); I reckon I would also have to add a "removeClass" for the two links with an index of -1 in each if/else block.
My beer is getting saltier by the nanosecond.
UPDATE 3
I tried this:
Added the IDs to the elements in _SiteLayout.cshtml:
<nav>
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
</nav>
And added this to Site.css:
#home {color: orange;}
#home.current {color: blue;}
#about {color: orange;}
#about.current {color: blue;}
#contact {color: orange;}
#contact.current {color: blue;}
...but it did nothing - all the links are still gray no matter where I navigate.
UPDATE 4
Also tried this to no avail:
if ($('#home').attr('href').indexOf('Home') != -1) $('#home').addClass('currentPage');
UPDATE 5
I wonder if there's a way to use the _PageStart.cshtml to handle this? IOW, could I do something like:
#{
Layout = "~/_Layout.cshtml";
//pseudocode follows
var currentPage = CurrentPage.Id;
}
//and then some jQuery (also pseudocode):
if #currentPage == Default {
#home.display = none;
else if #currentPage == About {
#about.display = none;
else if #currentPage == Contact {
#contact.display = none;
} // perhaps set them all visible from the git-go
UPDATE 6
Another possibility that "jQuery for ASP.NET Developers" has inspired is something like the following inside the "ready" function (pseudocode; if this would work, I welcome the specific jQuery I would need to flesh this out):
// first set all of the nav ul li to their default color, right? (not shown)
// now, color the current one chartreuse:
$("nav ul li").each(function() {
switch ($(this.name)) {
case 'home':
$(#home).css("color", "chartreuse");
break;
case 'about':
$(#about).css("color", "chartreuse");
break;
case 'contact':
$(#contact).css("color", "chartreuse");
break;
}
});
UPDATE 7
Well, I'm sure this is nobody's idea of elegant, but I did figure out a way to accomplish it by using a click event for each li. Elegantizations welcome to the jsfiddle here: http://jsfiddle.net/vV4h5/1/
As to the elegantization of the jsfiddle above, there must be a way to do something like this instead:
jQuery(function () {
$("nav ul li").css("color", "black");
var currentLI = theOneClicked; //??? how to get this???
$(currentLI).css("color", "blue");
});
UPDATE 8
It works in jsfiddle, but not in my project; Having this in _SiteLayout.cshtml:
<nav>
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
</nav>
. . .
jQuery(function () {
$("#home").click(function (event) {
$("#home").css("color", "blue");
$("#about").css("color", "black");
$("#contact").css("color", "black");
});
});
jQuery(function () {
$("#about").click(function (event) {
$("#home").css("color", "black");
$("#about").css("color", "blue");
$("#contact").css("color", "black");
});
});
jQuery(function () {
$("#contact").click(function (event) {
$("#home").css("color", "black");
$("#about").css("color", "black");
$("#contact").css("color", "blue");
});
});
...does not work. Neither does moving just the first function to Default.cshtml, so that it looks like this:
$(document).ready(function () {
$("#tabs").tabs();
$(".fancybox").fancybox();
$("#home").click(function (event) {
$("#home").css("color", "blue");
$("#about").css("color", "black");
$("#contact").css("color", "black");
});
});
I think this is pretty close to what you are looking for here:
http://jsfiddle.net/qmHeF/1/
JS:
$("#menu a").each(
function(index)
{
if(window.location.href==this.href)
{
$(this).parent().remove();
}
}
);
I remove it from the DOM here (my personal preference) but you can just add a class or custom CSS if you like.
http://jsfiddle.net/qmHeF/2/
Updated: Changed it to add a class instead of remove it.
$("#menu a").each(
function(index)
{
if(window.location.href==this.href)
{
$(this).addClass("current");
}
}
);
using window.location.href instead of the jquery href will give you the full URL instead of the relative url. That way you don't need to parse either url and you can just compare the two.
You have to create a CSS class for this active state, like suggested in the comment, I use current in this example.
.current {
text-decoration: none;
/* here you style the seemingly disabled link as you please */
}
As for the HTML, the active menu page would look like this:
If you are in the About page
<nav>
<ul id="menu">
<li>Home</li>
<li><a class="current" href="~/About">About</a></li>
<li>Contact</li>
</ul>
</nav>
If you want the link to be disabled, using only html, here goes the code. Fiddle was updated to show this code. An elegant solution using Javascript was provided below in the comments.
<nav>
<ul id="menu">
<li>Home</li>
<li><span class="current" >About</span></li>
<li>Contact</li>
</ul>
</nav>
I made a quick example here so you can see if this is what you're looking for:
Example in jsFiddle.net
Best wishes
UPDATED
On second thought, your problem is that when you click the link to a new page, you are refreshing the javascript...so the click event fires but then is immediately replaced by the original DOM elements for whatever page you browse to.
Use this instead:
HTML/Razor
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
jQuery
$(document).ready(function () {
$("#menu a").each(function(){
//set all menu items to 'black
$(this).css("color","black");
var linkPath=$(this).attr("href");
var relativePath=window.location.pathname.replace('http://'+window.location.hostname,'');
//set the <a> with the same path as the current address to blue
if(linkPath==relativePath)
$(this).css("color","blue");
});
});
You can either check with some server-side language (e.g. PHP) to see if the current page is Home, About, or Contact, and apply a "current" class accordingly. Or, if you'd prefer, you can do this with JavaScript. I'm not sure how your absolute URLs look, but I would do something like this:
$(document).ready(function() {
$('a[href="' + window.location.pathname + '"]').addClass('current');
});
You may have to add some forward slashes in there, depending upon how your URLs look.
There are three sets of solutions to this universal development task: 1) server-side scripting alters menu/links for you, 2) CSS styling using something like a "current" class, or 3) javascript/css hybrid solutions.
It really all depends on your system and scope of development. For large dynamic sites, obviously one might as well use server-side code if it's already being used anyway. But for most projects where one isn't already using such scripting, one can manually add in a 'current' class to links and style them as you please with CSS or even more the anchor wrapping the text entirely (depending on your style of link/menus).
For a more robust javascript solution, you might try this: automatic link hightler/styling
function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i < arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;
if (document.getElementById("nav") !=null )
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}
Then run setPage onload, such as with:
window.onload=function()
{
setPage();
}
As far as usability goes, it's generally accepted that just styling a nav link to look less interesting, lower contrast, grayer, not underlined, etc, is sufficient to help people know here they are. The cost of clicking a link where you already are is pretty low, but it's a nice design touch for most sites anyway.
to programmatically change my links, based on current url, i would prefer jquery:
<style type="text/css">
.current {
color: #cccccc;
}
</style>
...
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
...
<script type="text/javascript">
$(document).ready(function() {
var href = $("#menu li a").prop("href");
$("a[href$='"+href.substr( href.lastIndexOf("/") )+"']").addClass("current");
});
</script>
..the jquery code adds the "current" class to any a link that has its href property set to last part of address (after last /). Thats not perfect anyway if your links are somewhat like /Contact/More..
Your "Update 2" version is close to working - you just need to add the class to #home, not home
Something like:
.current {
color: blue;
}
.current a {
text-decoration: none;
}
with:
// ...
$("#home").addClass('current');
// ...
How about something like this?
What we are doing here is that we call updateMenu with a string contained in the href attribute of a menu anchor. If the string and the anchor.href match, then we hide the anchor and copy it's text content to a new text node which we then append to the li element.
If we don't have a match then we unhide the menu anchor and check to see if the li element's (the parentNode in this case) last child is a text node, if it is we remove it because it was added by us.
You requested:
I want the current page's link to give some visual indication that
clicking the corresponding link would be senseless as the user is
already on that page.
This solution does that and also renders the link unclickable.
Of course it doesn't have to be exactly this formulation, but can be some other variant, and of course you can achieve this using jquery rather than vanilla javascript if you prefer.
HTML
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Javascript
(function () {
var updateMenu = (function () {
var anchors = document.getElementById("menu").getElementsByTagName("a");
return function (page) {
Array.prototype.forEach.call(anchors, function (anchor) {
var last;
if (anchor.pathname === page) {
anchor.style.display = "none";
anchor.parentNode.appendChild(document.createTextNode(anchor.textContent));
} else {
last = anchor.parentNode.lastChild;
anchor.style.display = "block";
if (last.nodeType === 3) {
anchor.parentNode.removeChild(last);
}
}
});
}
}());
setTimeout(function () {
updateMenu("/");
setTimeout(function () {
updateMenu("/About");
setTimeout(function () {
updateMenu("/Contact");
setTimeout(function () {
updateMenu("");
}, 5000);
}, 5000);
}, 5000);
}, 5000);
}());
On jsfiddle
I you want to use hrefs like in your example i.e. "~/About", then you will need to formulate your string to be passed to updateMenu, like so for my example;
HTML
About
Javascript
console.log(document.getElementsByTagName("a")[0].pathname);
console.log(window.location.pathname + "~/About");
Outputs
/Xotic750/G5YuV/show/~/About
/Xotic750/G5YuV/show/~/About
On jsfiddle
See window.location for it's other properties
Returns a location object with information about the current location
of the document.
For a purely css solution to this you could try pointer-events, here is a jsfiddle showing it in use.
Warning: The use of pointer-events in CSS for non-SVG elements is
experimental. The feature used to be part of the CSS3 UI draft
specification but, due to many open issues, has been postponed to
CSS4.
CSS
.current {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
HTML
<nav>
<ul id="menu">
<li>Home</li>
<li><a class="current" href="/About">About</a></li>
<li>Contact</li>
</ul>
</nav>
Your update #2 should work, but you forgot to put "#" ($('#home').addClass...).
But if again it's not working, pay a particular attention to your CSS
If you have, for example, a css like
#home{color : blue;}
.current{color : orange;}
The text will be blue since #home is "stronger"
If we put values to selector:
id=10
class=5
node selector (div) = 1
so #home = 10 and is higher than .current wich equal 5, #homestyles will override.
you could use li.current but again, 5+1=6 wich is lower than an id.
But #home.current will equal 15! Wich will overide #home styles!
But if your color style is on the node itself with the attribute style="" you have to remove it with jquery or use !important :
.current{
color: blue !important;
}
It will override EVERY css but it is not recommended.
Your update #3 was close.
give your body an ID whatever name you want the page to be and give your links ids like so
<body id="about">
<nav>
<ul id="menu">
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
</nav>
</body
Then your CSS can look somewhat like your update #3 example:
li a {color:blue}
#home .home{color:red !important}
#about .about{color:red !important}
#contact .contact{color:red !important}
This should ignore any classes that are not being used and only color the selected one red.
I hate to point out that the reason your css color is not being applied to your link is because css colors for links must be set on the anchor tag (an anchor tag will not inherit a color from a wrapping LI element). Try
.current a {color:#123456;}
or leave your css as is, but change your markup so the "current" class is applied to the < a > tag instead of the < li >.
EDIT: The reason your jsfiddle works when attempting to change colors (while your production code doesn't) is because the fiddle text is not inside of an A tag.
If you wish to automatically detect which page you are currently on, simply compare the HREF value of each link to the document.URL string:
$('nav').find('a').each(function(){
if ( document.URL.indexOf( $(this).attr('href') ) !== -1 ){
$(this).parent().addClass('current');
}
});
Detailed description & test available here: -> http://jsfiddle.net/vV4h5/26/
EDIT #2: One more thing... your asp.net links are going to mess with this a bit as the document.URL will not contain the ~ character... simply remove the first character from your href value as follows:
var href = $(this).attr('href').split(1); //
if ( document.URL.indexOf( href[1] ) !== -1 ){
...
I'd just remove the linkyness from the one you are currently on. You can control the styling by targeting li and li a differently in your CSS. The only slightly tricky thing is to get the actual href value right for the links you are using, but that shouldn't be too hard. And it's not a lot of code.
$(function(){
var href = window.location.pathname.replace(/.*\//, "/"),
$active = $("nav ul#menu a[href='"+href+"']");
$active.replaceWith($active.text());
});
I use these on my website. It doesn't use JavaScript but it does pretty much what you are asking.
<style>
.header-nav a:target {
pointer-events: none;
color: #000;
font-weight: bold;
text-decoration: underline;
}
</style>
<p class="header-nav">
<a id="headerabout" href="/about.html#headerabout">about</a>
|
<a id="headertags" href="/tags.html#headertags">tags</a>
|
<a id="headershit" href="/shit.html#headershit">Shit I say</a>
</p>
It adds id to anchor and its target URL. If the anchor is :target-ed, they will be disabled completely. Also, adding an # to href attribute will cause an anchor to not refreshing when clicked if the current page match the anchor target page.
I've the following code on my website: http://jsfiddle.net/dJLK3/1/
As you can see, it works just fine.
The problem is: those divs and link triggers come from a database. Today I have 1, tomorrow it can be 10...
I can not figure out how to convert it and make it work without needing to right lot's of codes like link1, link2, link3, link4, link5 and so on...
Anyone? :)
Use data attr and jQuery.data. reference
Update:
according to this comment.
html
<div class="menu">
Link1
Link2
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>
js
$('.menu').on('click', '.link', function(){
var id = $(this).data('slideContent');
$('.slide').not('#' + id).slideUp(function() {
$('#' + id).slideToggle();
});
});
css
.slide {
display: none;
height: 100px;
width: 100px;
position: fixed;
top: 30px;
}
demo
References:
slideUp - http://api.jquery.com/slideUp/
slideToggle - http://api.jquery.com/slideToggle/
Update
Here's a fiddle with a possible answer - FIDDLE - Update - With new requirements
Code posted here for clarification
<div id='link_collection'>
Link1
Link2
</div>
<div id='div_collection'>
<div class='div current'></div>
<div class='div'></div>
</div>
$(document).ready(function() {
$('#link_collection').on('click', '.link', function() {
var divCollection = $('#div_collection .div'),
index = $(this).index(), hasClickedMeAgain,
current = divCollection.filter('.current');
hasClickedMeAgain = current.index() === index;
if (hasClickedMeAgain){
current.slideToggle();
return false;
}
current.slideUp(function() {
$(this).removeClass('current');
divCollection.eq(index).addClass('current').slideToggle();
});
})
});
This way, you don't need to keep tag of anything. Just keep inserting the div and link in the order in which they arrive, and the code then handles itself. All the best.
Will this work for you? Use the same class attribute for all of them. And have the following code on document.ready() to assign on click events:
HTML:
<a class="ui-link-option">Link 1</a>
<a class="ui-link-option">Link 2</a>
<div class="ui-link-option-text">Text Here 1</div>
<div class="ui-link-option-text">Text Here 2</div>
Javascript:
$("a.ui-link-option").each(
function (index) {
var $this = $(this);
$this.data("index", index);
$this.bind("click", function(e) {
var $this = $(this);
var linkIndex = $this.data("index");
$("div.ui-link-option-text").each(
function (index) {
if (index == linkIndex) {
$(this).slideToggle();
} else {
$(this).hide();
}
}
);
});
}
);
I have set up some anchors and a little menu up top. when I click a menu item, it will scroll to that anchor.
what I want to do is have a next arrow on the menu to determine the next anchor on my page and scroll to it onClick.
My anchors are #header, #box1 - #box5
I would like to do it with JavaScript if possible.
here is my page
My Page
There is an HTML collection called document.anchors. To go to the next anchor, get the current anchor name from the URL and look for it in document.anchors. If you find it, the next one will be the next index. If you're at the last index, set the anchor to the first. Otherwise, if there is no match, just set it to the first.
This allows you to use any scheme for naming anchors, they will be visited in the order they appear in the DOM.
e.g.
<head>
<!-- Hide script-dependent content -->
<style type="text/css">
.requiresScript-block, .requiresScript-inLine {
display: none;
}
div.spacer {
height: 500px;
border: 1px solid blue;
}
</style>
<script type="text/javascript">
function goToNextAnchor() {
var anchors = document.anchors;
var loc = window.location.href.replace(/#.*/,'');
var nextAnchorName;
// Get name of the current anchor from the hash
// if there is one
var anchorName = window.location.hash.replace(/#/,'');
// If there is an anchor name...
if (anchorName) {
// Find current element in anchor list, then
// get next anchor name, or if at last anchor, set to first
for (var i=0, iLen=anchors.length; i<iLen; i++) {
if (anchors[i].name == anchorName) {
nextAnchorName = anchors[++i % iLen].name;
break;
}
}
}
// If there was no anchorName or no match,
// set nextAnchorName to first anchor name
if (!nextAnchorName) {
nextAnchorName = anchors[0].name;
}
// Go to new URL
window.location.href = loc + '#' + nextAnchorName;
}
// Display script-dependent content if javascript available
document.write(
'\u003Cstyle type="text/css"\u003e' +
'.requiresScript-block {display: block;}' +
'.requiresScript-inLine {display: inline;}' +
'\u003C/style\u003e'
);
</script>
</head>
<body>
<ol>
<li>Go to header
<li>Go to box 1
<li>Go to box 2
<li>Go to box 3
<li>Go to box 4
<li>Go to box 5
</ol>
<!-- Only shown if javascript available -->
<button class="requiresScript-inLine" onclick="goToNextAnchor()">Next</button>
<a name="header"></a><h1>Header</h1>
<div class="spacer">content</div>
<p><a name="box1"></a><p>Box 1</p>
<div class="spacer">content</div>
<p><a name="box2"></a><p>Box 2</p>
<div class="spacer">content</div>
<p><a name="box3"></a><p>Box 3 </p>
<div class="spacer">content</div>
<p><a name="box4"></a><p>Box 4</p>
<div class="spacer">content</div>
<p><a name="box5"></a><p>Box 5</p>
</body>
Something using an onClick in your HTML:
===>
...and then the JavaScript:
var max = 5;
function goToNext() {
var hash = String(document.location.hash);
if (hash && hash.indexOf(/box/)) {
var newh = Number(hash.replace("#box",""));
(newh > max-1) ? newh = 0 : void(null);
document.location.hash = "#box" + String(newh+1);
} else {
document.location.hash = "box1";
}
}
Change max the highest number you want to go (for box1, box2, etc...). Not sure if this will keep the animation, but you can take a look at an example here. Just watch the address bar.
I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.
What the absolute best way to do this with jQuery? (no plugins)
I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?
I'm using rel instead of href, since the href made the page jump, even with return false.
This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>
The following code accomplishes what you need:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
I have removed the '#' sign from your rel='' piece ;-)
I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)
Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc
I think this is a great example of what your looking for: Organic Tabs
var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).