We Keep Coding

How to do a partial page refresh with Javascript/jQuery

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
});
});

Close GLightbox gallery by clicking outside content area

I'm using the GLightbox JS library for a portfolio gallery and want to be able to close the gallery when clicking outside the inner element.
I found other questions of a similar nature, but I'm avoiding jQuery and haven't been able to find a solution that works for this specific use case. Plus it looks like the functionality I want is built in. I'm just trying to access it.
The documentation lists a number of options, and includes what appears to be a function for closing the gallery with something other than the default button.
Their documentation is here: http://glightbox.mcstudios.com.mx/
The markup for the gallery is generated on the fly, and follows this structure:
<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
<div id="lightbox-slider">
<div class="gslide">
<div class="gslide-inner-content"><!-- image/text content -->
<img src="img/image.jpg" alt="">
</div>
</div>
</div>
</div>
Based on their documentation there is a method to trigger closing the gallery listed toward the bottom of the page:
// Close the lightbox
myLightbox.close();
I want to be able to click outside of .gslide-inner-content to close the gallery, and this is the basic idea I've come up with so far:
var closeTheGallery = document.getElementsByClassName('.gslide');
closeTheGallery.onclick = function() {
myLightbox.close();
e.stopPropagation();
};
I've tried several iterations of the above code targeting various parent and child elements to see if there's anything I can hook into. So far no luck - any insights would be appreciated - thanks in advance.

The myLightbox.close(); feature didn't seem to do anything regardless of what event or <div> I used, but Doug provided some helpful guidance.
As a workaround, I added an event listener for a click on the .current slide container and set it to trigger another click on the default .gclose button.
// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'current')) {
document.querySelector('.gclose').click();
}
}, false);
It may not be the most elegant solution, but it gets the job done and doesn't interfere with the existing functionality of the gallery.
Posting the code here in case other folks using the GLightbox gallery run into the same thing.

Fade in different section with static header and footer using javascript?

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/

Jumping down in HTML when clicking onto a tab

on http://tinyurl.com/75tx5hn when i click onto "Über die App" or onto "Screenshots", the Website scrolls down. to the header, have u got an idea how to avoid that problem?
Strangely this only happens on Firefox and IE , not on Chrome?

ok found you problem
find that line in your page code
<div id="about" class="pane" style="display: block; "> <!-- Start About Page -->
id="about" in tag is causing this problem. this will be resolved if you change this id name
:)

use focus() function of javascript to show div with class="header"
eg document.myform.mytextfield.focus(); to set the focus on click of button

That is the expected behaviour, considering that the link is anchored to a div on the same page:
<li>Über die App</li>
...
<div id="about" class="pane">
You can kill that behaviour like this (you have jQuery included on your page):
$(".tabs.page a").click(function (e) {
e.preventDefault();
}):
...or just by removing the ID on the div.

The problem is that your link is linking to #about (id="about"), the browser will try to go to that section displaying it in the top of your browser.
Testing :
User your browser and zoom into the button, then click on the link. You will see it will display the ABOUT content section with ID = about.
Solution :
Change ID's of the content
OR change hrefs of links
OR set a jquery event to prevent default browser actions.

Support Middle Clicks on my Fancybox Lightbox

Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).
Anybody have a snippet or technique handy they can share?
Otherwise the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.

I finally found time to work this out and it was pretty easy:
This is how I made it work using jQuery & FancyBox:
Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay
Login
Be sure you have the overlay code available (this is standard FancyBox stuff)
<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>
And put this snippet in your on ready event:
$('.has-overlay').bind('click', function(e) {
var overlay = $(this).attr('overlay');
$('').fancybox().trigger('click');
return false;
})
When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.
When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.