Multiple navigations and pages on a single page - javascript

<html>
<head>
<style type='text/css'>
span {
text-decoration:underline;
color:blue;
cursor:pointer;
}
</style>
<script>
// show the given page, hide the rest
function show(elementID) {
// try to find the requested page and alert if it's not found
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
// get all pages, loop through them and hide them
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// then show the requested page
ele.style.display = 'block';
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div style="float: left; width: 20%;">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
<button>Link 1</button>
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
<button>Link 2</button>
</p>
</div>
</div>
</div>
<div style="float: right; width: 75%;">
<div>
<p>
Show page
<span onclick="show('Page1');">1</span>,
<span onclick="show('Page2');">2</span>,
<span onclick="show('Page3');">3</span>.
</p>
<div id="Page1" class="page" style="">
Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
Content of page 3
</div>
</div>
</div>
</body>
</html>
Above is the code that I have so far.
Right now, when clicking on page 1, page 2, or page 3, the desire page will appear below. This code is set up on the right side of the page. <div style="float: right; width: 75%;">
On the left side of the page <div style="float: left; width: 20%;">, i have an accordion with a couple button links. My question is when clicking on button link 1 or button link 2 in the accordion, how can I switch the right page from a selection of different pages keeping the same function it has right now.
Thus, first i would click on button link 1 in the accordion to show desired page on the right side and if i would like to switch pages, then i would click on button link 2 in the accordion and show that desired page.
For visual, please see this fiddle
If you saw the fiddle, then the links inside of the black box switch pages within the div, but I would like to add another function and switch the black boxes depending if the user presses button link 1 or button link 2
Any suggestions? thanks!

I am not certain that I understand the question correctly.
What I believe could be very useful for you, is to look into jQuery UI Tabs:
http://jqueryui.com/tabs/
and link the tab click events to the accordion menu.
Edit:
JSFiddle, including the jQuery UI tabs.
Provided the code on how you can activate the tabs on a click event from the accordion menu.
http://jsfiddle.net/kimgysen/BcCnL/2/
$(document).ready(function() {
//Tabs
$('#body_div').tabs();
$('#newsfeed').click(function(){
$("#body_div").tabs("option", "active", 0);
});
$('#myprofile_edit').click(function(){
$("#body_div").tabs("option", "active", 1);
});
$('#myprofile_view').click(function(){
$("#body_div").tabs("option", "active", 2);
});
});

Related

Virtual "Back Button" jquery

I am creating a mobile web app, I have a login/ signup page where users can choose the method they want.
In order to reduce the refresh rate of pages I am hiding and showing objects depending on what the user clicks with jquery.
I have virtual back buttons on each of the 'pages' which hide/show the objects including the back buttons themselves, each time I need to add an extra 'page' I have to add and call the different buttons.
Is there a way I can have one button and use that depending on what elements are hidden/shown?
e.g
html
<div id="go_button"</div>
<div id="next_button"</div
<div id="backbutton1"</div>
<div id="backbutton2"</div>
<div id="page1"
<p> some information here </p>
</div>
<div id="page2"
<p> some more information here </p>
</div>
jQuery
$("#gobutton").click(function(){
$('#backbutton1').fadeIn(250);
$('#page1').fadeIn(250);
$('#next_button').fadeIn(250);
});
$('#next_button').click(function(){
$('#backbutton1').hide();
$('#backbutton2').show();
$('#page1').fadeOut(250);
$('#page2').fadeIn(250);
$('#next_button').fadeOut(250);
$("#backbutton1").click(function(){
$('#backbutton1').fadeOut(250);
$('#page1').fadeOut(250);
$('#next_button').fadeOut(250);
});
etc etc
Would something like this work for you?
I checked the currently visible page, and based on that and what button is clicked, it would go forward or back.
var
$go = $('#go_button'),
$next = $('#next_button'),
$back = $('#backbutton'),
$pages = $('div[id^=page]');
$go.click(function() {
$next.fadeIn(250);
$back.fadeIn(250);
$pages.first().fadeIn(250);
});
$next.click(function() {
var $current = $pages.filter(':visible'); // Get currently visible page
if (!$current.is($pages.last())) { // If this is not the last page, do something
$current
.hide() // hide current page
.next() // get next page
.fadeIn(250); // fade in next page
}
});
// Opposite of the $next.click
$back.click(function() {
var $current = $pages.filter(':visible');
if (!$current.is($pages.first())) {
$current
.hide()
.prev()
.fadeIn(250);
}
});
div[id^=page] {
padding: 5px 10px;
border: 1px solid #ddd;
display: none;
}
#next_button,
#backbutton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go_button">go</button>
<button id="next_button">next</button>
<button id="backbutton">back</button>
<div id="page1">
<p> 1 some information here </p>
</div>
<div id="page2">
<p> 2 some more information here </p>
</div>
<div id="page3">
<p> 3 more information here </p>
</div>
<div id="page4">
<p> 4 more! more! more! more!</p>
</div>
Make a function ..
function operation(name){
if(name == "go_button"){
//operation
}else if(name == "next_button"){
//do this.
}
}
now in html
<div id="go_button" onclick="operation('go_button')" > </div>
<div id="next_button" onclick="operation('next_button')" ></div

How to show and hide the particular div, when we click on particular link on that div?

Node: Please see the demo
All div are generated dynamically, and having same class class="bucket". This div had one more div inside class="restPart" rest part, which will hide, when page load first time.
What I want, I have more than one div,
1. Each divs hides the rest part, when page load first time.
2. Each div are diving into two part, one part will always show and rest part will not show.
3. Rest part will appear only when we click the link "show more",
4. When div are fully shown It will show link "show less", when we click on it, will hide the rest part.
5. This should work only for one div on which we are clicking, other divs should be unaware.
_data_grid.html
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#restPart").hide();
$('#grid_content').on('click','.more', function(){
//$("#restPart").show();
$("div").children("div").show();
$("#showRest").hide();
});
$('#grid_content').on('click','.less', function(){
//$("#restPart").hide();
$("#showRest").show();
$(this).closest("div").hide();
});
});
</script>
#grid_content {
overflow: hidden; clear: both;
}
#grid_content .bucket {
width: 290px; float: left; margin: 0 0 48px 20px;
border: 1px solid #262626;
background: $gray-lighter;
}
#grid_content .bucket ul {
margin: 0 0 0 0; padding: 0 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
<!--1st -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
<!--2nd -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
</section>
Please see the following figure, If I click on show content on 1st div then It will show rest of 1st div on other will not show, If I click on 2nd div then It will show the rest 2nd div, no other div will show.
What I want
In the like following figures, more div will be generated dynamically, previously all will hide, when I click on first div show the rest content, but rest will not show, please see the figure 2,
Figure 1
Figure 2
Try this piece of code . I think this is what you want to achieve .
$(document).ready(function() {
$('.bucket .restPart').hide();
$('.more').show();
$('.less').hide();
$('.more').click(function() {
$('.more').toggle() ;
$(this).parent().next('.restPart').show();
$('.less').toggle() ;
});
$('.less').click(function() {
$('.less').toggle() ;
$(this).parents('.restPart').hide();
$('.more').toggle();
});
});
You can achieve this effect using straightforward Javascript (rather than jQuery).
function showRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'block';
}
function hideRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'none';
}
function initialiseRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'none';
var showMore = document.getElementById('showMore');
showMore.addEventListener('click',showRestPart,false);
var showLess = document.getElementById('showLess');
showLess.addEventListener('click',hideRestPart,false);
}
window.onload = initialiseRestPart();
<div class="bucket">
... Content of visible part of bucket...
Show More.
<div id="restPart">
... Content of Rest Part...
Show Less.
</div>
</div>
I think your problem is with the Ids.
In a file, two elements shouldn't have the same id.
Apart from that your code seems fine, (more or less).
$(document).ready(function() {
$(".restPart").hide();
$('#grid_content').on('click', '.more', function() {
$(this).nextAll(".restPart:first").show();
});
$('#grid_content').on('click', '.less', function() {
$(this).closest("div").hide();
});
});
and the HTML :
<section id="grid_content">
<!--1st div generated by dynamically -->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
<!--2nd div generated by dynamically-->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
<!--3rd div generated by dynamically-->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
</section>

HTML/JavaScript - How can I hide the links and cursor?

I am working on a JavaScript/HTML template for my website however I am having trouble trying to figure out how to hide links and cursors when at different ID's.
The URL's end like so http://domain.com/index.html#about etc. The homepage Which is the following code:
<!-- Home Page -->
<section class="content show" id="home">
<h1>THIS IS THE HEADER</h1>
<h5>SUB HEADING</h5>
<p>THIS IS A PARAGRAPH OF TEXT.</p>
</section>
is the content that initially shows, the rest use "content hide". The issue I am having is that when at other ID's eg #services even though the content from other pages is hidden, links and cursors can still display when navigating the page. An example would be my templates page:
<!-- Web Templates -->
<section class="content hide" id="web_templates">
<h2>HTML Stand Alone Website Templates</h2>
<h3>Free Templates</h3>
<!--THE IMAGES ARE PLACED IN AN UNORDERED LIST-->
<ul class="enlarge"> <!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img src="images/free_web_templates/hairstylesalon.jpg" width="150px" height="100px" alt="Hair Style Salon" /> <!--thumbnail image-->
<span> <!--span contains the popup image-->
<img src="images/free_web_templates/hairstylesalon.jpg" alt="Hair Style Salon" /> <!--popup image-->
<br />Hair Style Salon (Free Website Templates) Download <!--caption appears under the popup image-->
</span>
</li>
</ul>
</section>
When not on this page the hand cursor displays on every page even though the content is hidden. Is there anyway I can fix this so that when at different ID's in the URL the content including cursors and links is hidden?
The CSS for content:
.content {
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
The Main JS:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});
Are you perhaps looking for
{display:none} which makes things invisible and the space the element occupies is collapsed?

