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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript request

    This is my first post so I apologize if this is not the right forum for this but I would like to have a script made which I'm hoping somebody here can do. What I would like is to be able to include "hidden messages" on my site which can only be seen by highlighting them by making the text color the same as the background.

    Example:

    Highlight this: This is a secret message.

    I know that I can do this without script (as I did above), but I want to be able to have a different secret message inserted each time the page is refreshed. That is where the script comes in. If possible, I'd like to have the script recognize the background color and match the text to it automatically, but if that is too complicated, it would be easy enough to leave the the text color as a variable and match it to the background color manually.

    I would also like to have the ability to include an image (such as an arrow) on each side of the hidden message so that I can have something like, "Highlight the area between the two arrows below to reveal a hidden message" as instructions for revealing the hidden messages.

    One more thing, I need this script to work without having to add anything to the head of the page because the website building program I use does not allow me to add anything to the head at all. Therefore it has to work within the body of the page only. Thanks!
    Last edited by lguerra; 04-16-2009 at 04:44 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Are the secret messages randomly selected, or are they supposed to be sequential?

    There are several ways of doing this. I hope this example meets your needs. The selection of the random message depends on whether it is random (as shown) or sequential, in which case a cookie is required to keep count.

    Code:
    <p>Mouseover between the arrows to reveal the secret message</p>
    <img src = "rightArrow.gif"><span id = "sm"  style="color: #FFFFFF" onmouseover = "reveal()" onmouseout = "hideIt()"></span><img src = leftArrow.gif">
    
    <script type = "text/javascript">
    
    var messages = new Array();
    messages[0] = "FIRST SECRET MESSAGE";
    messages[1] = "SECOND SECRET MESSAGE";
    messages[2] = "THIRD SECRET MESSAGE";
    messages[3] = "FOURTH SECRET MESSAGE";
    messages[4] = "FIFTH SECRET MESSAGE";
    
    var randy = Math.floor(Math.random() * messages.length);
    document.getElementById("sm").innerHTML = messages[randy];
    
    function reveal() {
    document.getElementById("sm").style.color="#FF0000";
    }
    
    function hideIt() {
    document.getElementById("sm").style.color="#FFFFFF";
    }
    </script>

    “The old believe everything; the middle aged suspect everything; the young know everything.”
    Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)
    Last edited by Philip M; 04-19-2009 at 09:15 PM.

  • Users who have thanked Philip M for this post:

    lguerra (04-20-2009)

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the script! The mouseover effect is not exactly what I wanted, but I was able to remove that from the script and get it to do exactly what I wanted. That was to insert one of several random messages, which are not visible until they are highlighted (because they are the same color as the background), into a webpage. I do like having the option of using the mouseover effect later on if I decide to so I really got a bonus!

    I do have one question however. Can I make the font size of the messages larger? If I can, how?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by lguerra View Post
    I do have one question however. Can I make the font size of the messages larger? If I can, how?
    Well, yes, of course. Just use normal CSS. e.g.

    style="color: #FFFFFF; font-size:20pt"

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks again. I do know some HTML but I know very little about CSS so I wasn't sure how to do that. I'll give it a try.


  •  

    Posting Permissions

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