tutorial #5: hijax links

Hijax Links uses Ajax to intercept the hyperlinks to external pages, and display them internal on the current webpage. At this time, we will use a section of this webpage to display information from external sources.

For this demonstration, you will learn how to create hijax links. You will learn how to build the jQuery code needed and learn the purpose of each line. Also, you learn about elements needed to make Hijax Links in HTML and CSS.

Below is demonstration of Hijax Links. Click on each of the links, and the information relating to the specific game console will be display in the section.

See Game Console Info Here

The How-To

HTML

                 
<div id="hijax">

<ul id="gamesystem">

<li><a href="example/ps4.php">PlayStation 4</a></li>
<li><a href="example/xbox_one.php">Xbox One</a></li>
<li><a href="example/wiiu.php">Wii U>/a>>/li>

</ul>

<div id="game-info">
<p>See Game Console Info Here</p>
</div>

</div>

HTML (PlayStation 4)

                 
<h2>Sony PlayStation 4</h2>
<img src="img/ps4.png" alt="Sony PlayStation 4">
<p>The <b>PlayStation 4</b> was released in November 2013 by <b>
Sony Computer Entertainment (SCE)</b>, and has sold over ten
million units as of August 2014.  Gamers can play their <b>PS4</b>
games on the <b>PlayStation Vita</b> through the <b>
Remote Play</b> feature.</p>
<p>For more, visit the<a href="http://www.playstation.com/en-us/home/"
 target="_blank" title="www.playstation.com">
Official PlayStation website.</a></p>

HTML (Xbox One)

                 
<h2>Microsoft Xbox One</h2>
<img src="img/xbox_one.png" alt="Microsoft Xbox One">
<p>Launched in November 2013, <b>Xbox One</b> is the latest game 
 consolefrom <b>Microsoft</b>.  Xbox One uses an improved
<b>Kinect</b>, a motion sensor add-on device that enables such features
like voice commands.</p><p>For more, visit the
<a href="http://www.xbox.com/en-US/" target="_blank"
title="www.xbox.com">Official Xbox website</a></p>

HTML (Wii U)

                 
<h2>Nintendo Wii U</h2>
<img src="lib/img/tutorial/tutorial_5/wii_u.png" alt="Nintendo Wii U">
<p>LOL</p>

CSS


#hijax ul {
	background:#155a7a;
	border-radius:5px;
}

#hijax ul li {
	padding:10px;
}

#hijax ul li a {
	text-align:center;
	color:#FFFFFF;

}

#hijax ul li a:hover {
	
	color:#73BEE3;

}

#game-info {
	border:#155a7a thin solid;
	border-radius:5px; 
	padding:25px;
}

jQuery

                
$(document).ready(function(){
//The functions will be executed, once the page is ready.
$('#gamesystem a').click(function(e) {
//Selects the hyperlink inside the element with the id of "gamesystem". 
var url = $(this).attr('href');
//Creates a varible that will be added to #gamesystem.  
$('#game-info').load(url);//This will Load the external content inside the element with the attribute named "game-info".  
e.preventDefault();//This will prevent reloading the external page. 
});
});//Close.