Reveal Div and Hide others in Dojo - javascript

I am creating some custom navigation in Dojo and am struggling with the final piece of the jigsaw a bit. Basically when hovering over a link with the class "navSectionTitle" a div will be revealed containing more links. However when this happens I would like to hide all other div's that are currently revealed. My mark up below might show what I am trying to achieve :
<div class="navElement">
Home Appliances +
<div class="subMenuHolder">
<ul>
<li>Washing Machines,</li>
<li>Vacuum Cleaners,</li>
<li>Microwaves,</li>
<li>Ovens,</li>
<li>Coffee Makers,</li>
<li>Toasters,</li>
<li>More +</li>
</ul>
</div>
</div>
<div class="navElement">
Furniture +
<div class="subMenuHolder last">
<ul>
<li>Bedroom Furniture,</li>
<li>Kitchen Furniture,</li>
<li>Living Room Furniture,</li>
<li>Outdoor Furniture,</li>
<li>Office Furniture,</li>
<li>Book Shelves,</li>
<li>More +</li>
</ul>
</div>
</div>
So when on link is hover on its closet subMenuHolder div will be revealed, however I would then like to hide any other subMenuHolder div's that are open. A snippet of my code is below:
dojo.query(".navSectionTitle").forEach(function(node, index, nodelist){
dojo.connect(node , "onmouseover", function(evt){
dojo.query(node).next('.subMenuHolder')[0].style.display = 'block';
});
});
I have tried various methods but do not be able to achieve the results I am looking for any help would be greatly appreciated.

To use the next() function after a query, you need to have required "dojo.NodeList-traverse":
dojo.require("dojo.NodeList-traverse");
Here's an example of how you can do it.
dojo.query(".subMenuHolder").forEach(function(n) {
var l = dojo.query(n);
l.parent().at(0)
.onmouseenter(function(){
dojo.style(l[0], "display", "block");
})
.onmouseleave(function(){
dojo.style(l[0], "display", "none");
});
});
I'm assuming you have your .subMenuHolders hidden by default here.

Related

Trying to get nav to toggle close after li item has been selected

I want the menu to automatically animate closed after an item within the menu has been clicked on. And I want the user to still have the option to toggle the menu again. I managed to get the item to disappear after an item is clicked using $('#overlay').toggleClass(); but now the user no longer has the option to click on the menu again. I've tried googling around but can't find a clear answer. I'm new to JavaScript can someone please point me in the right direction.
Link to example http://codepen.io/anon/pen/KpRmgE
HTML
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li >Home</li>
<li>Port</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<p>First</p>
</section>
<section id="portfolio">
<p>Second</p>
</section>
<section id="about">
<p>Third</p>
</section>
<section id="contact">
<p>Fourth</p>
</section>
JavaScript
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$("nav li").click(function () {
$('#overlay').toggleClass();
});
});
You weren't far off... just a few wrongly placed calls inside the click handler.
Try this:
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
Forked codepen
You can also do it this way to make your event handler more clear:
$('#toggle').click(function() {
// Adding classes, waiting for a click
$(this).addClass('active');
$('#overlay').addClass('open');
$("nav li").click(function () {
// Clicked! Removing classes
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
});
});
I personally usually use the addClass and removeClass functions when you are doing that kind of specific action. That helps you avoid small errors that could take long to be seen. :)

Changing the active class as well as content in nav pills

Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...

Vertical menu type accordion

