ff event problem

[mxliron]

hi all, this code is for a picture viewer. yes, this is my first code
and my first piece of programming so i maybe simply be missing some key
notions here. the problem is: the nav onclick event buttons to flip
through the pics only work in IE and not in FF, i havnt tested anywhere
else. I have tried lots of thing such as including the code directly
after the event or in the headleft and headright functions, replacing
the event function by a simple alert(); **onclick = function () {
alert('there'); }**, or assigning the events after their elements have
been inserted into DOM,...the bastard simply doesnt recognise the
event although i assign the top nav bar events the same way. The page
can be found at http://max.nugraphic.com/ajax/aixaqua/ o know it still
looks ugly especially in IE but I havnt gotten to the design yet.

thank you so much, im losing patience

photo.js:


function createphotobox() {
var contentdiv = document.getElementById('content');
var photobox = document.createElement('div'); //pic-img tag
container
photobox.id = "photobox";
contentdiv.appendChild(photobox);
addphoto(photobox); //pic-img tag into designated container
addnav(contentdiv); //nav underneath pic conatiner above
}

function addphoto(el) { // lay pic
var pic = document.createElement('img');
pic.src = phppaths[0]; //fine array imported from php
pic.num = 0; //temporary pic index system..
pic.id = "pic";
pic.width = "480";
el.appendChild(pic);
}

function addnav(el) { //Add 2 nav items under
pic
var nav = document.createElement('div');
nav.id = "photonav";
var navleft = document.createElement('img');
var navright = document.createElement('img');
navleft.src = "images/photonav_left.gif";
navright.src = "images/photonav_right.gif";
navleft.onclick = headleft; //<<<problematic
events
navright.onclick = headright;
el.appendChild(nav);
nav.appendChild(navleft);
nav.appendChild(navright);
}

function headleft(event) {
currentpic('left');
return false;
}

function headright(event) {
currentpic('right');
return false;
}

function currentpic(direction) {
var dir = direction;
var pic = document.getElementById('pic');
var a = pic.num;
switch(dir) {
case 'right':
pic.src = phppaths[a+1];
pic.num++;
break;
case 'left':
pic.src = phppaths[a-1];
pic.num--;
break;
default:
break;
}
}

 

[Gérard Talbot]

hi all, this code is for a picture viewer. yes, this is my first code
and my first piece of programming so i maybe simply be missing some key
notions here. the problem is: the nav onclick event buttons to flip
through the pics only work in IE and not in FF, i havnt tested anywhere
else. I have tried lots of thing such as including the code directly
after the event or in the headleft and headright functions, replacing
the event function by a simple alert(); **onclick = function () {
alert('there'); }**, or assigning the events after their elements have
been inserted into DOM,...the bastard simply doesnt recognise the
event although i assign the top nav bar events the same way. The page
can be found at http://max.nugraphic.com/ajax/aixaqua/

I checked your page and I would be extremely surprised if you really
need to dynamically create image, dynamically create holding box,
etc,,.. just to switch images, just to replace images. I'm sure your
webpage does not need to dynamically create new image objects but to
just replace current ones.

Your page has other problems:
http://validator.w3.org/check?uri=h...etect+automatically)&doctype=Inline&verbose=1

You may want to use HTML Tidy to fix the others:

http://users.skynet.be/mgueury/mozilla/

Your page also uses fixed font size.

"Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser). Use relative length units such as percent or
(better) em"
http://www.w3.org/QA/Tips/font-size


o know it still

looks ugly especially in IE but I havnt gotten to the design yet.

I recommend to not break an image into several ones (headerDivOne,
headerDivTwo, etc.): you increase the number of http connections to the
server by doing that and you make the download (and page parsing, page
rendering) longer, not shorter.

thank you so much, im losing patience

photo.js:


function createphotobox() {
var contentdiv = document.getElementById('content');
var photobox = document.createElement('div'); //pic-img tag
container
photobox.id = "photobox";

Do you *absolutely* need to give an id to that object? I'm just wondering.

contentdiv.appendChild(photobox);
addphoto(photobox); //pic-img tag into designated container
addnav(contentdiv); //nav underneath pic conatiner above
}

function addphoto(el) { // lay pic
var pic = document.createElement('img');
pic.src = phppaths[0]; //fine array imported from php
pic.num = 0; //temporary pic index system..

That "num" looks like wrong code to me. You can't just declare an
attribute like that an expect everything to behave just like you wish.
Why not just use a global variable ... if this num storing a number is
really the only way to do your slideshow application...

pic.id = "pic";
pic.width = "480";
el.appendChild(pic);
}

function addnav(el) { //Add 2 nav items under
pic
var nav = document.createElement('div');
nav.id = "photonav";
var navleft = document.createElement('img');
var navright = document.createElement('img');
navleft.src = "images/photonav_left.gif";
navright.src = "images/photonav_right.gif";
navleft.onclick = headleft; //<<<problematic
events

navleft.onclick = new Function("[parameters]", "[function body]");

navright.onclick = headright;
el.appendChild(nav);
nav.appendChild(navleft);
nav.appendChild(navright);
}

function headleft(event) {
currentpic('left');
return false;
}

Why an intermediary function? Why not call directly the adequate code
(and only the needed code) to be executed, which would be executed (from
currentpic(direction))?
Also, why the return false?

function headright(event) {
currentpic('right');
return false;
}

function currentpic(direction) {
var dir = direction;
var pic = document.getElementById('pic');
var a = pic.num;
switch(dir) {
case 'right':
pic.src = phppaths[a+1];
pic.num++;
break;
case 'left':
pic.src = phppaths[a-1];
pic.num--;
break;
default:
break;
}

Why use a switch if you have only 2 alternatives? Why not just use an
if..then..else structure? Why use another variable (dir) and not direction?

To me, your webpage only needs to implement a slideshow. You do not need
to *create dynamically* images, to *create dynamically* photobox and nav
images, etc..

I understand you're developing the page. I see many positive aspects to
your webpage code: e.g. you use good meaningful, self-explanatory
identifiers to your variables. That helps reviewing code, code
maintenance, etc.

Some other aspects of your javascript code is debattable. If you use a
parameter in your function, then it is because your function body is
going to make an use out of it; otherwise do not declare one.

E.g.: function selectedmenu(event)
should make use of that event parameter.

Also, best (general recommendation; preferable recommendation) is to
avoid having function calling other functions: doing that avoids
problems and code maintenance (spaghetti coding).

Gérard