|
jQuery Apps
I have finally made a collection of jQuery Applications,
which i have used throughout a couple of websites.
|
|
Hover
|
|
|
|
<![CDATA[
WITHIN JQUERY document.ready Function
$("#shortcut a img").hover(function() {
$(this).animate({opacity: 1.0},200);
}, function () {
$(this).animate({opacity: 0.4},200);
});
WITHIN BODY tag
<div id="shortcut">
<a href="javascript:void(0);"><img src="images/layout/facebook.gif" alt="FaceBook"></a>
<a href="javascript:void(0);"><img src="images/layout/rss.gif" alt="RSS"></a>
</div>
]]>
|
|
Make sure the jQuery tags are ("#idtag a img")... if the img tag is left out, this will not work in IE.
Also, take notice that this applies to all the A IMG's combinations within the #idtag.
|
|
Pop Up Box
|
|
|
|
<![CDATA[
WITHIN JQUERY document.ready Function
$("#popup").click(function() {
$("#login").fadeIn(400);
$("#bgshadow").show().animate({opacity: 0.8},400);
$("#username").focus();
});
WITHIN BODY tag
<a href="javascript:void(0);" id="popup">Click Here</a>
<table border="0" cellpadding="0" bgcolor="#4b4b4b" style="border:1px solid #6b6b6b;" id="login">
<tr>
<td align="left"><a href="javascript:void(0);" id="exit">X</a>
<font color="#FFFFFF"><b><i>Client Login </i></b></font>
<hr size="1" width="100%" style="color:#666666;"><br>
<form action="loginVerify.php" method="post" name="form"><center>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td align="right" valign="middle"> <font size="-2" color="#FFFFFF">Website
: </font></td>
<td align="left" valign="middle"><input type="text" name="username" size="20" id="username"></td>
</tr>
<tr>
<td align="right" valign="middle"> <font size="-2" color="#FFFFFF">Password
: </font></td>
<td align="left" valign="middle"><input type="password" name="password" size="20"></td>
</tr>
<tr>
<th colspan="2" align="center" valign="bottom"><input type="submit" value="Login" name="submitted"></th>
</tr>
</table>
</center>
</form>
</td>
</tr>
</table>
]]>
|
|
Keep in mind the backend CSS that is involved in this code. For instance: the position should be absolute, z-index should be greater than the body, and
the position should be in the middle of the window. For the popup box to move with the screen, it should be 'position:fixed;' not 'position:absolute;'.
|
|
Image Box
|
|
|
<![CDATA[
WITHIN JQUERY document.ready Function
check out http://www.3dprog.com/js/imageLoader.js
WITHIN BODY tag
<a href="javascript:void(0);" title="images/websites/bhpconcepts.jpg" class="image" id="300"
name="300"><img src="images/websites/thumb/bhpconcepts.jpg"
alt="Description of BHP Concepts" width="50" height="50"></a>
<a href="javascript:void(0);" title="images/websites/horsetackexpress.jpg" class="image" id="300" name="300"><img
src="images/websites/thumb/horsetackexpress.jpg" alt="Description of Horse Tack Express" width="50" height="50"></a>
<a href="javascript:void(0);" title="images/websites/lgc.jpg" class="image" id="300" name="300"><img src="images/websites/thumb/lgc.jpg" alt="Loaded Gun"
width="50" height="50"></a>
]]>
|
|
Look at my source code to find the #imageBox mentioned in the jQuery click function. It is just a div with an empty img tag.
I have now made a js file, http://www.3dprog.com/js/imageLoader, that appends the boxes to the body (bgshadow and imageBox).
All that is needed, is to put the pictures inside a DIV or SPAN that has ID='image'.
|