I have problem with vertical menu type accordion.
<div class="nav-section-container-large" data-set="nav-section" role="navigation">
<div class="nav-section">
<span class="nav-section-heading delta">In this section:</span>
<ul class="nav-section-level-2">
<li>Investment advantage</li>
<li>Statistics </li>
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li>Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
<li>Investment regulations</li>
<li>How can we help</li>
<li class="is-selected">Sectors of opportunity
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li class="is-selected">Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
</li>
</ul>
</div>
</div>
and
<script type="text/javascript">
$(function(){
$(document).on('click', ".nav-section-level-2 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
if ($(this).hasClass('is-selected') && $('.nav-section-level-3 li').hasClass('is-selected') )
$('.nav-section-level-2 ul').slideToggle('slow', function() { $(this).toggleClass('is-selected'); });
});
$(document).on('click', ".nav-section-level-3 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
});
});
</script>
algorithm vertical menu is working, but very bad. collapsed and expanded not working correctly!
How can I find resolve for my problem?
Please, ready resolves (type JQuery UI) not to offer.
Thank you very much.
I am not sure if I got it right. But here is one solution:
Modified example
$(function(){
$(".nav-section-level>li").on('click',function(e){
var ulElement = $(this).find('ul');
var isSameElement = $(ulElement).hasClass("open");
if( $("ul.open") !== undefined){
$("ul.open").slideToggle('slow');
$("ul.open").removeClass("open");
}
if(!isSameElement){
$(ulElement).slideToggle('slow');
$(ulElement).addClass("open");
}
});
});
First of all your html is little messy clean it up. Second you do not need to add any classes or anything to your li. Simple slidetoggle on click. Which will show hide your child ul.

How to hide sub-menu when other menu clicked JQuery

I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/

replacing div content with a click using jquery

I see this question asked a lot in the related questions, but my need seems very simple compared to those examples, and sadly I'm just still too new at js to know what to remove...so at the risk of being THAT GUY, I'm going to ask my question...
I'm trying to switch out the div contents in a box depending on the button pushed. Right now I have it working using the animatedcollapse.toggle function, but it doesn't look very good. I want to replace it with a basic fade in on click and fade in new content on next button.
Basic idea:
<div>
<ul>
<li><a href="this will fade in the first_div"></li>
<li><a href="this will fade in the second_div"></li>
<li><a href="this will fade in the third_div"></li>
</ul>
<div class="first_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
<div class="second_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
<div class="third_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
</div>
I've got everything working with the animated collapse, but it's just an ugly effect for this situation, so I want to change it out.
Thanks!
Joel
Joel, I think I understood what you wanted. Does this look right? In the code below I also used a convention where you append js to the class attribute on HTML so you can style your JS bits differently. If JS were disabled, all three tabs would show down in order. However, as long as JS is enabled, your code will display as desired.
You could improve this by dynamically setting the height of the #animators div based on the tallest height of the children, but it was getting complex enough as it was!
I changed your HTML a bit (both for testing and functionality.):
<div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="animators">
<div class="container">
<ul>
<li>stuff1</li>
<li>stuff1</li>
<li>stuff1</li>
</ul>
</div>
<div class="container">
<ul>
<li>stuff2</li>
<li>stuff2</li>
<li>stuff2</li>
</ul>
</div>
<div class="container">
<ul>
<li>stuff3</li>
<li>stuff3</li>
<li>stuff3</li>
</ul>
</div>
</div>
</div>
Add this to your CSS:
.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0 }
And use this JavaScript:
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('ul li a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
// Fade in new div if not already showing
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
</script>
EDIT Here is an alternate JavaScript block that fadesOut then fadesIn:
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('ul li a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut(1000, function(){
$target.not(':visible').fadeIn(1000);
});
} else {
$target.not(':visible').fadeIn(1000);
}
e.preventDefault();
})
})
});
</script>
Looks like toggle supports a speed setting...maybe that would be more elegant?
How about a JQuery fade out - http://docs.jquery.com/Effects/fadeOut and then your callback is a fade in?
..I just saw your link in the comments, that is exactly what they are doing on CSS tricks. Do you have a more specific question?
UPDATE
The visible class refers to the div that will be visible...haven't tested this but it should be about right
$('.first_container').click(function(){
$('.visible').fadeOut(3000,function(){
this.removeClass('visible');
$('.first_container').addClass('visible');
$('.first_container').fadeIn(3000);
});
})
That is the code to reference your first_container....you can go from there
If i've understood your question properly, this may be helpful for you
<div id="LoadMe2"><h3>Please select what to edit!</h3></div>
<script>
$('a').click(function() {
$('#LoadMe2').load($(this).attr('href'));
return false;
});
</script>
and html can be like
<input type="button" value="edit Header menu">
EDIT
sorry this helps you to fetch the content from those pages and displays it.
keeping this post as someone else may need this

Categories

Resources