JavaScript - Timer Stops When Click-and-hold Browser Close

Hi all ... Any help's appreciated ...

The challenge is that I have three - three page sliders ... each one is actually being called on a list item external to the easySlider function ...(#sliderNav ul li a#s1, #s2, #s3)

When I navigate from one slide show to the next ... I need to send a callback to rewind each slideshow to the first page and reflect the current change to the numeric 'a' attr ...

I don't quite know how to properly structure a callback function to update the current list item index from within the click event ...

Any suggestions would KINDLY be appreciated cause I think I'm a bit over my JavaScript - JQuery skills threshold with this ...

Thanks in advance and if you are way too busy to assist I completely understand ...

Here's the code I have for my slideshow controller ..
Code:

$(function()
{	//	Slider Init Functions .... 
	$("#slideShow").easySlider({
			controlsShow:true,
			speed:100,
			numeric:true,
			numericId:'controls',
			className:"sone",
			firstId:'p1'
	});	
	$('.stwo, .sthree').hide();
	$('.sone').show();
	$('#slideShowTwo').easySlider({	
		controlsShow:true,
		speed:100,
		numeric:true,
		numericId:'controlsTwo',
		className:'stwo',
		firstId:'p4'
	});	
	$('#slideShowThree').easySlider({
		controlsShow:true,
		speed:100,
		numeric:true,
		numericId:'controlsThree',
		className:'sthree',
		firstId:'p7'				
	});			
	//	Slider Nav Calls ...					 
	$('#s1').click(function()	{
		$('.sone').show();
		$('.stwo, .sthree').hide();
	});
	$('#s2').click(function()	{
		$('.stwo').show();
		$('.sone, .sthree').hide();
	});
	$('#s3').click(function()	{		
		$('.sthree').show();
		$('.sone, .stwo').hide();
	});  
});

And the code for the easySlider ....

Code:

(function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefo 	'',	
			controlsAfter:	'',	
			controlsFade:	true,
			firstId: 		'firstBtn',
			firstText: 		'First',
			firstShow:		false,
			lastId: 		'lastBtn',	
			lastText: 		'Last',
			lastShow:		false,				
			vertical:		false,
			speed: 			800,
			auto:			false,
			pause:			2000,
			continuous:		false, 
			numeric: 		false,
			numericId: 		'controls',
			className:''			
		}; 
		
		var options = $.extend(defaults, options);  
				
		this.each(function() {  
			var obj = $(this); 				
			var s = $("li", obj).length;
			var w = $("li", obj).width(); 
			var h = $("li", obj).height(); 
			var clickable = true;
			obj.width(w); 
			obj.height(h); 
			obj.css("overflow","hidden");
			var ts = s-1;
			var t = 0;
			$("ul", obj).css('width',s*w);			
			
			if(options.continuous){
				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
				$("ul", obj).css('width',(s+1)*w);
			};				
			
			if(!options.vertical) $("li", obj).css('float','left');
								
			if(options.controlsShow){
				var html = options.controlsBefore;				
				if(options.numeric){
					html += '<ol id="'+ options.numericId +'" class="' + options.className + '"></ol>';
				} else {
					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
				};

				html += options.controlsAfter;						
				$(obj).after(html);										
			};
			
			if(options.numeric){									
				for(var i=0;i<s;i++){						
					$(document.createElement("li"))
						.attr('id',options.numericId + (i+1))
						.attr('class',options.className)
						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
						.appendTo($("#" + options.numericId))
						.click(function(){							
							animate($("a",$(this)).attr('rel'),true);
						}); 												
				};							
			} else {
				$("a","#"+options.nextId).click(function(){		
					animate("next",true);
				});
				$("a","#"+options.prevId).click(function(){		
					animate("prev",true);				
				});	
				$("a","#"+options.firstId).click(function(){		
					animate("first",true);
				});				
				$("a","#"+options.lastId).click(function(){		
					animate("last",true);				
				});				
			};
			
			function setCurrent(i){
				i = parseInt(i)+1;
				$("li", "#" + options.numericId).removeClass("current");
				$("li#" + options.numericId + i).addClass("current");
			};
			
			function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent (t);			
			};
			
			function animate(dir,clicked){
				if (clickable){
					clickable = false;
					var ot = t;	
					t = parseInt(t);				
					switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break; 
						default:
							t = dir;
							break; 
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};
					
					if(!options.continuous && options.controlsFade){					
						if(t==ts){
							$("a","#"+options.nextId).hide();
							$("a","#"+options.lastId).hide();
						} else {
							$("a","#"+options.nextId).show();
							$("a","#"+options.lastId).show();					
						};
						if(t==0){
							$("a","#"+options.prevId).hide();
							$("a","#"+options.firstId).hide();
						} else {
							$("a","#"+options.prevId).show();
							$("a","#"+options.firstId).show();
						};					
					};				
					
					if(clicked) clearTimeout(timeout);
					if(options.auto && dir=="next" && !clicked){;
						timeout = setTimeout(function(){
							animate("next",false);
						},diff*options.speed+options.pause);
					};
			
				};
				
			};
			// init
			var timeout;
			if(options.auto){;
				timeout = setTimeout(function(){
					animate("next",false);
				},options.pause);
			};		
			
			if(options.numeric) setCurrent(0);
		
			if(!options.continuous && options.controlsFade){					
				$("a","#"+options.prevId).hide();
				$("a","#"+options.firstId).hide();				
			};				
			
		});
	  
	};

})(jQuery);

