Johan

Hi,

I am trying to make a script work from PPK(quirksmode.org) - it is an  image
rollover that can hold a clicked state of that imagelink when clicked-

This is the page where a rollover image script works witht W3CDOM properties

http://www.quirksmode.org/js/mouseov.html

There is another script that is an extension (but much older script it works
also in W3CDOM deprived browser versions-builds)?

http://www.quirksmode.org/js/click.html

The whole idea is that I want to make the click version work exactly as the
mouseover version.

This is what I came up with:

> var W3CDOM = (document.createElement && document.getElementsByTagName);
>
> var mouseOvers = new Array();
> var mouseOuts = new Array();
> var mouseClicks = new Array();
> var select = -1;
> var temp = 0;
>
> function init()
> {
>     if (!W3CDOM) return;
>     var nav = document.getElementById('mouseovers');
>     var imgs = nav.getElementsByTagName('img');
>     for (var i=0;i<imgs.length;i++)
>     {
>         imgs[i].onmouseover = mouseGoesOver;
>         imgs[i].onmouseout = mouseGoesOut;
>         imgs[i].onclick = mouseGoesClick;
>         var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
>         mouseOuts[i] = new Image();
>         mouseOuts[i].src = imgs[i].src;
>         mouseOvers[i] = new Image();
>         mouseOvers[i].src = imgs[i].src.substring(0,
>           imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
>         imgs[i].number = i;
>         mouseClicks[i] = new Image();
>         mouseClicks[i].src = imgs[i].src.substring(0,
>           imgs[i].src.lastIndexOf('.')) + "_clic" + suffix;
>         imgs[i].number = i;
>     }
> }
>
> function mouseGoesOver(no)
> {
>  if (document.images && select ! = no)
>    {
>     this.src = mouseOvers[this.number].src;
>    }
> }
>
> function mouseGoesOut(no)
> {
>  if (document.images && select != no)
>    {
>     this.src = mouseOuts[this.number].src;
>    }
> }
> function mouseGoesClick(no)
> {
>     this.src = mouseClicks[this.number].src;
>     temp = select;
>     select = no;
>     if (temp != -1) {mouseGoesOut(temp)}
> }
>

Regards


Johan.

Hi,

I have made a kind of basic stylesheet to support the obscure netscape 4.x
user.
All fine. Except I used inline styles [needed for advanced layout capable of
CSS2 and up] and want netscape 4.x  to ignore them.
I want to remove the inline styles on which NN4.x chokes so all ancient
browsers which cannot handle the advanced layout and javascript do a nice
job in degrading nicely.

See example code
<ul>
    <li style="width: 100px;">
        <a style="width: 100px;" href="someImage.html">
            <img style="width: 100px;" src="someThumb.jpg"
            alt="" width="100" height="100">
        </a>
    </li>   
</ul>


How can I set the inline style to null or better even remove them in eg Netscape 4?

So when doing object detection

if (!document.getElementById)
{
function remove inline styles here for eg Netscape 4.x editions
}

[Ed. This is an invalid construct - do not use it]

Kind regards,

Johan

Thank you for replying so quickly.  I tried the percentage instead of pixel
width. No go.

To set the width from a px width to a percentage width is not an option.
 I use a css-based multi-rollover for a thumbnail section.

If I would go for an em-percentage based layout maybe this could be an
option. Plus the thumbnails  can vary in width too and the overall  height
is fixed though.

media="all"

You can opt for media="screen, projection" too to exclude eg Netscape 4.x -
but media="all"  stands for all media like screen, projection, print

I also figured out for Netscape 4.x in this case tested a mac version this:

- inline styles on A tags  choke in Netscape 4.x - meaning anchors not
 clickable.
- inlines styles on other elements in Netscape 4.x - it does not matter.

Hi Tarquin,

I want to know if NN3 or IE3 are able to hide an image tag much so as the
equivalent CSS property display: none?

These images (arrows up and down and drag button) I need to be hidden are
part of a div scroller that does not work in IE3 or NN3.

So I decided to go for that one user or even two browsing a webpage with IE3
and NN4 and show the paragraph sections [read text contained in p-tags].

sample code

<div id="up">
    <span title="scroll text ">
<img src="up.gif" alt="" height="12" width="21">
    </span>
</div>

How can you with JavaScript hide the image in IE3 or NN3 for that matter?

Cheers,


Johan

> img.myimg { height: 12px !important; width: 21px !important; }
> I have no idea what side effects that may have in other browsers.
> To be honest, you are much better off just ignoring NN3 and IE3.

Thanks again for the quick reply. The !important rule I tested in IE WIN 6
only to overrule a rule - but it is not working good cross-browser.
I think due to the legacy of this rule - I fo
If set the !important rule to target one specific browser eg IE6 WIN than I
could do this.

I found that if redeclaring the same rule within the same declaration IE
ignores the ! important rule

Otherwise the only way  to find out is testing it.

I found another way too.
If would use a transparent gif , 1px by 1px  [needed to comply for W3C
standards plus old browsers will display transparent gif]
set a class inside the img-tag  the drag.gif as background with an extra
rule for img display: block or display: inline so can use positioning rule
Therefore eliminate the use of !important rule.


eg for the drag button

CSS

#drag {
cursor: pointer;
 z-index: 4;
position: relative;
/* this was first position: absolute;  top: 132px;  left: 647px;  but
changed it because otherwise the drag button would be positioned absolutely
towards viewport but position: relative can be buggy and sometimes a
livesaver */

img.drag-rpl {
background: url(/images/drag.gif) no-repeat top left;
height: 12px;
width: 21px;
position: absolute;
top: 132px;
 left: 647px;
display: inline /* maybe display: block is better idea - dont know really */
}

<code>

<div id="drag">
<img class="drag-rpl" src="transparent.gif" height="" width="" alt="">
</div>
<!-- // drag button -->

</code>

regards,


Johan.

Tarquin,

It is always nice to experiment with trial and error. But I am going to
leave the images as they are. I am glad my div scroller even work in NN4.

I think if you want to degrade everything  for old browser sake - the way
the source is built that it is also reflected without styling.


Cheers.

Dear Tarquin

I would like if possible you could give me some feedbak about this script:
Safari does not seem to append an external js to throught DOM. Would a
document.write to append the script be the alternative then for Safari?
I checked the DOM inspector - it is not

<code>
var W3CDOM = document.createElement && document.getElementsByTagName;
function includeJs(jsPath){
 // check browser support W3CDOM
if (!W3CDOM) {return;}
  var js = document.createElement("script");
  js.setAttribute("type", "text/javascript");
  js.setAttribute("src", jsPath);
  document.getElementsByTagName("head")[0].appendChild(js);
}
    /* some helper function to enable load of multiple functions without
    them being overwritten*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(includeJs("/js/scriptOnejs"));
addLoadEvent(includeJs("/js/scriptTwo.js"));

</code>


Regards,


Johan

Johan,

> Safari does not seem to append an external js to throught DOM.

Correct, it does not - an issue I covered on
http://www.howtocreate.co.uk/loadingExternalData.html

> Would a document.write to append the script be the alternative then for
Safari?

not necessarily. using document.write after the page has loaded will
replace the page with a new page containing only the new content. However,
you could run a script immediately before the end of the body that adds any
scripts you need - that should have the desired effect in all browsers, as
long as you only need to add them at "onload" time:

<script type="text/javascript">
var newScripts = [];
newScripts[newScripts.length] = '/js/scriptOnejs';
newScripts[newScripts.length] = '/js/scriptTwojs';
</script>

...rest of page...

<script type="text/javascript">
for( var i = 0, j; j = newScripts[i]; i++ ) {
    document.write('<script src=\"'+j+'\"'+
      'type=\"text\/javascript\"><\/script>');
}
</script>
</body>


If you need to do this after the page has loaded, sorry, but you are out of
luck.

Dear Tarquin,

I understand it would be best to load any external scripts first without any
window.onload or similar event handler
to ensure the external javascripts have loaded.

The whole idea was to exclude non DOM browsers and IE Mac because the other
scripts that follow  do work
ok in the latter browser. What I wanted to do was to browser sniff for Ie5
mac and exclude the external scripts scriptOne and scriptTwo
because they are full of advanced Dom scripts and Ie5 mac choked on them,
even the perfectly working init.js (some DOM nav script) in Ie5 mac
did not do anything  as long the other externals were explicit hard-coded
like this. the funny thing was that even the scripts are excluded from Ie5
Mac the
scripts seemed to be loaded somehow. But my idea did work, and all scritps
could remain external.

this did not work:
<head>
<script type="text/javascript" src="init.js"><script>
<script type="text/javascript" src="scriptOnejs"><script>
<script type="text/javascript" src="scriptTwo.js"><script>
</head>

This did work:

<head>
<script type="text/javascript" src="init.js"><script>
</head>

code: init.js

Like this:

var W3CDOM = document.getElementsByTagName && document.createElement;
var ie5Mac = (navigator.userAgent.indexOf('MSIE 5') != -1  && 
 navigator.userAgent.indexOf('Mac') != -1);
var browserSafari = /safari/i.test(navigator.userAgent);
  
function includeJs(jsPath) {
    // check browser support W3CDOM
    // to support ie5 mac and avoid any runtime errors in the latter browser
    // explicit excluded ie5 mac here,     if (!W3CDOM || ie5Mac) { return; }
      var js = document.createElement("script");
    js.setAttribute("type", "text/javascript");
    js.setAttribute("src", jsPath);
     document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("/js/scriptOne.js");
includeJs("/js/scriptTwo.js");

// if previous method fails, fix Safari, ie5 mac allready excluded
// ie5 mac does not do anything with theexternal scripts just fixed
// some syntax here and there
// so ie5 mac does not throw any runtime errors
// Maybe TODO: browsers that support W3CDOM could be added here though
// eg Opera 7 and up support the CSS and Js
if (browserSafari) {
    document.write('<script type="text/javascript" src="/js/scriptOne.js"><\/script>');
    document.write('\n');
    document.write('<script type="text/javascript" src="/js/scriptTwo.js"><\/script>');
}

// other scripts
addLoadEvent(init.js)

 are these script equal then:

 <script type="text/javascript">
 var newScripts = [];
 newScripts[newScripts.length] = '/js/scriptOnejs';
 newScripts[newScripts.length] = '/js/scriptTwojs';
 </script>

 ...rest of page...

 <script type="text/javascript">
 for( var i = 0, j; j = newScripts[i]; i++ ) {
 document.write('<script src=\"'+j+'\"'+
 'type=\"text\/javascript\"><\/script>');
 }
 </script>
 </body>

and (difference here, this code is in init.js in the head)

document.write('<script type="text/javascript" src="/js/scriptOne.js"><\/script>');
document.write('\n');
document.write('<script type="text/javascript" src="/js/scriptTwo.js"><\/script>');
yours seems better ...

> If you need to do this after the page has loaded, sorry, but you are out
> of luck.

Again in the head without the external scripts being added without waiting
the page has loaded seems the way to go to ensure they are loaded
Hope you understood what i wanted to bring accross ... Thanks again for all
assistance, in advance.

Regards,
Johan

Hi Tarquin,

The best to you.
You might guess allready from the e-mail title, I am again asking you for
some help (if possible) with a script related to DOM and Js.

My problem
How can I assure that the 'to-be-appended' Js will be right after the title
tag? Is there any way to detect the title tag (Node??) in IE 5 and up, and
then append the Js.

<code>
function ()
{
     var js = document.createElement("script");
   js.setAttribute("language", "JavaScript");
   js.setAttribute("type", "text/javascript");
   js.setAttribute("src", "js/keepieapart.js");
   //    TODO: append this  JS right after title tag regardless of any
   //scripts or stylesheets that are in that page ...
   document.getElementsByTagName('head').item(0).appendChild(js);
     }
</code>

regards,

Johan

Hi Tarquin,

-- What I found about loading the script:

I. This first adapted script loaded the script fine:

<code>

function appendJs(jsPath) {

   var js = document.createElement("script");
     var oTitle = document.getElementsByTagName('title')[0];
       var oHead = document.getElementsByTagName('head')[0];
     js.setAttribute("language", "JavaScript");
   js.setAttribute("type", "text/javascript");
   js.setAttribute("src", jsPath);
     if( !oTitle ) {
               oTitle = oHead.lastChild;
                }
                       if( oTitle == oHead.lastChild ) {
           oHead.appendChild(js);
       } else {
           oHead.insertBefore(js,oTitle.nextSibling);
       }
}
appendJs("keepieapart.js");

</code>

II.  This one too:

<code>

function appendJs () {

   var js = document.createElement("script");
   var oTitle = document.getElementsByTagName('title')[0];
   var oHead = document.getElementsByTagName('head')[0];
     js.setAttribute("language", "JavaScript");
   js.setAttribute("type", "text/javascript");
   js.setAttribute("src", "keepiepart.js");
     if( !oTitle ) {
               oTitle = oHead.lastChild;
                }
                       if( oTitle == oHead.lastChild ) {
           oHead.appendChild(js);
       } else {
           oHead.insertBefore(js,oTitle.nextSibling);
       }
}
window.onload = appendJs;

</code>

III. and this function (anonymous) did nothing:
[Ed. Of course not. you have to call the function if you want it to run]

<code>
function  () {

   var js = document.createElement("script");
   var oTitle = document.getElementsByTagName('title')[0];
   var oHead = document.getElementsByTagName('head')[0];
     js.setAttribute("language", "JavaScript");
   js.setAttribute("type", "text/javascript");
   js.setAttribute("src", "keepiepart.js");
     if( !oTitle ) {
               oTitle = oHead.lastChild;
                }
                       if( oTitle == oHead.lastChild ) {
           oHead.appendChild(js);
       } else {
           oHead.insertBefore(js,oTitle.nextSibling);
       }
}
</code>

regards,


Johan

Hi Tarquin,

Could you help me (if possible)  with this Js 'image preload' script ?
Will it do the job? Are there any remarks on this script?

<code>
   // create array of the images
   var photoArray = new Array(

                               {src:"images/01.jpg"},
                               {src:"images/02.jpg"},
                               {src:"images/03.jpg"},
                              {src:"images/04.jpg"},
                               {src:"images/05.jpg"},
                               {src:"images/06.jpg"},
                               {src:"images/07.jpg"},
                               {src:"images/08.jpg"}
);

   var myImages = new Array();       // loop the array,of the images
   for (var i = 0; i < photoArray.length; i+=1) {
   //  width, height of thumbnails are all 100px by 100px
   myImages[i] = new Image(100, 100);
   //  the actual preloading ('caching') of the array of images
   myImages[i].src = photoArray[i].src;
   }

</code>

Thanks for any help in advance.

Regards,


Johan

Tarquin,

Thanks for clarifying this, so no need to add src: to the Array. So the
width and height can be left out ...

Cheers

Hi Tarquin,

Could you offer me any help please, if possible, with this javascript
problem?

I have a JS and DOM slideshow that works fine in all modern browsers except
IE and Opera.

Firstly, IE 5.x and IE 6 have problems with loading the appropriate image,
caption and image number with cache settings 'Every Time ..' and
'Automatically'.

In the script I have this:

// Event listeners for onload and onclick events
document.getElementById('Photo').onload = initFade;

The image should be loaded here:

<div id="Container">
<div id="PhotoContainer">
<img id="Photo" src="/images/c.gif" alt="" width="400" height="300">
</div>
</div>

In my page set-up I can navigate from thumbnails to go to the slideshow page
to show 'the asked for' enlarged image, also one can go back and forth to
see the thumbnails again by means of the up arrow button or the back button
of the browser. Here is what happens, when going back to the slideshow page,
these cache settings in IE 'automatically' and 'Every time' fail to load the
images and activate anything else of that slideshow. Other browsers have no
problem what so ever going back and forth these pages.

What struck me is that on this page: <[URL]>, a similar script <[URL]> is
used for a fade in-out slideshow and there all works fine. (tested with the
back-button). So I thought maybe there could be a solution (to add to my
script).

How can this be solved for IE?

Kind Regards,


Johan

Dear Tarquin,

Thank you for the interesting idea. It does force the image to load when the
'image loading' problem occurs.
Only what happens too, it seems that the image is reloading all the time,
the navigation does work, bu then again the image keeps on being reloaded.

Is there a way to keep the loading initiated by
document.getElementById('Photo').onload(); to restrict to only once ?


Johan.

Dear Tarquin,

This is what I wanted to do but did not know how. Thanks a million.

The images are loaded properly with cache settings 'automatically' and
'everytime you visit'' in IE also the back button works too.

Kind regards,

Johan

Hi Tarquin,

I do appologise to ask again for help.

I already have a alert working onclick on the link but the actual function I
want to apply is history.back() like this

I have first this (due to the nature of the function).

loadAPI = function(){
  // Instantiate HTMLobj
  // [CODE SNIP]...

  API.Back  = new HTMLobj('Back');
   }
onload = loadAPI;

// [CODE SNIP]...

// goBack function

function goBack() {
  // test-alert works
  alert('check if onclick works');
  // not working
  history.back();
  }

document.getElementById('Back').onclick = goBack;


I have trouble understanding (because before I did <a
href="javascript:history.back();">)
What comes now inside the href <a href="???" id="Back" ...>

the HTML

<div id="prevnext">
<ul id="prevnext-nav">
<li id="prev"><a id="PrevTextLink" href="#" title="&larr;&nbsp;vorige
beeld">vorige beeld</a></li>
<li id="overview"><a href="???" id="Back" title="overzicht van beelden
project">overzicht</a></li>
<li id="next"><a href="#" id="NextTextLink" title="volgende
beeld&nbsp;&rarr;">volgende beeld</a></li>
</ul>
</div>


Regards,


Johan

Tarquin,

History.back() was a wrong choice   (it even did not serve any purpose, a <a
href="" ..> does the trick in this case.
The API is one of those JS libs that is a free licence, (GPL or something)
with copyright notices, you can adapt it as you will.

[snip.]

Thanks again for your assistance,

Kind regards,

Johan

Dear Tarquin,

I am asking you (if possible) could help me out with a 'JS scroller' issue.

I have been trying relative font-sizing, so that font-size can be increased
or dicreased.

In IE6 WIN, Moz FF I noticed a similar thing: when resizing the font of my
DIV scroller, the
height of the DIV is not recalculated. Two things happen, decreasing leaves
a surplus of DIV height
which is 'not 'the end of the world' since the text in the scrool box is
still fully accesible, only a
gap stays after the last <p>. When the font-size is enlarged the full text
is cut off. When reloading the page
the div height is recalculated and all is in order.

Do you know if it is possible to do a 'on the fly' recalculation of a div
height for that matter?



a testpage:
<[URL]>

Kind regards,


Johan

Hi Tarquin,


I have a question about loading JS in the body, just before the end tag.

Eg

<script type="text/javascript">
        Element.cleanWhitespace('content');
        init();
    </script>
</body>


Is there an alternative to do this sort of loading cross-browser in the head ?
Or is the above code an equivalent for <body onload="...>
This way of loading helps to load 'in this case' a DOM script.


Thank you for any help with this forementioned issue.


Kind regards,


Johan

Hi Tarquin,

I am asking if you could possibly  help me out with this DOM/JS issue.

I have created an array that holds three textmessages, how can I
remove the created textNode and feed the next message in line? Is
there also an issue with cleaning any whitespace too?

A code snippet:
----------------------

var altTextBanners = new Array(
"myText1",
"myText2",
"myText3");

altTextBanners.currentIndex = -1;

function initRotate() {

if (!document.getElementById) return;

altTextBanners.currentIndex++;

var text = document.createTextNode(altTextBanners[altTextBanners.currentIndex]);
var message = document.getElementById("message");
message.appendChild(text);
// how to remove the created TextNode and get the next one in the array
// ... ??
}

HTML

<span id="message"></span>



Thanks for any help in advance,

Kind regards,


Johan

Thank you for helping out, dear Tarquin. I added some functionality
and ran into another issue.

I need a different delay setting when the array is to the end and to
the beginning again:

Something like this:
----------------------------

var delay = 1000;
// 0 or 1?
altTextBanners.currentIndex = -1:

// Set delay to 5 sec when going thru the array again ?

if (altTextBanners.currentIndex >= altTextBanners.length) {
altTextBanners.currentIndex = 0; delay = 5000; }

setInterval froze Safari, Firefox, setTimeout does not?

 window.onload = function () {
    initRotate();
    setInterval(initRotate, delay);
 };




How to the same thing with this method you suggested?

altTextBanners.currentIndex++;
altTextBanners.currentIndex = altTextBanners.currentIndex %
altTextBanners.length;

Tarquin,



Suppose I want to alter the content of the alt attribute of the img
tag using that same Array? Like this

var altTextBanners = new Array(
["myText1",1000],
["myText2",1000],
["myText3",5000]
);

 function initRotate() {
// ... [code snippet]

altTextBanners.currentIndex++;
altTextBanners.currentIndex = altTextBanners.currentIndex %
altTextBanners.length;

element.setAttribute("alt", altTextBanners[altTextBanners.currentIndex][0]);

}


Johan

Hi Tarquin,

I am puzzled with this.

To remove the inline JS I would like to add a onclick event handler to
the JS and find each time the *first next <ul> by using DOM to execute
a function.

Is it that I need nextSibling or something similar?


CSS

.hiddenAnswer { display: none; }

the HTML

<a href="javascript:toggleAnswer('foldinglist1');">The Question</a>
<a href="javascript:toggleAnswer('foldinglist1');">Reveal the answer</a>

<ul id="foldinglist1" class="hiddenAnswer">
<li>This is the answer</li>
<li><a href="javascript:toggleAnswer('foldinglist1');">Hide Answer</a></li>
</ul>

<a href="javascript:toggleAnswer('foldinglist2);">The Question</a>
<a href="javascript:toggleAnswer('foldinglist2');">Reveal the answer</a>

<ul id="foldinglist2" class="hiddenAnswer">
<li>This is the answer</li>
<li><a href="javascript:toggleAnswer('foldinglist1');">Hide Answer</a></li>
</ul>
 <!-- and so on -->

JS

function toggleAnswer(ul_id) {
   var u = document.getElementById(ul_id);

   if(u.className == "hiddenAnswer") {
      u.className = null;
   } else {
      u.className = "hiddenAnswer";
   }
}

Thanks in advance for any help.



Johan

Hi Tarquin,

I am asking your assistance on inserting anchors in a div one after the other.

I have tried to insert <a><img /></a>s one after the other in a div
named lightbox.

As you can see here at the demo page <http://test.zoic.be/sub-scape/>
where you need to click on the image to see a flyer poping up (this
works in Moz FF, Safari) but fails in Opera enterily:

This code < http://test.zoic.be/sub-scape/inc/lightbox.flyer.js>I used
to insert the <a><img /></a>s on top of a image layer underneath them.

// dodgy helper func insertAfter()

function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}

// end

How can I accomplish the same thing that I create an <a> element and
insert it one after the other without this method?

<div>
<a><img /></a>
<a><img /></a>
<a><img /></a>
<a><img /></a>
<a><img /></a>
</div>

Many thanks in advance,


Johan