i have a Menu in which when user selects from menu list it displays that div and rest are hidden i have a huge menu list is there any function such that it displays only that div Can Anyone help please....
HTML:
<ul>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
<div id="one"> Div one </div>
<div id="two"> Div two </div>
<div id="three"> Div three</div>
CSS:
div {
display:none;
}
li {
cursor:pointer;
}
JQuery:
$('li').click(function(){
$('div#' + $(this).attr('class')).show().siblings().hide();
});
This isn't a particularly well phrased question, but i'm thinking you want to give all your divs that can be shown a particular class, and give each ond an id:
<div class="revealPanel" id="panel1">
<!-- Content -->
</div>
<div class="revealPanel" id="panel2">
<!-- Content -->
</div>
<div class="revealPanel" id="panel3">
<!-- Content -->
</div>
<!-- etc. ... -->
You've tagged this query with jquery-ajax so I'm going to assume you know how to include jQuery in your page etc.. Define a javascript function to hide all divs and show a specified one:
function ShowPanel(panelId)
{
jQuery('.revealPanel').hide();
if (panelId != null)
{
jQuery(panelId).show();
}
}
And now just call that function from each of your menu links with the correct id, for instance:
<a href="javascript:ShowPanel('panel1');>Show Panel 1</a>
Of course I may have misinterpreted your question, and even if I haven't I encourage you to provide more detail in your questions — use code snippets to show how you've designed your menu etc.
Good luck!
Related
I have a main menu. This main menu opens hidden divs that also contain inner menus that show and hide content.
You can see this in action here: http://shirleycollinsmovie.com/collins-html5/index.html#about
The user can select from the main menu and open up one of the hidden divs, and then explore the contents of the inner menu.
However when the user closes the hidden div and then opens a new one, then returns to the previous one again, instead of it displaying the contents from the beginning again it shows them exactly where they were when they left the hidden div previously. I want it to display the contents from the beginning again.
This is the code I have which shows the hidden divs from the main menu (I am using the same code for the inner menus as well):
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show()
});
<div id="menu">
<h1>main header</h1>
<nav>
<a id="about-link" href="#about">About</a>
<a id="news-link" href="#news">News</a>
<a id="foundation-link" href="#foundation">Foundation</a>
<a id="contact-link" href="#contact-info">Contact</a>
</nav></div>
<div id="foundation" class="hidden draggable-scroll">
<div id="foundation-nav" class="box-text">
<nav>
The Story so Far
What will the Foundation do?
The Manifesto
Who is the Foundation?
</nav>
</div>
<div id="foundation-opening" class="box-text foundation-info">
<h2>header </h2>
<p>
</p></div>
<div id="the-story" class="box-text foundation-info hidden">
<h2>The Story so far: </h2>
<p>
And she’s not done yet,</p>
</div>
<div id="what" class="box-text foundation-info hidden">
<p>
The Ballad of </p>
</div>
<div id="manifesto" class="box-text foundation-info hidden">
<h2>The proposed Manifesto: </h2>
<p>
The reason for the foundation to exist: </p>
</div>
<div id="who" class="box-text foundation-info hidden">
<h2>Who is the Foundation?</h2>
<p> </p>
</div>
<div class="close-box">
x</div>
</div>
Perhaps there is a way to target the starting content from the href of the main menu?
Or is there a way within the jQuery to re-hide the hidden content when the users selects from the main menu again?
A simple workaround,
The following code finds first/beginning Menu Item - a:first selector and trigger click on it.
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show().find('nav a:first').click();
});
This would always open first <a> of <nav>.
It works with your site link. Tried out in console.
I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');
I have a navbar that uses anchor links to connect to different divs. I have all the div's hidden, but I want them to show based on what link you click.
<!-- NAV CONTAINER -->
<div class="navContainer">
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Overview</li>
</ul>
</nav>
</div>
<!-- DIV CONTAINER -->
<div class="container">
<div class="sections" id="home">
homepage with title here
</div>
<div class="sections" id="page1">
page 1
</div>
</div>
I know you can do it using jQuery but I haven't been able to make anything work. Right now the divs are set to display:none. 'Home' should appear when you load the site.
One possible solution is to use the css pseudo-selector :target
.sections {display:none;}
.sections:target {display:block;}
Demo
CSS3 selectors are pretty well supported but :target can give odd or buggy behaviour as mentioned here: http://css-tricks.com/on-target/
If you want to control it with jQuery... try it: http://jsfiddle.net/luiggi/kRgt6/
$(document).ready(function () {
$("li.home").click(function () {
$("#home").toggle();
$("#page1").hide();
});
$("li.overview").click(function () {
$("#page1").toggle();
$("#home").hide();
});
});
You'll likely need to add some sort of CSS class to the anchor links so you can find the specific triggers more easily.
Just from memory, the code will be something like this (assuming anchors have the "ToggleDiv" class name).
$('.ToggleDiv').each(function(el){
var divId = $(el).attr("href");
$(el).click(function(){
$(divId).Toggle();
});
})
Below is my psuedo-code for a Single page website I am doing. I need to be able to make a single page website that is not scroll-based (which is the typical). The idea here is that my site have a nav where user selects a menu and depending on the selected menu the correct page div is rendered on the content div.
The page divs are also in the HTML and should not be displayed unless the correct menu is selected (or if a better approach is to place the pages in Javascript file):
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1"> <!-- for menu1 -->
<div>the content</div>
</div>
<div id="page2"> <!-- for menu2 -->
<div>the content</div>
</div>
How can achieve this with jQuery?
Here is what you looking for
Html :-
<nav>
<ul>
<li class="nav active" data-id="1">menu1</li>
<li class="nav" data-id="2">menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
<div id="page1" class="page">
<!-- for menu1 -->
<div>the content from page 1</div>
</div>
<div id="page2" class="hide page">
<!-- for menu2 -->
<div>the content from page2</div>
</div>
</div>
Jquery :-
$(document).ready(function () {
$('.nav').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.page').hide();
var clickedId = $(this).data('id');
$('#page' + clickedId).show();
});
});
Working Demo
To display preloaded contents in different containers you can use anchor tag with some CSS
HTML
a
b
c
<div id="page1" class="page"> this is page1 id</div>
<div id="page2" class="page"> this is page2 id</div>
<div id="page3" class="page"> this is page3 id</div>
CSS
#page1, #page2, #page3{
display:none;
}
#page1:target{
display:block;
}
#page2:target{
display:block;
}
#page3:target{
display:block;
}
As another answer stated, you may want to take a look at AngularJS. Here is an excellent tutorial to get you started if you choose: http://www.youtube.com/watch?v=i9MHigUZKEM
However, since your question stated jQuery, the best way will probably be to have all the pages separate html pages that are loaded in via AJAX and replace your current html.
The other approach is to have everything on the page at once and hide and show the content based on the menu item the user clicked. However, this may make the page REALLY sluggish if you have a lot of content all on the page at once.
If you want the content to be embedded in the page but hidden, use jQuery's .hide() and .show()
If you want to keep the content in separate pages, use jQuery's .load()
use this code , make sure your #page1 and #page2 divs hidden initially
jQuery(document).ready(function(){
jQuery('li').click(function(){
var new_index = parseInt(jQuery(this).index())+1;
jQuery("div[id*='page']").hide();
jQuery('#page'+new_index).show();
});
});
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1" style="display:none";> <!-- for menu1 -->
<div>the content 1</div>
</div>
<div id="page2" style="display:none";> <!-- for menu2 -->
<div>the content 2</div>
</div>
Try this link, it will help you. you are having navigation bar on your right hand site from where you can navigate through out your website.
Single page website
Check out http://jqueryui.com/demos/draggable/
At the bottom there's a tabbed section. The seconds tabs "Details" gives the example of exactly what I want to accomplish. You can show/hide each row, and you can show/hide the details within that list row.
Is this part of the jQuery UI? If so, does anyone happen to know what it's called?
It is part of jQuery. It is just a simple hide and show on another div.
<div class="Control">Toggle</div>
<div class="Content" style="display: none;">Some content you want to toggle.</div>
<script>
$(".Control").click(function(){
$(this).next(".Content").toggle();
});
<script>
Your elements can change to anything you want, LI, IMG, DIV.
here is a simple accordion
if you don't want them all to hide. remove this line $('.contentblock').not(c).hide();
<ul id="accord">
<li>
title
<div class="contentblock">Content</div>
</li>
<li>
title2
<div class="contentblock">Content2</div>
</li>
</ul>
then ...
$(function () {
$('.contentblock').hide();
$('#accord').delegate('li > a','click',function () {
var c = $(this).parent().find('.contentblock').toggle();
$('.contentblock').not(c).hide();
})
});