homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

This 49 message thread spans 2 pages: < < 49 ( 1 [2]     
JavaScript location = bookmark/id on same page?
Pressing c brings user to #content, m to #menu, etc...
JAB Creations




msg:3320401
 6:56 pm on Apr 24, 2007 (gmt 0)

This script is in conjunction with another however with a different goal. That thread dealt with enabling letter keys to work due to a case issue.
[webmasterworld.com...]

My goal here is to have JavaScript go to the location of a bookmark/id (what is the proper terminology btw for it's usage? bookmark?) on the page without of course reloading the page when a key is pressed. So for example I want pressing the 'c' key to bring the user to the top of the page where the #content begins.

Here is one example (F2 key) that seems to work on it's own...
document.onkeypress = function(e) {
if (e.keyCode == 113) {location.href = "http://www.webmasterworld.com";}
}

I've also thought of somehow using the current page as the URL and then adding the bookmark at the end inside of a combined variable but I'm not sure if this will reload the page and then go to the bookmark? I'm having a little trouble figuring out how to join the self link with the bookmark in to a variable plus I'm not even sure it'd work. I'm open to any suggestions right now! :)

- John

 

JAB Creations




msg:3325885
 5:20 am on Apr 30, 2007 (gmt 0)

At first I thought this only worked in IE but then I tried a minimal test case and it worked. So then I implemented it in to my site's test case and it didn't work. So I started hacking away some of my already existing JavaScript. Fixed a couple PHP errors but the JavaScript I am using wasn't the problem. Can anyone take a guess? (This works perfectly now, try it locally to see what I mean and don't forget about the pipes!) Thank you VERY much for the wonderful help this past week!

- John

Power-Keys.php
<?php
header("Content-type: application/xhtml+xml");
$xml = '<?xml version="1.0" encoding="UTF-8"?>';
echo $xml;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Power Keys</title>
<script type="text/javascript">
//<![CDATA[
//
// Power Keys
// Version 1.00

// WebmasterWorld.com JavaScript Contributors
// [webmasterworld.com...]

var showmeallcodes = false; // Debugging
var powerKeysEnabled = true;// Default state
var ids = new Array();

// Assign IDs to keycodes
ids[ 49] = "#ha"; // 1
ids[ 50] = "#hb"; // 2
ids[ 51] = "#hc"; // 3
ids[ 52] = "#hd"; // 4
ids[ 53] = "#he"; // 5
ids[ 54] = "#hf"; // 6
ids[ 55] = "#hg"; // 7
ids[ 56] = "#hh"; // 8
ids[ 57] = "#hi"; // 9
ids[ 58] = "#hj"; // :
ids[ 99] = "#content"; // c

function change(){}

function menuhide() {
change('menub1', 'prompt');
change('menub2', 'prompt');
change('menub3', 'prompt');
change('menub4', 'prompt');
change('menub5', 'prompt');
change('menub6', 'prompt');
change('menub7', 'prompt');
change('menub8', 'prompt');
change('menub9', 'prompt');
}

function powerKeysEnable(){powerKeysEnabled = true;}
function powerKeysDisable(){powerKeysEnabled = false;}

function keyPressed( evt) {
var e = evt event;
var key = e.which e.keyCode;

if(!powerKeysEnabled) return;

if( showmeallcodes) {
alert( key);
return;
}

if( ids[ key]) {
menuhide();
location.hash = ids[ key]; // I know he'll correct this to window....

} else switch( key) {
// M = #location1
case 77: // lower m
document.getElementById("menua1k").focus();
break;

// L = #location1
case 76: // lower L
menuhide();
document.getElementById("location1").focus();
break;

// S = #search
case 83: // lower s
menuhide();
document.getElementById("query_string").focus();
break;

// Esc = Close all prompts
case 23:
function prompt() {change('body', 'body');change('head', 'head');}

change('chatroom', 'prompt');
change('audio', 'prompt');
change('browser', 'prompt');
change('browserpatch', 'prompt');
change('connection', 'prompt');
change('dhtml', 'prompt');
change('dhtmlengine', 'prompt');
change('dtd', 'prompt');
change('extendedcss', 'prompt');
change('extendedjs', 'prompt');
change('ieccss', 'prompt');
change('keyboardlayout', 'prompt');
change('keyboardpowerkeys', 'prompt');
change('mediatype', 'prompt');
change('themes', 'prompt');
prompt();
break;
}
}

function powerKeysInit() {
// Find all input fields we're interested in
var inputs = document.getElementsByTagName( "input");
var selects = document.getElementsByTagName( "select");
var texts = document.getElementsByTagName( "textarea");
var tags = new Array();

// Push every element into tags
for( var i =0 ; inputs[ i]; i++) tags.push( inputs[ i]);
for( var s =0 ; selects[ s]; s++) tags.push( selects[ s]);
for( var t =0 ; texts[ t]; t++) tags.push( texts[ t]);

// Search all our input fields....
for( var t = 0; t < tags.length; t++) {
var tag = tags[ t]; // Make code a little more legible

// Check it's input text, or SELECT, or TEXTAREA
if( (tag.tagName == "input" && tag.type == "text") (tag.tagName == "select") ( tag.tagName == "textarea")) {
addEvent( tag, "focus", powerKeysDisable); // Disable when active
addEvent( tag, "blur", powerKeysEnable); // Enable when not active
}
}

addEvent( document, "keydown", keyPressed);
}

function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)
var ret = 0;

if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
else
elm['on' + evType] = fn;

return ret;
}

addEvent( window, "load", powerKeysInit);
////]]>
</script>
<style type="text/css">#query_string:focus {background: #abc;}
h1, h2 {margin-top: 600px;}</style>
</head>

<body>
<div><a href="http://www.webmasterworld.com/javascript/3320399-3-10.htm">webmasterworld post uro</a></div>

<p>Press the keys 1, 2, and c to navigate however navigating back can create a problem.</p>

<form>
<fieldset>
<label for="query_string">Search Site</label><input id="query_string" type="text" value="Search this site..." /><input type="submit" value="Search" />
</fieldset>
</form>

<h2 id="ha">Header id is ha (key 1)</h2>

<div id="content" style="margin-top: 600px;">Content (key c)</div>

<h2 id="hb">Header id is hb (key 2)</h2>

</body>
</html>


JAB Creations




msg:3325895
 5:46 am on Apr 30, 2007 (gmt 0)

There is one very minor annoyance: Opera has key 4 set to minimize the current tab and 5 to restore it. I tried a simple return false without any luck. I suppose some sort of message should be expressed to Opera users?

For those not searching for treasure (RRR)...
Opera --> Tools --> Preferences --> Advanced -->Shortcuts --> Keyboard Setup --> Opera Standard

*edit* It works just fine besides that tidbit. Also this does not work in Konqueror but it does work in Netscape 4! LoL...

- John

[edited by: JAB_Creations at 5:49 am (utc) on April 30, 2007]

Dabrowski




msg:3326103
 12:41 pm on Apr 30, 2007 (gmt 0)

As promised, here's a change function for you that works with a list.

I'm assuming with this that the syntax of your change function is pchange( from, to);. This function will take the last item in the list as the to, so to call it you'd use change( from, from, from, etc, to);.

function change() {
var to = arguments[ arguments.length -1]; // Last in list

// arguments.length -2 will give us all except last one in this loop
for( var a = 0; a < arguments.length -2; a++) {
var from = arguments[ a];

alert( "Changing "+ from +" to "+ to);
}
}

Try that, it should reduce your code size again.

Dabrowski




msg:3326105
 12:42 pm on Apr 30, 2007 (gmt 0)

Also, could you please use the test page I sent you, and clarify definately if FF, Opera lose focus on input boxes?

You've sent me several conflicting messages about this and I'm not sure what order they're supposed to be in!

JAB Creations




msg:3326647
 8:12 pm on Apr 30, 2007 (gmt 0)

Your script works perfectly fine except for two things...

First I guess you accidentally used the old key codes (they are used for uppercase letters and thus will not function as intended).

Secondly while scanning the page for input, select, and textarea elements you had them all defined in uppercase. That conflicted with the application/xhtml+xml media type I use by default.

Both very minor glitches that I'm more then capable of fixing on my own! ;)

As far as Opera goes when you go to the Opera menu (to find and delete these settings) at...

Opera (Program) --> Tools (Menu) --> Preferences --> Advanced --> Shortcuts --> Keyboard Setup --> Opera Standard

Do a search for 5,6,7,8,9 and 0. Most of them are listed as "Platform Windows-Mac-Unix" etc ... and have the single number at the end. Just delete those. I couldn't delete the keyboard profile altogether however. Though after finding 4+ and deleting those functions I was able to have the script work without any problems in Opera 9.20.

Hopefully I've clarified everything now. :)

- John

Dabrowski




msg:3326665
 8:25 pm on Apr 30, 2007 (gmt 0)

First I guess you accidentally used the old key codes

Nope, my goal was to improve your code, by showing you more, highly efficient ways to do the things you were, thus saving you coding time and making your code easier to read. I also provided you a method to test any key code. My methods were spot on.

I didn't change the key codes because this was not my intention.

Why were they in uppercase anyway? Did you have CAPS on when you were testing?

Secondly while scanning the page for input, select, and textarea elements you had them all defined in uppercase. That conflicted with the application/xhtml+xml media type I use by default.

Agreed. I use HTML4.01/STRICT, so uppercase works fine, I use it deliberately as it stands out from the rest of the code. Also I believe (not entirely sure) that in HTML4.01 it's actually correct - as element.tagName always returns uppercase.

Both very minor glitches that I'm more then capable of fixing on my own! ;)

Glad I didn't quite write the whole thing for you.

Opera (Program) --> Tools (Menu) --> Preferences --> Advanced --> Shortcuts --> Keyboard Setup --> Opera Standard

Do a search for 5,6,7,8,9 and 0. Most of them are listed as "Platform Windows-Mac-Unix" etc ... and have the single number at the end. Just delete those. I couldn't delete the keyboard profile altogether however. Though after finding 4+ and deleting those functions I was able to have the script work without any problems in Opera 9.20.

John, I think what you really have to ask yourself, is any user browsing your site actually going to a) know this, b) actually bother to read supposed instructions on your site and do it.

Your script must work with browser defaults, or users will simply not use your site.

Hopefully I've clarified everything now. :)

So far....but you still have a long way to go.

JAB Creations




msg:3326677
 8:34 pm on Apr 30, 2007 (gmt 0)

So far....but you still have a long way to go.

With what? My site is intended for my personal learning about these types of technologies. I love dealing with such conditionals because I have to figure out how to communicate to the user (assuming they have come thus far to keyboard accessibility) about the feature.

For example I could detect if the user is using the tab key to navigate through anchors on my site. I could then trigger some sort of message to alert them about the feature.

I am having one conflict with my class changer right now though. I'll post a test case in a few minutes.

- John

JAB Creations




msg:3326720
 9:16 pm on Apr 30, 2007 (gmt 0)

I'm not sure how any of the the modularized class changer code got mixed in with the power keys. I'm looking at your code and you're using the exact same function name. However the code seems completely alien to the change function I have.

Here is a separate example for both class change and class toggle. I'm not exactly sure what your posted class change function is supposed to do?

I've got an idea however! There are only two classes I change an element to, promptshow or prompt. 'prompt' is set to display: none while promptshow sets the element to display: block. So I'm thinking we could essentially make two arrays perhaps? The first one would get the ids of the elements the user clicks or performs a keypress on. (might pass (e) here I'm guessing) and then changes the class (defined in the array's sub-function again maybe?) which then targets the second id (to change it's class)...

So...
ids[showaudio] = "#audio";

...clicking the element with the id of anchor51 would change the audio element to the promptshow class. Where as...

ids[hideaudio] = "#audio";

...would set the element with the audio id to prompt (hiding it).

Anyway here is my archived example with both functions. I don't use the toggle function myself right now but I can understand it's uses. I'm going to take a crack at adapting the code from the power keys script to see if I can get this to work on my own.

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[

//
// Class Change
//
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

// Class Toggler
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}

// Modularized Events
function init28() {

document.getElementById("anchor1").onclick = function()
{change('divone', 'blue');}

document.getElementById("anchor2").onclick = function()
{change('divone', 'red');}

document.getElementById("anchor3").onclick = function()
{toggle('divtwo', 'blue','red');}

}

window.onload = init28;
////]]>
</script>
<style type="text/css">
a:link, a:visited {color: #fff;}
div {margin: 8px; padding: 8px;}
div.red {background: #a00;}
div.blue {background: #00a;}
</style>
</head>

<body>

<div id="divone" class="red">
<a href="#" id="anchor1">Class Change To Blue</a><span> - </span><a href="#" id="anchor2">Class Change To Red</a>
</div>

<div id="divtwo" class="red">
<a href="#" id="anchor3">Toggle between Red and Blue</a>
</div>

</body>
</html>


Dabrowski




msg:3326814
 10:48 pm on Apr 30, 2007 (gmt 0)

I said:

As promised, here's a change function for you that works with a list.

Your modularized shizzle wasn't included, I saw you referencing the change function once 9, and once 15 times in a row, in a list format. The change function I posted showed you how to use this function to accept a list, so you could change:

change('menub1', 'prompt');
change('menub2', 'prompt');
change('menub3', 'prompt');
change('menub4', 'prompt');

To:

change( 'menub1', 'menub2', 'menub3', 'menub4', 'prompt');

However a toggle idea could work if you only have 2 classes (didn't realise that's what it was).

In your example above with the 2 array idea, you're thinking along the right lines....I think, didn't really understand what you meant....but in your code example you're still thinking sequentially, not logically.

You create the functions to do your bidding, but then call them one by one.

You ideally would create an array based on id to see if you need to do something with it.

For example, you have 3 lots of looking up an element by id, then focusing it. To build this into ...your... keyPressed function, you'd define the id's against the keycodes, so the code would look something like:

var focuses = new Array();

focuses[ 76] = "location1"; // l
focuses[ 77] = "menua1k"; // m
focuses[ 83] = "query_string"; // s

...
function keyPressed( evt) {
...
...

if( focuses[ key]) {
var elm = document.getElementById( focuses[ key]);
elm.focus();
}

...
}

Note, keycodes changed to lowercase.

That way would save most of the repetitive switch/case code that's still there.

You could do something similar for your class toggle thing. Without details I couldn't tell you how but it'd be pretty much the same as this code. You can probably work it out.

JAB Creations




msg:3326859
 11:39 pm on Apr 30, 2007 (gmt 0)

Ok I think we need to sync our working logic of the script together. Here is my current take...

This...
change( 'menub1', 'menub2', 'menub3', 'menub4', 'prompt');

...won't work because there are two ids and a class involved total for any single action.

First there is the id of an element that recieves an event (onkeypress or onclick).
Second there is the target id (the element whose class we desire to change).
Third we need to specifiy the class to change to.

We change the class to either "prompt" (hide) or "promptshow" (show).

So I think we should set two arrays...

var showclass = new Array();
// ids of anchors to click to show element with ID
ids[anchor-click-to-show1] = "element-to-show-1";
ids[anchor-click-to-show2] = "element-to-show-2";
ids[anchor-click-to-show3] = "element-to-show-3";
ids[anchor-click-to-show4] = "element-to-show-4";

var hideclass = new Array();
// ids of anchors to click to hide element with ID
ids[anchor-click-to-hide1] = "element-to-hide-1";
ids[anchor-click-to-hide2] = "element-to-hide-2";
ids[anchor-click-to-hide3] = "element-to-hide-3";
ids[anchor-click-to-hide4] = "element-to-hide-4";

Secondly we somehow have to detect both an onkeypress or onclick event on the first column of both arrays.
Thirdly we have to select the array type (hide or show).
Lastly based on the array's name/type we change the class accordingly.

document.getElementById("__clicked__element__with__array__id").on__EVENT?__ = function(e)
{ change __second__id__to__array__class }

I've been messing with JavaScript like looking text just to help myself organize the logic of how the script would execute in my mind. I'm not sure your last post was approaching it in the same manner? If your script is even more dynamic (and smaller) then my attempt to express my understanding of the logic here then you're going to loose my ability to comprehend anything really LoL...

- John

[edited by: JAB_Creations at 11:41 pm (utc) on April 30, 2007]

Dabrowski




msg:3326867
 11:57 pm on Apr 30, 2007 (gmt 0)

ok, where to begin?

Let's start with your change function. In the code you originally posted, you called the change function with 2 parameters, which I'm guessing now are id and class.

To make your code work in my test script, I added a dummy:
function change() {}

This is most likely what's causing your actualy change function to fail.

Also, as I didn't know what it did, all my previous posts relating to it are based completely on likely hypothesis (fiction).

In your original code, when a key was pressed, you were calling menuhide(); which called change 9 times with these 2 parameters. I now assume this function is change( id, class) and changes the class of id?

In which case, as the class is always the same, my example of change( 'menub1', 'menub2', 'menub3', 'menub4', 'prompt'); most certainly would work.

However now you're bringing toggle's and clicks into the equation, it's a little different. As it's a toggle we can compress the code in your last post to:

var toggleclass = new Array();
// ids of anchors to click to show element with ID
ids[anchor] = "element-to-toggle-class";
ids[anchor] = "element-to-toggle-class";
ids[anchor] = "element-to-toggle-class";
ids[anchor] = "element-to-toggle-class";

See this is what I meant about thinking logically?

Now, to help you enact this, I need to know when you want to toggle your classes. Can you give me a clear hypothesis please, with some example HTML would be nice.

JAB Creations




msg:3326903
 12:57 am on May 1, 2007 (gmt 0)

On my site when a visitor needs to change something on my site without leaving the page I display a prompt. The escape key in the power keys was coded to close all prompts (whether they were open or not). (Misc...) On the main test case with everything I have implemented together I've been coding it so that links that open additional prompts are hidden from the visitor until they close the opened prompt.

I'm only using the change function at this time, not the toggle function (they were in the same archived script for my personal convenience.

Anyway here is a test case...

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[

//
// Class Change
//
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

// Modularized Events
function init28() {

document.getElementById("anchor1").onclick = function()
{change('example1', 'promptshow');}

document.getElementById("anchor2").onclick = function()
{change('example1', 'prompt');}
}
window.onload = init28;
////]]>
</script>
<style type="text/css">
div.prompt {
display: none;
}
div.promptshow {
background-color: #000;
border: #fff solid 1px;
color: #a7a68f;
height: 298px;
left: 50%;
margin-top: -149px;
margin-left: -299px;
position: absolute;
top: 50%;
width: 598px;
/* width: 607px; */
z-index: 66;
}
</style>
</head>

<body>

<div id="divone" class="red">
<a href="#" id="anchor1">Open Prompt</a><span> - </span><a href="#" id="anchor2">Close Prompt</a>
</div>

<div class="prompt" id="example1">
<h2 style="border-width: 0px 0px 1px; font-size: 15px; height: 15px; margin: -4px 0px 0px -4px; padding: 0px; text-align: center; width: 606px;">Example Prompt</h2>
<p>This is an example prompt.</p>
</div>

</body>
</html>


Dabrowski




msg:3326924
 1:20 am on May 1, 2007 (gmt 0)

I see. Well we'd need 2 functions here anyway, one to toggle, but one for your escape key to close everything regardless, so may as well stick to using change.

But there is no reason you can't modify this function to accept a list as above. This will shorten your code.

And you can still use this function if you add the toggle class array method above for keypresses. As for clicks, I would use a toggle function that works by classname.

For example, I have a toggle function to show/hide a div. It's a question/answer page so you click the question and the answer pops up below the question. Now, on the <a> tag I use class='toggle_mydiv'. In the script in my init function I search for all <a> tags, if they have a classname of toggle, the second part is the id of the div to show/hide. You could use that same method.

Do the keypress thing first and the new change function. The click function should be easy to build on top of that.

JAB Creations




msg:3327837
 8:26 pm on May 1, 2007 (gmt 0)

I'm considering using a class to display an icon so regular visitors would be able to understand certain anchors (the ones we are specifically talking about that change classes) open prompts.

There is another attribute I think I could use, rel. I only use this attribute to get around the W3C's bias against frames using the following script...

function target()
{
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
var map = {external:"_blank",content:"content",border:"border",mplayer:"mplayer",top:"top"};
var anchor, i, target;

for (i=0; anchor=anchors[i++];)
if( anchor.getAttribute("href") && (target=map[anchor.getAttribute("rel")]))
anchor.setAttribute("target", target);

}
// window.onload = target;

That script works great and again I don't use rel ever on anchors that I use to open prompts. I'm having a little trouble following you with your array formats so let me bring in a little repetition of what I think you want to do with the script...

change( 'anchorcloseaudio1', 'anchorcloseaudio2', 'anchorcloseaudio3', 'prompt');

change( 'anchorclosebandwidth1', 'anchorclosebandwidth2', 'anchorclosebandwidth3', 'prompt');

But that would be assuming we were using id attributes which have to be unique. rel attributes do not!

In that case my mind goes back to the current (bloated) setup I have now but would it not just be easier at least for closing prompts to have all the prompts closed with a single rel value?

But I also want to close one prompt and open another in some cases. I'm just not sure what the best approach would be in that case. Can I have multiple rel values like I can have multiple classes? (class="one two" in example)

- John

JAB Creations




msg:3327844
 8:38 pm on May 1, 2007 (gmt 0)

Actually now that I think about it we could use the class attribute as we can set more then two classes to an element, correct?

So we could have on a single element...
1.) A close-all-prompts class.
2.) A open another prompt class.
3.) This is a prompt-link class.

I'm trying to mess around with this stuff in my head. Also if we want to close all prompts and then open another prompt it would only be a matter of executing the close-prompt class first and then any open-prompt classes, correct?

- John

Dabrowski




msg:3327937
 9:58 pm on May 1, 2007 (gmt 0)

Well, you can use the name attribute, it doesn't have to be unique and you can use getElementsByName.

It's been taken out in XHTML but fine in HTML4.01/STRICT.

But if you need to show/hide them one by one, you still need an id on each to target it individually.

I have a toggle script, I set the classname to toggle_mydiv, it picks up on the toggle bit, installs event triggers and toggles mydiv. I've found that method effective as you can specify multiple classes, like "prompt toggle_mydiv".

I've also a couple of times used my own custom properties - the DOM is extensible, it works for IE6+ and FF at least. Won't validate but what's the point of having the functionality if you can't use it?

Dabrowski




msg:3329639
 10:51 am on May 3, 2007 (gmt 0)

How are you getting on John? Got anything straight yet?

I've been thinking about it, and using my toggle class technique we could do this just with one classname.

If you use:
prompt_menu
prompt_content
prompt_layout

Then we can match all criteria above.

We know it's a close-all-prompts class because it begins "prompt".
We know it's an open-another-prompt class because it begins "prompt" and and with the name of the prompt to open.
We know it's a prompt link class again because it begins "prompt".

If the prompt-link thing is for CSS then you'd either define it as:
#prompt_menu, #prompt_content, #prompt_layout { color: green; }

Or else you'd give each link 2 classnames, like class="greenlink prompt_menu" and just have one CSS declaration.

Hope this is what you were after? Let me know if you need any help integrating it, but the init function is the place to start!

JAB Creations




msg:3331022
 5:40 pm on May 4, 2007 (gmt 0)

My sister's graduation is this weekend and so I wanted to bust my butt and get the second preview of the next version of my site done. I will look in to this again as soon as I both have time and that second preview is up (as well as message you about it ;)).

The class approach seems the most promising as we can use multiple classes (more then two specifically) and I will do some tests to see what if (hopefully not) any browsers don't support multiple classes. I'm really only concerned about somewhat old browsers (Opera 6, IE 4) but they have problems displaying the basic classes anyway (background icons don't display on anchors even in IE6!) but that does not mean it won't support multiple classes and even if they don't I can probably trick any such browser by using the style class first perhaps. At least I don't have to work until next Wednesday which means I should have enough time for learning and research. Thanks for helping me out with all of this. :)

- John

Dabrowski




msg:3333570
 8:54 am on May 8, 2007 (gmt 0)

tests to see what if (hopefully not) any browsers don't support multiple classes

IE6 does, that's the oldest browser I code for. It also doesn't matter if they apply the style or not, as long as the className property in JS shows the full string of class="".

I'm really only concerned about somewhat old browsers (Opera 6, IE 4)

Why? Chris Wilson, the lead IE guy says "When we shipped IE 6.0, we finally fully supported CSS 1". And that is a half-truth. Why try the CSS/DOM on IE4? It most likely won't work as IE4 was never built to handle it. This is the reason I don't go back past IE6 (2001), and most developers on this forum won't, from what I've seen, bother with anything older than IE5.5.

Chris Wilson's blog here:
[blogs.msdn.com...]

Thanks for helping me out with all of this. :)

No problem, I enjoy it. I like writing JS solutions for this forum 'cos it gives me lots of new challenges. Your idea of keyboard integration is interesting, I might pinch it in the future!

Here's an example of how I've got my div toggle code set up.....

<a class='toggle_bush_question' href='#'>Has there ever been a more amusing president?</a>
<div id='bush_question' class='pop_in'>
No, the current president is a constant source of merriment and chuckles all round. Why don't you re-elect him again next time.
<a class='toggle_bush_question' href='#'>Close</a>
</div>

As you can see, the <a> tags have the toggle class, with the id of the div to toggle. The div contains another toggle link so the user gets and open/close type feeling about it, and you don't have to state on the page that it's a toggle. The <div> itself is styled with the class='pop_in', with the all important display none to start with.

This 49 message thread spans 2 pages: < < 49 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved