Id Focus

@okhamJun 02.2004

Howdy lads ‘n lassies,

I’d like to use an id name in an if() parameter if I can determine that it is being focused on. Soooooooooo, I’m wondering how to do this! ha ha. For example:

[code] if(is this_id being focused on?) { do this; } else { do that; }

//[code]

Thanx for any suggestions 🙂

to post a comment

JavaScript

36 Comments(s) _↴

@96turnerriJun 02.2004 — #you could try, instead of what you are trying to do

if(is this_id being focused on?) {

do this;

} else {

do that;

}

<input type="text" name="tb1" value="Test" size="12" />

this

<input type="text" name="tb1" value="Test" onfocus="alert('Oi, Get The Cursor Out Of Here');" onblur="alert('Hey, Why You Click Off Me');" size="12" />

@okhamauthorJun 02.2004 — #g r i n - -well, that works in its own way, 96. I'm working on a cascade menu, though, so I need an if/else statement with a focus evaluation. Any further suggestions quite welcome, however!

@96turnerriJun 02.2004 — #what about onmouseover and onmouseout

eg

<img src="google.gif" alt="Logo" width="78" height="56" title="Logo" onmouseover="alert('Hello');" onmouseout="alert('Goodbye');" />

@okhamauthorJun 02.2004 — #Basically I have to work with script and an if/else statement, 96, cuz I've got to have a loop in a for() statement to hide all contingent <div>s. There are probably easier ways to make a cascade menu, but I'm sort of learning on-the-fly, you know. Most books are inaccurate, and most code I've found on the net so far is pretty cryptic and difficult. I'll just keep searching, and hope I come across something. Feel free to continue making any suggestions!

@96turnerriJun 02.2004 — #ok so couldnt you apply the onmouseover to the divs eg

Home | Page 1 | Page 2 | Page 3

| are spaces between the divs, if you applied on mouseover and out to home div which calls function eg on mouseover="show(home);" mouseout="hide(home);"

if thats not it im sorry, but im loosing the plot ?, can you post your entrie code

Rich

@okhamauthorJun 02.2004 — #I may be working with a limitation I set by using a combined function for hiding and showing, Rich. Let me experiment with a simplified version like your suggestion and see what I can come up with. Get back to ya later - -

@okhamauthorJun 02.2004 — #I looked at doing this with onMouseOver(), but there's the same limitation. - - hmmm... if you like to take a look at it, I'll attach the .htm file. It's pretty short, and the javascript is at the bottom. Thanx for your input, Rich.

@okhamauthorJun 02.2004 — #...oops, forgot to attach my file. Here it is, for anybody that wants to look at it...

[upl-file uuid=ccab6f2c-f140-47e4-a563-aea34a767595 size=738B]menu.zip[/upl-file]

@David_HarrisonJun 03.2004 — #Here are two menus that I just wrote now. One is a CSS menu (much more accessible and cleaner code), the other is a DHTML menu that uses the DOM.

There are some styles common to both to provide a bit of a layout structure, you can replace those styles with some of your own (or tables if you must ?).

Basically the DHTML is doing the same as the CSS but in a much less accessible and more long winded way.

[color=red]Edited to correct HTML, missed off a </ul>.[/color]

[upl-file uuid=68bf70fa-98c6-46e9-9f39-dca93d48fe5c size=2kB]menus.zip[/upl-file]

@okhamauthorJun 03.2004 — #thanx lava, I'll take a look at your code. Afraid I don't have much knowledge on CSS...well, actually, none at all! I'd like to learn it, but I'm on a pretty steep curve trying to develop a page as I go. I'll drop a line after I look at your examples.

@David_HarrisonJun 03.2004 — #Just bear in mind that at first the CSS will look more complicated that it actually is because it's mixed in with other CSS.

Also, the DHTML will look more complicated because you probably won't have seen code like that before but it's also quite simple.

Here they are again but reduced to just the bare bones:

[color=red]Edited to correct HTML, missed off a </ul>.[/color]

I just thought I'd say that I've left in a few selectors with no styles in them so you can see where the styles used to be, they serve no purpose really.

[upl-file uuid=25aed0cc-b0e4-4437-b3b4-353cf4483c63 size=2kB]menus2.zip[/upl-file]

@okhamauthorJun 03.2004 — #*wow*. The CSS was amazingly simple. True, I haven't seen that code before, but I was able to ascertain generally what happens with it. I think I'll go to the bookstore this afternoon and look for a book on CSS. I sort of cringe to spend the money on it, because you know how the book thing goes. I usually end up just gleaning some general ideas out of them that are useful, and the rest generally gets wasted. Well, sure blows the javascript out of the water on that count.

@David_HarrisonJun 03.2004 — #I can recommend a good book for XHTML and CSS, it's called:

Elizabeth Castrow's HTML for the World Wide Web 5th Edition with XHTML and CSS.

I got it a while ago but it's still [b]very[/b] good, it goes through pretty much everything and there's an excellent reference guid in the back for XHTML elements and CSS properties. There may be another version out by now, I don't know.

@okhamauthorJun 03.2004 — #Went and looked at books at the store today, but only found one on CSS, and it didn't looked all that great. I made a note of the one you suggested, and I'll look it up. I've also been toying with that script you made, tried nesting a new <ul> to make successive levels other than the first two. Haven't been successful yet, though.

@David_HarrisonJun 03.2004 — #I think that the book I recommended is on Amazon if you don't mind buying online.

Here's a menu with a few levels, notice how the JavaScript still hasn't changed. It shows the first div tag within any li that is hovered over.

The styles leave something to be desired and the menu is a bit twitchy sometimes but I was going for simplicity rather than smoothness.

I've coloured each level differently so you can see the different areas.

[upl-file uuid=ddc205bb-1dbd-4c2b-bad9-e18f3cf4865c size=2kB]dhtml menu.txt[/upl-file]

@okhamauthorJun 03.2004 — #Looks like the principle is the same, as far as nesting <ul>s. I see you put CSS styles in...perhaps the browser interprets that differently. - - I'll look that book up while I'm online. I still think it's pretty grande that browsers support such simple code, makes building a page so much easier functionally. In the past I've really jumped through the hoops with frames and such. Divs are okay, but I still find that absolute placement presents problems when you have to consider different size monitors and resolutions, ya know.

Which reminds me, does Netscape and Moz have an equivalent code for IE's <iframe>? I'd still like to utilize that, though it might present some crossover problems.

@David_HarrisonJun 04.2004 — #<iframe> is a valid tag for all transitional and frameset DOCTYPE's.

There are three flavours of (X)HTML, strict, transitional and frameset.

Strict has no depreciated tags in it at all.

Transitional has all of the depreciated tags in it such as <iframe> and <font> except for <frameset>, <frame> and <noframes>.

Frameset has the tags in it that Transitional doesn't.

<iframe>'s are now completeley gone from the latest standard of XHTML 1.1 (there is only a strict version of this), so by using <iframe> you are using old outdated (but not IE proprietary) code. With the correct DTD it's still valid.

I only included styles into the latest script because it highlights each level of the dropdown. The only styles that are necessary are the inline styels in the div tag (style="display:none;").

@okhamauthorJun 04.2004 — #I decided to get that book you suggested, Amazon did have it. Perhaps it'll have the current solution to <iframes> in it? I still find them quite useful for loading info without refreshing a whole page. One of the things I'm going to want to focus on in the future is writing info onto a page. Off-the-wall, when you write info in, does the page have to refresh, or a new window be generated with the new content?

@David_HarrisonJun 04.2004 — #I think that with that book you'll be in safe hands.

Here are two more examples, one of an iframe and another with JavaScript writing to the page.

Since iframe is depreciated and the JavaScript way is inaccessible to those without JavaScript enabled, I would suggest that you don't use either method in a real life situation.

Just reload the page, I'm on 56Kbit/s and I don't mind, honest. Most of your page will be cached the first time round anyway.

[upl-file uuid=48a3887f-2ef0-4d95-bb8c-30adde4e8a6c size=1kB]more examples.zip[/upl-file]

@okhamauthorJun 04.2004 — #I've always thought it nuts that in the name of competition standards for code don't exist. So we chase three or more standards around the hoops to make sure anybody can see a webpage. Nutty...

I dunno, though - - Maybe I'm impatient. I've got an old pc, and I had to step down to a 14.4 modem I had when my 56 kb one blew, and loading is a big issue for me. I may still opt to use <iframe>, unless I can find a write solution that is better. Haven't deciphered the code you sent yet, but it required a text to be entered in a text box. What I really want to know is if you can write the contents of an html file to a page. That would solve having large files with all the content included. - - The puzzles never cease! ?

