netobjects Fusion, Javascript & relative links

[Parapunter]

Right, I'm about to give up on this, but brfore I do, I call on the geniui of Pprune for one last throw of the dice.

I would like to add a javascript falling snow effect to my website. There are a readily available javascripts all over the net f.oc. so no problem there.

However, when I publish my site to the web, the gif snowflake whivh java references is missing.

Now, I'm compiling my site in Netobjects fusion7, which saves ones website as a databse with a .nod extension. I don't seem to be able to place the correct relative link in the javascript code for the HTML to upload the file inspite of the fact that the little gif file is displayed as an always publish asset in the asset register.

I can make the effect work on my local machine using the relative link:

varsrc= "/../assets/snow.gif"


However, as soon as it publishes, the gif is lost. I realise this is a windy old posting, I'm hoping to chance across a netobjects fan. Cheers!

[spannersatcx]

Don't know anything about the programs you mention, however one problem in the past used to be if you have the case wrong in the link. i.e. if the uploaded file is SNOW.GIF and you are linking to snow.gif it won't load it.

[amanoffewwords]

Are you sure the assets folder isn't a sub-directory in which case

varsrc= "/../assets/snow.gif"

should read as

varsrc= "../assets/snow.gif" (if it's one below)

or

varsrc= "../../assets/snow.gif" (if it's two below)


hth
Charles

of course I won't mention that it is a rather corny effect

[Evo]

I don't know about javascript, never used it, but in Java if you package images etc. in jar files then your code needs to do something like

java.net.URL img = this.getClass().getResource("myImages/image.jpg");
myPanel.add(new JLabel(new ImageIcon(img))...);

if it's un-jar'd then the relative link

URL img = new URL("myImages/image.jpg");

is fine. Do you need to do something similar?

[E-Liam]

Hi Parapunter,

Didn't even think about doing it before, but I found one way to do it, without needing to upload a specific image. Just to make sure, I tried it on my site and it works fine. You can change the speed, no. of flakes etc as well. Everything you need here. It took about 10 minutes start to finish.

Cheers

Liam

[Parapunter]

Cheers Chaps. So far, I have established that my GIF is definitely uploaded to the server & the path I am using is correct, yet still the GIF doesnt show on remote computers. Oh well, back to the drawing board.

Liam, I've tried that effect & it works. However...it stops the nav buttons from working on the site I guess I'm just doomed to a snowless christmas.

[amanoffewwords]

Can you paste in the code you are using?

[Parapunter]

Here you go. The dodgy bit is ****starred

<script language="JavaScript1.2">

/******************************************
* Snow Effect Script- By Altan d.o.o. ([email protected], http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/


//Configure below to change URL path to the snow image
******var snowsrc="snow.gif"*****
// Configure below to change number of snow to render
var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><a href="http://dynamicdrive.com/"><img src='"+snowsrc+"' border="0"><\/a><\/layer>");
} else {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src='"+snowsrc+"' border="0"><\/layer>");
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"><\/a><\/div>");
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"><\/div>");
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}

function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", 10);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}

</script>

[amanoffewwords]

var snowsrc="snow.gif"

Is declaring a variable called snowsrc which is used later in the script.

You need to alter the path of snow.gif to something like

var snowsrc="../assets/snow.gif"

Or failing that replace all instances of snowsrc in the code with the full path to the graphic:

From

<img src='"+snowsrc+"' border="0">

To

<img src="http://www.yourdomain.com/assets/snow.gif" border="0">

hth
Charles

(there are only two such occurences from what can see)

[Parapunter]

Sorry fewwords, I copied the code off the net again, rather than the website code. It does point to ..\asets\snow.gif rather than the snow.gif which is the straight code. I admit I'm stumped. I even bought my javascript programmer mate a beer on Saturday night & he can't sus it out either!

My understanding is that javascript runs in the browser as opposed to anywhere else, so one of the pitfalls is broswer settings. Mebbes I shal just get a flash movie going.

It is a cheesy effect, but it makes me feel all christmassy & I do hate being defeated by confusers

[amanoffewwords]

Have you tried the second suggestion of replacing snowsrc with the actual full path?

Just asking 'cause the demo site shows the full path as such:


[i]
var no = 10; // snow number

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><a href="http://inet.hr/"><img src="http://www.altan.hr/snow/dot.gif" border="0"></a></layer>");
} else {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src="http://www.altan.hr/snow/dot.gif" border="0"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://inet.hr/"><img src="http://www.altan.hr/snow/dot.gif" border="0"></a></div>");
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src="http://www.altan.hr/snow/dot.gif" border="0"></div>");
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}

function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx);
}
setTimeout("snowIE()", 10);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}




This from http://www.altan.hr/snow/index.html which refers to http://www.altan.hr/snow/snow1.js

[Parapunter]

I'll try it few words & let you know how I get on

[Parapunter]

...and I've got it working. It was the path to the gif file as I kind of suspected. But the inspiration on here helped a bunch. Thanks everyone

[amanoffewwords]

Cool, it looks errr...nice?!

[Parapunter]

Bugger the customers, it yanks my chain!