473,322 Members | 1,405 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

ff event problem

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;
}
}

Feb 27 '06 #1
1 1518
mx*****@yahoo.ca wrote :
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=ht...line&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
--
remove blah to email me
Feb 27 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Andy Read | last post by:
Hello all, I have the requirement to produce source code that produces an object hierarchy. Example: Root | Folder 1
13
by: Manuel Lopez | last post by:
I have a puzzling form timer problem that I didn't experience prior to Access 2003 (though I'm not sure access 2003 is to blame). Here's the situation: a computer has two access 2003 databases on...
6
by: Michael Johnson Jr. | last post by:
I am trying to handle a button click event, which updates a web control table with data. The button is dynamically created in the table itself. When I call updateTable() in the Page_Load the new...
4
by: The Alchemist | last post by:
I am having a problem with a dynamically-generated Datagrid. It is important to point out that this problem does not exist with a design-time created Datagrid, but only with a dynamically generated...
9
by: Marcelo Cabrera | last post by:
Hi, I have a user control that in turn creates a bunch of webcontrols dynamically and handles the events these webcontrols raise. It used to work fine on ASP .Net 1.1 but when compiled on 2.0 it...
9
by: jeff | last post by:
New VB user...developer... Situation...simplified... - I want to wrap a pre and post event around a system generated where the pre-event will always execute before the system event and the...
6
by: hemant.singh | last post by:
Hi all, I am trying to get a way by which I'll know exactly when user goes out of my site by clicking on close button in browser, So that w/e user click close button in browser, I can send a...
14
by: Snor | last post by:
I'm attempting to create a lobby & game server for a multiplayer game, and have hit a problem early on with the server design. I am stuck between using a threaded server, and using an event driven...
2
by: cty0000 | last post by:
Please anybody help me... I have some serious problem.. I'm doing to keep equpiment list(string).. In my code, there are 3 page which are having 4 equpiment ID (user control.) like this...
3
by: cty0000 | last post by:
Please anybody help me... I have some serious problem.. I'm doing to keep equpiment list(string).. In my code, there are 3 page which are having 4 equpiment ID (user control.) like this...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.