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
Related
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');
so i have this page index.html and i would like to load another page page2.html between <div> </div> , any ideas will be helpful
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
</div> <!-- end of sidebar -->
<div id="main">
<div id="content">
<!-- scroll -->
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="home">
<!-- this where the other page should load page2.html -->
</div> <!-- end of home -->
You could do this:
$("#home").load("page2.html");
That is, use the Ajax .load() method, which will "Load data from the server and place the returned HTML into the matched element."
If you want to do it in response to clicks on anchors in your navigation bar it would be good to set the href of each anchor to the desired URL, e.g.:
<li>Home<span class="ui_icon home"></span></li>
and then:
$(".navigation a").click(function(e) {
e.preventDefault(); // don't do standard <a> click behaviour
$("#home").load(this.href);
});
If you plan to start using jQuery it pays to spend a half hour browsing through the complete list of jQuery methods and selectors to get a sense of what it can do.
I have a PhoneGap application wich uses a jQuery Mobile multipage layout. On every page (page A and page B) I have a navbar for switching between pages. No custom code involved. I also have a panel on every page which opens by clicking the 'new' button in the header.
Sometimes it happens that I hit the button (maybe to soft? or to fast?) to open to panel but the buttons just changes it state to "active" and the panel does not open. I cannot click the button anymore. When I change the page and go back (all by using the navbar) page A appears again and now the panel is opened. This is a strange behaviour but could be plausible. But trying to close it now is just impossible. Clicking one of the buttons in the panel is as inactive as clicking on the page itself. The whole thing seems to be froozen.
<div data-role="page" id="one">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_one">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#one" data-transition="none" class="ui-btn-active" >A</a></li>
<li><a href="#two" data-transition="none" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page One-->
<div data-role="page" id="two">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_two">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li>A</li>
<li><a href="#two" data-transition="none" class="ui-btn-active" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page Two-->
menu() creates the content of the Menu which is not shown in the example. Another method (loadPanel()) is boud to the pageshow-event and will populate the sidebar with the buttons. every button will execute
var pageId = $.mobile.activePage.attr("id");
$("#panel_" + pageId).panel('close');
before anything else is executed. However, all of this works most of the time and I would just like to know if some observed a similar behaviour.
As per jQuery mobile documentation
A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between.
Maybe you should move up your panel because it may be the cause of the strange behaviour
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!
By default jquery-mobile adds a back button on each page after main page. I wish to know how can I add the home button also ?
Here is an example: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
Note: This link is only good for firefox/chrome
Thanks.
There's a simpler solution: just add a link to your header div with class="ui-btn-right". This is essential so that the jQuery Mobile back button can be automatically added to the left. There's also a few other data-* attributes that you can use so you can use the built-in theme icon etc, as shown:
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
<a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
</div>
<div data-role="content">
...
(Obviously change the home href URL to something sensible for your environment, don't just use "/" because it limits where your app can be deployed.)
Without modifying the jquery-mobile.js source code, the only way I can think to do it, is to add your own navigation links to the header. Once you add your own link, the automatic 'Back' button will disappear, so we will create 2 links, one for back, and one for home.
You will notice page 2 and 3 both have back buttons and a home button and you can either go back or jump directly to home. This requires you to modify the 'header' section for each page, but its not that big of a deal since its always the same (copy and paste) no modification needed per instance.
The 'home' link will be in the top right (as per the default behavior of a second link it to put it top right).
Here is the example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>First Page</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called second page</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
Back<h1>Bar</h1>home
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
<p>Go to third page</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="thirdpage">
<div data-role="header">
Back<h1>Bar</h1>home
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is thirdpage)</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
If you wanted to make it do it automatically, you could also just hack the js...
Right after this piece of code (around line 1084 of the non minified jquery.mobile-1.0a2.js)
$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
.click(function() {
history.back();
return false;
})
.prependTo( $this );
Add a line like this, where #firstpage is the id of your home page, I couldn't find a way to reference the home page without calling it by name, feel free to improve.. I didn't want to do / or just # won't work... but this method works
$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );
When first using jqm to develop an application, I wanted both home and back buttons on the top header because the navigation tree is deep. Using the core button classes such as "ui-btn-right" or "ui-btn-left" work great-- IF you only want one button on each side.
But if you are like me and want two buttons on the left, you can use a little custom CSS and positioning to get it where you want. I also wrapped the buttons in a custom-header class, as well as use CSS to control the title in the header. You will need the place each button on a different z-index, otherwise each button will conflict with the other.
This is the header:
<div id="home-btn" class="header-btn-left-pos1">
Home
</div><!-- /home-btn -->
<div id="back-btn" class="header-btn-left-pos2">
Back
</div><!-- /back-btn -->
<div class="header-title" align="center">
<h4>Business Locations</h4>
</div><!-- /header-title -->
</div><!-- /custom header -->
This is the CSS:
.custom-header
{
height:18px;
}
.header-title
{
position:relative;
top:-10px;
}
.header-btn-left-pos1
{
position:absolute;
left:25px;
top:5px;
z-index:1;
}
.header-btn-left-pos2
{
position:absolute;
left:105px;
top:5px;
z-index:2;
}
Hope this gives you more options.
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
</div>
</div>
You could use rel=external in you href tag. This will open the homepage without a back button.