Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •