|
Creating a pop up floating div with JQuery |
||||||||
This entry will deal with how to create a displayed / collapsible floating div, using JQuery.
When I build a web platform I often like to include small sections of text alongside the functionality, just to provide the users with a little guidance on what is going on.
Rather than having these inline, where they can often interfere with the content and display, I like to add them to a 'help' div that I float inside the framework.
First we include the JQuery library from Google, and our link. It doesn't go anywhere, but we will attach a JQuery event to it.
1<s/cript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
2
3<a href="javascript:void(0);" id="help">Pop me up</a>
4<div>stuff</div>
Next we create our JQuery function, attached to the 'help' div. This adds a div to the document with whatever content you have set in it. There is also a 'close' link in the floating div that calls the close function.
2
3<a href="javascript:void(0);" id="help">Pop me up</a>
4<div>stuff</div>
1<s/cript>
2 $(function() {
3 $("#help").live('click', function(event) {
4 $(this).addClass("selected").parent().append('<div class="messagepop pop">Content<p><a class="close" href="/">Cancel</a></p></div>');
5 $(".pop").slideFadeToggle()
6 return false;
7 });
8
9 $(".close").live('click', function() {
10 $(".pop").slideFadeToggle();
11 $("#contact").removeClass("selected");
12 return false;
13 });
14 });
15
16 $.fn.slideFadeToggle = function(easing, callback) {
17 return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
18 };
19</script>
Lastly we add some styling and positioning to tie the whole lot together. This gives the pop up div its shape and style. I've positioned the floating div on top of the calling function text.
2 $(function() {
3 $("#help").live('click', function(event) {
4 $(this).addClass("selected").parent().append('<div class="messagepop pop">Content<p><a class="close" href="/">Cancel</a></p></div>');
5 $(".pop").slideFadeToggle()
6 return false;
7 });
8
9 $(".close").live('click', function() {
10 $(".pop").slideFadeToggle();
11 $("#contact").removeClass("selected");
12 return false;
13 });
14 });
15
16 $.fn.slideFadeToggle = function(easing, callback) {
17 return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
18 };
19</script>
1<style>
2a.selected {
3 background-color:#1F75CC;
4 color:white;
5 z-index:100;
6}
7
8.messagepop {
9 background-color:#FFFFFF;
10 border:1px solid #999999;
11 cursor:default;
12 display:none;
13 margin-top: 15px;
14 position:absolute;
15 text-align:left;
16 width:394px;
17 z-index:50;
18 padding: 25px 25px 20px;
19 top: 0px;
20 left: 0px;
21}
22}
23
24label {
25 display: block;
26 margin-bottom: 3px;
27 padding-left: 15px;
28 text-indent: -15px;
29}
30
31.messagepop p, .messagepop.div {
32 border-bottom: 1px solid #EFEFEF;
33 margin: 8px 0;
34 padding-bottom: 8px;
35}
36</style>
You can see an example functionality here.
2a.selected {
3 background-color:#1F75CC;
4 color:white;
5 z-index:100;
6}
7
8.messagepop {
9 background-color:#FFFFFF;
10 border:1px solid #999999;
11 cursor:default;
12 display:none;
13 margin-top: 15px;
14 position:absolute;
15 text-align:left;
16 width:394px;
17 z-index:50;
18 padding: 25px 25px 20px;
19 top: 0px;
20 left: 0px;
21}
22}
23
24label {
25 display: block;
26 margin-bottom: 3px;
27 padding-left: 15px;
28 text-indent: -15px;
29}
30
31.messagepop p, .messagepop.div {
32 border-bottom: 1px solid #EFEFEF;
33 margin: 8px 0;
34 padding-bottom: 8px;
35}
36</style>
TweetBacks
The closing </form> tag was a typo on my part. I'd created this blog entry from code I'm currently implementing into a fusebox framework, and the form element should have been tidied when I sanitised for blogging.
The slash in the <sc/ript> tag escapes the script text, otherwise blogcfc re writes it as <invalidtag> might have to email Ray Camden about that one. I guess its written that way as a security feature.