Search the Community

Seriously, HTML 5 Canvas really lacks functionality. I searched how to clear a text written on it, and all what I am getting is to clear the whole damn canvas. Moreover, clearing all itself is not working. Here are my codes: HTML <img src="jjj.jpg" width="252" height="144" id="image"> <canvas id="canvas" width="252" height="144"></canvas> <input type="button" onclick=" insertImg ();"> <input type="text" id="text"/> <input type="button" onclick="writeText();"> <input type="button" value="Clear" onclick="clearCanvas();"> Javascript //Draw image function insertImg () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = document.getElementById("image"); context.drawImage(image, 0, 0); } //Write text function writeText () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var style = 'italic'; var size = '50pt'; var family = '"Arial Black", Gadget, sans-serif' var text = document.getElementById("text").value; context.font = style + " " + size + " " + family; context.fillStyle = 'blue'; context.fillText(text, 50, 50); } //Clear canvas function clearCanvas () { context.clearRect(0, 0, 252, 144); } Everything is working correctly, except, the canvas is not clearing when I click on the clear button. I will be glad if we can clear the text also separately from clearing canvas as a whole.

Hi, I have an IFrame. Good. And I have a Canvas as well. Good again! The user can write on the IFrame as I set the design mode ON. I am using document.execcomand to do the stuff, just like a simple text editor. I do not have issues on this. Here are my questions: 1/ What I want is, how to make the text written in the IFrame, appears on the Canvas? I mean, when the user is typing in the IFrame, the text is appearing simultaneously on the Canvas. If the user changes the text color, font color, bold, italic or whatever, of course the text also changes on the Canvas simultaneously. How to do that? 2/ Can I make all the elements draggable and resizable in the Canvas? I mean the text or anything but NOT the canvas? Help!

Well, I am planning to make something complex. Ok, I still have not done it but I want to know how to proceed to do it. Suppose there is a Canvas, and I am dragging and dropping images in it which can resize. The issue is not on the drag/drop and resize stuffs. What I want is, once an image is in the Canvas, how to write on it by double click? I mean if I double click, the cursor turn to text and people can write. How to proceed to do this? The canvas will be saved in image format later. All I want to know now, is this writing stuff, the rest I do not care too much now! Thank

Hello I have multiple images from a mysql database, I want to swap all these images onmouseover, IE, onmouseover, swap allthe images, each after some 3 4 seconds I amsure this will be done with javascript and probably jquery, So I need the Javascript (Or Jquery) function, and how to pass php parameters Naturally , there is a group of images, each will have more than one image to be swapped Many Thanks

i have pop up code from http://gettopup.com it working well but i want to add some sharing and like button in pop up window and when i tried that in js file it stop working i was trying to put different like and share button for different pop up if there is 3 file 2 images and 1 video when user click on image 1 it show image in popup window with like and share button so user on facebook or other social network can see particular video or image which user liked or share the pop up window created by js file and i can't add "http://sharethis.com" widget into this js file i m attaching js file please help me guys ( sorry for poor layout of js file ) if(typeof(TopUp)=="undefined"){var scriptElement=(function deriveScriptElement(){var c="tu_dummy_script";document.write('<script id="'+c+'"><\/script>');var b=document.getElementById(c);var a=b.previousSibling;b.parentNode.removeChild(B);return a}());var scriptHost=(function deriveScriptHost(){var a=scriptElement.getAttribute("src");return a.match(/^\w+\:\/\//)?a.match(/^\w+\:\/\/[^\/]*\//)[0]:""}());var scriptParams=(function deriveScriptParams(){var e=scriptElement.getAttribute("src");var c=((e.match(/([\?]*)\?(.*)+/)||["","",""])[2]||"").replace(/(^[0123456789]+|\.js(\s+)?$)/,"").split("&");var d={};for(var b=0;b<c.length;b++){if(c[b]!=""){var a=c[b].split("=");if(a.length==2){d[a[0].replace(/^\s+|\s+$/g,"")]=a[1].replace(/^\s+|\s+$/g,"")}}}return d}());TopUp=(function(){var initialized=false,selector=null,on_ready=[],displaying=false,options=null,group=null,index=null,data=null;var fast_mode=false;var default_preset={layout:"dashboard",effect:"transform",resizable:1},presets={};var extendjQuery=function(){jQuery.extend({keys:function(hash){var keys=[];for(var key in hash){if(hash.hasOwnProperty(key)){keys.push(key)}}return keys},ie:jQuery.browser.msie,ie6:jQuery.browser.msie&&parseInt(jQuery.browser.version,10)==6,ie7:jQuery.browser.msie&&parseInt(jQuery.browser.version,10)==7,ie8:jQuery.browser.msie&&parseInt(jQuery.browser.version,10)==8,ff2:jQuery.browser.mozilla&&parseFloat(jQuery.browser.version)<1.9});jQuery.fn.extend({id:function(){if(!this.is("[id]")){var id="";var counter=0;do{id="element_"+counter++}while(jQuery("#"+id).length);jQuery(this).attr("id",id)}return jQuery(this).attr("id")},markerId:function(){return"_"+this.id()+"_marker"},bubbleDetect:function(selector,separator){var detected=null;var element=this;jQuery.each(selector.split(separator||","),function(i,e){var selector=jQuery.trim(e);if(jQuery(selector).index(element)!=-1){detected={element:jQuery(element),selector:selector}}});return detected||(element.parent()[0]?jQuery(element.parent()[0]).bubbleDetect(selector,separator):null)},center:function(){var css={top:parseInt((jQuery(window).height()-this.outerHeight())/2,10)+jQuery(window).scrollTop(),left:parseInt((jQuery(window).width()-this.outerWidth())/2,10)+jQuery(window).scrollLeft(),position:"absolute"};this.css(css);return this},lockDimensions:function(){this.css({width:this.outerWidth(),height:this.outerHeight()});return this},unlockDimensions:function(){this.css({width:"auto",height:"auto"});return this},centerWrap:function(compare){var current={width:this.outerWidth(),height:this.outerHeight()},delta={width:0,height:0},diff=0;compare.find(".te_frame").css("display","block");diff=compare.outerWidth()-current.width;if(delta.width<diff){delta.width=diff}diff=compare.outerHeight()-current.height;if(delta.height<diff){delta.height=diff}var offset=this.offset();var css={top:offset.top-(delta.height===0?0:parseInt(delta.height/2,10)),left:offset.left-(delta.width===0?0:parseInt(delta.width/2,10)),width:this.width()+delta.width,height:this.height()+delta.height};if(options.x){css.left=options.x-parseInt((css.width-compare.outerWidth())/2,10)}if(options.y){css.top=options.y-parseInt((css.height-compare.outerHeight())/2,10)}jQuery("#tu_center_wrapper").css(css);jQuery("#tu_centered_content").append(this);this.css({top:"auto",left:"auto",width:"auto",height:"auto",display:"inline-block",position:"relative"});if(jQuery.ff2){this.css({display:"table"})}if(jQuery.ie){this.css({display:"inline"})}jQuery("#tu_center_wrapper").show();return this},removeCenterWrap:function(newTopUpWidth){var position=jQuery("#tu_center_wrapper").offset();var delta={width:jQuery("#tu_center_wrapper").outerWidth()-newTopUpWidth,height:jQuery("#tu_center_wrapper").outerHeight()-this.outerHeight()};this.css({top:position.top+parseInt(delta.height/2,10),left:position.left+parseInt(delta.width/2,10),position:"absolute"}).appendTo("body");jQuery("#tu_center_wrapper").hide();return this},draggableZ:function(opts){var element=this;this.mousedown(function(event){if(opts&&opts.only&&!jQuery(event.target).is(opts.only)){return}event.preventDefault();var offset=element.offset();var diff={top:event.pageY-offset.top,left:event.pageX-offset.left};jQuery("body").addClass("te_dragging");jQuery("*").bind("mousemove.draggable",function(event){element.css({top:event.pageY-diff.top,left:event.pageX-diff.left})})});jQuery("#top_up").mouseup(function(event){jQuery("body").removeClass("te_dragging");jQuery("*").unbind("mousemove.draggable")})}})};var injectCode=function(){var images_url=TopUp.host+TopUp.images_path;var css='<style type="text/css" media="screen">.te_overflow{overflow:hidden !important}.te_dragging{cursor:move !important}#tu_overlay,.te_top_up{top:0;left:0}#tu_overlay{width:100%;height:100%;position:fixed;z-index:999}#temp_up{top:-9999px;z-index:-1}.te_transparent{opacity:0}.te_shaded{opacity:.65;background:black}.te_scrollable{overflow:auto}.te_top_up{position:absolute;z-index:1000}.te_top_up a{border:0}.te_top_up a:hover{border:0}.te_top_up .ui-resizable-se{position:absolute !important;background-color:transparent !important;border:0 !important}.te_wrapper{position:relative}.te_title{width:100%;color:white;font-family:"Lucida Grande", "Arial";font-size:11px;position:absolute;text-align:center;z-index:1001}.te_frame,#tu_center_wrapper{border-collapse:collapse}.te_frame tr,.te_frame td{margin:0;padding:0}.te_frame .te_left,.te_frame .te_middle,.te_frame .te_right{padding:0}.te_controls{position:absolute;z-index:1001}.te_close_link,.te_previous_link,.te_next_link{cursor:pointer}.te_close_link{position:absolute;z-index:1002}.te_previous_link,.te_next_link{display:block;float:left}#tu_center_wrapper{position:absolute;z-index:1000}#tu_loader{width:100%;height:100%;position:absolute;background:url('+images_url+"loader.gif) no-repeat 50% 50%;display:block;z-index:1003} #top_up .te_dashboard .ui-resizable-se{width:10px !important;height:10px !important;bottom:12px !important;right:10px !important;background-image:url("+images_url+"dashboard/sprite.png) !important;background-position:0 0 !important}.te_dashboard .te_title{top:-9px;font-weight:bold;text-shadow:1px 1px 1px black}.te_dashboard .te_corner,.te_dashboard .te_rib{background-image:url("+images_url+"dashboard/sprite.png)}.te_dashboard .te_top,.te_dashboard .te_bottom{height:20px}.te_dashboard .te_left_filler{width:20px}.te_dashboard .te_right_filler{width:19px}.te_dashboard .te_middle .te_middle{background:url("+images_url+"dashboard/middle.png)}.te_dashboard .te_top .te_left{background-position:-17px -29px}.te_dashboard .te_top .te_middle{background-position:0 -71px}.te_dashboard .te_top .te_right{background-position:-33px -29px}.te_dashboard .te_middle .te_left{background-position:-17px -232px}.te_dashboard .te_middle .te_right{background-position:-33px -232px}.te_dashboard .te_bottom .te_left{background-position:-17px -47px}.te_dashboard .te_bottom .te_middle{background-position:-17px -89px}.te_dashboard .te_bottom .te_right{background-position:-33px -47px}.te_dashboard .te_content{margin:-11px -12px -11px -13px}.te_dashboard .te_controls{left:50%;width:63px;height:29px;margin-left:-33px;padding-left:5px;bottom:35px;background-image:url("+images_url+"dashboard/sprite.png);background-position:0 -178px}.te_dashboard .te_previous_link,.te_dashboard .te_next_link{width:31px;height:29px;background-image:url("+images_url+"dashboard/sprite.png)}.te_dashboard .te_previous_link{background-position:66px -113px}.te_dashboard .te_next_link{background-position:30px -113px}.te_dashboard .te_previous_link:hover{background-position:66px -142px}.te_dashboard .te_next_link:hover{background-position:30px -142px}.te_dashboard .te_close_link{width:28px;height:26px;top:-1px;right:-6px;background-image:url("+images_url+"dashboard/sprite.png);background-position:-20px 0} #top_up .te_quicklook .ui-resizable-se{width:10px !important;height:10px !important;bottom:12px !important;right:9px !important;background-image:url("+images_url+"quicklook/sprite.png) !important;background-position:-75px -181px !important}.te_quicklook .te_title{top:6px}.te_quicklook .te_corner,.te_quicklook .te_rib{background-image:url("+images_url+"quicklook/sprite.png)}.te_quicklook .te_top{height:24px}.te_quicklook .te_bottom{height:56px}.te_quicklook .te_left_filler,.te_quicklook .te_right_filler{width:12px}.te_quicklook .te_middle .te_middle{background:url("+images_url+"quicklook/middle.png)}.te_quicklook .te_top .te_left{background-position:0 0}.te_quicklook .te_top .te_middle{background-position:0 -30px}.te_quicklook .te_top .te_right{background-position:12px 0}.te_quicklook .te_middle .te_left{background-position:0 -181px}.te_quicklook .te_middle .te_right{background-position:12px -181px}.te_quicklook .te_bottom .te_left{background-position:0 -122px}.te_quicklook .te_bottom .te_middle{background-position:0 -61px}.te_quicklook .te_bottom .te_right{background-position:12px -122px}.te_quicklook .te_content{margin:0 -7px}.te_quicklook .te_controls{left:50%;width:66px;margin-left:-33px;bottom:18px}.te_quicklook .te_previous_link,.te_quicklook .te_next_link{width:31px;height:29px;margin:0 1px;background-image:url("+images_url+"quicklook/sprite.png)}.te_quicklook .te_previous_link{background-position:89px -195px}.te_quicklook .te_next_link{background-position:52px -195px}.te_quicklook .te_previous_link:hover{background-position:89px -226px}.te_quicklook .te_next_link:hover{background-position:52px -226px}.te_quicklook .te_close_link{width:13px;height:13px;top:7px;left:9px;background-image:url("+images_url+"quicklook/sprite.png);background-position:-24px -181px} #top_up .te_flatlook .ui-resizable-se{width:10px !important;height:10px !important;bottom:22px !important;right:14px !important;background-image:url("+images_url+"flatlook/sprite.png) !important;background-position:-75px -181px !important}.te_flatlook .te_title{top:5px;text-shadow:1px 1px 2px #2A2A2A}.te_flatlook .te_corner,.te_flatlook .te_rib{background-image:url("+images_url+"flatlook/sprite.png)}.te_flatlook .te_top{height:26px}.te_flatlook .te_bottom{height:29px}.te_flatlook .te_left_filler,.te_flatlook .te_right_filler{width:21px}.te_flatlook .te_middle .te_middle{background:url("+images_url+"flatlook/middle.png) repeat-x top}.te_flatlook .te_top .te_left{background-position:0 0}.te_flatlook .te_top .te_middle{background-position:0 -29px}.te_flatlook .te_top .te_right{background-position:-89px 0}.te_flatlook .te_middle .te_left{background-position:0 -181px}.te_flatlook .te_middle .te_right{background-position:-89px -181px}.te_flatlook .te_bottom .te_left{background-position:0 -90px}.te_flatlook .te_bottom .te_middle{background-position:0 -58px}.te_flatlook .te_bottom .te_right{background-position:-89px -90px}.te_flatlook .te_content{margin:-2px -11px -3px -11px}.te_flatlook .te_controls{left:50%;width:66px;margin-left:-33px;bottom:18px}.te_flatlook .te_previous_link,.te_flatlook .te_next_link{width:31px;height:29px;margin:0 1px;background-image:url("+images_url+"flatlook/sprite.png)}.te_flatlook .te_previous_link{background-position:89px -195px}.te_flatlook .te_next_link{background-position:52px -195px}.te_flatlook .te_previous_link:hover{background-position:89px -226px}.te_flatlook .te_next_link:hover{background-position:52px -226px}.te_flatlook .te_close_link{width:13px;height:13px;top:6px;left:15px;background-image:url("+images_url+"flatlook/sprite.png);background-position:-24px -181px}</style>";var ie7fix='<style type="text/css" media="screen">.te_dashboard .te_content{margin-bottom:-14px}</style>';var ie6fix='<style type="text/css" media="screen">.te_dashboard .te_content{margin-bottom:-13px}.te_dashboard .te_controls{width:65px;padding-left:3px}.te_dashboard .te_top .te_left,.te_dashboard .te_top .te_middle,.te_dashboard .te_top .te_right{background-image:none}.te_dashboard .te_middle .te_left,.te_dashboard .te_middle .te_right{background-image:none}.te_dashboard .te_bottom .te_left,.te_dashboard .te_bottom .te_middle,.te_dashboard .te_bottom .te_right{background-image:none}.te_dashboard .te_controls,.te_dashboard .te_previous_link,.te_dashboard .te_next_link,.te_dashboard .te_close_link{background-image:none}.te_dashboard .te_top .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/top_left.png" , sizingMethod="crop" )}.te_dashboard .te_top .te_middle{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/top_middle.png" , sizingMethod="scale")}.te_dashboard .te_top .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/top_right.png" , sizingMethod="crop" )}.te_dashboard .te_middle .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/middle_left.png" , sizingMethod="scale")}.te_dashboard .te_middle .te_middle{filter:alpha(opacity = 75);background:black}.te_dashboard .te_middle .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/middle_right.png" , sizingMethod="scale")}.te_dashboard .te_bottom .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/bottom_left.png" , sizingMethod="crop" )}.te_dashboard .te_bottom .te_middle{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/bottom_middle.png", sizingMethod="scale")}.te_dashboard .te_bottom .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/bottom_right.png" , sizingMethod="crop" )}.te_dashboard .te_controls{background:#505455}.te_dashboard .te_previous_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/previous.png" , sizingMethod="crop" )}.te_dashboard .te_next_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/next.png" , sizingMethod="crop" )}.te_dashboard .te_close_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'dashboard/close_link.png" , sizingMethod="crop" )} .te_quicklook .te_bottom{height:55px}.te_quicklook .te_controls{width:67px}.te_quicklook .te_top .te_left,.te_quicklook .te_top .te_middle,.te_quicklook .te_top .te_right{background-image:none}.te_quicklook .te_middle .te_left,.te_quicklook .te_middle .te_right{background-image:none}.te_quicklook .te_bottom .te_left,.te_quicklook .te_bottom .te_middle,.te_quicklook .te_bottom .te_right{background-image:none}.te_quicklook .te_previous_link,.te_quicklook .te_next_link,.te_quicklook .te_close_link{background-image:none}.te_quicklook .te_top .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/top_left.png" , sizingMethod="crop" )}.te_quicklook .te_top .te_middle{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/top_middle.png" , sizingMethod="scale")}.te_quicklook .te_top .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/top_right.png" , sizingMethod="crop" )}.te_quicklook .te_middle .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/middle_left.png" , sizingMethod="scale")}.te_quicklook .te_middle .te_middle{filter:alpha(opacity = 70);background:black}.te_quicklook .te_middle .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/middle_right.png" , sizingMethod="scale")}.te_quicklook .te_bottom .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/bottom_left.png" , sizingMethod="crop" )}.te_quicklook .te_bottom .te_middle{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/bottom_middle.png", sizingMethod="scale")}.te_quicklook .te_bottom .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/bottom_right.png" , sizingMethod="crop" )}.te_quicklook .te_previous_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/previous.png" , sizingMethod="crop" )}.te_quicklook .te_next_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/next.png" , sizingMethod="crop" )}.te_quicklook .te_close_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'quicklook/close_link.png" , sizingMethod="crop" )} .te_flatlook .te_bottom{height:55px}.te_flatlook .te_controls{width:67px}.te_flatlook .te_top .te_left,.te_flatlook .te_top .te_middle,.te_flatlook .te_top .te_right{background-image:none}.te_flatlook .te_middle .te_left,.te_flatlook .te_middle .te_right{background-image:none}.te_flatlook .te_bottom .te_left,.te_flatlook .te_bottom .te_middle,.te_flatlook .te_bottom .te_right{background-image:none}.te_flatlook .te_previous_link,.te_flatlook .te_next_link,.te_flatlook .te_close_link{background-image:none}.te_flatlook .te_top .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/top_left.png" , sizingMethod="crop" )}.te_flatlook .te_top .te_middle{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/top_middle.png" , sizingMethod="scale")}.te_flatlook .te_top .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/top_right.png" , sizingMethod="crop" )}.te_flatlook .te_middle .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/middle_left.png" , sizingMethod="scale")}.te_flatlook .te_middle .te_middle{filter:alpha(opacity = 70);background:black}.te_flatlook .te_middle .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/middle_right.png" , sizingMethod="scale")}.te_flatlook .te_bottom .te_left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/bottom_left.png" , sizingMethod="crop" )}.te_flatlook .te_bottom .te_middle{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/bottom_middle.png", sizingMethod="scale")}.te_flatlook .te_bottom .te_right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/bottom_right.png" , sizingMethod="crop" )}.te_flatlook .te_previous_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/previous.png" , sizingMethod="crop" )}.te_flatlook .te_next_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/next.png" , sizingMethod="crop" )}.te_flatlook .te_close_link{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+images_url+'flatlook/close_link.png" , sizingMethod="crop" )}</style>';var iefix='<style type="text/css" media="screen">#tu_overlay{top:expression((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px");left:expression((ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px");position:absolute}.te_transparent{filter:alpha(opacity = 0)}.te_shaded{filter:alpha(opacity = 65)}.te_content{position:relative;zoom:1}</style>';var html='<div id="tu_overlay" onclick="TopUp.overlayClose()" style="display: none"></div><div id="top_up" class="te_top_up" style="display: none"><div class="te_wrapper"><div class="te_title"></div><table class="te_frame"><tr class="te_top"><td class="te_left te_corner"><div class="te_left_filler"></div></td><td class="te_middle te_rib"></td><td class="te_right te_corner"><div class="te_right_filler"></div></td></tr><tr class="te_middle"><td class="te_left te_rib"></td><td class="te_middle"><div class="te_content"><!-- Content --></div></td><td class="te_right te_rib"></td></tr><tr class="te_bottom"><td class="te_left te_corner"></td><td class="te_middle te_rib"></td><td class="te_right te_corner"></td></tr></table><div class="te_controls" style="display: none"><a class="te_previous_link" onclick="TopUp.previous()"></a><a class="te_next_link" onclick="TopUp.next()"></a></div><a class="te_close_link" onclick="TopUp.close()" style="display: none"></a></div></div><div id="temp_up" class="te_top_up te_transparent"><div class="te_wrapper"><div class="te_title"></div><table class="te_frame"><tr class="te_top"><td class="te_left te_corner"><div class="te_left_filler"></div></td><td class="te_middle te_rib"></td><td class="te_right te_corner"><div class="te_right_filler"></div></td></tr><tr class="te_middle"><td class="te_left te_rib"></td><td class="te_middle"><div class="te_content"><!-- Content --></div></td><td class="te_right te_rib"></td></tr><tr class="te_bottom"><td class="te_left te_corner"></td><td class="te_middle te_rib"></td><td class="te_right te_corner"></td></tr></table><div class="te_controls" style="display: none"><a class="te_previous_link" onclick="TopUp.previous()"></a><a class="te_next_link" onclick="TopUp.next()"></a></div><a class="te_close_link" onclick="TopUp.close()" style="display: none"></a></div></div><table id="tu_center_wrapper" style="display: none"><tr valign="middle"><td id="tu_centered_content" align="center"><!-- Top ups --></td></tr></table><div id="tu_loader" style="display: none"></div>';if(!jQuery("head").length){jQuery(document.body).before("<head></head>")}jQuery(css).prependTo("head");if(jQuery.ie7||jQuery.ie8){jQuery(ie7fix).insertAfter("head > style:first")}if(jQuery.ie6){jQuery(ie6fix).insertAfter("head > style:first")}if(jQuery.ie){jQuery(iefix).insertAfter("head > style:first")}jQuery(html).appendTo("body")};var bind=function(){var coptions=[];if(!fast_mode){coptions.push("[class^=tu_][class*=x]");jQuery.each(["db","ql","fl","image","html","dom","iframe","ajax","script"],function(i,coption){coptions.push("[class^=tu_][class*=_"+coption+"]")})}selector=jQuery.merge([".top_up","[toptions]",coptions.join(",")],jQuery.keys(presets)).join();jQuery(selector).live("click",topUpClick);jQuery(document).bind("keyup",documentKeyPress)};var fadeDuration=function(duration){return jQuery.ie8||jQuery.ie7||jQuery.ie6?0:duration};var topUpClick=function(event){TopUp.displayTopUp(jQuery(event.target));return false};var documentKeyPress=function(event){if(jQuery("#top_up").is(":hidden")||jQuery(event.target).is(":input")){return}switch(event.keyCode){case 27:TopUp.close();break;case 37:TopUp.previous();break;case 39:TopUp.next();break}};var deriveTopUpOptions=function(topUp,opts){var toptions=jQuery.extend({},{topUp:"#"+topUp.element.id(),preset:topUp.selector});jQuery.each(topUp.element.attr("class").split(/\s/),function(i,c){if(c.match(/^tu_/)){jQuery.each(c.replace(/^tu_/,"").split("_"),function(j,coption){switch(coption){case"db":case"ql":case"fl":toptions.layout={db:"dashboard",ql:"quicklook",fl:"flatlook"}[coption];break;case"image":case"html":case"dom":case"iframe":case"ajax":case"script":toptions.type=coption;break;default:if(coption.match(/\dx\d/)){toptions.width=coption.split("x")[0];toptions.height=coption.split("x")[1]}}})}});if(topUp.element.is("[toptions]")){jQuery.each(topUp.element.attr("toptions").split(","),function(i,option){var key_value=option.split("=");toptions[jQuery.trim(key_value[0])]=jQuery.trim(key_value[1])})}if(toptions.noGroup&&parseInt(toptions.noGroup,10)==1){toptions.group=null}if(opts){toptions=jQuery.extend(toptions,opts)}return toptions};var deriveOptions=function(reference,opts,store){var result=jQuery.extend({},default_preset);if(opts){if(presets[opts.preset]){result=jQuery.extend(result,presets[opts.preset])}result=jQuery.extend(result,opts)}if(result.ondisplay&&!jQuery.isFunction(result.ondisplay)){var fdisplay=result.ondisplay;result.ondisplay=function(){eval(fdisplay)}}if(result.onclose&&!jQuery.isFunction(result.onclose)){var fclose=result.onclose;result.onclose=function(){eval(fclose)}}if(store){result.reference=result.reference?jQuery(result.reference):reference;if(!result.type){result.type=deriveType(reference)}if(movieContentDisplayed(result)){result.resizable=0}options=jQuery.extend({},result)}return result};var deriveType=function(reference){if(reference.toLowerCase().match(/\.(gif|jpg|jpeg|png)(\?[0123456789]+)?$/)){return"image"}if(reference.toLowerCase().match(/\.(swf)(\?[0123456789]+)?$/)){return"flash"}if(reference.toLowerCase().match(/\.(flv)(\?[0123456789]+)?$/)){return"flashvideo"}if(reference.toLowerCase().match(/\.(aif|aiff|aac|au|bmp|gsm|mov|mid|midi|mpg|mpeg|m4a|m4v|mp4|psd|qt|qtif|qif|qti|snd|tif|tiff|wav|3g2|3gp|wbmp)(\?[0123456789]+)?$/)){return"quicktime"}if(reference.toLowerCase().match(/\.(ra|ram|rm|rpm|rv|smi|smil)(\?[0123456789]+)?$/)){return"realplayer"}if(reference.toLowerCase().match(/\.(asf|avi|wma|wmv)(\?[0123456789]+)?$/)){return"windowsmedia"}return"ajax"};var movieContentDisplayed=function(opts){return jQuery.inArray((opts||options).type,["flash","flashvideo","quicktime","realplayer","windowsmedia"])!=-1};var deriveGroup=function(){if(options.group){if(!(group&&group.name==options.group)){group={name:options.group,items:jQuery([])};jQuery.each(jQuery(selector),function(i,e){if(!jQuery(e).is("[tu_group]")){jQuery(e).attr("tu_group",deriveOptions(null,deriveTopUpOptions(jQuery(e).bubbleDetect(selector))).group)}if(jQuery(e).attr("tu_group")==group.name){group.items=group.items.add(e)}})}var ids=jQuery.map(group.items,function(e,i){return"#"+jQuery(e).id()});index=options.topUp?jQuery.inArray(options.topUp,ids):-1}else{group=null}};var navigateInGroup=function(step){if(group===null){return}index=index+step;if(index<0){index=group.items.length-1}if(index>group.items.length-1){index=0}TopUp.displayTopUp(group.items[index])};var prepare=function(){if(jQuery("#top_up .te_frame").resizable){jQuery("#top_up .te_frame").resizable("destroy")}jQuery("#top_up .te_title").fadeOut(fadeDuration(200));if(!(group&&group.items.length>1)){jQuery("#top_up .te_controls").fadeOut(fadeDuration(200))}jQuery(".te_wrapper").attr("class","te_wrapper te_"+options.layout);jQuery(".te_frame,.te_content").unlockDimensions();if(parseInt(options.shaded,10)==1){jQuery("#tu_overlay").addClass("te_shaded")}else{jQuery("#tu_overlay").removeClass("te_shaded")}if((parseInt(options.modal,10)==1)||(parseInt(options.shaded,10)==1)||(parseInt(options.overlayClose,10)==1)){if(jQuery.ie8){var fixOverlay=function(){jQuery("#tu_overlay").css("top",document.body.parentElement.scrollTop+"px")};fixOverlay.apply();window.onresize=fixOverlay;jQuery(window).bind("scroll",fixOverlay)}jQuery("#tu_overlay").show()}else{jQuery("#tu_overlay").hide()}var altText="";if(options.topUp&&(options.topUp!="")&&((parseInt(options.readAltText,10)==1)||(options.title&&options.title.match("{alt}")))){var topUp=jQuery(options.topUp);if(topUp.length){var image=topUp.find("img");if(image.length){altText=image.attr("alt")||""}if(altText!=""&&!(options.title&&options.title.match("{alt}"))){options.title="{alt}"}}}options.title=(options.title||"").replace("{alt}",altText).replace("{current}",group===null?"":(index+1)).replace("{total}",group===null?"":group.items.length)};var loadContent=function(){switch(options.type){case"image":options.content=new Image();jQuery(options.content).load(function(){options.content=jQuery(this);onContentReady()}).attr("src",options.reference);break;case"flash":case"flashvideo":case"quicktime":case"realplayer":case"windowsmedia":loadMovie(options.type,options.reference,options.width,options.height);break;case"iframe":options.content=jQuery('<iframe src="'+options.reference+'" frameborder="0" border="0"></iframe>');break;case"html":case"dom":var reference=jQuery(options.reference);if(reference.context){var marker=jQuery("<div></div>").attr({id:reference.markerId(),"class":(reference.is(":hidden")?"hidden":""),style:"display: none"});options.content=jQuery("<div></div>").append(reference.before(marker).addClass("marked"));reference.show()}else{options.content=jQuery("<div></div>").append(reference)}break;case"ajax":case"script":options.content=null;jQuery.ajax({url:options.reference,type:(parseInt(options.post,10)==1)?"POST":"GET",cache:false,async:false,data:options.parameters,dataType:(options.type=="ajax")?"html":"script",success:onContentReady})}if(jQuery.inArray(options.type,["html","dom","iframe"])!=-1){onContentReady()}};var loadMovie=function(type,src,width,height){if(!jQuery.ie){switch(options.type){case"flash":loadFlashContent();break;case"flashvideo":loadFlashVideoContent();break;case"quicktime":loadQuickTimeContent();break;case"realplayer":loadRealPlayerContent();break;case"windowsmedia":loadWindowsMediaContent();break}return}var object_attrs={width:width,height:height},params={src:src},classid=null,mimetype=null,codebase=null,pluginspage=null;switch(type){case"flash":case"flashvideo":classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0";mimetype="application/x-shockwave-flash";pluginspage="http://get.adobe.com/flashplayer/";break;case"quicktime":classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B";codebase="http://www.apple.com/qtactivex/qtplugin.cab";mimetype="video/quicktime";pluginspage="http://www.apple.com/quicktime/download/";params.scale="aspect";params.bgcolor="black";params.showlogo="false";params.autoplay="true";break;case"realplayer":classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA";mimetype="audio/x-pn-realaudio-plugin";pluginspage="http://www.real.com/freeplayer/?rppr=rnwk";params.controls="imagewindow";params.console="one";params.autostart="true";params.nojava="true";break;case"windowsmedia":classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6";codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701";mimetype="application/x-oleobject";pluginspage="http://www.microsoft.com/Windows/MediaPlayer/";params.filename=src;params.animationatstart="true";params.transparentatstart="true";params.autostart="true";params.showcontrols="true";params.showstatusbar="true";params.windowlessvideo="true";break}switch(type){case"flash":case"flashvideo":params.allowfullscreen="true";case"flashvideo":params.flashvars="file="+src+"&autostart=true";src=TopUp.host+TopUp.players_path+"flvplayer.swf";params.src=src;params.movie=src;break}object_attrs.codebase=codebase;if(window.ActiveXObject){object_attrs.classid=classid;object_attrs.data=src}var paramTags="";for(var key in params){paramTags+=" "+createElementTag("param",{name:key,value:params[key]})}params.width=width;params.height=height;params.mimetype=mimetype;params.pluginspage=pluginspage;var element=document.createElement("div");element.innerHTML=createElementTag("object",object_attrs)+paramTags+createElementTag("embed",params)+"</embed></object>";options.content=jQuery(element);onContentReady()};var createElementTag=function(tagName,attrs){var html="<"+tagName;for(var key in attrs){html+=" "+key+"='"+attrs[key]+"'"}return html+">"};var loadFlashContent=function(){var object=jQuery("<object></object>").attr({width:options.width,height:options.height,classid:"clsid:D27CDB6E-AE6D-11CF-96B8-444553540000",codebase:"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0",style:"display: none"});object.append(jQuery("<param></param>").attr({name:"src",value:options.reference}));object.append(jQuery("<param></param>").attr({name:"allowfullscreen",value:"true"}));object.append(jQuery("<embed></embed>").attr({src:options.reference,width:options.width,height:options.height,allowfullscreen:"true",type:"application/x-shockwave-flash",pluginspage:"http://get.adobe.com/flashplayer/"}));options.content=jQuery("<div></div>").attr({width:options.width,height:options.height});options.content.append(object);onContentReady()};var loadFlashVideoContent=function(){var object=jQuery("<object></object>").attr({width:options.width,height:options.height,classid:"clsid:D27CDB6E-AE6D-11CF-96B8-444553540000",codebase:"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0",style:"display: none"});object.append(jQuery("<param></param>").attr({name:"movie",value:TopUp.host+TopUp.players_path+"flvplayer.swf"}));object.append(jQuery("<param></param>").attr({name:"flashvars",value:"file="+options.reference+"&autostart=true"}));object.append(jQuery("<param></param>").attr({name:"allowfullscreen",value:"true"}));object.append(jQuery("<embed></embed>").attr({src:TopUp.host+TopUp.players_path+"flvplayer.swf",width:options.width,height:options.height,flashvars:"file="+options.reference+"&autostart=true",allowfullscreen:"true",type:"application/x-shockwave-flash",pluginspage:"http://get.adobe.com/flashplayer/"}));options.content=jQuery("<div></div>").attr({width:options.width,height:options.height});options.content.append(object);onContentReady()};var loadQuickTimeContent=function(){var object=jQuery("<object></object>").attr({width:options.width,height:options.height,classid:"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B",codebase:"http://www.apple.com/qtactivex/qtplugin.cab",style:"display: none"});object.append(jQuery("<param></param>").attr({name:"src",value:options.reference}));object.append(jQuery("<param></param>").attr({name:"scale",value:"aspect"}));object.append(jQuery("<param></param>").attr({name:"bgcolor",value:"black"}));object.append(jQuery("<param></param>").attr({name:"showlogo",value:"false"}));object.append(jQuery("<param></param>").attr({name:"autoplay",value:"true"}));object.append(jQuery("<embed></embed>").attr({src:options.reference,width:options.width,height:options.height,scale:"aspect",bgcolor:"black",showlogo:"false",autoplay:"true",type:"video/quicktime",pluginspage:"http://www.apple.com/quicktime/download/"}));options.content=jQuery("<div></div>").attr({width:options.width,height:options.height,style:"background: black"});options.content.append(object);onContentReady()};var loadRealPlayerContent=function(){var object=jQuery("<object></object>").attr({width:options.width,height:options.height,classid:"clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA",style:"display: none"});object.append(jQuery("<param></param>").attr({name:"src",value:options.reference}));object.append(jQuery("<param></param>").attr({name:"controls",value:"imagewindow"}));object.append(jQuery("<param></param>").attr({name:"console",value:"one"}));object.append(jQuery("<param></param>").attr({name:"autostart",value:"true"}));object.append(jQuery("<embed></embed>").attr({src:options.reference,width:options.width,height:options.height,controls:"imagewindow",console:"one",autostart:"true",nojava:"true",type:"audio/x-pn-realaudio-plugin",pluginspage:"http://www.real.com/freeplayer/?rppr=rnwk"}));options.content=jQuery("<div></div>").attr({width:options.width,height:options.height});options.content.append(object);onContentReady()};var loadWindowsMediaContent=function(){loadQuickTimeContent()};var onContentReady=function(html){hideLoader();if(html){options.content=jQuery(html)}switch(options.type){case"image":case"html":case"dom":case"iframe":options.resize=options.content;jQuery(".te_content").removeClass("te_scrollable");break;default:options.resize=jQuery("#temp_up .te_content");jQuery(".te_content").addClass("te_scrollable")}if(jQuery("#top_up").is(":hidden")){show()}else{replace()}};var showLoader=function(){var origin=jQuery("#top_up");if(jQuery("#top_up").is(":hidden")){origin=jQuery(options.topUp);if(!origin.length){origin=jQuery(document)}else{if(origin.children().length>0){origin=jQuery(origin.children()[0])}}}try{var dimensions={top:origin.offset().top,left:origin.offset().left,width:origin.outerWidth(),height:origin.outerHeight()}}catch(e){var dimensions={top:jQuery(window).scrollTop(),left:jQuery(window).scrollLeft(),width:parseInt(jQuery(window).width()/2,10),height:parseInt(jQuery(window).height()/2,10)}}jQuery("#tu_loader").html(" ").css(dimensions).show()};var hideLoader=function(){jQuery("#tu_loader").hide()};var show=function(){setContent();setDimensions();moveContent("top_up");jQuery("#top_up").center();if(options.x){jQuery("#top_up").css({left:parseInt(options.x,10)})}if(options.y){jQuery("#top_up").css({top:parseInt(options.y,10)})}switch(options.effect){case"appear":case"fade":jQuery("#top_up").fadeIn(fadeDuration(300),afterDisplay);break;case"switch":case"clip":jQuery("#top_up").show("clip",{direction:"vertical"},500,afterDisplay);break;case"transform":var origin=jQuery(options.topUp);if(origin.children().length>0){origin=jQuery(origin.children()[0])}var tuContent=jQuery("#top_up").find(".te_content");var dimensions=options.topUp?jQuery.extend({width:origin.outerWidth(),height:origin.outerHeight()},origin.offset()):{top:parseInt(jQuery(window).height()/2,10)-parseInt(tuContent.height()/2,10)+jQuery(window).scrollTop(),left:parseInt(jQuery(window).width()/2,10)-parseInt(tuContent.width()/2,10)+jQuery(window).scrollLeft(),width:10,height:10};transform("from",dimensions,afterDisplay);break;default:jQuery("#top_up").show();afterDisplay()}};var replace=function(callback){var isScrollable=jQuery("#top_up .te_content").hasClass("te_scrollable");if(isScrollable){jQuery("#top_up .te_content").removeClass("te_scrollable")}var focusedElement=jQuery("#top_up .te_content :focus");var wrapper=jQuery("#top_up .te_content").lockDimensions().wrapInner("<div></div>").children();wrapper.fadeOut(fadeDuration(250),function(){if(parseInt(options.storeCurrent,10)==1){wrapper.addClass("te_stored_content").hide().find(".te_stored_content").before(wrapper)}else{wrapper.children().appendTo("#temp_up .te_content").end().end().remove()}if(callback){var arg=jQuery("#temp_up .te_content");if(jQuery.inArray(options.type,["html","dom"])!=-1){arg=arg.children().eq(0)}callback.apply(arg)}else{clearContent();setContent()}if(isScrollable){jQuery("#top_up .te_content").addClass("te_scrollable")}setDimensions();jQuery("#top_up").centerWrap(jQuery("#temp_up"));var animation={width:jQuery("#temp_up .te_content").outerWidth(),height:jQuery("#temp_up .te_content").outerHeight()};var newTopUpWidth=jQuery("#temp_up").outerWidth();jQuery("#top_up .te_content").animate(animation,400,function(){moveContent("top_up");jQuery("#top_up").removeCenterWrap(newTopUpWidth);focusedElement.focus();afterDisplay()})})};var setContent=function(){options.content.appendTo("#temp_up .te_content")};var moveContent=function(to){var from=to=="top_up"?"temp_up":"top_up";jQuery("#"+from+" .te_content").children().appendTo("#"+to+" .te_content");if(to=="top_up"){jQuery("#top_up .te_content").css({width:jQuery("#temp_up .te_content").css("width"),height:jQuery("#temp_up .te_content").css("height")})}};var clearContent=function(){jQuery(".te_content .marked").each(function(){var marker=jQuery("#"+jQuery(this).markerId());if(marker.hasClass("hidden")){jQuery(this).hide()}marker.after(jQuery(this).removeClass("marked")).remove()});jQuery(".te_content").children(":not(.te_stored_content)").remove()};var transform=function(direction,dimensions,callback){var topUp=jQuery("#top_up");var tuContent=topUp.find(".te_content");if(direction=="from"){topUp.addClass("te_transparent").show()}var topUpOffset=topUp.offset();var tuContentOffset=tuContent.offset();var tuContentDiff={width:topUp.width()-tuContent.width(),height:topUp.height()-tuContent.height()};dimensions.top-=tuContentOffset.top-topUpOffset.top;dimensions.left-=tuContentOffset.left-topUpOffset.left;var origin={top:topUp.css("top"),left:topUp.css("left"),width:topUp.outerWidth(),height:topUp.outerHeight()};var opts={to:direction=="from"?origin:dimensions,duration:500};if(direction=="from"){opts.to.width-=tuContentDiff.width;opts.to.height-=tuContentDiff.height}var animation=function(){var cb=function(){callback.apply();options.content.removeClass("te_overflow")};var onReady=direction=="to"?function(){topUp.fadeOut(fadeDuration(100),cb)}:cb;topUp.animate({top:opts.to.top,left:opts.to.left},opts.duration);options.content.animate({width:opts.to.width,height:opts.to.height},opts.duration,onReady)};options.content.addClass("te_overflow");if(direction=="from"){topUp.css({top:dimensions.top,left:dimensions.left});options.content.css({width:dimensions.width,height:dimensions.height});jQuery(".te_top_up,.te_content").unlockDimensions();topUp.hide().removeClass("te_transparent").fadeIn(fadeDuration(150),animation)}else{animation.apply()}};var afterDisplay=function(){var duration=fadeDuration(500);if(jQuery("#top_up .te_frame").resizable&&parseInt(options.resizable,10)==1){var opts={stop:function(){jQuery("#top_up .te_frame").css({width:"auto",height:"auto"})},handles:"se",minWidth:200,minHeight:75,alsoResize:"#"+options.resize.id(),aspectRatio:options.type=="image"};jQuery("#top_up .te_frame").resizable(opts)}if(jQuery.ie6||jQuery.ie7){jQuery("#top_up .te_title").css("width",jQuery("#top_up").width())}jQuery("#top_up .te_title").html(options.title||"").fadeIn(duration);if(group&&group.items.length>1&&jQuery("#top_up .te_controls").is(":hidden")){if(jQuery.ie6){jQuery("#top_up .te_controls").show()}else{jQuery("#top_up .te_controls").fadeIn(duration)}}if(jQuery("#top_up .te_close_link").is(":hidden")){if(jQuery.ie6){jQuery("#top_up .te_close_link").show()}else{jQuery("#top_up .te_close_link").fadeIn(duration)}}checkPosition();jQuery(".te_top_up,.te_content").unlockDimensions();if(movieContentDisplayed()){options.content.find("object").show()}if(options.ondisplay){options.ondisplay.apply(this,[jQuery("#top_up .te_content"),data])}displaying=false};var setDimensions=function(dimensions){var func=dimensions?null:checkHeight;if(!dimensions){options.resize.unlockDimensions();if(jQuery.inArray(options.type,["image","html","dom","iframe"])!=-1){jQuery("#temp_up .te_content").unlockDimensions()}dimensions={};if(options.width){dimensions.width=parseInt(options.width,10)}if(options.height){dimensions.height=parseInt(options.height,10)}if(jQuery.ie6){jQuery("#top_up .te_title").css("width",jQuery("#temp_up").outerWidth())}}if(jQuery.ie8){jQuery("#top_up .te_close_link").hide()}options.resize.css(dimensions);if(jQuery.ie8){jQuery("#top_up .te_close").show()}if(func){func.apply()}};var checkHeight=function(){if(jQuery("#temp_up").outerHeight()<=jQuery(window).height()-4){return}var extraHeight=jQuery("#temp_up").outerHeight()-jQuery("#temp_up .te_content").height(),dimensions={height:jQuery(window).height()-4-extraHeight};if(options.type=="image"){dimensions.width=parseInt(options.content.width()*(dimensions.height/options.content.height()),10)}setDimensions(dimensions)};var checkPosition=function(){var offset=jQuery("#top_up").offset();var dimensions={width:jQuery("#top_up").outerWidth(),height:jQuery("#top_up").outerHeight()};var position={};if(offset.top-jQuery(window).scrollTop()<2){position.top=jQuery(window).scrollTop()+2}else{if(offset.top+dimensions.height-jQuery(window).scrollTop()>jQuery(window).height()-2){position.top=jQuery(window).scrollTop()+jQuery(window).height()-dimensions.height-2}}if(offset.left-jQuery(window).scrollLeft()<2){position.left=jQuery(window).scrollLeft()+2}else{if(offset.left+dimensions.width-jQuery(window).scrollLeft()>jQuery(window).width()-2){position.left=jQuery(window).scrollLeft()+jQuery(window).width()-dimensions.width-24}}if(jQuery.keys(position).length>0){if(jQuery.ie6||jQuery.ie7){jQuery("#top_up").css(position);window.setTimeout(function(){jQuery("#top_up .te_content").show()},1)}else{jQuery("#top_up").animate(position,300)}}};var hide=function(callback){jQuery(".te_content .te_stored_content").removeClass("te_stored_content");var duration=fadeDuration(250);var onReady=function(){animateHide(callback)};jQuery("#top_up .te_title").fadeOut(duration);jQuery("#top_up .te_controls").fadeOut(duration);if(movieContentDisplayed()){options.content.find("object").hide()}if(jQuery.ie){jQuery("#top_up .te_close_link").hide();onReady.apply()}else{jQuery("#top_up .te_close_link").fadeOut(duration,onReady)}};var animateHide=function(callback){var afterHide=function(){if(callback){callback.apply(this,[jQuery("#top_up .te_content"),data])}if(options.onclose){options.onclose.apply(this,[jQuery("#top_up .te_content"),data])}clearContent();moveContent("temp_up")};switch(options.effect){case"appear":case"fade":jQuery("#top_up").fadeOut(fadeDuration(300),afterHide);break;case"switch":case"clip":jQuery("#top_up").hide("clip",{direction:"vertical"},400,afterHide);break;case"transform":if(jQuery.ie6){jQuery("#top_up").hide();afterHide.apply();break}var origin=jQuery(options.topUp);if(origin.children().length>0){origin=jQuery(origin.children()[0])}var tuContent=jQuery("#top_up").find(".te_content");var dimensions=options.topUp?jQuery.extend({width:origin.outerWidth(),height:origin.outerHeight()},origin.offset()):{top:parseInt(jQuery(window).height()/2,10)+jQuery(window).scrollTop(),left:parseInt(jQuery(window).width()/2,10)+jQuery(window).scrollLeft(),width:10,height:10};transform("to",dimensions,afterHide);break;default:jQuery("#top_up").hide();afterHide()}jQuery("#tu_overlay").hide()};return{version:"1.7.2",jquery:null,host:scriptParams.host||scriptHost,images_path:scriptParams.images_path||"images/top_up/",players_path:scriptParams.players_path||"players/",data:data,init:function(){if(initialized){return false}try{jQuery(document).ready(function(){TopUp.jquery=jQuery().jquery;fast_mode=parseInt(scriptParams.fast_mode,10)==1;default_preset.resizable=jQuery.ui&&jQuery.ui.resizable?1:0;extendjQuery();injectCode();bind();jQuery("#top_up").draggableZ({only:".te_title,.te_top *,.te_bottom *"});jQuery.each(on_ready,function(i,func){func.apply()})});jQuery(window).unload(function(){jQuery("*").unbind();if(jQuery("#top_up .te_frame").resizable){jQuery("#top_up .te_frame").resizable("destroy")}});initialized=true}catch(e){}},defaultPreset:function(set){default_preset=jQuery.extend(default_preset,set)},addPresets:function(sets){presets=jQuery.extend(presets,sets)},ready:function(func){on_ready.push(func)},enableFastMode:function(){var args=arguments;if(!jQuery.isReady){TopUp.ready(function(){TopUp.enableFastMode.apply(null,args)});return false}if(arguments.length){var arg=arguments[0];var func=jQuery.isFunction(arg)?arg:function(){return arg};fast_mode=func.apply()}else{fast_mode=true}fast_mode=fast_mode==true||parseInt(fast_mode,10)==1;TopUp.rebind()},rebind:function(){if(selector){jQuery(selector).die("click",topUpClick)}bind()},displayTopUp:function(element,opts){if(!jQuery.isReady){TopUp.ready(function(){TopUp.displayTopUp(element,opts)});return false}var topUp=jQuery(element).bubbleDetect(selector);var toptions=deriveTopUpOptions(topUp,jQuery.extend(opts||{},{trigger:"#"+jQuery(element).id()}));TopUp.display(topUp.element.attr("href"),toptions)},display:function(reference,opts){if(!jQuery.isReady){TopUp.ready(function(){TopUp.display(reference,opts)});return false}if(displaying){return false}try{displaying=true;data={};deriveOptions(reference,opts,true);showLoader();var continueDisplaying=function(){try{deriveGroup();prepare();loadContent()}catch(e){displaying=false;hideLoader();alert("Sorry, but the following error occured:\n\n"+e)}};if(jQuery.ie6){window.setTimeout(continueDisplaying,1)}else{continueDisplaying()}}catch(e){displaying=false;hideLoader();alert("Sorry, but the following error occured:\n\n"+e)}},update:function(func){if(jQuery("#top_up").is(":hidden")){return}replace(func||function(){})},restore:function(storeCurrent,callback){options.storeCurrent=storeCurrent?1:0;options.ondisplay=callback;TopUp.update(function(){clearContent();var stored_content=this.children(":not(.te_stored_content):first-child").prev();if(!stored_content.length){stored_content=this.children(".te_stored_content:last-child")}stored_content.children().insertBefore(stored_content).end().end().remove()})},previous:function(){navigateInGroup(-1)},next:function(){navigateInGroup(1)},overlayClose:function(){if(parseInt(options.overlayClose,10)==1){TopUp.close()}},close:function(callback){if(jQuery("#top_up").is(":visible")){hide(callback)}}}}());(function(){var d=[];if(scriptParams.libs!=null){var b=scriptParams.libs.replace(/clip|switch/g,"fxc-clip").replace(/resize/g,"uic-resizable").split("+");for(var a=0;a<b.length;a++){if(["all","core","fxc-clip","uic-resizable"].indexOf(b[a])!=-1){if(d.indexOf(b[a])==-1){d.push(b[a])}}}}else{if(typeof(jQuery)=="undefined"){d.push("all")}else{if(!jQuery.effects||!jQuery.effects.clip){d.push("fxc-clip")}if(!jQuery.ui||!jQuery.ui.resizable){d.push("uic-resizable")}}}if(d.length==0){TopUp.init()}else{var c=scriptElement.getAttribute("src").replace(/(development\/)?top_up(\-min)?\.js.*$/,"jquery/"+d.sort().join(".")+".js");document.write('<script src="'+c+'" type="text/javascript" onload="TopUp.init()" onreadystatechange="TopUp.init()"><\/script>')}}())};

Hello All, I have an upload script that I use to upload a photo to a folder and then save the file path to a database. Then I query the database to get the photo and put it where I want on my webpage. The question is what kind of technique should I best practice for outputting the images. More of less, I need them to all be the same shape in the similar containers, for example 400px by 300px, but need the container to take into consideration that the photos may be different aspect ratios or vertical as opposed to horizontal. Any suggestions??

For some reason i need to submit a form to an external website without changing the page. I'm a newbie with AJAX and i don't know how to do it so i would really appreciate if someone could help me. Here's the form i need to submit: Thanks a lot !

I have made a simple rich text editor project but very good one. I will upload it later and make people to download and use. It is my first open source project. I have already made everything but one thing I cannot do, I mean I don't know how to proceed to do it or begin to do it, is how to preview the source code that the user has typed in the editor? I hope you know what I mean here... Just like any rich text editor, there is a button to preview in HTML codes what the user has written.. If you can, give me a beginning..I will try to manage.. Thank! ----------- Mergeed from double posted thread ------ Well, I have an iframe, I want to know how to preview the text in HTML when user writes in it? You can see an example here, http://freetextbox.com/demos/ Click on HTML at the end of the text editor below...

Hi I know they are many topics on this but I can't seem to wrap my head around Java Script on a whole. I wanted to create a dynamic linked two select box. I saw a sample code on javascriptabout.com. I have adjusted the form to my values and placed a snippet below. <html> <head> <script> function setOptions(chosen) { var selbox = document.myform.LocatioTwo; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('San Grande', 'Port of Spain- San Grande'); selbox.options[selbox.options.length] = new Option('Montrose','onetwo'); selbox.options[selbox.options.length] = new } } </script> </head> <body> <form name="myform"> <strong>Departure Location:</strong><select name="LocationOne" size="1" onchange="setOptions(document.myform.LocationOne.options [document.myform.LocationOne.selectedIndex].value);"> <option value=" " selected="selected"> </option> <option value="1">Port of Spain</option> </select><br> <br> <strong>Arrival Location:</strong><select name="LocatioTwo" size="1"> <option value=" " selected="selected">Please select one of the options above first</option> </select><br> <input type="button" name="go" value="Submit" onclick="alert(document.myform.LocatioTwo.options [document.myform.LocatioTwo.selectedIndex].value);"> </form> </body> </html> I need to know how to take those two locations from Javascript in to PHP. Any help on the matter will be greatly appreciated it.Thnakyou.