javascript code to make a div slide down and up (show/hide)

I have a page and I have little question mark images next to sections where if the question mark image is clicked, a div right below the section will appear sliding the rest of the page down. Essentially a slide down/slide up javascript function.
Ex:
Section Title (? IMG)
<div id="section">blah blah blah</div>
<br><br>
Section Title 2 (? IMG)
<div id="section2">Blah2 blah2 blah2</div>
In my example above, the content inside div section and div section2 is hidden at first, but when the ? IMG is clicked for that section, the content will reveal itself and the rest of the page will slide down at the same time to make room for the content inside the divs. And on reverse, if the question mark image is clicked while content is shown, it will slide up and hide itself and the page below will slide up as well filling the gap.
How would I write this? I need it expandable so I can add multiple div's which can be titled accordingly and expanded individually.
Thanks
With jQuery you can do this:
HTML:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
Script:
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
Source: jQuery docs http://api.jquery.com/slideDown/
To include jQuery on a HTML page, you can use the following in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You could also download it yourself at place it on the server you want.
EDIT: Full answer with ready code then....
HTML:
<h1 id="id1" class="clickme">click1</h1>
<div id="section1">blah blah blah</div>
<br><br>
<h1 id="id2" class="clickme">click2</h1>
<div id="section2">Blah2 blah2 blah2</div>
SCRIPT
$('.clickme').click(function() {
$(this).next().slideToggle('slow', function() {
// Animation complete.
});
});
Try this for instance:-
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">blah blah blah</div>
</div>
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">Blah2 blah2 blah2</div>
</div>
<script>
$(function(){
$('.btn').click(function(e){
$(this).parent().toggleClass('slideOut');
});
});
</script>
.section{
display:none;
}
.slideOut .section{
display:block;
}
.btn
{
cursor:pointer;
}

How to show divs on browser scroll

My page layout has several group of divs repeating like
<div--1>
<div--2>
<div--3>
<div--4>
Tthis structure repeats over several times. I would like to hide the contents of div--4 to be hidden untill the user scrolls to that element. How can we achieve that functionality?
I found a plugin that works with images like that(http://www.appelsiini.net/projects/lazyload)
This code will show and hide the divs based on the mouse position. Not sure how to detect a particular div is on the screen currently or not.
<html>
<head>
<title>Show/Hide Divs</title>
<script type="text/javascript">
function showMyContents(control)
{
control.children["myContents"].style.display = 'inline';
}
function hideMyContents(control)
{
control.children["myContents"].style.display = 'none';
}
</script>
</head>
<body>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 1
<div style="display:none" id="myContents">My Contents1</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 2
<div style="display:none" id="myContents">My Contents2</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 3
<div style="display:none" id="myContents">My Contents3</div>
</div>
</body>
</html>

Categories

Resources