JavaScript - Change Text On Click Toggle

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!!!!

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 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.

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?

Hi

I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

Here code I have now....

Code:

<style type="text/css" media="screen">

#wrapper {
 background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
  width: 470px;
  margin: 0 auto;
}

a#sun{
  background: url('_assets/images/sun-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
  
}

a#sun:hover,
a#sun.active {
  background: url('_assets/images/sun.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#plane {
  background: url('_assets/images/plane-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#plane:hover,
a#plane.active {
  background: url('_assets/images/plane.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#nano {
  background: url('_assets/images/nano-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#nano:hover,
a#nano.active {
  background: url('_assets/images/nano.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}

#popuptext a {
color: #ff6600;
padding: 0 30px; 
}




</style>


</head>
<body>

<div id="wrapper">
<div id="navigation">
  <a id="sun" href="#"></a>
  <a id="plane" href="#"></a>
  <a id="nano" href="#"></a>
</div>

<div style="clear:both"></div>
  <div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a> 

</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});
</script>

What jquery or javascript code do I need to do this?

thanks,
chaser

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.

Hey guys, so i have a small problem.
I have a comment area on my site.
And i have the comments set to a specific height, so it only shows so much text.
And i have a "read more ..." button

How would i make it so that when I click the read more button.
The CSS for the comment div changes to height:auto;

This is what i currently have, and its not working.

CSS
Code:

.tag_desc { clear:both; height:30px; overflow:hidden;  }

HTML
Code:

<div class="tag_read_more"><a onclick="document.getElementsByClassName('tag_desc').style.height = 'auto';">Read more ...</a></div>

Thanks in advance !!

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

Hello

I'm a beginner when it comes to javascript. I found a nice script that did what I wanted, which was have 3 "buttons" that on hover change a different image to the side of them. However, I also would like the button that if clicked to go to a section of the website - so an internal link.
I was slightly confused when reading that to have a link in javascript isn't good practice. How could I achieve this?

I would really appreciate any help, thank you

below is the code

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
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() { //v3.0
  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];}
}
//-->
</script>
</head>

<body bgcolor="FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('information-white-alt.png','training-quote.png','training-white-alt.png','consultancy-quote.png','information-white-alt.png','information-quote.png')">
<table width="350" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('b1up','','information-white-alt.png','biganchor','','information-quote.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b1up" width="270" height="74" border="0" id="b1up"></a></td>
    <td rowspan="3"><div align="center"><img src="home-statement.png" name="biganchor" width="500" height="222" id="biganchor"></div></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','training-quote.png','b2up','','training-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="training-white.png" name="b2up" width="270" height="74" border="0" id="b2up"></a></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','consultancy-quote.png','b3up','','information-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b3up" width="270" height="74" border="0" id="b3up"></a></td>
  </tr>
</table>

I wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it?

Code:

				function quote(id) {
					var shout = document.getElementById('shout');
					var currentShout = '; '.shout.value;
					var prefix = '@'.id;
					shout.value = prefix.currentShout;
				}

I call it by
Code:

<a href="#" onclick="javascript: quote('2');">Comment</a>

the input that changes is written as
Code:

						<input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);">

Doing a project for class and we are not allowed to use any libraries. That being said, I am having a problem getting my information to appear. I have looked over my code and have no problem what the problem is. I am a novice, first real class with in depth javascript implementation and it all appears on my final assignment.

What I am trying to get done is, when I click on one of the 4 images on the left column on my queue.html only those episodes of that show appear in the right column. So If I click on the Modern Family image only the 5 episdoes will appear on the right. Same for the other two. What happens with mine, is nothing. I spent all night on the code trying to get it to work and nothing is happening. Below are some of the parameters of this assignment.

-*‐ The queue page is a two-column layout. Column one (left) contains a list of saved shows, and column two (right) contains a list of episodes
-*‐ The queue page should use DOM scripting to update data, and at no point should a page refresh occur

I think I used the wrong element somewhere, but cant for the life of me figure it out. I hope someone can point me in the right direction.

http://sulley.dm.ucf.edu/~zz669709/d...nt3/queue.html - Queue Page(working on Modern Family function, other two once I get this one working)

http://sulley.dm.ucf.edu/~zz669709/d...ment3/js/a3.js - Javascript(Disregard Modal Window stuff, still working on that)

http://sulley.dm.ucf.edu/~zz669709/d...css/styles.css - css

Thank you.

hi master.

I need some help.

I need a function that change multiple images on click maybe by id
Ex.:
PHP Code:
<table>
.....
<td><img src="folder1/image1.jpg"></td>
<td><img src="folder1/image2.jpg"></td>
<td><img src="folder1/image3.jpg"></td>

<td><img src="folder2/image1.jpg"></td>
<td><img src="folder2/image2.jpg"></td>
<td><img src="folder2/image3.jpg"></td>
.....
</table> 


NOW BUTTONS (IMAGES)
PHP Code:
<!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>
<div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> 
<div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> 


really, I don't know much about javascript, I'm waiting for your help.
actually, I have loaded jquery-1.2.6.min.js

Greetings,

In a vertical expanding menu, I'm looking to change where the user clicks in order to expand the menu to the submenu. In short I want the user to be able to click on the parent menu item text and have that action expose the submenu children text items. Please see attached .png for visual.

At present, the user must click on an arrow icon next to the parent menu item text to expand, but I'd also like the parent menu item to expand showing its children when clicked. All the parent menu item does right now is call in the linked page; it does not expand the menu.

I've attached the .js in the 3 attached .txt files. Please let me know if there's anything else I should add/send.


As far as I can tell the name of the arrow being used to expand menu can be seen in this html...

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

<td class="wbtTdArrow" style="padding: 2px; border: 0px none;">
<a class="wbtArrowLink" title="Expand Welcome submenu" href="javascript:void(0)">
<img class="wbtArrowImg" src="images/collapse.png" alt="Expand Welcome submenu" style="width: 5px; height: 9px;">
</a>
</td>


Here's the html containing the name of the item I'd like to use in addition to the arrow...

<td class="wbtTdSelected">
<img src="images/spacer.gif" style="width: 0px; height: 0px;" alt="Selected menu item">
</td>

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

I have 4 images and these images are changing automatically with duration of 2 seconds with show hide animation.

and there are 4 bullets with mentioned above 4 images. these bullets are highlighting for example if image number 1 is showing than bullet number 1 is highlighting. same thing for other 3 bullets and images


please send me the code for it