Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-17-2011, 01:06 PM   PM User | #1
Oli Shoesmith
New to the CF scene

 
Join Date: Feb 2011
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Oli Shoesmith is an unknown quantity at this point
onmouseover - Image Move

Hi Guys.
First off i'd like to say Hi as i'm new to the forums. But am looking forward to spending a lot of time here. I am currently studying Javascript to help create a bit more user interaction with my websites which I use CSS/XHTML and PHP5 to design.

Ok with that said I was hoping someone might be able to lend a slight hand. I am trying to create an Image menu for a site I'm working on that is rather simple in essence. When the user hovers over a button I have the menu will move left or right depending.

I have not got a great deal into it yet as I have become stuck, as I'm new I figured it would be easier to troubleshoot if I build up the program bit by bit.


----> menupic variable is being passed by php into javascript

Code:
function moveImagesLeft() {		
        for (i=0; i<=100; i++) {
        	setPixels = (i + 2);
        		for (L=1; L<=menuPic; L++){ /* this loop makes sure that all the pictures move together */
        			indexpic = "menupic"+L;
				document.getElementById(indexpic).style.left="-"+setPixels+"px";
		}
	}  
}
Ok, very simple. I have a DIV container that holds my images and the overflow is hidden, php works out how many images there are and feeds that into javascript. This all works fantastically however it seems that once I reach the bottom of my second for loop
Code:
document.getElementById(indexpic).style.left="-"+setPixels+"px";
Nothing else happens, the pictures all shift left 2pixels as they should but nothing else.

The top loop is not going again (excuse the poor use of terminology)

I dont know if it makes a different but where the images are they are declared as so.

Code:
<a href="#"><img class="menupic" id="menupic1,2,3,4,5 (etc)" src="_image" border="0" height="50" width="60"></a>
Code:
.menupic {position:relative; display:block; width:60px, height:40px}
and the Id class is there so that my javascript can control it.

I hope that I have worded this in a way that is easily understandable.
Any help would be greatly appreciated.

I try not to ask for too much help because working things out is part of the learning curve but in this instance I have spent a lot of time and not found a solution.

Kindest Regards
Oli
Oli Shoesmith is offline   Reply With Quote
Old 02-17-2011, 05:35 PM   PM User | #2
Oli Shoesmith
New to the CF scene

 
Join Date: Feb 2011
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Oli Shoesmith is an unknown quantity at this point
I've Solved my problem. The variable value being created from the PHP on my page was to high. Therefore once the loop got within 2 loops of the end it could not locate the ElementId it was looking for and thus returned the error

"Cannot read property style of null"
Oli Shoesmith is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:32 AM.


Advertisement
Log in to turn off these ads.