NPORA header pic

[DJ Dank]

How are you guys having to scroll to see the header with such big monitors? My 14" laptop screen views the header just fine. Are you guys running like 640x480 resolution or what?

[Slick]

How are you guys having to scroll to see the header with such big monitors? My 14" laptop screen views the header just fine. Are you guys running like 640x480 resolution or what?

no.. i'm running that 1200x whatever stuff...lol...... it just runs off the side of the page a tad....

[Pavelow Leaks]

show up on my monitor with room to spare....24" is the way to go.

[Pezzy]

like I said, 1024 wide is the most I can get on my laptop, and it doesnt fit.

 

DJ, I usually use save for web for headers... the one I created was a .swf -- didnt know if you knew more about that than I do (which is nothing)

[Slick]

so i went to 1124 x whatever res.. and it fits and WOW. how weird but cool things look...

[DJ Dank]

like I said, 1024 wide is the most I can get on my laptop, and it doesnt fit.

 

DJ, I usually use save for web for headers... the one I created was a .swf -- didnt know if you knew more about that than I do (which is nothing)

You didn't say you had the header as a flash file...thats totally different. How big of a file are we talking?

[RedPath88]

no.. i'm running that 1200x whatever stuff...lol......  it just runs off the side of the page a tad....

But the current image is only 1000 wide.. so anyone running 1024x768 or more should be fine aka no scroll

Edited December 5, 2006 by RedPath88

[Pezzy]

You didn't say you had the header as a flash file...thats totally different. How big of a file are we talking?

currently sits at 2 megs

 

http://www.madmudders.net/npora/pezzy/npora-example.html

[DJ Dank]

There is an alternative to getting the fade image since the swf is so big...its a Javascript/Css image swap fade. I have the code for it somewhere...

[cdhicks99]

I likey the new header.

[Pezzy]

There is an alternative to getting the fade image since the swf is so big...its a Javascript/Css image swap fade. I have the code for it somewhere...

Will someone who doesnt speak css get it?

[DJ Dank]

Well...thats a good question...

 

Its not a walk in the park but then again neither is creating flash banners.

[Pezzy]

*warns Simon of all the swearing that will follow*

[DJ Dank]

Now that I think about it, eh...

 

It involves placing a lot of Javascript code that to the novice, would be difficult to understand and place. Not to mention, when downloading the 2mb flash banner would be way easier than placing this code:

 

<style type="text/css">

 

.textstyle {

position:absolute;

left:-2000px;

width:300px;

}

A {

color:000000;

}

.coverstyle {

position:absolute;

left:-2000px;

}

</STYLE>

 

<script LANGUAGE="JavaScript">

<!-- Beginning of JavaScript -

 

 

var message = new Array()

message[0]="<img src='zetaOne82.jpg'>"

message[1]="<img src='zetaTwo82.jpg'>"

message[2]="<img src='zetaThree82.jpg'>"

 

var picOne=new Image()

picOne.src="zetaOne82.jpg"

 

var picTwo=new Image()

picTwo.src="zetaTwo82.jpg"

 

var picThree=new Image()

picThree.src="zetaThree82.jpg"

 

var i_message=0

 

var covertop=20

var coverleft=50

 

// The size of slidefader82.gif

var coverwidth=1200

var coverheight=96

 

var texttop=covertop

var textleft=coverleft

var textwidth=300

var textheight=coverheight

 

var cliptop=0

var clipright=textwidth

var clipbottom=coverheight

var clipleft=0

 

var clippoints

 

 

var step=40

var pause=50

 

var timer

 

function init() {

if (document.all) {

document.all.text.style.posTop=texttop

document.all.text.style.posLeft=textleft

document.all.cover.style.posTop=covertop

document.all.cover.style.posLeft=coverleft

clipleft=0

fadeout()

}

 

if (document.layers) {

document.text.top=texttop

document.text.left=textleft

document.cover.top=covertop

document.cover.left=coverleft

clipleft=0

fadeout()

}

}

 

