Learn VBA & Macros in 1 Week!

JavaScript - A Simple Problem!

Full Excel VBA Course - Beginner to Expert

A Simple Problem!	View Content

Hey guys, I'm new to jquery and I'm sure this is a VERY simple problem.. Here's my code

Quote:
<style type="text/css">

#box {
background: red;
width: 300px;
height: 300px;
display: none;
}

</style>

<script type="text/javascript">

$(function() {
$('a').click(function() {
$('#box').slideDown(4000);
});
});

</script>
</head>

<body>

<div id="box"></div>
<a href="#">Click Me!</a>

</body>
</html>
As you can see it's pretty simple, I've made the box slideIn. My problem is I want to make a separate button to slide it back out, but because I've used the "a" tag it's associating all links with the same function, how do I get around this? I'm sure it's really simple! Thanks

Full Excel VBA Course - Beginner to Expert

Simple If ... Else Problem

Similar Tutorials

View Content

Hello,

Just trying to combine php variable with some javascript in
a simple if ... else.

This is the script code in php:

Code:

<script type="text/javascript">
var the_rad_val=<?php echo $N_rad_val;?>;

if (the_rad_val.value='n')
  {
  function removeLink(); 
  }
else
  {
  function restoreLink(); 
  }
</script>

This is how it looks in the browser (source)

Code:

<script type="text/javascript">
var the_rad_val=n;

if (the_rad_val.value='n')
  {
  function removeLink(); 
  }
else
  {
  function restoreLink(); 
  }
</script>

The 2 functions a

Code:

function removeLink() {
document.getElementById("mydiv").style.visibility = "hidden";
}

function restoreLink() {
  document.getElementById("mydiv").style.visibility = "visible";
} // end function

Guess I did something wrong because
the "mydiv" is visible when it shouldn't be

Can someone help me out as I am not too good with
javascript .

Thank you.

.

Simple Problem

Similar Tutorials

View Content

Hi all,

I'm pretty new to javascript coding and was trying to make a fading image slideshow. i have found one on dynamicdrive modified it, all looks fine. The first image shows and thats it. doesnt go through the photos :/ probably something simple but i cant work it out, any thoughts?

EDIT:
Code:

<head>
<script language="javascript1.1">
var mygallery=new fadeSlideShow({
	wrapperid: "column2", 
	dimensions: [250, 180], 
	imagearray: [
		["images/img1.png"],
		["images/img2.png"],
		["images/img3.jpg"]
	],
	displaymode: {type:'auto', pause:2500, cycles: 10, wraparound:false},
	persist: false, 
	fadeduration: 500, 
	descreveal: "ondemand",
	togglerid: ""
})
</script>
</head>
<body>
<div id="column2"><a href="#" class="next"><img src="images/img1.png" name="slide" id="rounded-image" height="288" border="0" style="filter:blendTrans(duration=3)" alt="image-1"/></a></div>
</body>

Thanks,
Storm08

Simple Javascript Problem That I Need Help Please

Similar Tutorials

View Content

Hi

i am trying to combine these two statments
Code:

searchValue.replace( /\[[^\)]*\]/g,"");
searchValue.replace( /\([^\)]*\)/g, "");

is it possible to put these two into one statment?

also is there a javascript function which does the same as urlencode?

many thanks
Luke

Simple Php Validation Problem

Similar Tutorials

View Content

Hi folks this is my first post

Edit: sorry for the incorrect title should have read simple javascript validation problem!

i have a fair understanding of php and mysql and have never had to use javascript as i was secretly trying to avoid it.

The time has now come where i want to use it for client side validation on a form. I am able to validate most of fields however i need to validate a date to check it has been entered in the following format dd/mm/yyyy and that the date is not greater than todays date. N.B the date is entered into a text field in HTML

i wrote a function with lots of if/else statements and failed. Im 100% positive there is a far simpler way to achieve my goal any help would be greatly appreciated.

Thanks
Code:

function checkDate(elem, helperMsg){

var day = elem.substr(0,2);
var month = elem.substr(3,2);
var year = elem.substr(6,4);

if(day < 01 || day > 31)
    {
        var invalidday = true;
    }
    if (month < 0 || month > 12)
        {
            var invalidmonth = true;
        }
        if (year < 01 || year > 2099)
            {
                var invalidyear = true;
            }
            if ( month==04 || month==06 || month==09|| month==11)
                {
                    if (day == 31)
		   {
                       var invalidday = true;
                   }
                }
                if (month==02)
	   {
		   if (day > 28)
		   {
                       var invalidday = true;
                   }
           }
           if (invalidday || invalidmonth || invalidyear)
               {
                   alert(helperMsg);
                   elem.focus();
                   return false;
               }
               else
                   {
                       var dd = today.getDate();
                       var mm = today.getMonth()+1;//January is 0!
                       var yyyy = today.getFullYear();
                       if(dd < 10)
                       {
                           dd='0'+dd;
                       }
                       if(mm < 10)
                       {
                           mm='0'+mm;
                       }
                   }
                   if (day > dd && month > mm && year > yyyy)
                       {
                           alert(helperMsg);
                           elem.focus();
                           return false;
                       }
                       else
                           {
                               return true;
                           }
}

Simple Javascript Problem

Similar Tutorials

View Content

I have a script that includes a JS delete function, but when I select a record and hit delete it says no record is selected. I'm sure this is a simple fix for someone in the know. Thanks in advance.

Site:

PHP Code:
<?php
    require_once('auth.php');
?>
<script type="text/javascript" src="script.js"> </script>
<?php include("header.php"); ?>
<b><div align="right"><a href="admin-index.php">Admin</a> - <a href="adminorders.php">Orders</a> - <a href="adminmain_forum.php">Support</a> - <a href="register-form.php">Add User</a> - <a href="adminlogout.php">Logout</a></div></b><br>
<b>Report Upload</b>
<br>To upload reports after completion use the form below and update the order with the report URL (/reports/filename).
<center><form action="./uploadadmin.php" method="post" enctype="multipart/form-data">
   <p>
      <label for="file">Select a file:</label> <input type="file" name="userfile" id="file"> <br />
      <p><button>Upload File</button>
   <p>
</form></center>

<p><b>Previous Orders</b>
<br>Details of previous orders and trials are displayed below.

<br><script>

</script>


<center><b>Enter order number</b> <form name="form1" onSubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Search Orders" ACCESSKEY="s"></form></center>

<br><br><table width="775" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
      <form action="" method="post" name="" id="">
        <table width="600" border="1" align="center" cellpadding="2" cellspacing="2">
          <tr>
            <td><input name="topcheckbox" type="checkbox" class="check" id="topcheckbox" onClick="selectall();" value="ON">
Select All    </td>
            <td colspan="4" align="center"><a href="form.php?mode=add">Add New Order</a></td>
          </tr>
          <tr>
            <td><strong><a href="javascript:goDel()">Delete</a></strong></td>
            <td><strong>Order Number</strong></td>
            <td><strong>Order Status</strong></td>
            <td><strong>Payment Status</strong></td>
            <td><strong>Update</strong></td>
          </tr>
          <?
          include("conn.php");
          $sql="select sn,branchname,shortname,payment from $branch order by sn";
          $result=mysql_query($sql,$connection) or die(mysql_error());
          while($row=mysql_fetch_array($result)) {
          ?>
          <tr>
            <td><input name="<? echo $row['sn']; ?>" type="checkbox" class="check"></td>
            <td><? echo $row['branchname']; ?></td>
            <td><? echo $row['shortname']; ?></td>
            <td><? echo $row['payment']; ?></td>
            <td><a href="<? echo "form.php?sn=".$row['sn']."&mode=update"; ?>">Update</a></td>
          </tr>
          <? } ?>
          <tr>
            <td><strong><a href="javascript:goDel()">Delete</a></strong></td>
            <td><strong>Order Number</strong></td>
            <td><strong>Order Status</strong></td>
            <td><strong>Payment Status</strong></td>
            <td><strong>Update</strong></td>
          </tr>
        </table>
    </form></td>
  </tr>
</table>

<?php include("footer.php"); ?>

JS File

Code:

function goDel()
{
	var recslen =  document.forms[0].length;
	var checkboxes=""
	for(i=1;i<recslen;i++)
	{
		if(document.forms[0].elements[i].checked==true)
		checkboxes+= " " + document.forms[0].elements[i].name
	}
	
	if(checkboxes.length>0)
	{
		var con=confirm("Are you sure you want to delete");
		if(con)
		{
			document.forms[0].action="delete.php?recsno="+checkboxes
			document.forms[0].submit()
		}
	}
	else
	{
		alert("No record is selected.")
	}
}

