i was wondering how to create a dynamic website where the page layout is as follows:
header, section, footer
The header and footer would always be static and when the user clicks a part of the nav e.g About Us (within the header) the section in the middle dynamically changes and fades in the About Us section.
I would like to use pure javascript if possible and without it being part server-side, I assume you would give the sections ID's and in the javascript "onClick" of the nav link, the one section would display:none and another section would display in replace of it.
I found a similar example on this website: http://www.templatemonster.com/demo/44858.html
What is the easiest way to create this effect? I have a VERY brief idea but how could you go about this?
If anyone could include a jsfiddle example, would be much apprieciated
What you are looking to do is called pjax. Pjax uses XML Http requests(ajax) to load a specific piece of content into a placeholder like you are trying to do.
Someone clicks to a new page.
Javascript requests this page from the server.
Once loaded, optionally fade out the old content.
Replace with the new content and optionally fade it in.
Use pushstate to add a state to the browser history. This allows the back and forward buttons to work.
Here is a pjax library that is handy for doing this easily across new and old browsers and has a good explanation:
https://github.com/defunkt/jquery-pjax
It would not be a good idea to include all of the content on one page with display:none because then it will still need to be downloaded by the browser even if the user never views it. Nevertheless, here is a JSfiddle showing this approach which is close to what you described:
http://jsfiddle.net/Tb4eQ/
//Wait for html to be loaded
$(document).ready(function(){
//Store reference to frame to load content into in a var, as well as the content to load in.
var $content = $('#div_1');
var $frame = $('#my_frame');
//Bind an event handler to the click event of something
$('#press').on('click', function(){
//fade out the frame, swap in the new content, and fade it back in.
$frame.fadeOut('fast', function(){
$frame.html($content.html()).fadeIn('fast');
})
});
});
You can use the jQuery method .load() which loads data from the server and place the returned HTML into the matched elements. Also the .toggle() method allows you display or hide elements.
Consider the following example: Suppose we have a page named index.html ...
<header>
<nav>
<ul><li id="nav-about">About us</li></ul>
</nav>
</header>
<section>
<article id="dynamic-viewer">
Dynamic content will be placed here!
</article>
</section>
<aside>
<div id="loader" style="display:none">
<img src="http://www.ajaxload.info/images/exemples/24.gif" />
</div>
</aside>
... and we have another file named about.html which is just a view:
<div>
<h2>About us</h2>
<p>This content is placed dynamically into #dynamic-viewer</p>
</div>
Now, I will load the content of about.html into the content wrapper in index.html using the jQuery.load() method.
//Click handler to load the "about" view
$(document).on("click.about", '#nav-about', function() {
fnShowLoading(true);
//Loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() {
fnShowLoading(false);
});
});
//Shows or hides the loading indicator
function fnShowLoading (show) {
$('#loader').toggle(!!show);
}
Actually, the only lines that matters here are:
//loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() { });
//shows or hides the loader section
$('#loader').toggle(!!show);
You could try to use Ajax calls to partially refresh parts of the page or just load the whole thing and let jQuery handle the hiding and showing of elements on click events.
http://www.w3schools.com/ajax/
http://api.jquery.com/hide/
Related
I have two separate navigable areas on my site. The lefthand column has its own navigation, and the righthand column (the main content area) has its own set of links:
I'd like to be able to press on a link on the left-hand side (like "Resume", "Email", etc.) and only load the new page within that lefthand sidebar (without refreshing the entire browser window).
I am using divs to load the right side's (main content) navigation, and the entire sidebar's content:
<script>
$.get("navigation.html", function(data){
$(".nav-placeholder").replaceWith(data);
});
$.get("sidebar-content1.html", function(data){
$(".sidebar").replaceWith(data);
});
I'm doing basically the same thing for the lefthand sidebar to load its three links:
<script>
$.get("sidebar-navigation.html", function(data){
$(".sidebar-nav").replaceWith(data);
});
</script>
When I press on a link that's inside the left sidebar, how do I just refresh that pink area?
Thanks for any help!
If I understand your question correctly, then you might find JQuery's .on() and .load() functions useful here.
The .on() method allows you to bind event handlers to DOM elements that are not currently present in the page, which is useful in your case seeing that the contents of navigation.html are dynamically added to the page.
The .load() method is a helper that basically achieves what you're doing with $.get() and $.replaceWith() via a single method call.
For details on how these can work together, see the comments below:
/*
Use $.on() to associate a click handler with any link nested under .sidebar-nav,
even if the links are dynamically added to the page in the future (ie after a
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {
/*
Get the href for the link being clicked
*/
var href = $(this).attr('href');
/*
Issue a request for the html document
or resource at href and load the contents
directly into .sidebar if successful
*/
$('.sidebar').load(href);
/*
Return false to prevent the link's default
navigation behavior
*/
return false;
})
Hope that helps!
First of all you don't need to use replaceWith method of jQuery, that is for returning the replaced elements which you don't have any in this example. You can use $(".sidebar").html(data)
For the links to load in another div, you could do something like this right after you load navigation links.
// this will interfere all the links would load inside sidebar-nav div
$("div.sidebar-nav a").click(function(event) {
var urlToGet = $(this).attr("href"); // gets the url of the link
$.get(urlToGet, function(data) { // loads the url
$("div.main-content").html(data); // puts the loaded url content to main-content
});
event.preventDefault();
});
You can use like below example.(JQUERY)
<div id="div3" class="left">
<button onclick="refresh()" id="refresh">
Refresh
</button>
</div>
<div id="div4" class="right"></div>
var content="<h1>refreshed</h1>"
$(document).ready(function(){
$('#refresh').click(function(){
$('#div3').html(content); //it will just overrides the previous html
});
});
I have a situation where the ajax loaded content of a JQuery ui Tab...
http://api.jqueryui.com/tabs/
...needs to have a part of the html that is loaded when a tab is clicked
to populate a div in another part of the page.
Note: that the tabs are working fine... I just need to make just one part go somewhere else.
Perhaps something like this... But i can't find in the documentation the object to search.
$(".tabsZ").tabs({
load: function (event, ui) {
var mmm = ?????.find("div#messageToShow");
if (mmm.length != 0) {
$('#divMessage').html(mmm);
?????.html('');
}
}
});
????? = the object to search.
Tabs in JQueryUI are just <div>'s on the same page but rendered horizontally. So all you have to do, is poke whatever information you have into your own <div> or <span> somewhere on the same page, even if it's on another tab.
So, in one tab you determine what the new text is (possibly via an onclick handler or whatever):
<div id="sourcediv"> Here's whatever was rendered </div>
...
var newtext = $('#sourcediv').html()
Then you poke it into say targetdiv even when that's on a different tab and clear the contents of your source:
<div id="targetdiv"> This will be overwritten from sourcediv </div>
$('#targetdiv').html(newtext);
$('#sourcediv').html('');
I can't seem to get the modal window to show any content from another link. I'm quite sure I've used the correct classes to link them together. This is the basic js given from http://www.ericmmartin.com/projects/simplemodal_v101/.
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$(' .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});});
I've put the basic class onto
<li><a href="about me/about me.html" class='basic'>about me</a></li>
and in the external html link (about me) I put a div id of
<div id="basic-modal-content">
<p> Darrien is an industrial & product designer based from Toronto. My creative approach falls along the line of biomimicry and human-centric design.
I've recently graduated from the University of Guelph and am currently pursuing my Masters of Industrial Design at Pratt Institute.
Feel free to contact me to just chat and don't forget to look at some of my work.
</p>
I've included my code in this zip (http://www.4shared.com/zip/LGOb7yugba/Darrien_Website_V2.html)
Any help would be much appreciated! :)
You have the following problem:
User click on your link
Click event is fired
Javascript look after some element with ID equals to basic-modal-content
There is no element with this ID
The browser load the about page
What you have to do:
User click on a link (with href='#')
Click event is fired
Use JQuery .load() function to load the html content of about page into a specific div
Call modal with id equals to basic-modal-content
Javascript will look after basic-modal-content and find it
So I got this code
Javascript:
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
})
})
</script>
html:
Link
it works perfectly in firefox, but nothing happens when I click the link in chrome and IE simply opens a new window with the file. any advice?
I am not a coder of any sort, and I know there is more than one way to make this work.
This is what worked for me for MY situation.
I had a working site but with A LOT of code / DIV content all in one page and I wanted to clean that up.
I hope this Helps someone else!
I have been searching for this solution for quite some time and I have run across many examples of how it can work in different instances.
My scenario was as follows:
I have a photography website that uses a series of DIV tags containing the various "pages" so to speak of the site.
These were all set as:
<div id="DivId" style="display:none"></div>
The following script in the head of the page:
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
and called using the anchor links like this:
HOME
Where name was the name of the DIV to be called.
Please note the DIV will be called inside the parent container DIV.
Lastly and most importantly for this particular question and scenario, the DIV were all placed on the page as shown above.
Each div content was created just as if it were within the DIV tags but minus the opening and closing DIV tags and then saved as a separate .txt file, and called by placing this is the head of the parent page:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
and
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$("#DivName") // selecting "div" (you can also select the element by its id or class like in css )
.load("PathToFile.txt");// load in the file specified
$("#AnotherDiv").load("AnotherFile.txt");// Additional DIV can be added to populate DIVs on th eparent page.
});
Change the link to href="#" or "javascript:void(0);return false;"
<a class='ajax' href='#'>...</a>
The loading logic is all in your ajax call. But, you have also a link which points to the file, too.
So, it seems that some browsers give different priorities on how the click is handled.
Anyway, links that do something other than changing page (f.ex. executing js) shouldn't have an explicit HREF attribute other than something that "does nothing" (like above)
I believe the problem is that the script loads before the document is loaded.
try this:
$(document).ready(function (){
$('.ajax').click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
});
});
I am not sure, but i can not see any other problem.
I want my jQuery Mobile application to load an external page when a button is clicked, but i am not sure of which event to use.
<a href="html/rarely_Used_Page.html" id="my_page"
data-role="button" data-inline="true"
data-theme="c" data-icon="search" data-transition="none">
List Members
</a>
Source for rarely_Used_Page.html:
<div data-role="page" id="some_id">
This is my rarely used page.
It is rarely used, so I don't want to include \
it in the main index.html page
</div>
// on load of rarely_Used_Page.html,
// a script would run to perform a specific
// task, but only for this page
<script>
$('[data-role=page #some_id]').live('pageshow', function () {
alert("!");
});
</script>
** edit **
Revised script. I am getting closer to answer.
Try using the jquery load() function.
$(document).load(function() {
//code to perform tasks goes here
});
You can just put this at the bottom of rarely_Used_Page.html
If you're using Ajax, which you will be unless you explicitly ask not to, then only scripts inside the page div will fire when you load the page. So, I can see two options
Put a script inside the page div
<script>alert("!");</script>
Include the following in a script which loads with the main document
$("#some_id").live("pageshow", function() { alert("!"); });
The first option will run the code before the page shows, the second will run it after.
Why can't the piece of code which you've written there work? The a href="x.html" is the standard way to switch to an external page.