So I made a function to insert image through document.execcommand in Javascript.. function images() { var img = prompt ("Enter the image link", ""); if (img != null) { lol.document.execCommand("insertImage", false, img); } }; The image is not appearing, even on live server.. It shows the broken image icon. This code is supported by all browsers. The rest of my execcommand functions are working well.. I checked the code in Inspect element in Firefox and Chrome, they are displaying the image with the tags and link well, but still show the broken image icon.

I want that when the user click on a button, the text align to the center.. This function of document.execCommand is supported to all browsers, but do not know if the syntax is correct. Here the function below: function centeralign() { lol.document.execCommand('formatDoc', false, 'justifycenter'); }; Not sure what is wrong... Other document.execcomand functions are working well, except this one...alignment...

I made a login/logout page, but now I i'll like to separate the admin from regular users as they login. What I am trying to do is to have **regular users** just view available files, and the **admins** well of course they will be able to view and edit those files. Now my set up: **Login**.php <?php session_start(); include("password.php"); require_once "config.php"; /* Constants */ $TITLE = "Formation - User Login"; $CSS = array("assets/css/formation.css"); $Javascript = array(); $mode = $_GET["mode"]; /* Template */ require_once $TEMPLATE_PATH."header.php"; if ($mode == "login") { /// do after login form is submitted if ($USERS[$_POST["username"]]==$_POST["password"]) { /// check if submitted username and password exist in $USERS array $_SESSION["login"]=$_POST["username"]; header("location:index.php"); } else { echo "Incorrect username/password. Please, try again."; }; } else if ($mode == "logout") { session_start(); unset($_SESSION["login"],$USERS); header("location: login.php"); exit(0); }; echo <<< XHTML <h1>$TITLE</h1> <form id="form" method="post" action="{$LOGIN_URL}?mode=login"> <label id="username_label" for="username" class="normal">Username</label> :<br /> <input id="username" name="username" type="text" value="" class="half" /><br /> <label id="password_label" for="password" class="normal">Password</label> :<br /> <input id="password" name="password" type="password" value="" class="half" /><br /> <input id="submits" type="submit" value="Login" /> </form> XHTML; require_once $TEMPLATE_PATH . "footer.php"; ?> **Password**.php (verifies users and passwords) <?php $USERS["drodrig1"] = "pwd1"; $USERS["jsutta"] = "pwd2"; $USERS["username3"] = "pwd3"; function check_logged(){ global $_SESSION, $USERS; if (!array_key_exists($_SESSION["login"],$USERS)) { header("Location: login.php"); exit(0); }; }; ?> **Config**.php <?php $ASSETS_URL = "[url="https://url-link/formationXX/assets/%22;"]https://url-link/for...ionXX/assets/";[/url] $ASSETS_PATH = "serverpath/formationXX/assets/"; $TEMPLATE_URL = "[url="https://url-link/formationXX/assets/template/%22;"]https://url-link/for...ets/template/";[/url] $TEMPLATE_PATH = "serverpath/formationXX/assets/template/"; $LOGIN_URL = "[url="https://url-link/formationXX/login.php%22;"]https://url-link/for...nXX/login.php";[/url] $LOGIN_PATH = "serverpath/formationXX/login.php"; ?> **Index**.php (After login, this is where I want to see admin differentiate from regular user. The admin should be able so see and edit the following: CSS, JS, Email, PDF and Spread Sheet. Meanwhile user can **only view** all except: CSS, JS) <?php require_once "config.php"; session_start(); /// initialize session include("password.php"); check_logged(); /// function checks if visitor is logged. /* Constants */ $TITLE = "Formation - User Login"; $CSS = array("assets/css/formation.css"); $Javascript = array(); /* Template */ require_once $TEMPLATE_PATH."header.php"; echo <<< XHTML <form id="form" method="post" action="{$LOGIN_URL}?mode=login"> <div class="full row column"> <h1>{$TITLE}</h1> </div> <div class="full row column"> <div class="half column small"> <p>Logged in as: <strong>{$_SESSION["login"]}</strong> | <a href="{$LOGIN_URL}?mode=logout" class="small">Logout</a></p><br /> Add Form | Delete Selected Form(s) </div> </div> <div class="full row column"> <table id="formslist" cellpadding="0" cellspacing="0"> <th> <tr> <td class="form_select"> <input id="selectallforms" name="selectallforms" type="checkbox" value="Select All Forms" /> </td> <td class="form_id"> ID </td> <td class="form_url"> URL </td> <td class="form_dates"> Launch Date </td> <td class="form_dates"> Expiration Date </td> <td class="form_autofill"> Autofill </td> <td class="form_save"> **CSS** </td> <td class="form_save"> **JS** </td> <td class="form_save"> Email </td> <td class="form_save"> PDF </td> <td class="form_dates"> Spread sheet </td> </tr> </th> </table> </div> </form> XHTML; require_once $TEMPLATE_PATH . "footer.php"; ?>

Hi. I have many iframes on a page. This script dynamically resizes the height of each iframes content. I would like one iframe to not dynamically resize its iframe content height. i have tried adding the id code but it is not working. eg, document.getElementById("iframe").style.height=height+"px" <script type='text/javascript'> $(function(){ var iFrames = $('iframe'); function iResize() { for (var i = 0, j = iFrames.length; i < j; i++) { iFrames[i].style.height = iFrames[i].contentwindow.document.body.offsetHeight + 'px';} } if ($.browser.safari || $.browser.opera) { iFrames.load(function(){ setTimeout(iResize, 0); }); for (var i = 0, j = iFrames.length; i < j; i++) { var iSource = iFrames[i].src; iFrames[i].src = ''; iFrames[i].src = iSource; } } else { iFrames.load(function() { this.style.height = this.contentwindow.document.body.offsetHeight + 'px'; }); } }); </script>

Hello, am writing a video tutorial using cakephp. I have tried to embed my swf player using Javascript code. It works fine in all the index view of all my controllers but don't in other action/view. What could possibly be the problem. Any help would be appreciated

I badly need help... I am making a basic text editor of my own. I have an Iframe where users can type their code in it. Below the Iframe, there is a div which is hidden. This div normally will capture what is written in the IFrame, in other words, every HTML and CSS codes the user will type in the Iframe above, it will take action "onkeyup" in the div below. Now the div below, as it is hidden, it will only be previewed if the user click on a button. As a result, this will pop up in a JQuery dialog box. In short, the div will be pop up through a dialog box of JQuery UI to show the user the result he/she is coding. I know we can do this in textarea, it is just a matter of "value" but I am not getting it with Iframe. I made this: function pcode () { var frame = document.getElementById('code').value; var div = document.getElementById('preview'); divout.innerHTML = frameout; } The above code, is just to grab the value written in the Iframe, then preview it in the div below on onkeyup. Now, the code to preview the div in a JQuery UI dialog box once the user clicks on a button: function preview() { $('#preview').dialog({modal:true, height:600, width:1280, title:"Preview", show:"slow", hide:"fast"}); } $('#previewbutton').click(function() { preview(); }); The problem is nothing is working. If you have not understood the issue, you can ask me some questions, I am myself stressed with this. Everything would be OK if it was a textarea as I did this before with textarea and was fine. In the same line of thought, I have been advised to use IFrame when coding a text editor, because if I do this with a textarea, the user's code can have conflicts with my own CSS codes of the page. I want to know if there a possibility to use textarea alone instead of Iframe, in case there is no solution, but the user CSS and HTML codes must not have conflicts with my own CSS codes. For example, if I have declared a class or ID or made all Heading 1 blue for instance, and if the user is typing Heading 1 tag in a textarea, the CSS codes of mine will apply to the user as well, so I don't want this. Thank!