function selectall()
{
//		var formname=document.getElementById(formname);

		var recslen = document.forms[0].length;
		
		if(document.forms[0].topcheckbox.checked==true)
			{
				for(i=1;i<recslen;i++) {
				document.forms[0].elements[i].checked=true;
				}
	}
	else
	{
		for(i=1;i<recslen;i++)
		document.forms[0].elements[i].checked=false;
	}
}

Simple Script Problem

Similar Tutorials

View Content

Hey guys, so I am a designer (not a developer) doing a site for someone.
I am playing with some simple free javascripts.

I have lightbox and toggler. Both work great individually.
They are conflicting and everywhere online says to set the both to onLoad in the body tag.
Sounds easy enough.

But I can't seem to figure out the call for this script:
Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/expand.js"></script>
<script type="text/javascript">

$(function() {
$("h2.expand").toggler({method: "fadeToggle"});
});
//--><!]]>
</script>

<body onload="toggler();initLightbox()"> is what is seems like it should be for me. But that isn't working at all.

Please help!

I feel like I have tried every possible name with the toggler()...

If you need more, I can point you to the site itself and you can see all of the (messy) code.

Js Simple Function Problem?

Similar Tutorials

View Content

Hello I would like to know how this is not functional. surely passing the function to another function would work so I can use the same variables without having to write it out again.

[ICODE]
<html>
<head>
<title>Number Conversions</title>
<script>
function addNumbers ()
{
var firstnumber = document.calculator.myFirstNumber.value;
var secondnumber = document.calculator.mySecondNumber.value;
var total = parseInt(firstnumber) + parseInt(secondnumber);
document.calculator.myTotal.value = total;
document.calculator.myHex.value = total.toString(16);
document.calculator.myOct.value = total.toString(8);
document.calculator.myBinary.value = total.toString(2);

document.write("End of Calculation.");
}

function subtractNumbers (addNumbers)
{
var total = parseInt(firstnumber) - parseInt(secondnumber);
}
</script>
</head>
<body>
<form name="calculator">
First Number
<input type=text name="myFirstNumber" value=0 size=3> <br>
Second Number
<input type=text name="mySecondNumber" value=0 size=3><br><br>
<input type="button" value="ADD" onclick="addNumbers();">
<input type="button" value="SUBTRACT" onclick="subtractNumbers();"><br>
Total
<input type=text name="myTotal" value=0 size=3><br>
Binary
<input type=text name="myBinary" value=0 size=8><br>
Octal
<input type=text name="myOct" value=0 size=3><br>
Hexidecimal
<input type=text name="myHex" value=0 size=3><br>
</form>
</body>
</html>
[ICODE]

Simple Javascript Pop Up Window Problem

Similar Tutorials

View Content

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
Code:

<SCRIPT type="text/Javascript">
<!--
function submitClick() {
	var userid = document.login.userid.value;
	var pin = document.login.pin.value;
	
	if (document.login.userid.value=='')
	{
		window.alert('User ID not entered');
	}
	else if (document.login.pin.value=='')
	{
		window.alert('Pin not entered');
	}
	else
	{
		window.alert (
		"User ID: " + userid +
		"\nPIN: " + pin 
		);
	}
}
//-->	  
</SCRIPT>

</head>
<body>
<center><img height="120" width="240">
<h3 align="center">Please enter your User ID and PIN:</h3>
<center>
<table width="50%" id="Table1">
<tbody>
<tr>
<td width="50%" align="RIGHT">User ID:</td>
<td width="50%" align="LEFT"><input type="text" name="userid" size="20"></td>
</tr>
<tr>
<td align="RIGHT">PIN:</td>
<td align="LEFT"><input type="text" name="pin" size="20"></td>
</tr>
<tr>
<td></td>
Code:

<td align="LEFT"><INPUT TYPE="button" NAME="button" VALUE="Submit" onSubmit="return submitClick();"></td>

</tr>
</tbody>
</table>
</center>
</center>
</body>
</html>

I'm needing the program to use pop up windows when no user id has been entered or no pin has been entered. If both have been entered then i need it to show the user id and pin in a pop up window. Not sure where I've went wrong so any help would be much appreciated.

Validation Problem ( Probably A Simple Fix I Am Missing)

