Good morning WDFers!
Only a quick one (hopefully).
I am designing as online wordsearch which highlights words on mouseover nevertheless am finding them tricky inserting words and phrases vertically. I’ve tried with all the list function nonetheless that knocked the rest out of position.
The wordsearch is currently text based, I appreciate that it might be simpler to apply images but should keep it seeing that text.
I’m highlighting horizontal words simply utilizing a span class along with mouse: hover and was hoping I could do the very same for vertical, but combining horizontal and vertical spans isn’t as simple as I idea…
Any ideas
Normally, I think people use this with Flash, or in the least, javascripting.
But this provides HTML5 written around it. The only problem with that is, not
all browsers are prepared for HTML5 (as involving now).
So, you’re stuck with javascripting for now.
The amount of of the script brand-new already done And is your script
generating the puzzles also And think about diagonal words
I’m curious if you’re using < table> or maybe < div> for any layout of that.
Thanks mlseim,
I thought Javascript would most probably be the approach forward. I’m not just a fan of flash primarily on account of compatability and having. js I’ve not necessarily yet personally run into a need correctly, that said there may be always time.
HTML5 would be ideal, but I can’t risk alienating visitors as a consequence of compatibility.
That wordsearch is 100 % pure < div> – I always aim to use. css for styles wherever possible principally for flexibility but additionally for SEO. That said I don’t feel I’d be getting rid of much by opting for a < table> layout website if you use a suggestion which will require it.
Are you ready for dimensions of your grid (how many across and how many down),
and are anyone creating the problem yourself with a program
The amount of have you gotten succeeded in doing so far
The grid can be 43 letters over by 22 high which is complete, although only functions horizontal words at this time. It’s made utilizing purely CSS as well as HTML.
I’ve never attempted anything like this before, but inside my mind, I’m thinking that every letter
needs to be its own < div>, using its own div IDENTITY. The div IDENTITY identifies its location in the grid…
a-z along (rows) and 1-50 across (columns)
Case in point:
< div id=" a1" > T< /div>
< div id=" a2" > R< /div>
.
.
.
< div id=" w20" > E< /div>
Once you create the marvel, you put what on the grid, so you need to
save the div ids for each word.
You’ll have a repository (or list) that seems like this:
RESIDENCE, h6, i6, j6, k6, l6
OATMEAL, a5, a6, a7, a8, a9, a10
ORANGES, c7, d8, e9, f10, g11, h12, i13
The primary one is top to bottom, the row variations, but the column is the same
Another is horizontal
That 3rd is diagonal.
Right now, each time the mouse hovers on the 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 this " background-color: #fff; " of each one < div>.
There will be a lot of looping every time the mouse hovers with a cell, but MY SPOUSE AND I don’t
see any way of doing work. I just hope that this javascripting is quick enough
to perform it smoothly.
===========
In the event you put each line of the database in an array, you can use in_array() to see if
existing cell matches any from the id numbers within the line. That could possibly be pretty fast.
So you know the series… you loop by means of those id’s as well as change the background color.
javascript can certainly change < div> properties to the fly… similar to the present:
var div = insurance. getElementById('div_id');
div. onmouseover =function()
this specific. style. backgroundColor ='green';
var h2s =this. getElementsByTagName('h2');
h2s0. design. backgroundColor ='blue';
;
div. onmouseout =function()
this specific. style. backgroundColor ='transparent';
var h2s =this. getElementsByTagName('h2');
h2s0. design. backgroundColor ='transparent';
;
That’s doing this I had inside my mind, nonetheless have never carried out for real.
Which is awesome – over I could’ve ever asked for!
Hopefully I’ll supply it a harrass this weekend and let you know how it goes.
Many thanks again!