<html> <head> <style type="text/css"> /*#pwidget { background-color:lightgray; width:254px; padding:2px; -moz-border-radius:3px; border-radius:3px; text-align:left; border:1px solid gray; }*/ #progressbar { width:30px; padding:1px; background-color:white; border:1px solid black; height:10px; } #indicator { width:0px; background-image:url("shaded-green.png"); height:10px; margin:0; } /*#progressnum { text-align:center; width:250px; }*/ </style> <script type="text/javascript"> function disp_text() { var w = document.myform.mylist.selectedIndex; //alert(w); var selected_text = document.myform.mylist.options[w].value; return selected_text; } function disp_text1() { var x = document.myform1.mylist1.selectedIndex; //alert(x); var second_selected_text = document.myform1.mylist1.selectedIndex; //alert(second_selected_text); return second_selected_text; } var maxprogress = 30 ; // total to reach var actualprogress = 0; // current value var itv = 0; // id to setinterval function prog() { var val = disp_text(); var temp = val; val = maxprogress; maxprogress = temp; if(actualprogress >= maxprogress) { clearInterval(itv); return; } var progressnum = document.getElementById("progressnum"); var indicator = document.getElementById("indicator"); actualprogress += 1; indicator.style.width=actualprogress + "px"; progressnum.innerHTML = actualprogress; if(actualprogress == maxprogress) clearInterval(itv); } </script> </head> <body> <table width="100%"> <tr> <td width="117"><div id="progressbar"> <div id="indicator"></div> </div></td> <td width="78"><div id="pwidget"> <div id="progressnum">0</div> </div></td> <td width="288"> <FORM NAME="myform"> <SELECT NAME="mylist" onchange="disp_text()" class="foo"> <OPTION VALUE="">Select</OPTION> <OPTION VALUE="30">Raghu</OPTION> <OPTION VALUE="45">Vara</OPTION> <OPTION VALUE="60">Sashi</OPTION> </SELECT> </FORM></td></tr><tr> <td width="117"><div id="progressbar"> <div id="indicator"></div> </div></td> <td width="78"><div id="pwidget"> <div id="progressnum">0</div> </div></td><td> <FORM NAME="myform1"> <SELECT NAME="mylist1" onchange="disp_text1()" class="foo"> <OPTION VALUE="">Select</OPTION> <OPTION VALUE="30">Raghu</OPTION> <OPTION VALUE="45">Vara</OPTION> <OPTION VALUE="60">Sashi</OPTION> </SELECT> </FORM> <input type="button" name="Submit" value="Start the progression" onclick="itv = setInterval(prog, 70)" /> </td> <td width="520"> <input type="button" name="Submit2" value="Stop" onclick="clearInterval(itv)" /></td> </tr> <tr> <td> </td> </tr> </table> </body> </html>

hello there, i looked in a tutorial of a functionality in javsscript, if you take a look at the link above youll see: http://interestingwebs.blogspot.pt/2011/05/hide-or-show-div-element.html In this link "SHOW/HIDE" When i click it shows the text above, but i liked to when i click the link the "SHOW/HIDE" text disappear, how can i do it? Best regards

Greetings everyone, I really hope someone would be able to help me quickly... I'm not very clued up on ajax,jquery or javascript, and would really love some help in converting the attached js file to use a database instead of cookies. Please guys, thanx in advance.

Hi! (I am hoping I have placed this post in the right forum) I am having some issues with the Nivo slider. I have multiple sliders on the website (one that you can see just visiting the site and then a couple of others that are viewed when clients login). Anyway, the issue that I am having is trying to get the second slider (the one featured on the main site) to see the custom CSS that I wrote for it -- specifically in regards to the nivo-controlNav selector. Here is what i've tried: (the second slider ID is #mainSlider) #mainSlider .nivo-controlNav { position:relative; left:122px; top:12px; } I've also tried adding a z-index to this of 9999. I've also added custom css to the javascript: <script> $(document).ready(function() { $('nivo-controlNav).css('position','relative'); $('nivo-controlNav).css('left','122px'); $('nivo-controlNav).css('top','12px'); $('#mainSlider').nivoSlider({ effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 7000, // How long each slide will show directionNav: true, // Next & Prev navigation directionNavHide:true, //Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav }); }); </script> and so on. That didn't work either. Then, I went into the javascript file and tried to add a new class -- .nivo-controlNav2. However, I don't think I went about it the right way as it messed up the controlNav css for the other slider. I tried loading a custom theme in the <head> and then added this to the slider wrapper: <div class="slider-wrapper2 theme-mytheme"> After that, I made sure that my css had .mytheme listed first and then .nivo-controlNav listed after it. At this point, i'm frustrated. I've done everything that *I* know how to do and have scoured the internet for answers. Here is the site: http://diocesan.com/testsite Help! and thank you in advance for any help, suggestions or advice you can give.

How to make a datalist in javascript. Html datalist does not work in old browser so i want to make a datalist in javascript.please help me.

Hello, I've Searching for a while to find the code they use for the survey on this site before downloading: http://xboxfreegames...e-download.html But I could't find him. Does somebody know this or a similar code for my site. Thanks in advance

Hi all, I've got a problem with this piece of code. I believe this should work properly but when closing the Safari browser the alert box is properly displayed but when clicking "Ok" the browser closes. It should return to the page as it returns false. I've tried setting it to return false but with no luck. This works on FF and Chrome ok. var is_chrome = navigator.userAgent.indexOf('Chrome') > -1; var is_explorer = navigator.userAgent.indexOf('MSIE') > -1; var is_firefox = navigator.userAgent.indexOf('Firefox') > -1; var is_safari = navigator.userAgent.indexOf("Safari") > -1; var is_Opera = navigator.userAgent.indexOf("Presto") > -1; if ((is_chrome)&&(is_safari)) {is_safari=false;} //within $(document).ready(function(){ jQuery(window).bind("beforeunload", function(){ // showDebug1("Exiting..."); $.ajax({ url: "<?=$exit_url?>"}); leave = confirm("Exit page?"); if (leave==true){ return ret; } else { if(is_chrome) { return 'Leave page?'; } else if(is_safari) { alert('Click OK to continue'); } else { return false; } } }); Anyone have any ideas? Cheers, CaptainChainsaw

Hi, I wonder whether someone may be able to help me please. I've put together this page http://www.mapmyfind.../chris/test.php which allows the user to add and remove Google Map markers via a 'Category' check box selection. In addition, as each marker is added or removed from the map, the linked 'Description' is added and removed from the 'Sidebar' (shown in orange). You will see that as a map marker is selected a 'Infowindow' is created above the marker and the linked 'Sidebar Description Item' is highlighted in grey. The problem I'm having is that I cannot find a way to make the 'Sidebar' automatically scroll so the the sidebar item is visible to the user. To illustrate this a little better than I can perhaps explain, I have found an example here http://www.blocsoft....xample12.V3.asp which highlights the behaviour I'm looking for. I've read many a tutorial and tried several plugins, all without success. I just wondered whether someone could perhaps take a look at this please and let me know where I'm going wrong. I really would be most grateful of any help as I've been working on this for several weeks. Many thanks and kind regards

I wonder whether someone may be able to help me please. Firstly, my apologies because I'm not particularly well versed with Javascript, so perhaps this may be a very basic error to some. I've put together this page http://www.mapmyfind.../chris/test.php which allows users to add and remove map markers via 'Marker Category' check box selection. In addition, as the markers are added to the map, an associated 'Sidebar' item is also created (shown in orange text). If a map marker is clicked, a 'Infowindow' appears over the marker and the relevant 'Sidebar' item is highlighted with a grey background. The problem I'm having is that the once the map marker has been selected, I cannot get the 'Sidebar' to automatically scroll, so that the 'Sidebar' item is visible to the user. I appreciate that my description of the problem may not be particularly well detailed, so please find a link to an example page here http://www.blocsoft....xample12.V3.asp which illustrates what I'm trying to achieve. I've been working on this for a while now and read through quite a lot of 'plugins' and tutorials to try and find the solution, unfortunately without any success. I just wondered whether someone may be able to look at this please and offer some guidance on how I may be able to solve this problem. Many thanks and kind regards

Please could you help.. I need to make this code allow me to use the showDiv function multiple times on the page.. <script type="text/javascript"> function showDiv() { document.getElementById('welcomeDiv').style.display = "block"; } function hideDiv() { document.getElementById('welcomeDiv').style.display = "none"; } </script> <a name="answer" value="Show Div" onclick="showDiv()" >Show</a> <div id="welcomeDiv" style="display:none;" class="answer_list" > <h2>Hello</h2> <button onclick="hideDiv()" class="loginBut" style="font-family: 'Handjet', cursive; font-size: 2EM;">Close</button> </div> Thanks. It seems I need to add an index variable to the function. Don't know how though.. I'm new to JS.