JavaScript - Tricky Onclick Div Swap And Button Change With Toggle!

hello friends I'm a newbie..

I need a little help. Im using big images in my website. I want a javascript to toggle the image size from "Original size to fit with resolution of screen" and vice versa.


It should be onclick function like this

<img id="blahblah" src="myimage.jpg" onClick="resize();" />

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

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?

Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again.

Code:

   <script type="text/javascript"> 
      $(document).ready(function(){ 
   $('.accordion-content').hide(); 
   //toggle the componenet with class accordion 
   $('.accordion-toggle').click(function(){ 
      //$(this).toggleClass('toggle-accordion-active'); 
      $(this).next('.accordion-content').slideToggle(300); 
   }); 
   $('#accordion-expand-all').click(function(){ 
      $('.accordion-content').slideToggle(300); 
   }); 
      }); 
    </script>

Code:

<p><a id="accordion-expand-all" href="#">Show</a></p>

I have one image on a page and I am trying to mix 2 javascripts actions on that image:
- the first one is an automatic daily change of images (3 different images in this example)
- the second one is the display of the same image in bigger when the mouse is over it.
The total of images are 6 (2 different sizes for 3 images).

I have made a search but I didn't find the solution. Here is the code (the daily change works but not the rollover.
Thank you to correct it or giving an other solution. (My level in Javascript: low)

[CODE]<SCRIPT LANGUAGE="JavaScript">
function todaysPhoto(){
var i= 3 ;
var todaysFoto=new Array();
todaysFoto[1]="img1_small.jpg";
todaysFoto[2]="img2_small.jpg";
todaysFoto[3]="img3_small.jpg";
var todaysPic=new Array();
todaysPic[1]="img1_big.jpg";
todaysPic[2]="img2_big.jpg";
todaysPic[3]="img3_big.jpg";

t=new Date().getTime();
var days=Math.floor(t / 86400000) % i+1;
document.getElementById("todaysfoto").src="images/photos/"+todaysFoto[days];

function SwapImg(){
document.todaysfoto.src ="images/photos/"+todaysPic[days];
return true;}

function SwapBack(){
document.todaysfoto.src ="images/photos/"+todaysFoto[days];
return true;}
</SCRIPT>

<body onload="todaysPhoto()">
<a href="" onmouseover="SwapImg()" onmouseout="SwapBack()">
<img name="todaysfoto" width="150px" height="100px" id ="todaysfoto" /></a>[CODE]

Hi,

I have a textual "link" that, when clicked, I want the text to change, and I want a number of checkboxes to be toggled on or off. Here's my code. Currently, I just have the text changing - I don't know how to simultaneously check/uncheck checkboxes.

Code:

<head>
	<script language="JavaScript" type="text/JavaScript">
		
                <!-- toggle off and on, currently unused -->
		function checkAll(checkname, exby) 
		{
			for (i = 0; i < checkname.length; i++)
			checkname[i].checked = exby.checked? true:false
		}

                <!-- changes text on click, currently used -->
		function exp(obj) 
		{
			if(obj.oldText)
			{
				obj.innerHTML = obj.oldText;
				obj.oldText = null;
			} 
			else 
			{
				obj.oldText = obj.innerHTML;
				obj.innerHTML = 'Check All';
				
			}
		}
	</script>
</head>
<body>
					<div id="checkboxes">
						<table bgcolor="#DCDCDC" cellpadding="10">
						<tr><th colspan="11" align="left">
						<a href="#" onclick="javascript:exp(this);">Clear All</a><br/>
						</th></tr>
						<tr align="center">
						<td>Check1
						<br><input type="checkbox" name="checkGroup" value="chk-1" checked="yes" /></td>
						<td>Check2
						<br><input type="checkbox" name="checkGroup" value="chk-2" checked="yes" /></td>
						<td>Check3
						<br><input type="checkbox" name="checkGroup" value="chk-3" checked="yes" /></td>
						</tr>
					</table>
				</div>
</body>

Thanks for reading!

Kevin

Hi,


Hit a snag creating code for toggling with radio buttons, alert debugs
return undefined for the radio button values. Would someone assist?


HTML
Code:

    <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" />
      <label for="is_new0" class="artist_radio_label">Yes</label>
      <input type="radio" name="artist"  onclick="toggleForm(this.value)" value="new" />
      <label for="is_new1" class="artist_radio_label">No</label>

From Document Head
Code:

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Add a Print</title>
<link rel="stylesheet" href="../c/forms.css" type="text/css" />
<script type="text/javascript" src="../j/global.js"></script>
<script type="text/javascript" src="../j/add_print.js"></script>

 
</script>
</head>

add_print.js
Code:

function toggleForm(artist) 

	{
	if (!document.getElementById) return false;
	var existing = document.getElementById("existing_artist");
	var newArtist = document.getElementById("new_artist");
	existing.style.display = "none";
	newArtist.style.display = "none";
	
	 if(this.value == existing){

               existing.style.display = "block";
       }else{


             newArtist.style.display = "block";

   		 }
 }


addLoadEvent(toggleForm);

global.js - Add Load Event
Code:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}



addLoadEvent();

Delete.

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 have a script that will slide a div up from the bottom of the page. The toggle button for this div however is going to be right on top of the sliding div. But, when the button is pressed and the div starts to slide down, the script hides the button. Here's an example...

http://www.codekraken.com/dashpad/testing/test2.html

How can I get the toggle button to slide with it, but not disappear?

Is it possible for JavaSscript to toggle a submit button?

I will be using it in this code:
Code:

<SCRIPT type="text/javascript">
	if (document.forms["form"]["quantitys"].value > '.$row['quantity'].') {
		alert ("The quantity you wanted for product '.$row['id'].' is no longer available and will be changed to the highest available quantity.");
		document.forms["form"]["quantity"].value = '.$row['quantity'].';
		// JAVASCRIPT TOGGLE SUBMIT
	}
</SCRIPT>

The submit button:
<INPUT name="submit" type="submit" value="UPDATE QUANTITY">

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

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.