The HTML

Code:

<div id="sliderNav">
		<ul>
				<li><a href="#p1" id="s1">One</a></li>
				<li><a href="#p4" id="s2">Two</a></li>
				<li><a href="#p7" id="s3">Three</a></li>
		</ul>
</div>
<div id="slideShow" class="sone">
		<ul>                
				<li id="p1"><!--<li>Slide One</li>-->
				<div class="h2">This is The Main Page</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p2">
				<div class="h2">This is Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
				
			 <li id="p3">
				<div class="h2">This is Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
		</ul>
</div><!-- </div id="slideShow">-->

<div id="slideShowTwo" class="stwo">
		<ul>       								 
				<li id="p4"><!--<li>Slide Two</li>-->
				
				<div class="h2">This is Slideshow 2 Page One</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p5">
				<div class="h2">This is Slideshow 2 Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
	 
			  <li id="p6">
				<div class="h2">This is Slideshow 2 Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.</li>
				</ul>

</div><!-- </div id="slideShowTwo">-->
<div id="slideShowThree" class="sthree">
		<ul>            
				<li id="p7"><!--<li>Slide Three</li>-->
				<div class="h2">This is Slideshow 3 Page One</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p8">
				<div class="h2">This is Slideshow 3 Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
	 
			 <li id="p9">
				<div class="h2">This is Slideshow 3 Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
		</ul>
</div><!-- </div id="slideShowThree">-->
</body>

Hello,

I have a dialog box and in there I have a button that says New Service. When a user clicks on New Service, another dialog is shown where they the put the name of the service and after they click Create, I want that dialog box and the first one close as well. Here is my code, I can't figure it out.

I want the #create-userDialog box to close after the user clicks on Create in #new-serviceDialog.

<script>
$(function() {

$( "#dialog:ui-dialog" ).dialog( "destroy" );

$( "#create-userDialog" ).dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"OPEN": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );


},
CLOSE: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( "#create-user" )
.button()
.click(function() {
$( "#create-userDialog" ).dialog( "open" );
});

$( "#new-serviceDialog" ).dialog({
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Create": function() {
var bValid = true;
onclick = $( this ).dialog( "close" );
allFields.removeClass( "ui-state-error" );

},
Close: function() {
$( this ).dialog( "close" );

}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}

});

$( "#new-service" )
.button()
.click(function() {
$( "#new-serviceDialog" ).dialog( "open" );
});

});
</script>

Hi,

I was wondering if anyone knew how I can close an accordian panel by clicking on it. In more detail, when the user clicks the panel title, it opens it, i want it to close if they click the title again.

Im using Adobe's Spry framework.

Any help would be great.

-M

Hello everyone

So I'm new and I have searched but I still got two questions.

I'm gonna use the backbox scrip on my site and of course I got it from javascriptkit.com but - I would like to close the image not only by clicking outside of box or at the Close-button - but also by clicking the image itself.

The orignal script works really well - except for one small thing - when the backbox displays large images - I can't close them by clicking outside the image on the left and right sides - it only works closing when I click above or under the box.

Anyway; internet gave me this small code:

Code:

objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( !/(prevLink)|(nextLink)/.test(clickObj) ) {
				myLightbox.end();
			}
		};

And I was wondering if you guys know where to put it in the lightbox.jg file for it to work (or if it even will work at all?) - Or maybe I can change the original code for this to happen (Without adding this new code?)

Me then - I have notepad + + and I just recently learned CSS - Java is a tad more complicated when I look at the code

The last question I have is if you guys got any good site for me to read and learn Java? Like I need to understand the logic behind it - how it thinks. I just learned how CSS "thinks and acts" a few months ago - but I guess Java isn't anything like that.

Regards
Fredrik

Hi,

I'm very new to coding Javascript, so have no idea what I'm doing, so sorry

What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code:

src="http://Mysite.com/Images/Button.png"

I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?:

Code:

onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')

For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'?

And 2. For a timer to start for say 30 Seconds.

When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part'

I know that this is a lot to ask, and I will be so very grateful if someone helps me out here!

Thanks!
Harry.