JavaScript - Change Link Text And Toggle Checkboxes On/off

I can I take a code like this:
Code:

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
} 
</script>

<a href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">This is Hidden Text</div>

But make it so you see "Show" before you click, then change the text to "Hide" once you click the link?

Hi,

Im using a toggle script on my site. Im trying to add functionality. Currently, when you click on a toggle, that particular toggle expands and changes the toggle image.

Ive made it so when you click the text on the top left, all the toggles open or close. However, the toggle image doesnt change (+ / -)

Here is my code:
Code:

$(document).ready(function(){
	
	$(".toggle_container").hide();
 
	$("h2.trigger").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow,");
	});


	$("h2.trigger2").toggle(function(){
		$(".toggle_container").slideDown(); 
		}, function () {
		$(".toggle_container").slideUp();
	});

});

Here is my site: http://www.zombiemod.com/sm/test6.html

Just to explain it better. When you click on the center toggles, the background image changes. When you click on "Web Design and Development" on the left, the background images dont change. Im trying to get it so it changes as well.

Can anyone help with this?

I'm trying to make a page where you can change a page's layout through 2 separate CSS's via a button. i want to button to change text when it toggles the layouts as well. i have no clue how to do this with an entire CSS file, but here is something i made to change the background. could i use this logic to change the CSS of a page?

HTML
<in Code:

<input type="button" value="change layout" onclick="toggle()" />

JavaScript
Code:

var flag = 0; function toggle(){
 if(flag==0){     
document.getElementById("container").style.backgroundImage="blah.jpg"; 
    flag=1; } else if(flag==1){     
document.getElementById("container").style.backgroundImage="blah2.jpg"; 
    flag=0; } }

Hi

Complete novice with Java so need some help please!

I want to put a button on a website that when clicked changes the background. The button needs to be an image.

For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off")

I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click.

I guess it needs an if/else statement but not sure.

Thanks for any help!!!!

Hi Coders,

I was wondering if anyone knows how you would create a link when clicked will change the width of the content.

I have a feeling this will use jQuery?

E.g.

A link saying 'expand' will change the width of the body to 1000px and change the link to 'contract'.

When the link 'contract' is clicked it will change the width back to 800px and change the link to 'expand'

Thanks in advance!
Haydn.

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

Hi there! I would REALLY appreciate any help!

I've got a script that toggles the visibility of a div on "dashboard.html":

Code:

$(document).ready(function(){

        $("#add_networks_wrapper, .remove_box").hide();
	$(".toggle_add_networks").show();
	
	$('.toggle_add_networks').click(function(){
	$("#add_networks_wrapper, .remove_box").slideToggle();
	});

});

On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.

What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.

Any help would be very appreciated!

i have a little function that uses a checkbox to turn off or on a map layer

Code:

function toggleGeoXML(id, checked) {
  if (checked) {
    var geoXml = new GGeoXml(layers[id].url);
    layers[id].geoXml = geoXml;

    if (layers[id].zoom) {
      map.setZoom(layers[id].zoom);
    } else {
      map.setZoom(1);
    }
    if (layers[id].lat && layers[id].lng) {
      map.setCenter(new GLatLng(layers[id].lat, layers[id].lng));
    } else {
      map.setCenter(new GLatLng(39.909736,-35.859375));
    }
    map.addOverlay(geoXml);
  } else if (layers[id].geoXml) {
    map.removeOverlay(layers[id].geoXml);
  }
}

i'm trying to use an image instead of a checkbox (can be a styled button or a link)

the problem is trying to get rid of the "checked" part of the function and integrate it with a normal link but still toggle it off and on

this check box input works

Code:

<input type="checkbox" value="" id="name id of layer" onClick="toggleGeoXML(this.id,this.checked)" />

ive seen loads of ways of showing and hiding layers but nothing that seems relevant to this instance

ive tried loads of different things like

Code:

<a id="name id of layer" href="#"  onClick="toggleGeoXML(this.id,this.checked);return false;">on/off</a>

also removing the checked part in the function - the link turns layer on but then wont turn it off

ie:
Code:

<a id="name id of layer" href="#"  onClick="toggleGeoXML(this.id);return false;">on/off</a>

i'm sure its something stupid but ive been looking at this all afternoon and just keep going round in circles

thx

Hi, I basically want my program to do this.
Show a checkbox list with names of the coins. The user picks the coins he/she has and presses submit.
Then prompt boxes show up asking how many toonies you have (if the user selected toonies) and it does that for each one that has been checked marked.

I've tried this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Change Calculator</title>
</head>
<body bgcolor="lightgreen">
<center>
&nbsp
<h1>What coins do you have?</h1>
<html>
<form name="form1" onsubmit="return validate(this)">
<input type="checkbox" name="coins" value="Toonies">Toonies
<input type="checkbox" name="coins" value="Loonies">Loonies
<input type="checkbox" name="coins" value="Quarters">Quarters
<input type="checkbox" name="coins" value="Dimes">Dimes
<input type="checkbox" name="coins" value="Nickels">Nickels
<input type="checkbox" name="coins" value="Pennies">Pennies
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</center>
</html>
<script language="JavaScript" type="text/javascript">
<!--My Change calculator by: Arik Chowdhury//-->
function validate(form1) {
var coinslist = "";
with(document.form1) {
for(var i = 0; i < coins.length; i++){
if(coins[i].checked) {
coinslist += coins[i].value + "\n";
}
}
}
if(coinslist == "") {
alert("Select coins");
} else {
prompt(coinslist);
}
return false;
}
var toonies
var loonies
var quarters
var dimes
var pennies
var nickels
</script>
</body>
</html>

Hi,
here is what I am trying to do, mind if I sound simple this is my first major javascript attempt.

You click the checkbox and it changes a link. You click the checkbox again and it changes it back.

So you have a page with a link :

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN" id="pay"><img src="go.gif"></a>

and a checkbox :

<a nohref style="cursorointer;color:blue;text-decoration:underline" onclick="changeTarget()"><input type="checkbox" OnClick="changeTarget()" checked="yes" name="opt-in" id="opt-in" align="center" /></a> </p>

Clicking the checkbox runs the javascript function ChangeTarget().

Here is what I want the javascript to do:
Code:

1. Write current pay value to variable
2. Compare variable to paypal link 
  -3. change to clickbank link
  -else change to paypal link.

Here is the code I have tried that doesnt work:

Code:

<script type="text/javascript">
var link = document.getElementById('pay');
function changeTarget()

if(link == "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN")
	document.getElementById('pay').href="http://1.60years.pay.clickbank.net";	 
else
	document.getElementById('pay').href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN"; 
</script>

Any help would be very much appreciated, I don't know why it isnt working. It just doesnt do anything when you click it.

I know the following DOES work, but it only changes the link to the value chosen... no way of changing it back when you click the checkbox a second time.

Code:

//WORKING CODE
<script type="text/javascript">
function changeTarget()
{
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
}
</script>

I wanted to toggle text by using a JavaScript.

I used the following script:

Code:

		function toggle_visibility(id) {
		 var e = document.getElementById(id);
		 e.style.display = ((e.style.display!='none') ? 'none' : 'block');
		 }

and

Code:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

for every element I wanted to hide by clicking the text.

It works fine, but the content of the div is already displayed when loading the page itself. I want it to be hidden first, and only visible when you blick the text. Is this possible?

Hello,

I have a bit of javascript that is supposed to change picture and its accompanying text when you hover over a bit of link text in another area of the page. This is working, however, the text is toggling without the picture due to an invisible area next to each link. I am not sure if it's an issue with applying my javascript to another bit of code or what.

Here is the code that I have that flips the text:
Code:

<script type="text/javascript">
function tabOver(which)
{
    for ( var d = 1; d <= 31; ++d )
    {
        document.getElementById("TAB"+d).style.display 
           = ( d == which ) ? "block" : "none";
    }
}
</script>

and here is the bit that flips the pics:
Code:

<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("photos/aes1.jpg","photos/aes2.jpg","photos/aes3.jpg","photos/aes4.jpg","photos/aes5.jpg")
</script>

And here is the html where they show up:
Code:

<div id="mainimg-staff"><a href="javascript:warp()"><img src="img/select-aes.gif" name="targetimage" border=0></a>

<div id="TABHOLDER">
	
    <div id="TAB1" class="tabbed" style="display: block;">
       &nbsp;
    </div>


   <div id="TAB2" class="tabbed">
       <h1>Cheryl Lyon</h1>
<ul>
	<li> Basic facials and skin treatments
	<li> Waxing
	<li> Specializing in naturopathic facial treatments
</ul>
    </div>


<div id="TAB3" class="tabbed">
       <h1>Jackie T.</h1>
<ul>
	<li> 10+ years experience
	<li> Facials and skin treatments
	<li> Waxing
	<li> Specializing in <em>Extreme</em> eyelash extensions
</ul>
    </div>

(there are a lot more text bits but I only included 2 to keep this short)

Finally, here is the link that is making all this wonderful stuff happen:
Code:

<div style="left: 100px;" onmouseover="tabOver(2);"><a href="staff-aes.shtml" onMouseover="changeimage(myimages[0],this.href)">Cheryl Lyon</a></div>

Do you see how I combined the pic and text in one code? I promise you that it is on accident that this is working at all.

Could this be a style issue and not a javascript issue? I can't find anything in my css that will fix this.

Hi there!

Okay, here is my scenario:

I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).

The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.

Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately.

Highly appreciate any help/answers/feedback!

Hello
I need script that change link after first click

for example:

<a href=URL1 target=_blank><img src=....></img></a>

After click on this image , URL1 changes to URL2 and visitor when click on it again and again , it goes to URL2


Regards

Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS.

When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this...

Thanks for yuor time!