function fadeout() {

if (document.all) {

if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) {

window.status=-coverwidth+textwidth+coverleft+step

clipleft+=step

clipright=clipleft+textwidth

clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

document.all.cover.style.clip=clippoints

document.all.cover.style.posLeft-=step

timer= setTimeout("fadeout()",pause)

}

else {

clearTimeout(timer)

i_message++

if (i_message>=message.length) {i_message=0}

text.innerHTML=message[i_message]

fadein()

}

}

if (document.layers) {

if (document.cover.left >=(-coverwidth+textwidth+coverleft+step-22)) {

window.status=-coverwidth+textwidth+coverleft+step

clipleft+=step

clipright=clipleft+textwidth

document.cover.clip.top=cliptop

document.cover.clip.left=clipleft

document.cover.clip.bottom=clipbottom

document.cover.clip.right=clipright

document.cover.left-=step

timer= setTimeout("fadeout()",pause)

}

else {

clearTimeout(timer)

i_message++

if (i_message>=message.length) {i_message=0}

document.text.document.write(message[i_message])

document.text.document.close()

fadein()

}

}

}

 

function fadein() {

if (document.layers) {

if (document.cover.left<=coverleft) {

clipleft-=step

clipright=clipleft+textwidth

document.cover.clip.top=cliptop

document.cover.clip.left=clipleft

document.cover.clip.bottom=clipbottom

document.cover.clip.right=clipright

document.cover.left+=step

timer= setTimeout("fadein()",pause)

}

else {

clearTimeout(timer)

init()

}

}

if (document.all) {

if (document.all.cover.style.posLeft<=coverleft) {

clipleft-=step

clipright=clipleft+textwidth

clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

document.all.cover.style.clip=clippoints

document.all.cover.style.posLeft+=step

timer= setTimeout("fadein()",pause)

}

else {

clearTimeout(timer)

init()

}

}

}

// - End of JavaScript - -->

</SCRIPT>

 

and placing this in the html body:

 

<BODY bgcolor=FFFFFF style="width:100%;overflow-x:hidden;overflow-y:scroll" onLoad="init()">

<DIV ID="text" class="textstyle"></DIV>

<DIV ID="cover" class="coverstyle"><img src="slidefader82.gif"></DIV>

 

So yeah...I think keeping a 2mb banner would be most feasible...

 

By the way, I wrote that code as part of my final project for school. Only took me a couple of weeks.

Edited December 5, 2006 by DJ Dank

[Pezzy]

wow, that's a whole lotta not english.

 

okay, I have a deathwish... is there somewhere where I can see a sample of this in use?

[RedPath88]

Running with Pezzy's TOTM idea, I made up this poor quality anitmated gif using a demo program that would only allow 10pics

 

Really I was just playing around

 

 

 

[Pezzy]

hmmm.. I was originally trying to make a gif file, but it wouldnt let me save... maybe you can only have so many frames in a GIF file??

[zonianbrat]

Now that I think about it, eh...

 

It involves placing a lot of Javascript code that to the novice, would be difficult to understand and place. Not to mention, when downloading the 2mb flash banner would be way easier than placing this code:

 

<style type="text/css">

 

.textstyle {

position:absolute;

left:-2000px;

width:300px;

}

A {

color:000000;

}

.coverstyle {

position:absolute;

left:-2000px;

}

</STYLE>

 

<script LANGUAGE="JavaScript">

<!-- Beginning of JavaScript -

 

 

var message = new Array()

message[0]="<img src='zetaOne82.jpg'>"

message[1]="<img src='zetaTwo82.jpg'>"

message[2]="<img src='zetaThree82.jpg'>"

 

var picOne=new Image()

picOne.src="zetaOne82.jpg"

 

var picTwo=new Image()

picTwo.src="zetaTwo82.jpg"

 

var picThree=new Image()

picThree.src="zetaThree82.jpg"

 

var i_message=0

 

var covertop=20

var coverleft=50

 

// The size of slidefader82.gif

var coverwidth=1200

var coverheight=96

 

var texttop=covertop

var textleft=coverleft

var textwidth=300

var textheight=coverheight

 

var cliptop=0

var clipright=textwidth

var clipbottom=coverheight

var clipleft=0

 

var clippoints

 

 

var step=40

var pause=50

 

var timer

 

function init() {

if (document.all) {

document.all.text.style.posTop=texttop

document.all.text.style.posLeft=textleft

document.all.cover.style.posTop=covertop

document.all.cover.style.posLeft=coverleft

clipleft=0

fadeout()

}

 

if (document.layers) {

document.text.top=texttop

document.text.left=textleft

document.cover.top=covertop

document.cover.left=coverleft

clipleft=0

fadeout()

}

}

 

function fadeout() {

if (document.all) {

if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) {

window.status=-coverwidth+textwidth+coverleft+step

clipleft+=step

clipright=clipleft+textwidth

clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

document.all.cover.style.clip=clippoints

document.all.cover.style.posLeft-=step

timer= setTimeout("fadeout()",pause)

}

else {

clearTimeout(timer)

i_message++

if (i_message>=message.length) {i_message=0}

text.innerHTML=message[i_message]

fadein()

}

}

if (document.layers) {

if (document.cover.left >=(-coverwidth+textwidth+coverleft+step-22)) {

window.status=-coverwidth+textwidth+coverleft+step

clipleft+=step

clipright=clipleft+textwidth

document.cover.clip.top=cliptop

document.cover.clip.left=clipleft

document.cover.clip.bottom=clipbottom

document.cover.clip.right=clipright

document.cover.left-=step

timer= setTimeout("fadeout()",pause)

}

else {

clearTimeout(timer)

i_message++

if (i_message>=message.length) {i_message=0}

document.text.document.write(message[i_message])

document.text.document.close()

fadein()

}

}

}

 

function fadein() {

if (document.layers) {

if (document.cover.left<=coverleft) {

clipleft-=step

clipright=clipleft+textwidth

document.cover.clip.top=cliptop

document.cover.clip.left=clipleft

document.cover.clip.bottom=clipbottom

document.cover.clip.right=clipright

document.cover.left+=step

timer= setTimeout("fadein()",pause)

}

else {

clearTimeout(timer)

init()

}

}

if (document.all) {

if (document.all.cover.style.posLeft<=coverleft) {

clipleft-=step

clipright=clipleft+textwidth

clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

document.all.cover.style.clip=clippoints

document.all.cover.style.posLeft+=step

timer= setTimeout("fadein()",pause)

}

else {

clearTimeout(timer)

init()

}

}

}

// - End of JavaScript - -->

</SCRIPT>

 

and placing this in the html body:

 

<BODY bgcolor=FFFFFF style="width:100%;overflow-x:hidden;overflow-y:scroll" onLoad="init()">

<DIV ID="text" class="textstyle"></DIV>

<DIV ID="cover" class="coverstyle"><img src="slidefader82.gif"></DIV>

 

So yeah...I think keeping a 2mb banner would be most feasible...

 

By the way, I wrote that code as part of my final project for school. Only took me a couple of weeks.

WTF? That is some serious code. just add black screen to make matrix like effects.

[RedPath88]

hmmm.. I was originally trying to make a gif file, but it wouldnt let me save... maybe you can only have so many frames in a GIF file??

That one is 20 frames and I could have added more

[Slick]

i like it red! that's cool! kinda fast, but cool! :cool2: reminds me of flashing x mas lights Edited December 6, 2006 by Slick

[fordsho90]

sweet dude. can you slow it down any?

[RedPath88]

The program gave little option for control of the speed

 

That was why it is 20 frames, really it only needed to be ten to flash each of the 10 pics in one at a time (starting with the first one already in place) but to get it to slow down to what you see, I added an identical frame after each pic.. so the end result was 20.

[RedPath88]

sweet dude. can you slow it down any?

I'l look for another program or way of doing it because the one I used to create that gif was not to great. It only allowed 10pics, limited options and it was a demo... a demo that IMO is not worth spending $40 on for the full product.

[88pathoffroad]

Looking good, everyone. I can *try* to place code in the appropriate places, but the IPB software is really funky, it splits each HTML section up into variables and makes you edit them singly instead of all at once as a page. Some sections only have two lines in each. Anyway...I'm glad you're all having fun working things out!

[fordsho90]

I'l look for another program or way of doing it because the one I used to create that gif was not to great. It only allowed 10pics, limited options and it was a demo... a demo that IMO is not worth spending $40 on for the full product.

:cool2: