Solved

Add a Pause Link to JS Animation

Posted on 2011-02-24
40
407 Views
Last Modified: 2012-05-11
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
Comment
Question by:VAN_AL
  • 20
  • 20
40 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34978123
<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
 
LVL 1

Author Comment

by:VAN_AL
ID: 34983063
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 34983066
P.s. what's a toggle?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34983070
On/off
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34983146
Yes, that's exactly what I need, how do I do that?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34983330
I'll show you later. Jquery does have a toggle too
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34983448
Ok thanks, hopefully today right?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34983545
Here. I am off to bed.
 http://api.jquery.com/toggle/
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34983837
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34983944
Call start in a timeout. Sorry but it is really bed time and I do not have my pc on
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34984156
Ok thanks for your help, i'll try that and let you know.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34986071
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 34994182
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34994501
No problem. Do you have a URL I can look at?
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34994630
Here you go: http://bit.ly/h8biNf
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34994807
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 34994811
Yea don't mind that, click on the red triangle, that's where my issue is.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34994820
I look in the source

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

// not the code I posted

});
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34994824
Let me check, i'm working locally and uploaded that just for you to see.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34994827
It is in the _include/script.js
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:VAN_AL
ID: 34994840
Ok check it now.
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34995020
You still around?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34995196
Can I have breakfast too? :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34995243
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 34995278
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34995508
The last post has some of the logic reversed. It replaces the other code.
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35002143
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35004071
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35004438
I still see old code on the site
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 35004443
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 35009829
I added the new code, please check it, I think it's in the right place??
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35010030
Sigh.... I missed an underscore
_go= true;

not

go= true;

Irritating script :)
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35010374
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
 
LVL 1

Author Closing Comment

by:VAN_AL
ID: 35010386
Was very helpful and dedicated to answering my question.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35010498
You are welcome :)
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35014500
@mplungjan I could really use your help with my other question: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26856101.html
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35014527
I'll have a look later. If urgent click the "request attention" link in the other question
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35014876
I don't see request for attention link?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35014978
In the area of your question.. Anyway I am online
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35015080
Oh ok I didn't find it, if you don't mind taking a look at my question i would really appreciate it.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now