@David_HarrisonJun 04.2004 — #Writing the contents on an HTML page onto an HTML page would be very hard, you'd have to create all of the elements individually.

On top of that it would be [b]very[/b] inaccessible to those without JavaScript and still inaccessible to those with JavaScript, the code I sent you is comparatively new, so only the most recent browsers support it, IE 5+, NN 6+, Opera 7+.

Even if you were to write each page, you would still have to wait for the code to be downloaded and then on top of that you would have to wait for all the images and whatever else to be dowloaded as well.

You're not saving anything by using JavaScript to write your page, if you were to use good, semantic HTML and then use CSS to present it it would be better, the .css external stylesheet can be cached and used on every page.

Don't rely on JavaScript for page navigation (or in your case, don't rely on JavaScript to write your page).

@okhamauthorJun 04.2004 — #Guess I won't spend time right now on chasing that event, writing content of another file to a page; although, even when you refresh a page with a new file, aren't you in the same boat? I mean, waiting for the content of that page to download?

It's sort of tough for me right now, though, not to rely on javascript to write a page. Other than making a painfully plain, and simple HTML page, I don't have much knowledge in other areas to have a reasonable alternative (especially as far as displaying <div>s). Do you think there are really that many people who don't have javascript enabled? I really sort of cringe at the idea of having to create something else entirely from scratch just to direct people to if they don't have javascript enabled.

@David_HarrisonJun 04.2004 — #[i]Originally posted by okham [/i]

[B]even when you refresh a page with a new file, aren't you in the same boat? I mean, waiting for the content of that page to download?[/b][/quote]Yes, my point was that JavaScript doesn't help improve this, it just narrows down your users, so why both using JavaScript to write your pages?

[i]Originally posted by okham [/i]

[B]It's sort of tough for me right now, though, not to rely on javascript to write a page. Other than making a painfully plain, and simple HTML page, I don't have much knowledge in other areas to have a reasonable alternative (especially as far as displaying <div>s). Do you think there are really that many people who don't have javascript enabled? I really sort of cringe at the idea of having to create something else entirely from scratch just to direct people to if they don't have javascript enabled.[/B][/QUOTE]That's the thing though, you don't create a completely different site for no JavaScript users.

You make a page without JavaScript that you're happy with, then you use JavaScript to liven it up, make things more interesting. That way nothing on the page depends on JavaScript so everyone can access your page. Users without JavaScript will see your plain page and the users with JavaScript can experience it as you intended.

About 1 in every 20 users don't have JavaScript enabled ([url=http://www.thecounter.com/stats/2004/May/javas.php]stats[/url]), that's 5%, which if you think about is about what you get for a high rate of interest from a bank.

Take a look at this script that I made for someone a couple of days ago. I say take a look at the script, I mean to say, take a look at this with JavaScript enabled and without JavaScript enabled. It still works without it, and it works with CSS disabled as well, and with both CSS and JavaScript disabled at the same time (which is how really old browsers, search engines and screen readers would "see" it).

I have only used JavaScript to spruce up the page.

[upl-file uuid=44f30eb5-f023-4ff0-90e2-abd753a0ff37 size=16kB]user activated dom slide-show image viewer.zip[/upl-file]

@okhamauthorJun 05.2004 — #At first I didn't see how you could write a page that could be viewed by all standards, but I think I see...you put your javascript and css in a separate file to be imported/accessed, otherwise the page is viewed without. It will be interesting to learn more abuot css - - I still think it's a nutty rat-race having to work around all the forseeable obstacles ?

Working around the aesthetics and practicalities of design is the real challenge, I think. I mean, your content, I believe, suggests much of how your page should be displayed, while one's creative ability renders the design and composition. I've found that artistically I lose a lot in design ? Call it poor taste, I dunno... at least I don't drive a lime-green VW -0-0-

Well, I can't imagine who those 5%'ers are out there, and what they must be using to view content. I know I'm limping along on a prehistoric pc, but at least I've got java enabled. I'd like to think that sooner or later the percentage becomes negligible and one could design in peace. Feds already took a crack at Gates, so I don't suppose there'll be any double jeopardy to save the day on standards...chalk that up to Netscape and others as well. We just buy the software!

@David_HarrisonJun 05.2004 — #By using semantic HTML you can take care of the "What happens when CSS is disabled?" problem straight away. By first designing without using any JavaScript and then adding it afterwards you can take care of the "What happens when JavaScript is disabled?" problem.

Then all you have to worry about is cross browser compatibility with the CSS (the tough bit).

If you have Firefox (and you should!) you can download the [url=http://texturizer.net/firefox/extensions/#editcss]webdeveloper[/url] extension for it and disable what you like when you like very easily.

There's also an "[url=http://texturizer.net/firefox/extensions/#editcss]Edit CSS[/url]" extension which allows you to edit the CSS of any page to how you like (helpful for helping to fix things people are having problems with on these forums).

@okhamauthorJun 05.2004 — #I can see I'll need to readjust how I think about page construction with regard to CSS. Can't do it all in one shot, I suppose. Haven't heard of Firefox, must be a designer tool? I'll just have to get some experience at it. I suppose if a page is designed that way there's not much need to query to find out what browser someone is using.

@David_HarrisonJun 05.2004 — #Firefox, as in [url=http://www.mozilla.org/products/firefox/]Mozilla Firefox[/url] is a browser. In my opinion it's the best browser, followed by Opera, and then a long way behing is IE.

You really should have at least one of each browser.

www.opera.com

www.mozilla.org

www.netscape.com (Netscape and Mozilla are practically the same, but Netscape is dead now.)

Try and get a couple of old browsers as well because people still use those and so you should test your page in them because some CSS is not supported.

@okhamauthorJun 06.2004 — #It's a surprise that you say Netscape is dead. - - Another leg of all this development stuff is the graphics package. I've got an old version of CorelDraw, but I can't save images as .jpg with it. I end up opening them back up in my digi camera software and then saving them again. What are you using?

@David_HarrisonJun 06.2004 — #Well that was a sudden change of subject.

I use Paint Shop Pro 6, I have 7 but I don't like it. I also have a trial version of Photoshop but I think I'm just going to let it expire because it takes too long to load and I haven't really spent time getting to know it.

@okhamauthorJun 07.2004 — #Yeah, but I'm sort of spinnin' my wheels right now while I'm waitng for that book to get here. I used the free shipping so it has an extended time to delivery. - - Biggest thing I don't like about my CorelDraw, is it leaves a white line from the right side all the way around the bottom of an image when I export it to a .gif. Very inconvenient. And it doesn't have any filtering for blur, or other effects, I end up doing that in other programs.

What compiler are you using for your javascript files? I had a software that came with a book on javascript I bought once (another book!), but it didn't work. Having Win95 is a big drawback sometimes, but at least I know that any page I make works on that platform.

@David_HarrisonJun 07.2004 — #Compiler? For JavaScript?

@okhamauthorJun 08.2004 — #Perhaps I should have said Java? I bought "Java: Unleashed" a while back, and it came with Symantec's Cafe Lite, but I never got it to work. Maybe I didn't know how to use it ;;;shrug;;;;. - - I've been toying with the CSS you forwarded me, but on the <ul> menu, I don't see how you got the second <li> to display on the same line to the right of the level above.

@David_HarrisonJun 08.2004 — #Which code?

I don't know any Java by the way.

@okhamauthorJun 08.2004 — #I was referring to this code. What's confusing is that I used the same "float:" parameters as you did when I composed my own outline, but I couldn't get the nested lines to float to the right.

@David_HarrisonJun 08.2004 — #Again I ask, what code?

Maybe if you were to also post your code I could take a look.

@okhamauthorJun 08.2004 — #*oops. I do that a lot, make a reference to something I'm gonna upload, and then forget to include the file. Anyways, there's your original, and then the one I sought to imitate.

[upl-file uuid=f6b20a2b-f3d0-4150-a1f3-68d079640edb size=1kB]dhtml.zip[/upl-file]

Also in #JavaScript _↴

ajax-navigation2 textContent of null (error) BlackJack deactivate checkbox based on select value

Success!

Help @okham spread the word by sharing this article on Twitter...

Tweet This

Id Focus

36 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Id Focus

36 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

36 Comments(s) _↴

Also in #JavaScript _↴