Efficient jQuery navbar? - javascript

I'm trying to make a simple navigation bar in HTML/jQuery and have managed to make a working implementation. Each tab is supposed to, when clicked, display the appropriate content section. (NOTE: all 's are display = none by default. the "active" class sets this value to "block")
I've been doing a bit of reading about efficiency concerns with Javascript and jQuery and really want to start making it a good habit of writing efficient code from the beginning as opposed to always having to come back to everything.
Is there a more efficient way of doing what the code I have below does? I know that constant calls to the DOM can be expensive, but I'm not entirely sure if I can change that in this scenario.
Any advice regarding how this example could be better would be great. General performance tips for jQuery/Javascript would also be greatly appreciated!
index.html
<div id="container">
<nav>
Home
About
Careers
Contact
Lasers
</nav>
<section id="home" class="active">
This is the home section!
</section>
<section id="about">
This is the about section!
</section>
<section id="careers">
This is the careers section!
</section>
<section id="contact">
This is the contact section!
</section>
<section id="lasers">
This is the lasers section!
</section>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
app.js
$(document).ready(function() {
$('a').click(function() {
var view = $(this).data("content");
var curr = $("#"+view).attr("class");
if (curr !== "active") {
$(".active").toggleClass("active");
$("#"+view).toggleClass("active");
}
event.preventDefault();
})
});

What about
$(document).ready(function () {
//cache the sections
var $setions = $('#container > section');
$('a').click(function () {
var view = $(this).data("content");
//cache the target
var $view = $("#" + view);
//use hasClass to check whether the target is already active if so do nothing
if (!$view.hasClass('active')) {
//remove active class from other sections
$setions.filter(".active").removeClass("active");
//add active class to target
$view.addClass("active");
}
event.preventDefault();
})
});

I would do something like this:
var section = $("section");
$("nav a").on("click", function () {
section.removeClass("active");
$("#" + $(this).data("content")).addClass("active");
});
Less code + you're caching your sections.
Demo here:
http://jsfiddle.net/a75p8/

I think you're doing too much work with the data-content. How about something like this?
$(document).on('click','nav a',function(){
$('section').hide(); //or removeClass
var tmp_div = $(this).index(); // declaring a variable
$('nav a').eq(tmp_div).show(); // or addClass
});

Related

selection/active class for show/hide divs

So I have this thing where I need one div to be shown at any one time depending on the button clicked. I found this great fiddle which is almost perfect except for the fact that it doesn't show when one link is selected. I'd like to have it so that the link that's selected can have a sort of active class or look different from the other links. Is that possible? I've been looking through questions and I can't really find an answer for this.
If anyone's interested, I'm using it for this (but the code is really messed up, sorry). (I'd also like to change the filter buttons on the top row to reset and filter all the images, but am aware that's a different question. Still any help would be appreciated!)
html
<div id="linkwrapper">
<a id="link1" href="#">link1</a><br/>
<a id="link2" href="#">link2</a><br/>
<a id="link3" href="#">link3</a>
</div>
<div id="infocontent">
<div id="link1content">Information about 1.</div>
<div id="link2content">Information about 2.</div>
<div id="link3content">Information about 3.</div>
</div>
jquery
$(document).ready(function(){
$("#infocontent").hide();
$("#infocontent div").hide();
$('#linkwrapper a[id]').click(function(){
var vsubmen = this.id +"content";
if( $("#infocontent").is(":visible") == false ) {
$("#" + vsubmen).show('fast',function() {
$("#infocontent").slideDown();
});
} else if ( $("#" + vsubmen).is(":visible") == false ) {
$("#infocontent").slideUp('slow',function(){
$("#infocontent div").hide();
$("#" + vsubmen).show();
$("#infocontent").slideDown('slow');
});
} else {
$("#infocontent").slideUp('slow',function(){
$("#infocontent div").hide();
});
}
return false;
});
});
You can simplify that fiddle like this:
$('a[id^=link]').click(function(){
$('a[id^=link]').removeClass('meactive');
$(this).addClass('meactive');
$('#infocontent>div').slideUp();
var tmp = this.id;
$('#'+tmp+'content').slideDown();
}); //end a.click
jsFiddle Demo
Notes:
(1) $('a[id^=link]') -- grabs all a elements with a ID that starts with link
(2) $('#' +tmp+ 'content') -- builds selectors like: $('#link3content)`

Open Expanding List from Href

I'm trying to modify this pen I found on CodePen. I'd like to be able to open a specific list on the page from another page. Clicking the link should open the corresponding section on the next page on page load.
I'm a bit of a newbie when it comes to jQuery, so I appreciate any help I can get. I've tried searching around and have an idea of what I need to target, but I haven't been able to make it happen. Here is my code:
HTML:
<!--Link on Previous Page-->
Click Here
<!--Target List-->
<div class="integration-list">
<ul>
<li class="integration">
<a class="expand" id="list">
<div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
<div class="right-arrow">▼</div>
</a>
<div class="detail">
<div><p>Lorem Ipsum Dolor...</p></div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "▼") {
$expand.text("▲");
} else {
$expand.text("▼");
}
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');
});
});
Few things that I did to get it to work:
The trigger event is probably firing before the handler is actually attached. You can use setTimeout as a way around this.
Also, even with setTimeout around $('.expand').find('a[href*='+ thash + ']').trigger('click'); it didn't work for me. I changed that to simply $(thash).click();.
The complete code of the "expand.js" file:
$(function() {
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
setTimeout(function() {
$(thash).click();
}, 10);
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
$expand.text("â–²");
} else {
$expand.text("â–¼");
}
});
});
Apparently the arrows don't display properly here, so watch that if you copy/paste this.

Back button after a slide

i need to have a back button on my slide to return to the previous div. I did several test but without success.
there is my JS
function SlideOut(element) {
$(".opened").removeClass("opened");
$("#" + element).addClass("opened");
$("#content").removeClass().addClass(element);
}
$("#content div").click(function () {
var move = $(this).attr('data-move');
SlideOut(move);
});
There is the demo link:
http://jsfiddle.net/VA5Pv/
thanks
You could create a history. I edited the fiddle with some dirty code but the idea is there:
var history = [];
var last;
$("#content div").click(function () {
var move = $(this).attr('data-move');
if (last) history.push(last);
last = move;
SlideOut(move);
});
$("#back").click(function () {
SlideOut(history.pop());
return false;
});
http://jsfiddle.net/VA5Pv/1/
Basically: store the "move" variable in a history array. When you want to go back, pop the last value out of the history array.
Reset
If you just want to return to the initial state (no slides opened), just add the following:
$('button.close').click(function() {
$('.opened').removeClass('opened');
});
Tracking a full history is overkill in this case.
Demo: http://jsfiddle.net/VA5Pv/4/
History
Several answers suggested using a history. Most of them used an array which keeps track of the slides the user opened and then simply pop from that to "go back".
var history = [];
$('#content div').click(function() {
var move = $(this).attr('data-move');
history.push(move);
SlideOut();
});
$('button.close').click(function() {
history.pop();
SlideOut();
});
function SlideOut() {
var element = history[history.length - 1];
// ... same as before ...
}
This would be necessary if you wanted to allow the user to open any number of slides in any order and always present them with a button to go back to the previously opened slide.
Sequence
Another solution could have been to store all the slide IDs in an array and keep a counter that tells you at which slide you are. Going back would mean decrementing the counter if it is not already at zero and then switching to that particular slide.
This would be useful if you were trying to create something like a presentation where each slide is opened in sequence and the transitions are entirely linear.
This is why I asked you to clarify what you were trying to build. Depending on the use case, the solutions could have been vastly different and far more complex than what you were actually looking for.
Thanks for accepting my answer and welcome to StackOverflow. Feel free to upvote any answers you found helpful even if they did not answer your question sufficiently.
try the following:
$('.anim button').click(function(){$(this).parent().removeClass('opened');});
I assigned this to the button in div rouge. But the target could be anything in that div you want the user to click on ...
see here: JSfiddle
Here is the DEMO
<div id="fullContainer">
<div id="right" class="anim"></div>
<div id="rouge" class="anim">Hello world!
<button class="close">Close</button>
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content">
<div data-move="right">Open Right</div>
<div data-move="rouge">Open Rouge</div>
<div id="back">Back</div>
</div>
function SlideOut(element) {
if(element == undefined) {
$('#back').hide();
}
$(".opened").removeClass("opened");
$("#" + element).addClass("opened");
$("#content").removeClass().addClass(element);
}
$("#content div").click(function () {
var move = $(this).attr('data-move');
$('#back').show();
SlideOut(move);
});

Set "active" accordion menu after click

I'm trying to set accordion menu "active" after click on link and change the page...
<div class="menu">
<dl>
<dt>HOME</dt>
<dt>QUEM SOMOS</dt>
<dd>
<ul>
<li>EMPRESA</li>
<li>INSTITUCIONAL</li>
<li>NOSSOS PRODUTOS</li>
<li>RESPONSABILIDADE SOCIAL</li>
<li>RESPONSABILIDADE AMBIENTAL</li>
</ul>
</dd>
<dt>PRODUTOS</dt>
<dd>
<ul class="produtos">
<%do while not rscat.EOF%>
<li><%= rscat("categoria")%></li>
<% rscat.MoveNext
if rscat.EOF then Exit do %>
<% Loop %>
</ul>
</dd>
<dt>INFORMATIVO</dt>
<dt class="no_border">CONTATO</dt>
</dl>
</div>
jquery:
<script type="text/javascript">
$(document).ready(function(){
$('dd').hide();
$('dt a.submenu').click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
i'm trying too, use this https://stackoverflow.com/questions/10681033/accordion-menu-active-state-after-link-click but dont work...
what i try (but don't work):
<script type="text/javascript">
$(document).ready(function(){
$('dd').hide();
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$("dt a.submenu[href='" + sPage + "']").parents("dd:visible").show();
$('dt a.submenu').click(function(){
$("dd:visible").slideUp("slow");
var checkElement = $(this).next();
if ((checkElement.is("dd")) && (checkElement.is(":visible"))) {
return false;
}
if ((checkElement.is("dd")) && (!checkElement.is(':visible'))) {
$(this).parent().next().slideDown("slow");
checkElement.slideDown("normal");
return false;
}
});
});
</script>
Well, the first sublinks ul point to especific pages, but the another sublink ul class=produtos show the categories that's on database, and uses same link on each categories like: produtos_categoria.asp?categoria=xxxxxx...
If the user, click on "EMPRESA", on the page empresa.asp the QUEM SOMOS menu need to be opened. And if the user click on some categories under the menu PRODUTOS, on the page produtos_caegoria.asp the PRODUTOS need to be opened..
I'm clear?
So.. what i need to do?
FIDDLE: http://jsfiddle.net/Qf7Js/1/
check this jsfiddle to see if it does what you require. As far as I could understand the problem, you want to, on page load, automatically open the accordion menu that contains the current link.
This can be achieved with following code
//say this is the current link which can be retrieved in real website using window.location object
var init_link = 'institucional.asp'
//then instead of hiding all <dd>, using $('dd').hide(), you only hide the ones that don't contain an <a> that has href equal to init_link.
$('dd').filter(function () {
return $('a[href="' + init_link + '"]', $(this)).length == 0
}).hide();
Just change the init_link value to what the current URL. Watch out for the hostname part because your <a> might not contain absolute URL. This might help Get current URL in web browser.
To get currnet URL without the hostname part, you could (not must) use following code
var init_link = window.location.href.replace(window.location.protocol+'//'+window.location.hostname+'/', '')
To clarify, it seems like all you are looking to do is apply a class to the dt in addition to hiding/showing the next dd item? This can be achieved with callback functions, or by simply chaining the method on. Something like this:
<script type="text/javascript">
$(document).ready(function(){
var $menu = $('dl.menu');
$('dd', $menu).hide();
$('dt a.submenu', $menu).on("click", function(e){
e.preventDefault();
var $parent = $(this).parent('dt');
if($parent.hasClass('active')){
$parent.removeClass('active').next('dd').slideUp("slow");
} else {
$parent.siblings('.active').removeClass('active').siblings("dd").slideUp("slow", function(){
$parent.addClass('active').next('dd').slideDown("slow");
});
}
$("dd:visible", $menu).slideUp("slow", function(){
$(this).removeClass('active');
});
$(this).parent().next().slideDown("slow");
});
});
</script>
Hope this helps provide some direction.

Toggle innerHTML

I've seen various examples come close to what I am looking for, but none of it seems to describe it how I exactly want it. I am a beginner to jQuery, so explanations welcome.
I'm looking for this to toggle the innerHTML from - to +. Anyone know of a way to do this, efficiently?
jQuery/JavaScript
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html("+");
});
});
HTML
<div class="A1">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
Thank you, anything relating to switching the inside text of an HTML element shall help. =)
How about adding a class that will let you know the expanded/collapsed status?
$(document).ready(function() {
$(".A1").click(function() {
var $this = $(this);
$(".P1").toggle("slow")
$this.toggleClass("expanded");
if ($this.hasClass("expanded")) {
$this.html("-");
} else {
$this.html("+");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
Example: http://jsfiddle.net/sGxx4/
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+")));
});
});
A bit of explanation: I'm setting $("#A1").html() with the product of the tertiary operator, using it to check for the current value of #A1's text. If it's a +, I set the element's text to -, otherwise, I set it to +.
However, you said "efficiently." To this end, it's important to note that if you're going to use a selector twice or more in the same function, you should store the jQuery object that results from the selector you give in a variable, so you don't have to re-run the selector each time. Here's the code with that modification:
$(document).ready(function() {
$(".A1").click(function() {
var $A1 = $(".A1");
$(".P1").toggle("slow");
$A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
});
});
There's no way to toggle content.
You could check if the $('.P1') is visible, then changing the +/- div according to that.
Something like :
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow", function(){
if($(this).is(':visible'))
$(".A1").html("-")
else
$(".A1").html("+")
});
});
});
Using a callback function (the second argument of the .toggle() method) to do the check will guarantee that you're checking after the animation is complete.
JsFiddle : http://jsfiddle.net/cy8uX/
more shorter version
$(document).ready(function() {
$(".A1").click(function() {
var $self = $(this);
$(".P1").toggle("slow", function ( ) {
$self.html( $self.html() == "-" ? "+" : "-");
});
})
});
Here's a way that uses class names on a parent and CSS rules and doesn't have to change the HTML content and works off a container and classes so you could have multiple ones of these in the same page with only this one piece of code:
HTML:
<div class="container expanded">
<div class="A1">
<span class="minus">-</span>
<span class="plus">+</span>
</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
</div>​
CSS:
.expanded .plus {display:none;}
.collapsed .minus {display: none;}
Javascript:
$(document).ready(function() {
$(".A1").click(function() {
$(this).closest(".container")
.toggleClass("expanded collapsed")
.find(".P1").slideToggle("slow");
});
});
​
Working demo: http://jsfiddle.net/jfriend00/MSV4U/

Categories