Avatar

Expand-Image without JavaScript (Technics)

by Alfie ⌂ @, Vienna, Austria, Wednesday, March 21, 2007, 22:59 (4564 days ago)

Hi Alex!

Just tested the forum without JavaScript.

I think that it would be a good idea to set the expand-image [image] and the preview-bubble [image] with 'document.write', because otherwise it will serve no function and users maybe simply give up clicking on it (before they realise there's a function in the header for it).

--
Best regards,
Alfie (Helmut Schütz)
BEBA-Forum (v1.8β)

Avatar

Expand-Image without JavaScript

by Alex ⌂ @, Thursday, March 22, 2007, 20:03 (4563 days ago) @ Alfie

I think that it would be a good idea to set the expand-image [image] and the preview-bubble [image] with 'document.write' [...]

You're right! The only thing is: there's a lot of overhead with the document.write method.

Alex

Avatar

Expand-Image without JavaScript

by Alfie ⌂ @, Vienna, Austria, Friday, March 23, 2007, 00:09 (4563 days ago) @ Alex
edited by Alfie, Friday, March 23, 2007, 00:41

I think that it would be a good idea to set the expand-image [image] and the preview-bubble [image] with 'document.write' [...]

You're right! The only thing is: there's a lot of overhead with the document.write method.

True. Although the script would reside in the browser's cache, unfortunatelly I guess it would call for setting an unique 'id' for every displayed thread.

Another point: the code does not validate yet.

(1)

<meta http-equiv="Content-Script-Type" content="text/javascript" />

should be inserted in the <head> of template.html

(2) multiple

<a href="#" ...</a>

referring to a nonexisting anchor

(1) Is trivial.
(2) Use an anchor for an element which exists on every page, e.g.,

<div id="top">

Now

<a href="top" ...</a>

should do the job (and no harm if JS is not onboard).
For details (although CSS instead of JS) see Ingo Turskis Infobox.

--
Best regards,
Alfie (Helmut Schütz)
BEBA-Forum (v1.8β)

Avatar

Expand-Image without JavaScript

by Alex ⌂ @, Friday, March 23, 2007, 10:33 (4563 days ago) @ Alfie

Another point: the code does not validate yet.

For the W3C Validator it seems to be OK.

<meta http-equiv="Content-Script-Type" content="text/javascript" />


should be inserted in the <head> of template.html

OK, didn't know that.

(2) Use an anchor for an element which exists on every page, e.g.,

Hm, this is IMHO no help for users that have deactivated JavaScript. More appropriate would be linking to the entry. But actually in this case there's no alternative if JavaScript isn't available so we should consider displaying the preview link with document.write.

Alex

Avatar

Expand-Image without JavaScript

by Alfie ⌂ @, Vienna, Austria, Friday, March 23, 2007, 11:19 (4563 days ago) @ Alex

For the W3C Validator it seems to be OK.

I prefer the SELFHTML-validator (giving much more information).

Hm, this is IMHO no help for users that have deactivated JavaScript. More appropriate would be linking to the entry. But actually in this case there's no alternative if JavaScript isn't available so we should consider displaying the preview link with document.write.

Yes, you are right.

--
Best regards,
Alfie (Helmut Schütz)
BEBA-Forum (v1.8β)

Avatar

Expand-Image without JavaScript

by Alfie ⌂ @, Vienna, Austria, Saturday, March 24, 2007, 00:23 (4562 days ago) @ Alfie

Hm, this is IMHO no help for users that have deactivated JavaScript. More appropriate would be linking to the entry. But actually in this case there's no alternative if JavaScript isn't available so we should consider displaying the preview link with document.write.

Hey, you are fast!

The masking of JS right now follows HTML4.01 notation:

script type="text/javascript">
<!--
document.write(' <a href="#" onclick="ajax_preview(226); return false"
title="Show preview">
<img src="templates/default/images/ajax_preview.png" 
alt="Show preview" width="11" height="11" /></a>')
//-->
</script>

For XHTML it should read

script type="text/javascript">
<* <![CDATA[ */
document.write(' <a href="#" onclick="ajax_preview(226); return false"
title="Show preview">
<img src="templates/default/images/ajax_preview.png" 
alt="Show preview" width="11" height="11" /></a>')
/* ]]> */
</script>

instead.

You also may omit either the 'width' or the 'height' statement of any image (if no resizing is done, there is no difference in performance of rendering, but keeps the code at least a little bit smaller - and the spirit of mlf high.

A further improvement would be referring to either a script in the <head> or even an external script, which contains the 'document.write'-stuff. Assignment would just contain the thread's id as a variable.

--
Best regards,
Alfie (Helmut Schütz)
BEBA-Forum (v1.8β)

Avatar

Expand-Image without JavaScript

by Alex ⌂ @, Saturday, March 24, 2007, 10:19 (4562 days ago) @ Alfie

For XHTML it should read

script type="text/javascript">
<* <![CDATA[ */
document.write(' <a href="#" onclick="ajax_preview(226); return false"
title="Show preview">
<img src="templates/default/images/ajax_preview.png" 
alt="Show preview" width="11" height="11" /></a>')
/* ]]> */
</script>

instead.

Isn't that the way for XHTML 1.1 only?

You also may omit either the 'width' or the 'height' statement of any image

Hm, OK, this would save a little bit of code. Anyway I'm not that much convinced of this practice.

A further improvement would be referring to either a script in the <head> or even an external script, which contains the 'document.write'-stuff. Assignment would just contain the thread's id as a variable.

That's a question of separating code from design (or in this case keeping design issues in the tepmplates): As the ajax preview is also part of the design the HTML structure should IMHO be marked out in the template file.

Avatar

Expand-Image without JavaScript

by Alfie ⌂ @, Vienna, Austria, Saturday, March 24, 2007, 12:52 (4562 days ago) @ Alex

For XHTML it should read

script type="text/javascript">
<* <![CDATA[ */
document.write(' <a href="#" onclick="ajax_preview(226); return false"
title="Show preview">
<img src="templates/default/images/ajax_preview.png" 
alt="Show preview" width="11" height="11" /></a>')
/* ]]> */
</script>


instead.

Isn't that the way for XHTML 1.1 only?

According to SELFHTML also for XHTML 1.0


You also may omit either the 'width' or the 'height' statement of any image

Hm, OK, this would save a little bit of code. Anyway I'm not that much convinced of this practice.

Just a matter of taste ;-)

A further improvement would be referring to either a script in the <head> or even an external script, which contains the 'document.write'-stuff. Assignment would just contain the thread's id as a variable.

That's a question of separating code from design (or in this case keeping design issues in the tepmplates): As the ajax preview is also part of the design the HTML structure should IMHO be marked out in the template file.

On one hand yes, but on the other hand it simply blows up the code.

--
Best regards,
Alfie (Helmut Schütz)
BEBA-Forum (v1.8β)

Avatar

Expand-Image without JavaScript

by Micha ⌂, Thursday, April 19, 2007, 17:30 (4535 days ago) @ Alfie

Hi,

On one hand yes, but on the other hand it simply blows up the code.

Oh, I don't think so. See the posting script - only ~20 Lines. Now see the mainpage and count the threads and postings. In every one, you put the javascript code. I think, that will blows up the code.
Another advantage: An external script will be chached by the browser; document.write() not.

Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

Avatar

Expand-Image without JavaScript

by Alfie ⌂ @, Vienna, Austria, Thursday, April 19, 2007, 17:42 (4535 days ago) @ Micha
edited by Alfie, Thursday, April 19, 2007, 17:50

Hi Micha!

On one hand yes, but on the other hand it simply blows up the code.


Oh, I don't think so. See the posting script - only ~20 Lines. Now see the mainpage and count the threads and postings. In every one, you put the javascript code. I think, that will blows up the code.

Not me, but Alex ;-)

Another advantage: An external script will be chached by the browser; document.write() not.

Yes I agree (suggested this in a previous post).

Servus aus Wien ;-)

P.S. @Alex: is the foo syntax for internal links not supported any more?

--
Best regards,
Alfie (Helmut Schütz)
BEBA-Forum (v1.8β)

Avatar

Expand-Image without JavaScript

by Micha ⌂, Friday, April 20, 2007, 04:44 (4535 days ago) @ Alfie

Hi Helmut!

Not me, but Alex ;-)

Oh, I'm sorry :-P

Servus aus Wien ;-)

I visited vienna last week, first time - gallery: 18th evga vienna.

greetings from germany, karlsruhe.
Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

Expand-Image without JavaScript

by Milo ⌂ @, Wednesday, April 18, 2007, 20:06 (4536 days ago) @ Alfie

Hello,

firstly, sorry my english! I hope you understand me ;-)

Just tested the forum without JavaScript.

I think that it would be a good idea to set the expand-image [...] with 'document.write'

That's one way but not the best. I belive it is mutch better to separate the code.

You can do it like this:


function getID(str){
 // new RegExp(/id=(d.+)/g)
 var r = new RegExp(/id=(d+)/g).exec(str);
 return r!=null&&r.length>=2?r[1]:r;
}
  
function createPreviewIcon(id){
 var img = new Image(11,11);
 img.src = "ajax_preview.png";
 try {img.style.cursor = "pointer";} catch(err) {img.style.cursor = "hand";}
 img.title = "Show preview";
 img.alt = "Show preview";
 img.id = id;
 img.onclick = function(e) {
  ajax_preview(this.id,'Post reply')
  return false;
 };
 return img
}

window.onload = function() {
 var l = document.getElementsByTagName("a");
 for (var i=0; i<l.length; i++)
  if (l[i].className == "reply" && getID(l[i].href) != null)
   l[i].parentNode.appendChild( createPreviewIcon(getID(l[i].href)) );
};


It will replace the 2th anchor which show the preview in a small box for example

a href="#" onclick="ajax_preview(219,'Post reply'); return false" title="Show preview"><img src="ajax_preview.png" alt="Show preview" width="11" height="11" /></a>

That's not a final solution but a motivation! :)

Btw: "he posting contains at least one not accepted word" if I don't know the word, it's a bad comment :(

cu
Micha

Expand-Image without JavaScript appendix

by Milo ⌂ @, Thursday, April 19, 2007, 05:15 (4536 days ago) @ Milo

Hi,

Btw: "he posting contains at least one not accepted word" if I don't know the word, it's a bad comment :(

The Problem ist HTML-Code like a link:

 < a href="#" ...>
--^  
 

It is mutch better to see the not accepted word now! Thx

 
function getID(str){
// new RegExp(/id=(d.+)/g)
var r = new RegExp(/id=(d+)/g).exec(str);
return r!=null&&r.length>=2?r[1]:r;
}

The return-statment is correctly:

return r!=null&&r.length>=2?r[1]:null;

I only tested this functions on this list of responses...

cu Micha

Expand-Image without JavaScript

by needhelp338 @, Thursday, April 19, 2007, 16:11 (4535 days ago) @ Alfie

Hi Alex!

Just tested the forum without JavaScript.

I think that it would be a good idea to set the expand-image [image] and the preview-bubble [image] with 'document.write', because otherwise it will serve no function and users maybe simply give up clicking on it (before they realise there's a function in the header for it).

Personally I like the simple image or icon. It doesn't clutter up the forum. That's one reason why I like this forum so much, it's because it's so simple and uncluttered.

Just my opinions....will respect whatever you guys decide to do.

Avatar

Expand-Image without JavaScript

by Alfie ⌂ @, Vienna, Austria, Thursday, April 19, 2007, 16:25 (4535 days ago) @ needhelp338

Hi needhelp338, what a nick ;-)

Personally I like the simple image or icon. It doesn't clutter up the forum. That's one reason why I like this forum so much, it's because it's so simple and uncluttered.

Sorry for my bad English. In my original post I just suggested to remove the Icons for users without JavaScript (because otherwise they would just start clicking around - and nothing would happen).

Just my opinions....

Yes, this is the right place!

will respect whatever you guys decide to do.

Right now it's done like this:
There are no icons (especially the bubble) visible for users without JavaScript (because they cannot use the AJAX-preview behind anyway).
Four users with JavaScript (the vast majority), images and links are written by JavaScript into the finished HTML-source: Icons are visible and links working ;-)

--
Best regards,
Alfie (Helmut Schütz)
BEBA-Forum (v1.8β)

RSS Feed of thread
powered by my little forum