Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member eif media's Avatar
    Join Date
    Apr 2011
    Location
    Glossop, UK
    Posts
    73
    Member #
    27461
    Liked
    4 times
    Good morning WDFers!

    Just a quick one (hopefully).

    I'm designing as online wordsearch which highlights words on mouseover but am finding it tricky inserting words vertically. I've tried using the list function but that knocked everything else out of alignment.

    The wordsearch is currently text based, I appreciate that it may be simpler to use images but would rather keep it as text.

    I'm highlighting horizontal words simply using a span class with mouse:hover and was hoping I could do the same for vertical, but combining horizontal and vertical spans isn't as easy as I thought...

    Any ideas?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Normally, I think people do this with Flash, or in the least, javascripting.
    But this has HTML5 written all over it. The only problem with that is, not
    all browsers are ready for HTML5 (as of now).

    So, you're stuck with javascripting for now.

    How much of the script have you already done? And is your script
    generating the puzzles also? And what about diagonal words?

    I'm curious if you're using <table> or <div> for the layout of this.


  4. #3
    Member eif media's Avatar
    Join Date
    Apr 2011
    Location
    Glossop, UK
    Posts
    73
    Member #
    27461
    Liked
    4 times
    Thanks mlseim,

    I thought Javascript would most likely be the way forward. I'm not a fan of flash primarily because of compatability and with .js I've not yet personally come across a need for it, that said there's always time.

    HTML5 would be ideal, but I can't risk alienating visitors because of compatibility.

    The wordsearch is pure <div> - I always try to use .css for layouts wherever possible primarily for flexibility but also for SEO. That said I don't think I'd be losing much by opting for a <table> layout in this case if you have a suggestion which would require it.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    What are the dimensions of the grid (how many across and how many down),
    and are you creating the puzzle yourself with some kind of program?
    How much have you gotten done so far?


  6. #5
    Member eif media's Avatar
    Join Date
    Apr 2011
    Location
    Glossop, UK
    Posts
    73
    Member #
    27461
    Liked
    4 times
    The grid is 43 letters across by 22 high and it is complete, although only features horizontal words at the moment. It's made using purely CSS and HTML.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    I've never attempted anything like that before, but in my mind, I'm thinking that each letter
    needs to be its own <div>, with its own div ID. The div ID identifies its location in the grid ...

    a-z down (rows) and 1-50 across (columns)

    Example:

    <div id="a1">T</div>
    <div id="a2">R</div>
    .
    .
    .
    <div id="w20">E</div>

    When you create the puzzle, you put the words on the grid, and you need to
    save the div ids for each word.

    You would have a database (or list) that looks like this:
    HOUSE,h6,i6,j6,k6,l6
    APPLES,a5,a6,a7,a8,a9,a10
    ORANGES,c7,d8,e9,f10,g11,h12,i13

    The first one is vertical, the row changes, but the column is the same
    The next is horizontal
    The 3rd is diagonal.

    Now, each time the mouse hovers over a letter, you have to loop through the
    database and determine if the current mouse position matches a cell.
    If it does, you do a loop that line and change the "background-color: #fff;" of each <div>.

    There will be a lot of looping each time the mouse hovers over a cell, but I don't
    see any other way of doing it. I just hope that the javascripting is fast enough
    to do it smoothly.

    ===========

    If you put each line of the database in an array, you can use in_array() to see if
    the current cell matches any of the id numbers in the line. That might be pretty fast.
    So now you know the line ... you loop through those id's and change the background color.

    javascript can change <div> properties on the fly ... similar to this:
    Code:
    var div = document.getElementById('div_id');
    div.onmouseover =function(){
      this.style.backgroundColor ='green';
      var h2s =this.getElementsByTagName('h2');
      h2s[0].style.backgroundColor ='blue';
    };
    div.onmouseout =function(){
      this.style.backgroundColor ='transparent';
      var h2s =this.getElementsByTagName('h2');
      h2s[0].style.backgroundColor ='transparent';
    };
    That's the process I had in my mind, but have never done for real.
    eif media likes this.


  8. #7
    Member eif media's Avatar
    Join Date
    Apr 2011
    Location
    Glossop, UK
    Posts
    73
    Member #
    27461
    Liked
    4 times
    That is awesome - more than I could've ever asked for!

    Hopefully I'll give it a bash this weekend and let you know how it goes.

    Thanks again!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:03 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com