christopherreding.com » JQuery http://christopherreding.com jQuery PHP Coldfusion MySql ASP.NET XSLT and Flash - with some added random thoughts Tue, 27 Jul 2010 16:44:02 +0000 en hourly 1 http://wordpress.org/?v=3.0 Creating a page overlay with jQuery http://christopherreding.com/creating-a-page-overlay-with-jquery/ http://christopherreding.com/creating-a-page-overlay-with-jquery/#comments Tue, 01 Sep 2009 12:57:16 +0000 Christopher Reding http://christopherreding.com/?p=43 Seems like everywhere you look websites are using pop-up modals with some kind of transparent overlay. While there are different hacks to maintain browser compatibility, there is a common thread in execution. One solution uses  jQuery to append a div to the body of the page, that div is styled as an absolute positioned element with a transparent background which makes it appear to overlay the content below. The overlay also servers the function of disabling the links in the content it overlays. Here is the code to get this to work.

Demo

First the CSS:

#overlay
{
 position: absolute;
 z-index: 99998;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background-color:#000;
 opacity:0.5;
 cursor:wait;
}    

Now the jQuery:

<script type="text/javascript">
$(document).ready(function(){
      $("#mybutton").click(function(){
           $("body").append('<div id="overlay"></div>');
           return false;
      });
 })
</script>

Finally add the the button element:

<a href="some.html" id="mybutton">Hello there</a>


]]> http://christopherreding.com/creating-a-page-overlay-with-jquery/feed/ 0 75 Amazing CSS Navigations and Jquery Examples http://christopherreding.com/75-amazing-css-navigations-and-jquery-examples/ http://christopherreding.com/75-amazing-css-navigations-and-jquery-examples/#comments Thu, 27 Aug 2009 17:57:20 +0000 Christopher Reding http://christopherreding.com/?p=11

http://www.designdazzling.com/2009/08/75-amazing-css-navigations-and-jquery-examples/

A pretty awesome list of jQuery plugins as well as a few tutorials, Very helpful if you are a novice or just looking for a shorter development time.

Favorites:

JQuery Curvy Corners

Draggables and droppables

jQZoom

jQuery lightBox Plugin

CSS Play Navigation Menus
]]> http://christopherreding.com/75-amazing-css-navigations-and-jquery-examples/feed/ 0 Replace an image with a Quicktime movie using jQuery http://christopherreding.com/replace-an-image-with-a-quicktime-movie-using-jquery/ http://christopherreding.com/replace-an-image-with-a-quicktime-movie-using-jquery/#comments Thu, 27 Aug 2009 17:56:03 +0000 Christopher Reding http://christopherreding.com/?p=7

Include jquery with in the head of the page (get it here) http://jquery.com

Then create 2 divs like this: 

<div id="image">
<img id="myImage" src="images/fpo.jpg" width="200" height="200" />
</div>
<div id="qt" style="display:none;" >
<embed src="something.mov" height="200" width="200" autostart="true" ></embed>
</div>

Now Put this script within the head of the page.

<script type="text/javascript">


]]> http://christopherreding.com/replace-an-image-with-a-quicktime-movie-using-jquery/feed/ 0