JavaScript - On Click, Start A Timer To Swap A Button/image And Also Show A Content Locker

Hey guys,

I'm looking for a way to disable the popup that appears by default when visitors try to leave a webpage that has my cpalead content locker widget on it. I want to disable all cases of it happening.

Thanks

Hello all I am new here but this place looked great and like one of the only places where I could find the answer to my question.

I have created a page which pulls search results from various sites using PHP. It displays each result in a row in a table upon running.

I wanted to add a button saying "More information" at which point, a div would appear and load the associated link for that search result within an iframe within the newly appeared div. I've been able to get a div appear and disappear on button click but, I couldn't get it to dynamically load an iframe on click with the associated search results link.

Any suggestions are greatly appreciated. Also let me know if you need more information before assisting. Thanks!

I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image.

I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click".

The only code sources i have found will swap images in the same table area and not to any image existing in the entire document.

thanx

Hey all,

I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help.

Here is my code for the radio buttons.

Thanks.

Code:

<tr valign="top">
	<td id="community-legal-services-logo-selection">
		<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
		<p><label for="cls-mono">
			<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
			<?php _e('Mono'); ?></label>
		</p>
		<p><label for="cls-color">
			<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
			<?php _e('Colour'); ?></label>
		</p>
		<p><label for="cls-none">
			<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
			<?php _e('None'); ?></label>
		</p>
		<p>
			<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
		</p>
		<p>
			<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
		</p>
	</td>
	<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
		<td>
			<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
		</td>
	<?php } ?>	
</tr>

New to JavaScript so PLEASE bear with me. Trying hard to learn. My client specifically asked for a type of menu (scroll over a thumbnail and you see a large photo in the column next to it. And of course the thumbnail is clickable to new page. I am using this Jeremy Keith script:


PHP Code:
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jeremy Keith / Anonymous | http://www.alistapart.com/articles/imagegallery/ */
function showPic(whichpic) {
  if (document.getElementById) {
    document.getElementById('placeholder').src = whichpic.href;
    if (whichpic.title) {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    } else {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
  } else {
  return true;
  }
}

var previousToggle=null;
function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block";
    if(previousToggle)previousToggle.style.display="none";
    previousToggle=e;
  }
  return true;
} 


and it works fine, except that I can't figure out how to make it showpic on mouseover and still go to new URL (basic link to a page) onclick.

Here's a link (one of 8)in the body:

PHP Code:
<a onmouseover="toggleMe('para1'); showPic(this); return false;"  href="design.html" title="blah blah blah">
<img src="images/pix_smaller3.jpg"  width="70" height="70"></a> 


It either links to new page with the href="design.html", or swaps in larger pic if I href to the img file, but I can't seem to get BOTH to work. I obviously want the <a> to be to a new page, not the larger img. Shouldn't showPic take care of this? Where is showPic getting its imgs from?

I know that this can't be that complicated, but I have been up for 2 nights trying to figure this out. Any help appreciated...

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>

I have a question: look at the following html code:
/****html***/
<div class='class1'>text1</div>
<div class='class1'>text2</div>
<div class='class1'>text3</div>
......
/**html***/
If I want to change the background color of the textn by clicking it, what should I do instead of inserting "onclick='someFunction()'" in every div?

We have a testing application that displays a timer on the screen using Javascript. It seems to be working very well. However, someone brought to my attention today that if you click-and-hold the browsers close button in the upper right corner (the X button in Windows) that the timer will stop. You can then slide your mouse cursor off of the button, and the browser will not close, but the timer was stopped for the entire time that the button was being held down. This also works for the Minimize and Maximize buttons.

Is there any way at all to take care of this problem?

Thanks,
Jesse

Here is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work.


window.onload = defineMarquee;

var timeID;

var marqueeTxt = new Array();

var marqueeOff = true;

function defineMarquee(){

var topValue = 0;

var allElems = document.getElementsByTagName("*");

for (var i=0; i < allElems.length; i++){
if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]);
}

for (i = 0; i < marqueeTxt.length; i++) {
if (marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top");
} else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
}
}

document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;

}

function startMarquee(){

if (marqueeOff == true) {
timeID = setInterval("moveMarquee()", 50);
marqueeOff = false;
}

}

function stopMarquee(){

clearInterval(timeID);
marqueeOff = true;

}

