www.webdeveloper.com
Results 1 to 13 of 13

Thread: onMouseOver question

Hybrid View

  1. #1
    Join Date
    Jan 2011
    Posts
    8

    onMouseOver question

    I am attempting to use an onMouseOver event to display text.

    The problem that I'm running into is that the text I want to display is being called externally from another website with javascript.

    So, I have a script that displays dynamic text, which changes every day. I want to put this text into a widget and only display the text when someone mouses over a particular image associated with that bit of code.

    Example: Your daily horoscope is XYZ. You pull up my widget, you mouse over Aries and your horoscope for the day shows up at the bottom. You mouse over Taurus to see what your friend's horoscope is, aries reading disappears and taurus reading shows up.

    I've Google searched, but I'm not entirely sure I know the right question to ask to find the appropriate answer. I've found code to showtext, which works exactly how I want it to, but not when that text is coming from a Javascript statement already.

    If you couldn't tell, I know just enough about js and php to get myself into trouble...lol.

    I'm sure you'll need more info, but you'll have to tell me what info that is and I'll be glad to provide it. Thank you in advance.

  2. #2
    Join Date
    Mar 2009
    Posts
    468
    When you say "externally from another website" what do you mean? Is it called as a self contained script containing variables that provide the needed information or are you using an AJAX call to retrieve the information? Or something else?

  3. #3
    Join Date
    Jan 2011
    Posts
    8
    it's code that's from a website that doesn't belong to me... it's for displaying daily horoscopes (meaning they change every day)

    So, forgive me for not knowing what I'm talking about here. There's probably a really easy way to do this.

    I did manage to think maybe putting the result of that external js into a variable and trying to 'showtext' of the contents of the variable might work. The variable is loading properly with the output (the daily horoscope), as confirmed by the echo, but not working on mouseover. Here's where I load it...

    $aries = "<script src='http://www.zenzodiac.com/content.zen?aries'></script>";
    echo $aries;

    but when I write the below statement, mouseover isn't displaying anything...

    <a href=\"http://www.zanyzodiacs.com\" onMouseover=\"showtext($aries)\" onMouseout=\"hidetext()\"><img src=\"/images/arieswidgetzignT.png\" alt=\"widget aries horoscope\" height=\"50\" width=\"50\" border=\"0\"></a>

    I'm writing this inside php, in case that wasn't clear... thanks for ur help.

  4. #4
    Join Date
    Jan 2011
    Posts
    8
    ok. I've abandoned my initial method of trying this.

    Now I'm passing the javascript from the other site (containing the horoscope) to a php variable and passing the php variable to a javascript variable.

    like so:
    <?php
    $aries = '<script src="http://www.zenzodiac.com/content.zen?aries"></script>';
    ?>

    <script>
    var jsphparies = <?= json_encode($aries); ?>;
    </script>

    both are working as confirmed by an echo and a document.write.

    Now, when I try to write the content into an array to be displayed onMouseOver, it's not showing up.

    var content=new Array()
    content[0]=jsphparies

    The initial example code I'm using from dynamic drive was inserting text into this content, which works just fine. I thought I could just replace it with a variable, but it doesn't seem to be working that way.

    any suggestions would be helpful. ty.

  5. #5
    Join Date
    Mar 2009
    Posts
    468
    Its rather primitive, but it might give you the key to getting what you want. Its a complete HTML page with the javascript. It does work in FF anyway.

    Code:
    <html> 
    <head> 
    <script id = "s1" type = "text/javascript">
    var arr = Array("This is for Gemini", "This is for Taurus", "This is for Leo");
    
    window.onload = function(){
        var i, x, id, display;
        display = document.getElementById('message');
        for (i = 0; i < 3; i++){
            id  = 'd' + i;
            x = document.getElementById(id);
            x.onmouseover = setHandler(display, arr[i]);
            }
    }
        
    function setHandler(container, contents){
        var z =function(){
            container.innerHTML = '';
            container.innerHTML = contents;
        }
        return z;
    }   
    
    
    </script> 
    </head> 
    <body> 
         <div id ="d0">Gemini</div>
         <div id ="d1">Taurus</div>
         <div id ="d2">Leo</div>
    
         <div id = "message"></div>
    </body> 
    </html>

  6. #6
    Join Date
    Jan 2011
    Posts
    8
    Thanks Tcobb. This is working, but the problem I'm still having is how to get the contents of that original script (ie: the daily horoscope) into the array to be displayed onmouseover. I'm missing something with syntax or something.

    Simply replacing text with a script isn't working no matter what I try, nor is replacing text with the variable. That was why I moved on to variables, but I can't seem to get a variable to work either.

    As per your code, I tried replacing "This is for Gemini" with my variable (which is loading and displaying with a document.write, but no dice inside the array...

  7. #7
    Join Date
    Jan 2011
    Posts
    8
    The closest solution I've found thus far is some code over at Dynamic Drive:

    http://www.dynamicdrive.com/dynamici...menu/index.htm

    It's working like a charm except when the page loads, it's loading up all of the horoscopes. I only want the first tab to load, which is a welcome with instructions...no horoscopes shown until mouseover...

    Any suggestions of where I need to make the change? I've been poking but haven't found the solution yet.

  8. #8
    Join Date
    Mar 2009
    Posts
    468
    As long as the original page is generated by PHP it would be best to have the PHP retrieve the data on the server side and then to place it directly into the javascript. (ideally, you would want to have something like CRON just gather the data from the foreign server once a day and store it on your server for quick access) But in any event, once you have built up the array, you can easily embed the array into the javascript with PHP. For example:

    Code:
    //PHP
    $arr = array("Gemini horoscope for the day", "Taurus horoscope for the day");
    $json = json_encode($arr);  // use the core PHP function to turn it into JSON format
    ?> //end PHP processing
    <script type = "text/javascript">  // start javascript tag in the HTML page
    var arr = <?php echo $json ?>;  //use PHP to insert the JSON encoded array into the javascript and fall back out of PHP
    // now the PHP array has been translated into a javascript array
    //continue on below with the rest of the jasvavascript code
    I hope this makes sense.
    Last edited by Tcobb; 01-04-2011 at 12:25 AM.

  9. #9
    Join Date
    Jan 2011
    Posts
    8
    ok, tried this:

    <?php
    $aries = '<script src="http://www.zenzodiac.com/content.zen?aries"></script>';
    $taurus = '<script src="http://www.zenzodiac.com/content.zen?taurus"></script>';
    $gemini = '<script src="http://www.zenzodiac.com/content.zen?gemini"></script>';
    $leo = '<script src="http://www.zenzodiac.com/content.zen?leo"></script>';
    $arr = array($aries, $taurus, $gemini, $leo);
    $json = json_encode($arr); // use the core PHP function to turn it into JSON format

    ?>


    <script id = "s1" type = "text/javascript">
    var arr = <?php echo $json ?>;

    ---rest of code

    Still not working, variables don't seem to be loading. You can verify by the 1 echo that php variables do contain what I need them to. You can see the example at http://www.zanyzodiacs.com/widget.php

  10. #10
    Join Date
    Mar 2009
    Posts
    468
    Yeah--that won't work. You need to use PHP to open a connection to the remote file and pull in the content. For example:
    Code:
    $aries = file_get_contents("http://www.zenzodiac.com/content.zen?aries");
    And once again, doing this for every page request is very inefficient and may cause the PHP script to time out. It would be best to have a cron script pull in the data from the remote server once a day and store it for easy and rapid access on your server.
    Last edited by Tcobb; 01-04-2011 at 12:58 AM.

  11. #11
    Join Date
    Jan 2011
    Posts
    8
    awesome..but how do I get rid of the other junk...?

    the foreign file is not mine, btw. It's free code from another horoscope site.

    check http://www.zanyzodiacs.com/widget.php again to see what I mean...

  12. #12
    Join Date
    Mar 2009
    Posts
    468
    It would probably be best to do that on the PHP side, using a combination of the
    core PHP strip_tags() function and cleaning up the remainder with str_replace(), or you could use regular expressions for this purpose.

  13. #13
    Join Date
    Jan 2011
    Posts
    8
    You have been an amazing help. Thank you so much!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles