Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 436
  • Last Modified:

Add a Pause Link to JS Animation

Hi All,

I have to modify an animation created by someone else and it's based on jquery, they've already added next and previous links that do exactly that, but now i need to add a pause link to it as well, i just don't know how. All the help I can get on this would be extremely appreciated.
<div id="nav_how_we_work">
    <a href="" id="button_how_we_work_prev">Prev</a>
    |
    <a href="" id="button_how_we_work_next">Next</a>
    <div style="clear:both"><!-- --></div>
</div>

Open in new window

// ------------------------------------------------------------------------------------------------------------------------------
// getobjbyId()
function getobjbyId(id){var ns4 = (document.layers)?true:false; var ns6 = (document.getElementById)?true:false; var ie4 = (document.all)?true:false;if (ns4){return document.layers[id];}else if(ie4){return document.all[id];}else{return document.getElementById(id);}}

// pushin()
function pushin(the_array, the_data){var len_array=the_array.length;the_array[len_array]=the_data;return the_array.length;}

// JavaScript function to display flash movie format video on web page
function open_window_centered(the_url, the_width, the_height, the_scrollbar){
	if(window.screen){
		var w = parseInt(the_width) + 20; var h = parseInt(the_height) + 20; var x0 = (screen.availWidth - 10 - w)/2; var y0 = (screen.availHeight - 30 - h)/2;
		var str_scrollbar=""; if(the_scrollbar) str_scrollbar=", scrollbars=1";
		window.open(escape(the_url),'', 'width='+w+', height='+h+', innerWidth='+w+', innerHeight='+h+', screenX='+x0+', screenY='+y0+', left='+x0+', top='+y0+str_scrollbar);
	}
	return false;
}

// ------------------------------------------------------------------------------------------------------------------------------

function display_video(the_video_name, the_width, the_height, the_caption){
	if (window.screen){
		var w = parseInt(the_width) + 20;
		var h = parseInt(the_height) + 20;
		var x0 = (screen.availWidth - 10 - w)/2;
		var y0 = (screen.availHeight - 30 - h)/2;
		window.open('../_include/_play_video/play_video.html?'+escape(the_video_name)+'&'+the_width+'&'+the_height+'&'+escape(the_caption),'', 'width='+w+', height='+h+', innerWidth='+w+', innerHeight='+h+', screenX='+x0+', screenY='+y0+', left='+x0+', top='+y0);
	}
}


MM_preloadImages("../_images/background_top_dropdown_menu_left.gif", "../_images/background_top_dropdown_menu_right.gif");


// top dropdown menu
$(function(){
	var _top_menu_items = $("ul#top_menu>li");
	_top_menu_items.hover(
		function(){
			$(this).children("a").addClass("over");
			$(this).children("ul").addClass("over");
		},
		function(){
			$(this).children("a").removeClass("over");
			$(this).children("ul").removeClass("over");
		}
	);
});




// email protector
$(function(){
		   
	var $emails = $(".email");
	var real_address;
	
	$emails.each(function(){
		real_address = $(this).text().replace(/\[\-at\-\]/, '@').replace(/\[\-dot\-\]/g, '.');
		$(this).html("<a href='mailto:" + real_address + "' target='_blank'>" + real_address +"</a>");			  
	});
		
});




// lightbox script
// 2010-09-08

$(window).load(function(){
	
	if($(".link_how_we_work").length>0){
		
		$("body").append( get_html_lightbox() );
		
		var _lightbox = $("#lightbox"),
			_shadow = $("#lightbox #lightbox_shadow"),
			_stage = $("#lightbox #lightbox_stage");
			
			
		var _interval_DEFAULT = 3000,
			_duration_DEFAULT = 300;

		var _total,
			_frames = null,
			_index = -1,
			_go = true,
			_direction = 1,
			_timer = null,
			_interval = _interval_DEFAULT,
			_duration = _duration_DEFAULT;

		$.get("../_include/how_we_work.html", function(data){
																					  
			_stage.prepend($("<div/>").append(data).find("ul#images_how_we_work"));
			_stage.append($("<div/>").append(data).find("div#nav_how_we_work"));
			
			_frames = $("ul#images_how_we_work li");
			_total = _frames.length;
			
			$(".link_how_we_work").click(function(){_show();return false;});
			$("#lightbox #lightbox_button_close").click(function(){_hide();return false;});
			
			$("#nav_how_we_work #button_how_we_work_prev").click(function(){
				if(!$(this).hasClass("disabled")) _prev();
				return false;
			});
			$("#nav_how_we_work #button_how_we_work_next").click(function(){
				if(!$(this).hasClass("disabled")) _next();
				return false;
			});

		});

	}

	function _start(){
		_index = -1;
		for(var i=0;i<_total;i++) _frames.eq(i).css({'display':'none', 'opacity':0});

		_go= true;
		_play();
	}
	
	function _end(){
		_go= false;
		if(_timer){
			window.clearTimeout(_timer);
			_timer = null;
		}
		
		_index = -1;
		for(var i=0;i<_total;i++) _frames.eq(i).css({'display':'none', 'opacity':0});
	}
	

	function _move(){
		var _index_0 = _index;
		
		if(_direction>0){
			_index = _index_0 + 1;
			if(_index==_total) _index = 0;
		}else{
			if(_index_0>0) _index = _index_0 - 1;
		}
		
		if( _index !== -1 ) _interval = parseInt(_frames.eq(_index).attr("id").split(":")[1]);
		if(isNaN(_interval)) _interval = _interval_DEFAULT;
	}
	
	
	function _play(){
		
		var _index_0 = _index;
		_move();
		if(_index == -1) return false;
			
		if( _index>_index_0 )
			_frames.eq(_index)
				.css({'display':'block', 'opacity':0})
				.animate(
					{opacity:1},
					_duration,
					"linear",
					function(){
						if(_index_0 !== -1) _frames.eq(_index_0).css({'display':'none', 'opacity':0});
					}
				);
		
		if( _index<_index_0 )
			_frames.eq(_index).css({'display':'block', 'opacity':1});
			_frames.eq(_index_0)
				.css({'display':'block', 'opacity':1})
				.animate(
					{opacity:0},
					_duration,
					"linear",
					function(){
						$(this).css({'display':'none', 'opacity':0});
					}
				);
		
		if(_total>1 && _go){
			if(_timer) window.clearTimeout(_timer);
			_timer = setTimeout(_play, _interval);
		}
		
		if( _index == 0 ){
			$("#nav_how_we_work #button_how_we_work_prev").addClass("disabled");
		}else{
			$("#nav_how_we_work #button_how_we_work_prev").removeClass("disabled");
		}
		
		if( _index == _total-1 ){
			$("#nav_how_we_work #button_how_we_work_next").addClass("disabled");
		}else{
			$("#nav_how_we_work #button_how_we_work_next").removeClass("disabled");
		}
		
		
	}
	
	
	function _pause(){
		_go= false;
		if(_timer){
			window.clearTimeout(_timer);
			_timer = null;
		}
	}
	
	function _prev(){
		_direction = -1;
		_pause();
		_play();
	}

	function _next(){
		_direction = 1;
		_pause();
		_play();
	}
	
	
	
	function _show(){
		_resize();
		_lightbox.css({'visibility':'visible'});
		
		_shadow.animate(
			{opacity:0.5}, 200, "linear", 
			function(){
				_stage.css({'visibility':'visible'});
				_start();
			}
		);
	}
	
	
	function _hide(){
		_end();
		
		_lightbox.css({'visibility':'hidden'});
		_stage.css({'visibility':'hidden'});
		_shadow.css({opacity:0});
	}
	
	
	$(window).resize(function() {
		if( _lightbox.css('visibility') == 'visible' ){_resize();}
	});
	
	function _resize(){
		var _page_sizes = get_page_size(),
			_page_scrolls = get_page_scroll(),
			_top = ( (_page_sizes[3] - _stage.height())/3>20?(_page_sizes[3] - _stage.height())/3:20 ) + _page_scrolls[1];
		_lightbox.css({width:_page_sizes[0], height:_page_sizes[1]});
		_shadow.css({width:_page_sizes[0], height:_page_sizes[1]});
		_stage.css({top:_top});
	}


});



function get_html_lightbox(){
	
	var s="";

	s += "<div id='lightbox'>";
	
	s += "	<div id='lightbox_shadow'><!-- --></div>";
	s += "	<div id='lightbox_stage'>";
	s += "		<a id='lightbox_button_close' href='' onclick='return false;'>Close</a>";
	s += "	</div>";
	
	s += "</div>";
	
	return s;

}


/**
 * getPageSize() by quirksmode.com
 *
 * @return Array Return an array with page width, height and window width, height
 */
function get_page_size() {
	
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}
	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight, yScroll);
	return arrayPageSize;
};

/**
 * getPageScroll() by quirksmode.com
 *
 * @return Array Return an array with x,y page scroll values.
 */
function get_page_scroll() {
	var xScroll, yScroll;
	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
		xScroll = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
		xScroll = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
		xScroll = document.body.scrollLeft;	
	}
	arrayPageScroll = new Array(xScroll,yScroll);
	return arrayPageScroll;
};









// ========================================================================================================================
// swap images 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() {
	ImgRestore_buttons();
	var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
	if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function ImgRestore_buttons() {
  var i,j,x,b,a=document.MM_sr;
  for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc&&(a[i].id!="image_exterior")&&(a[i].id!="image_floor_plan");i++){x.src=x.oSrc;}
}

// ========================================================================================================================
//v1.0
//Copyright 2006 Adobe Systems, Inc. All rights reserved.
function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\?/, ext+'?'); 
  else
    return src + ext;
}

function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
  var str = '<object ';
  for (var i in objAttrs)
    str += i + '="' + objAttrs[i] + '" ';
  str += '>';
  for (var i in params)
    str += '<param name="' + i + '" value="' + params[i] + '" /> ';
  str += '<embed ';
  for (var i in embedAttrs)
    str += i + '="' + embedAttrs[i] + '" ';
  str += ' ></embed></object>';

  document.write(str);
}

function AC_FL_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_SW_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();    

    switch (currArg){	
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie":	
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblClick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace": 
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "id":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}




function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}

Open in new window

0
VAN_AL
Asked:
VAN_AL
  • 20
  • 20
1 Solution
 
Michel PlungjanIT ExpertCommented:
<div id="nav_how_we_work">
    <a href="" id="button_how_we_work_prev">Prev</a>
    |
    <a href="" id="button_how_we_work_pause">Pause</a>
    |
    <a href="" id="button_how_we_work_next">Next</a>
    <div style="clear:both"><!-- --></div>
</div>

$("#nav_how_we_work #button_how_we_work_pause").click(function(){
  if(!$(this).hasClass("disabled")) _pause();
  return false;
});

Do you want a toggle???

0
 
VAN_ALAuthor Commented:
Hi Thanks for this,

So where exactly do I add this code? I added it between this line and it seems to work, however is there a way to change the pause link into a resume once pause is clicked?

Added code here:


function _play(){
		
		var _index_0 = _index;
		_move();
		if(_index == -1) return false;
			
		if( _index>_index_0 )
			_frames.eq(_index)
				.css({'display':'block', 'opacity':0})
				.animate(
					{opacity:1},
					_duration,
					"linear",
					function(){
						if(_index_0 !== -1) _frames.eq(_index_0).css({'display':'none', 'opacity':0});
					}
				);
		
		if( _index<_index_0 )
			_frames.eq(_index).css({'display':'block', 'opacity':1});
			_frames.eq(_index_0)
				.css({'display':'block', 'opacity':1})
				.animate(
					{opacity:0},
					_duration,
					"linear",
					function(){
						$(this).css({'display':'none', 'opacity':0});
					}
				);
		
		if(_total>1 && _go){
			if(_timer) window.clearTimeout(_timer);
			_timer = setTimeout(_play, _interval);
		}
		
		if( _index == 0 ){
			$("#nav_how_we_work #button_how_we_work_prev").addClass("disabled");
		}else{
			$("#nav_how_we_work #button_how_we_work_prev").removeClass("disabled");
		}
		
		if( _index == _total-1 ){
			$("#nav_how_we_work #button_how_we_work_next").addClass("disabled");
		}else{
			$("#nav_how_we_work #button_how_we_work_next").removeClass("disabled");
		}
		$("#nav_how_we_work #button_how_we_work_pause").click(function(){
  	if(!$(this).hasClass("disabled")) _pause();
  	return false;
	});
		
	}
	
	
	

	
	
	function _pause(){
		_go= false;
		if(_timer){
			window.clearTimeout(_timer);
			_timer = null;
		}
	}
	
	function _prev(){
		_direction = -1;
		_pause();
		_play();
	}

	function _next(){
		_direction = 1;
		_pause();
		_play();
	}

Open in new window

0
 
VAN_ALAuthor Commented:
P.s. what's a toggle?
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Michel PlungjanIT ExpertCommented:
On/off
0
 
VAN_ALAuthor Commented:
Yes, that's exactly what I need, how do I do that?
0
 
Michel PlungjanIT ExpertCommented:
I'll show you later. Jquery does have a toggle too
0
 
VAN_ALAuthor Commented:
Ok thanks, hopefully today right?
0
 
Michel PlungjanIT ExpertCommented:
Here. I am off to bed.
 http://api.jquery.com/toggle/
0
 
VAN_ALAuthor Commented:
Ok thanks for your help, hopefully someone else comes along to assist.

I want to have the animation play the whole time unless someone clicks on pause, but then if they click on it again it resumes. For some reason when i click on the next or previous links the animation stops, how do I get that to resume like 3 seconds later?
0
 
Michel PlungjanIT ExpertCommented:
Call start in a timeout. Sorry but it is really bed time and I do not have my pc on
0
 
VAN_ALAuthor Commented:
Ok thanks for your help, i'll try that and let you know.
0
 
Michel PlungjanIT ExpertCommented:
My apologies, jquery toggle shows or hides things..

You wanted something more like this

add a class to change the button to depressed

$("#nav_how_we_work #button_how_we_work_pause").click(function(){
  $(this).toggleClass("pausing");
  if($(this).hasClass("pausing")) {
   $(this).html("Pause");
    _play();
  }
  else {
    $(this).html("Play");
    _pause();
  }
  return false;
});
0
 
VAN_ALAuthor Commented:
Hi Thanks for this,

The last code you posted works great, the only problem is doesn't play the animation again once you hit play, how do I get that to work? Also sorry for the late reply.
0
 
Michel PlungjanIT ExpertCommented:
No problem. Do you have a URL I can look at?
0
 
VAN_ALAuthor Commented:
Here you go: http://bit.ly/h8biNf
0
 
Michel PlungjanIT ExpertCommented:
Fatal error: Call to undefined function display_page_footer() in ....testsite/home/index.php on line 53

But I see I can run the animation anyway
0
 
VAN_ALAuthor Commented:
Yea don't mind that, click on the red triangle, that's where my issue is.
0
 
Michel PlungjanIT ExpertCommented:
I look in the source

$("#nav_how_we_work #button_how_we_work_pause").click(function(){

// not the code I posted

});
0
 
VAN_ALAuthor Commented:
Let me check, i'm working locally and uploaded that just for you to see.
0
 
Michel PlungjanIT ExpertCommented:
It is in the _include/script.js
0
 
VAN_ALAuthor Commented:
Ok check it now.
0
 
VAN_ALAuthor Commented:
You still around?
0
 
Michel PlungjanIT ExpertCommented:
Can I have breakfast too? :)
0
 
Michel PlungjanIT ExpertCommented:
Always an issue with a toogle - what do we toggle from and are we already toggled

So logic:

Initial state: button says Pause, class is ""

Click the button, Button change to Play, class is "pausing"

Click again, button change to Pause, class is ""


$("#nav_how_we_work #button_how_we_work_pause").click(function(){
  if(!$(this).hasClass("pausing")) { // If we are not pausing
    $(this).html("Play"); // chance the HTML to play
    _pause(); // pause the animation
  }
  else {
    $(this).html("Pause"); // change text to Pause
    _play(); // play...
  }
  $(this).toggleClass("pausing"); // if there was no pause class, add it, if there is, remove it
  return false;
});
0
 
VAN_ALAuthor Commented:
Yes sorry :)

Ok so I don't know about the last post you posted, it's the same code as before, where do I do the change?
0
 
Michel PlungjanIT ExpertCommented:
The last post has some of the logic reversed. It replaces the other code.
0
 
VAN_ALAuthor Commented:
Unfortunetly the last code doesn't do what I want it to do, even though it does at the toggle but that's all it does because once you hit play it plays the next frame and stops so basically when clicking on play it goes 'next' and stops, I want it to resume the animation.
0
 
Michel PlungjanIT ExpertCommented:
Okee then play is not the call. I do not know the script you use so I made some assumptions. I'll look in a few hours
0
 
Michel PlungjanIT ExpertCommented:
I still see old code on the site
0
 
Michel PlungjanIT ExpertCommented:
We need a GO too!!!



$("#nav_how_we_work #button_how_we_work_pause").click(function(){
  if(!$(this).hasClass("pausing")) { // If we are not pausing
    $(this).html("Play"); // chance the HTML to play
    _pause(); // pause the animation
  }
  else {
    $(this).html("Pause"); // change text to Pause
   go= true;
    _play(); // play...
  }
  $(this).toggleClass("pausing"); // if there was no pause class, add it, if there is, remove it
  return false;
});
0
 
VAN_ALAuthor Commented:
I added the new code, please check it, I think it's in the right place??
0
 
Michel PlungjanIT ExpertCommented:
Sigh.... I missed an underscore
_go= true;

not

go= true;

Irritating script :)
0
 
VAN_ALAuthor Commented:
Thank you thank you!

Just to be fare, I have another question related to modifying this same script but on a different page, just want to be able to click on an image and open an animation, but i don't know how to modify the script so that i can add 4 links as it only opens the current one.
see here: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26856101.html
0
 
VAN_ALAuthor Commented:
Was very helpful and dedicated to answering my question.
0
 
Michel PlungjanIT ExpertCommented:
You are welcome :)
0
 
VAN_ALAuthor Commented:
@mplungjan I could really use your help with my other question: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26856101.html
0
 
Michel PlungjanIT ExpertCommented:
I'll have a look later. If urgent click the "request attention" link in the other question
0
 
VAN_ALAuthor Commented:
I don't see request for attention link?
0
 
Michel PlungjanIT ExpertCommented:
In the area of your question.. Anyway I am online
0
 
VAN_ALAuthor Commented:
Oh ok I didn't find it, if you don't mind taking a look at my question i would really appreciate it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 20
  • 20
Tackle projects and never again get stuck behind a technical roadblock.
Join Now