function moveMarquee(){

var topPos = 0;

for (i=0; i < marqueeTxt.length; i++){
if (marqueeTxt[i].getComputedStyle) {
topPos = parseInt(marqueeTxt[i].getPropertyValue("top"));
} else
if (marqueeTxt[i].currentStyle) {
topPos = parseInt(marqueeTxt[i].currentStyle("top"));
}

if (topPos < -110) {
topPos = 700;
} else {
topPos -= 1;
}

marqueeTxt[i].style.top = topPos + "px";

}
}

Hi there, I have this problem where I need to swap the content of two different elements every time i press the run button. The first element in the HTML code is called id="one" and the second is called id="two".

so where element id = "one" is, id = "two" should replace it, and when i press run again id = "two" should be replaced by "id= "one", and so-forth..

I've tried putting the elements into a variable and then just basically typing code that basically looks like

id two = id one
id one = id two

but that isn't working. Is there something more professional looking that someone could help me with??, thanks





Reply With Quote




01-21-2015, 07:15 PM #2
Dormilich View Profile View Forum Posts

Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts

Swap Content Of Two Different Elements HELP - JavaScript | Dream.In.Code

Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want......

A swf "this will be the default flash you see"

underneath that flash I want 3 text links named.....
Flash1
Flash2
Flash3


when you click flash1, 2, or 3 I want it to swap out the Current flash video
with a different one. This way The user can watch all the flash vids on the
same page, rather than a separate page for each flash.

I found a way to swap them out using iframe, however that requires me to
make a separate html page for each of my swf's themselves. I dont want to do that.

Plz if someone could help me I would greatly appreciate it! I hope I am posting
this in the correct section, I know swfobject involves javascripting so thats
why I'm posting here. Not that your method HAS to involve swfobject to
embed. If someone can give me code that I can just copy/paste into a blank
page in dreamweaver (and I would adjust the embded swf file name and size
etc obviously) and have it work that would be fantastic.

thank you

Hello!

I was looking for a way to pause animated gifs per command, and I found a thread in this forum with the appropriate instruction: http://www.codingforums.com/showthread.php?t=177543

I used the code example from there and adjusted it to my needs on my website: http://www.baelavay.com/v6

The code works as it should! (The button is in the top-left corner)

But there are 2 things I would want to improve. Unfortunately I can't fix them myself, maybe you can help


1)

I don't want to use a button for pausing the gifs. Instead, I want the gifs to pause when Code:

<img id="tiles-img" ...>

is clicked.

So what I tried is to replace the line Code:

obj=document.getElementById('button');

with Code:

obj=document.getElementById('tiles-img');

But then, it doesn't work anymore. Why?


2) (*edit: RESOLVED)

The button only starts working from the 2nd click on? (No gif pausing at 1st click)


Thank you in advance.

Hi
im new to javascript , i have a game when 2 or more players enter the game a button appears one of the players clicks the button the game starts, what i want to do is when 2 or more players join the game i want the game to start, and not start by using the button.
here is the code for the button.

PHP Code:
if(($hand == '') && ($numplayers > 1)){ ?>
var betbuttons = '<';


 betbuttons += 'input type="button" name="Button" value="<? echo addslashes($BUTTON_START); ?>" class="betbuttons" onclick="push_action(\'start\');">';

Hello guys, first post so please be kind.

Usually try and find a solution and edit to work for me but this time its a little trickier.

I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page.

ideally what I want is say 3 buttons.

button1img button2img button3img <// that when clicked control

<div id=target><this target content is now set to 2></div> //and toggle between options

and only one at a time can be on.

The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page.

if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently.

i understand this is a little trickier, im hoping it is possible.

cheers
steve

i'm still a relative noob and this has me stuck -
i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is -

protected function getToolbar()
{
$options = array();
$user = JFactory::getUser();

$create_ms = $user->authorise('core.create', 'com_pfmilestones');
$create_task = $user->authorise('core.create', 'com_pftasks');


$options[] = array(
'text' => 'JSAVE',
'task' => $this->getName() . '.save');

$options[] = array(
'text' => 'Save as new project',
'task' => $this->getName() . '.save2copy',
'options' => array('access' => ($this->item->id > 0)));


PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok'));

item used as template is id=8

any help or suggestions would be greatly appreciated..