Similar Tutorials

View Content

Jquery Simple Function Problem

Similar Tutorials

View Content

So, basically what i'm doing here is hovering over the h2 heading and toggling the paragraph text. What i'm having a problem doing is changing the h3 headings so that they toggle the same way...is there a way to do this within this function without ids/classes?

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">	

	$(document).ready(function() {	

	$('#hdg').hover(function() {	
	
	$('div[title=latin]').toggle();
	$('div[title=english]').toggle();

	$('#').html('<h3>English</h3>');
		});
		});
</script>

Problem With A Simple Math Formular

Similar Tutorials

View Content

Problem With Image Mouseover...simple Fix?

Similar Tutorials

View Content

Hi all,

Javascript is totally new to me and I am very frustrated. I have been trying to put together this ebay template and it's all set except I can't get my thumbnails to show the large image when you mouseover it! I believe my problem is that I don't have the <script type="text/javascript"> or <language=javascript> tag in the beginning of the template. Problem is im not sure if that's the prob or where to put it!! I tried putting it at the top and it made it so the whole template disappeared. I've tried putting it at various diff places and it messes the whole thing up. I'm lost! Please help! Here's the listing (sorry I would post just the part where there's an issue but I can't tell where that is! )

http://cgi.ebay.com/ws/eBayISAPI.dll...%3DI%26otn%3D2

Simple Object Function Problem

Similar Tutorials

View Content

Hello was following a tutorial online from bucky. and created a new example with different variables and such. My code in my eyes looks absolutely fine but however it does not display can anyone spot the problem?

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function cigerettes (brand, tar, price) {
this.brand=brand;
this.tar=tar;
this.price=price;
this.ReducedCost = discount;
}

function discount() {
var reduction = 20;
var finalCost = this.price - reduction;
return finalCost;
}

var packet1 = new cigerettes("Mayfair", "2.0 mg", 399);
var packet2 = new cigerettes("Sovereign", "3.4 mg", 425);
</script>
</head>

<body>
<script type="text/javascript">

document.write(packet1.brand()
+ " they contain " + packet1.tar() +
"of tar " + "the packet cost me " + packet1.price()
+ ". With discount I got them for: " + packet1.ReducedCost());

</script>
</body>
</html>

[code]

Simple Javascript Toggle Problem

Similar Tutorials

View Content

I've written this very small and simple javascript toggle to make a div appear and disappear upon click.

Code:

function dropDown(id){
    var object = document.getElementById(id).style;
    
    if (object.display == "none") {object.display = "block"}
    else {object.display = "none"}
    }

And the html:
Code:

<div id="webBox" class="service">
<ul class="servNav">
    <li class="button" onclick="dropDown('webDrop')">View Details</li>
</ul>
</div>
<div class="dropInfo" id="webDrop">

Now this code DOES work, but only after clicking the button twice. I assume there is some argument problem, but I can't seem to pinpoint it. I've got jquery scripts and plugins on the page, but it does the same thing when I take those off.

Is there anything I can do to make the toggle immediate rather than after a couple tries of clicking?

The URL is http://mattboldt.com/2.0

The "view details" buttons are what I'm having trouble with. As of now it's only on one, the first div.

Thanks.

Simple Fading Slideshow Problem

Similar Tutorials

View Content

Sorry, I'm new in javascript and i can't understand what's wrong with my code.. I've spent some time searching for the solution, but i give up. For some of you may it be just a piece of cake, so maybe you can look at this:

Code:

<script language="javascript">
var n_pics = 3;
var current = 1;
var opacity = 1;
var opacity_IE = 100;



function fade(how)
{
	if(how==0)
	{
		if(opacity>0)
		{
			opacity = opacity - 0.1;
		}
		else return;
	}
	else
	{
		if(opacity<1)
		{
			opacity = opacity + 0.1;
			opacity_IE = opacity * 100;
		}
		else return;
	}
	document.getElementById('fade_show').style = 'opacity:'+opacity+'; filter:alpha(opacity='+opacity_IE+')'; //break_point 1
	var temp = 'fade('+how+')';
	setTimeout(temp, 1000);
}

function main_loop()
{
	fade(0); //break_point 2
	if(current == n_pics)
	{
		current = 1;
	}
	else
	{
		current = current + 1;	
	}
	document.getElementById('fade_show').innerHTML = '<img src="images/fade_show/'+current+'.jpg" />';
	fade(1);
	main_loop();
}

</script>
</head>

<body onload="main_loop();">

fade(0) means to fade out, and fade(1) - to fade in.

on IE i get 'Member Not found' on break_point 1
and
too much recursion at breake_point 2

can you help me?

Problem With Simple Validation Script

Similar Tutorials

View Content

Having an unusual problem with the simple validation script below. In my script, I want to validate the username text field so that if the value of the text field (i.e. the amount of characters in the field) is less than 5, it would show a message in the page using innerHTML. The script works, but in a roundabout sort of way, or at least that's what it seems to me. Instead of making sure that the amount of characters in the text field is less than 5, it seems to disregard this entirely and instead make it so that if it has no value at all, the message will be shown. If it has a value of even 1 character, though, the message does not show. Not what I was trying to do, and I really don't know what's happened.

Thanks in advance to anyone who can help out a newbie in need.

Code:

function uservalidate() {
	if (document.getElementById("user").value < 5) 
                        { document.getElementById("userdiv").innerHTML = "Username must be six characters or more." }
             else 
                 {
	    document.getElementById("userdiv").innerHTML = ""
	     }
}

Code:

<body>
      <form id="form1">
         <input type="text" id="user" onblur="uservalidate()" /> 
         <div id="userdiv"></div>
      </form>
</body>
</html>

Simple Javascript Calculation Problem

Similar Tutorials

View Content

I've designed a snippet of javascript to receive numbers, add them together, and then display the total. What i'd like to do now is display the amount of numbers added together "count", and then average them all together. Problem is, the count just won't display, so i'm uncertain if I have a logic error in my code or just an html issue? I'd really appreciate the help!

Code:

<html>
<head>
<script type="text/javascript">
var count = 0;
var total = 0;
var number = 0;

function AverageNumbers(form)
{
    number = document.getElementById('num1').value;
    count++;
    total = parseInt(number) + parseInt(total);
    average = parseInt(number) + parseInt(count)
if (number!=null && number!="")
  {
 document.getElementById('total').innerHTML = total;
 document.getElementById('count').innerHTML = count;
  }
  return count;
  return total;
}
</script>
</head>

<body>
    <form>
<INPUT TYPE="number" NAME="inputbox" ID="num1">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="AverageNumbers(this.form)">
</form>
    <div id="total"><div>
            <br>       </br>        
    <div id="count"><div>
    
   

</body>
</html>

Slider Problem (simple Javascript Fix For An Expert)

Similar Tutorials

View Content

Hi, i would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly.

I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image.

This is what it looks like at the moment...

This is when the caption is coming from the top.

i would like to implement
Code:

http://web.enavu.com/demos/caption/

or this
Code:

http://www.sohtanaka.com/web-design/examples/image-hover/

Doesnt matter which one

into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text...

Coding:
(HTML)
Code:

                    <div class="main_view">
                        <div class="window">    
                            <div class="image_reel">
                    			<a href="#">
                                    <img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(253); ?>">
                                    <img src="http://i51.tinypic.com/.jpg" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(256); ?>">
                                    <img src="http://i52.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(258); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(271); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                            </div>
		<div class="descriptions">
			<!--welcome page-->
				<div class="desc">
					<strong style="font-size:30px;">Welcome to City Water</strong>
						<div class="clear"></div><br/>
                            <div id="sliderdescription">WHATEVER WHATEVER</div>

				</div>
                
			<!--Services page-->
			<div class="desc">
			<?php $post_id = 253; $queried_post = get_post($post_id); ?>
       <strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
                        <div class="clear"></div><br/>
                            <div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                </div>
                    <div class="desc">
                                        <!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                    </div>
                </div>
            </div>
            
<div id="hrline"></div>

 <div class="paging">
         <ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
        </ul>
    </div>
 </div>

CSS
Code:

 /*--Main Container--*/
 .main_view {
  float : left;
  height :488px;
  margin-bottom :1px;
  margin-top :-40px;
  position :relative;
}

 /*--Window/Masking Styles--*/
 .window img{
  height :492px;
  width : 974px;
}

 .window {
  /*--Hides anything outside of the set width/height--*/
  border :3px solid #D7D7D5;
  color : #B4B4B4;
  font-size : 12px;
  font-weight : bold;
  height :488px;
  overflow : hidden;
  position : relative;
  width : 974px;
}

 .image_reel {
  left : 0;
  position : absolute;
  top : 0;
}

 .image_reel img {
  float : left;
}

 .image_reel ul li {
  display : inline;
}

  #image_reel .caption {
  background-color :#000;
  bottom :0;
  color :#ffffff;
  height :100px;
  position :absolute;
  width :100%;
  z-index :600;
}

    #image_reel .caption .content {
}

    #image_reel .caption .content h3 {
  color :#1DCCEF;
  margin :0;
  padding :0;
}

 /*--Paging Styles--*/
 .paging {
  /*--Assures the paging stays on the top layer--*/
  /*--Hidden by default, will be later shown with jQuery--*/
  bottom : -25px;
  display : none;
  line-height : 40px;
  position : absolute;
  right : -70px;
  text-align : center;
  z-index : 100;
}



.desc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
	margin-top:275px;
    color: white;
    font-size: 2em;
    padding: 7px;

}

JAVASCRIPT
Code:

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        hideComment();
        
        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );
       
        showComment();
    };
    
    //Rotation + Timing Event
    rotateSwitch = function(){        
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
        play = null;
    }, function() {
        rotateSwitch(); //Resume rotation
    });    
    
    showComment = function(){
        // slide toggle effect set to slow you can set it to fast too.
        $(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
        return true;
    };
    
    showComment(); // Show Comment initially
    
     hideComment = function(){
        $(".desc").stop(true,true).slideUp(500).hide();
     };
    
    //hide comment if you click on it
    $(".desc").click(function(){
        hideComment();
    });
    
    //On Click
    $(".paging a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    
    
});

Simple Slide Show: Setinterval() Problem

Similar Tutorials

View Content

I realize this is an overly simple question, but I'm rather horrible at javascript. What I'm doing is changing an img src and having it loop through images. I want it to only start looping when I click and than stop if I click again.

It loops through when I click once, but when I click again it starts changing its rate of image switching. Starts off switching at 1000 milliseconds than upon clicking again it switches through two images quickly and than slows again.

Code:

var myImage = document.getElementById("mainImage");

var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg" ];

var imageIndex=0;

What I assume is the trouble causing function:

Code:

function changeImage(){
	myImage.setAttribute("src", imageArray[imageIndex]);
	imageIndex++;
	if(imageIndex >= imageArray.length) {
		imageIndex=0;
	}
}

How the trouble function is being called:
Code:

var imgSwtch=0;

myImage.onclick= function(){
		if(imgSwtch==0){
			var intervalHandle = setInterval(changeImage,1000);
			imgSwtch=1;
			console.log("start");
		}
		else{
			clearInterval(intervalHandle);
			imgSwtch=0;
			console.log("stop");
		}
		
};

Very Simple Problem With Using Variables Between Functions In A .js (grrrrr)

Similar Tutorials

View Content

Hi I am using a .js with 3 functions in it
1st function getPeriod is to extract the index of a selected list item

2nd function getRadios is to get the value from a selected radio button

3rd function calculateAmount uses if statments and follows a course depending on which index was selected from the list item in the 1st functino ie . 0,1,or 2

The problem is that the index value is unidentified in the 3rd function when i try to use it in the if statement, but the value of the radio button, the variable "cigs" works...

I want to know how to allow the index value to work in the 3rd function
I know this is a very silly problem but I cant spend any more time trying to figure it out ...code below ...Thanks !
[code]

var index = 0;
var element = "";
var cigs = 0;

// get the selected item in the list with id listId
function getPeriod(listId){

// find the index of the selected item
index = document.getElementById(listId).selectedIndex;

// use the index to access the text of the selected item
element = document.getElementById(listId).options[index].text;

// put the favorite into the text field
document.getElementById('period').value=index;
return index;

}

function getRadios(what){
// get the cigs value
j=what.cigs.length; //alert(j)
for (i=0; i<j; i++){
if(what.cigs[i].checked) cigs = what.cigs[i].value
}
what.buttons.value = (cigs)
return cigs;
}

function calculateAmount (){

if (index = 0) {
total = (8.5 * cigs * 182);
}
else if ( index = 1 )
{
total = (8.5 * cigs * 365);
}
else if (index = 2)
{
total = (8.5 * cigs * 730);
}
document.getElementById('total').value=total;
}

[code]