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 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Sending variable on mouseover

    Hi, I am trying to send a variable on mouseover but it does not seem to work - I took this to the PHP forum, since PHP was involved, but a guy there said that it was not a PHP problem.


    So can anyone spot a possible error in this code?



    Code:
    function addAward()
    
    {
    
    $(document).ready(function()
    
    {
    
    $.ajax(
    		
    		{
    		
    		type: "POST",
    		
    		url: "achievements.php",
    		
    		data: { HomeCoinLocator: "Yes" }
    
    		});
    
    		});
    
    var div = document.getElementById("newachievementdiv");
    
    var span = div.getElementsByTagName("span")[1]; 
    
    span.innerHTML = "' . $endtext . '";
    
    $(div).fadeIn("4000");
    
    setInterval( function() { $("#newachievementdiv").fadeOut("4000"); }, 4000);
    		
    }




    BTW, the important stuff is in bold.

    Thanks.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Three things ...

    1) And this is the main problem: You are trying to access the DIV with ID "newachievementdiv" outside of the $(document).ready() callback. So this DIV might not be ready yet
    2) There is no event handler for mouseover ... so how should your program know that it should send something on mouseover?
    3) You are already using jQuery, so you should not use getElementxxxxxxxxxx methods but rather the respective jQuery methods like $('#newachievementdiv span').eq(1)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Thumbs up Ok

    Thanks for the tips - the first one I'll look into, but the second one is something that you didn't see.

    The function is called on a mouseover inside the HTML tag, but I didn't show that part. Finally, I might look over the third tip you gave me.


    Thanks a lot, that might help me out a lot

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    ?

    Help -


    <script>

    function addAward()

    {

    $(document).ready(function()

    {

    $.ajax(

    {

    type: "POST",

    url: "achievements.php",

    data: { HomeCoinLocator: "Yes" }

    });

    var div = $("#newachievementdiv span").eq(1)

    var span = $("span").get(4);

    span.innerHTML = "' . $endtext . '";

    $(div).fadeIn("4000");

    setInterval( function() { $("#newachievementdiv").fadeOut("4000"); }, 4000);

    });

    }

    </script>





    Why doesn't this work?

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    function addAward()
    
    {
    
    $(document).ready(function()
    document.ready cannot (or at least, should not!) occur within a function. But you never call the function (unless you call it from some code that you haven't shown us) so the code is never executed.

    [Personally, I wouldn't use div and span as variable names - it can only lead to confusion, and possible conflict.]
    Last edited by AndrewGSW; 09-21-2012 at 12:55 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    This
    Code:
    span.innerHTML = "' . $endtext . '";
    seems to be wrong. It should be
    Code:
    span.innerHTML = "'" . $endtext . "'";    // or perhaps..
    span.innerHTML = "$endtext";
    depending on where/how it is positioned within your PHP code.
    Last edited by AndrewGSW; 09-21-2012 at 01:03 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Angry This is so hard

    Even though I followed all of your advice, this code below doesn't work!



    <div id="secretcoin" onmouseover="addAward();">

    </div>

    <div id="newachievementdiv" align="center" class="awardBox"
    style="display: none; margin: 0px auto; position: fixed; left: 250px;">
    Congratulations! You have <span class="highlite-blue">found the secret coin</span>!
    <br/>
    <span></span>
    </div>
    <script>

    $(document).ready(function()

    {

    function addAward()

    {

    $.ajax(

    {

    type: "POST",

    url: "achievements.php",

    data: { HomeCoinLocator: "Yes" }

    });

    var div = $("#newachievementdiv span").eq(1)

    var span = $("span").get(4);

    span.innerHTML = "' . $endtext . '";

    $(div).fadeIn("4000");

    setInterval( function() { $("#newachievementdiv").fadeOut("4000"); }, 4000);

    }

    });

    </script>




    BTW, that div junk at the beginning is where the function gets called.

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Thumbs down

    So does this have any visible errors in it? Does anyone know of any weird problems that I might be experiencing?

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I don't get it ... is this a mix of PHP and Javascript? Is $endtext the only PHP code here? If this part is PHP, please show us the resulting Javascript code from your browser.

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <title>Welcome to CoinAwards</title>
    
    <link rel="stylesheet" href="structure/home.css" />
    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    
    <script src="structure/jQueryEase.js"></script>
    
    <script src="structure/home.js"></script>
    
    </head>
    
    <body>
    
    
    
    <script>
    
    $(document).ready(function()
    
    {
    
    function addAward()
    
    {
    
    $.ajax(
    		
    		{
    		
    		type: "POST",
    		
    		url: "achievements.php",
    		
    		data: { HomeCoinLocator: "Yes" }
    
    		});
    
    var div = document.getElementById("newachievementdiv");
    
    var span = div.getElementsByTagName("span")[1]; 
    
    span.innerHTML = "Rewards:<br>+120 Coins<br>+10 Skill Points<br>+1 Award";
    
    $(div).fadeIn("4000");
    
    setInterval( function() { $("#newachievementdiv").fadeOut("4000"); }, 4000);
    		
    }
    
    		});
    
    </script>
    
    <header>
    
    <hgroup>
    
    <h1 id="coin-awards-welcome">Welcome to CoinAwards!</h1>
    
    <h2 id="coin-awards-welcome-subtitle">A place where you can <span class="highlite-blue">earn coins</span> and <span class="highlite-blue">trade them
    </span> in for cool <span class="highlite-blue">virtual prizes</span>!</h2>
    
    </hgroup>
    
    </header>
    
    <section id="extrastuff">
    
    <div id="usefullinksdiv">
    
    <img src="structure/rightarrow.jpg" id="ra" />
    
    </div>
    
    <div id="actualusefullinks">
    
    <a href="structure/forum.php"><input type="button" value="Forum" id="forumbutton" /></a>
    
    <a href="structure/profile.php"><input type="button" value="Profile" id="profilebutton" /></a>
    
    </div>
    
    </section>
    
    <section id="loginbox" style="height:160px;">
    
    <p id="usernamelink">Welcome, <a href="structure/profile.php" id="greenlink">gr</a> | <a href="structure/logout.php" id="orangelink">Logout</a></p>
    
    <p id="userinfop">You have 100 coins</p>
    
    <p id="userskillp">You have 5 skill points</p>
    
    <p id="userawardsp">You have 1 award</p>
    
    </section>
    
    <section id="mainMenu" style="z-index: 2;">
    
    <ul>  
    <li id="li1" class="green">  
    <p><a href="../Advance_To_Coin_Awards.php">Home</a></p>  
    <a href="../Advance_To_Coin_Awards.php"><div class="subtext">Home</div></a>
    </li>  
    <li id="li2" class="yellow">  
    <p><a href="structure/whatisthis.php">What is this?</a></p>  
    <a href="structure/whatisthis.php"><div class="subtext">What is this?</div></a>
    <a href="structure/moreinfo.php"><div class="subtext">More Info</div></a>
    <a href="structure/tipsandtricks.php"><div class="subtext">Tips and Tricks</div></a>
    </li>  
    <li id="li3" class="red">  
    <p><a href="structure/earncoins.php">Earn Coins</a></p>  
    <a href="structure/earncoins.php"><div class="subtext">Earn Coins</div></a>
    <a href="structure/achievements.php"><div class="subtext">Achievements</div></a>
    </li>  
    <li id="li4" class="blue">  
    <p><a href="structure/chooseawards.php">Shop</a></p>  
    <a href="structure/chooseawards.php"><div class="subtext">Shop</div></a>
    <a href="structure/wishlist.php"><div class="subtext">Wish List</div></a>
    <a href="structure/buyinghistory.php"><div class="subtext">Buying History</div></a>
    </li>  
    <li id="li5" class="purple">  
    <p><a href="structure/profile.php">Profile</a></p>  
    <a href="structure/profile.php"><div class="subtext">Profile</div></a>
    <a href="structure/spruceitup.php"><div class="subtext">Spruce it up</div></a>  
    <a href="structure/compare.php"><div class="subtext">Compare</div></a>
    </li>  
    <li id="li6" class="brown">
    <p><a href="structure/allactivities.php">All Activities</a></p>
    <a href="structure/allactivities.php"><div class="subtext">All Activities</div></a>
    <a href="structure/games.php"><div class="subtext">Games</div></a>
    <a href="structure/chatroom.php"><div class="subtext">Chat Room</div></a>
    </li>
    </ul> 
    
    </section>
    
    <section id="home-content">
    
    <h2 id="home-content-title">Play games, chat, and earn coins!</h2>
    
    <p id="content-1">Own a customizable profile that sports unlockable parts through the spending of coins, which can be earned by spending time on 
    the site, finding secrets, completing achievements, and more. You will have the chance to play games, chat, and do more by visiting this site. While you 
    are enjoying the features of this site, you will gain coins - currency. You can spend these coins on an always-updated shop. While it is possible to still 
    enjoy this site without logging in (games, chat, etc.), creating an account will help you enjoy the full benefits of your experience here - why not? - 
    it is free and fun!</p>
    
    </section>
    
    <footer>
    
    <p id="footercrp">Copyright &copy; CoinAwards 2012 | Hosted for free under <a href="http://www.***************" style="color: #333366;">000webhost</a>. 
    Site Version 1.3 by Austin Stout. V 1.3 includes release of achievement #2, as well as important site clean-up.</p>
    
    </footer>
    
    <div id="lsidepanel">
    
    </div>
    
    <div id="rsidepanel">
    
    </div>
    
    <div id="secretcoin" onmouseover="addAward();">
    Uncaught ReferenceError: addAward is not defined
    
    </div>
    
    <div id="newachievementdiv" align="center" class="awardBox" 
         style="display: none; margin: 0px auto; position: fixed; left: 250px;">
    Congratulations! You have <span class="highlite-blue">found the secret coin</span>!
    <br/>
    <span></span>
    </div>
    
    </body>
    
    </html>				
    <!-- Hosting24 Analytics Code -->
    <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
    <!-- End Of Analytics Code -->






    The related stuff is in bold.


  •  

    Posting Permissions

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