Avatar

Expand-Image without JavaScript (Technics)

by Alfie ⌂, Vienna, Austria, Wednesday, March 21, 2007, 22:59 (6239 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).

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

locked
20201 views
Avatar

Expand-Image without JavaScript

by Alex ⌂, Thursday, March 22, 2007, 20:03 (6238 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

locked
17549 views
Avatar

Expand-Image without JavaScript

by Alfie ⌂, Vienna, Austria, Friday, March 23, 2007, 00:09 (6238 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.

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

locked
17703 views
Avatar

Expand-Image without JavaScript

by Alex ⌂, Friday, March 23, 2007, 10:33 (6237 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

locked
17137 views
Avatar

Expand-Image without JavaScript

by Alfie ⌂, Vienna, Austria, Friday, March 23, 2007, 11:19 (6237 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.

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

locked
17277 views
Avatar

Expand-Image without JavaScript

by Alfie ⌂, Vienna, Austria, Saturday, March 24, 2007, 00:23 (6237 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.

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

locked
21781 views
Avatar

Expand-Image without JavaScript

by Alex ⌂, Saturday, March 24, 2007, 10:19 (6236 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.

locked
16936 views
Avatar

Expand-Image without JavaScript

by Alfie ⌂, Vienna, Austria, Saturday, March 24, 2007, 12:52 (6236 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.

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

locked
17688 views
Avatar

Expand-Image without JavaScript

by Micha ⌂, Thursday, April 19, 2007, 17:30 (6210 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

locked
16866 views
Avatar

Expand-Image without JavaScript

by Alfie ⌂, Vienna, Austria, Thursday, April 19, 2007, 17:42 (6210 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?

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

locked
17427 views
Avatar

Expand-Image without JavaScript

by Micha ⌂, Friday, April 20, 2007, 04:44 (6209 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

locked
17177 views

Expand-Image without JavaScript

by Milo ⌂ @, Wednesday, April 18, 2007, 20:06 (6211 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

locked
17650 views

Expand-Image without JavaScript appendix

by Milo ⌂ @, Thursday, April 19, 2007, 05:15 (6210 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

locked
17118 views

Expand-Image without JavaScript

by needhelp338, Thursday, April 19, 2007, 16:11 (6210 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.

locked
17406 views
Avatar

Expand-Image without JavaScript

by Alfie ⌂, Vienna, Austria, Thursday, April 19, 2007, 16:25 (6210 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 ;-)

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

locked
17487 views

RSS Feed of thread