Hello I want to share code to make the announcement on top of the screen.


LEGEND : red color mean, you can change the code.
copy this in your website :

<style>
#jbpanel1 {position: fixed;top:0px;left:0px; background: #000000; width: 100%;color:#ECECEC; padding:3px;z-index:999;}
</style> <div id="jbpanel1"><marquee behavior="scrool" onmouseover="this.stop()" onmouseout="this.start()"><div align="center">[YOUR TEXT HERE]</div></marquee></div>

sorry if there are still some code that is wrong, I'm still learning, maybe if there is a mistake anyone can help. but so far it seems fine.

so the announcement will be like this : http://ngetest.forumotion.com/

okay, thanks

This needs some work and also needs to go into the tutorial proposals

RockerMan wrote:This needs some work and also needs to go into the tutorial proposals

yeah, i think is fine and no problem in the code, maybe this can go to the proposals
but i don't know, because i'm share in wrong subforum.

Can you change the opacity?

Also, is it possible to change the time between marquees?

Josh wrote:Can you change the opacity?

Also, is it possible to change the time between marquees?

the code is :

<style>
#jbpanel1 {position: fixed;top:0px;left:0px; background: #000000; width: 100%;color:#ECECEC; padding:3px;z-index:999;}
</style> <div id="jbpanel1"><marquee behavior="scrool" onmouseover="this.style.opacity=1"
onmouseout="this.style.opacity=0.4"/><div align="center">[YOUR TEXT HERE]</div></marquee></div>

but wait if to replace "this.stop()" "this.start()" with opacity, i don't know. i tried to replace that code but not working.
maybe anyone can help to replace this stop,this start with opacity. hehehehe..

Ezio wrote:Hello I want to share code to make the announcement on top of the screen.


LEGEND : red color mean, you can change the code.
copy this in your website :

<style>
#jbpanel1 {position: fixed;top:0px;left:0px; background: #000000; width: 100%;color:#ECECEC; padding:3px;z-index:999;}
</style> <div id="jbpanel1"><marquee behavior="scrool" onmouseover="this.stop()" onmouseout="this.start()"><div align="center">[YOUR TEXT HERE]</div></marquee></div>

sorry if there are still some code that is wrong, I'm still learning, maybe if there is a mistake anyone can help. but so far it seems fine.

so the announcement will be like this : http://ngetest.forumotion.com/

okay, thanks

That needs to be this; <style>
#jbpanel{position: fixed; top: 0px; left: 0px; background: #000000; width: 100%; color: #ECECEC; padding: 3px; z-index: 9999;}
</style> <div id="jbpanel"><marquee behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()"><div align="center">[YOUR TEXT HERE]</div></marquee></div>

Sorry, OCD, lol.

RockerMan wrote:Ezio, please explain the code in a little more detail, all you have done here is give a code to copy and paste. Explain how it works, and how to edit some values. Then I would be more than happy to accept this

Code:

<style>
#jbpanel1 {position: fixed;top:0px;left:0px; background: #000000; width: 100%;color:#ECECEC; padding:3px;z-index:999;}
</style> <div id="jbpanel1"><marquee behavior="scrool" onmouseover="this.stop()" onmouseout="this.start()"><div align="center">[YOUR TEXT HERE]</div></marquee></div>

okay boss legend

#jbpanel1 = you can edit its up to you maybe #announce
fixed ( don't change it)
top, left = its jbpanel position (i suggest don't change it, but its up to you)
background = you can change it, maybe red, blue, or #other
width = its width of jbpanel, i suggest don't change it
padding = its height of jbpanel, you can change it
marquee = move
align = position

That needs to be this; <style>
#jbpanel{position: fixed; top: 0px; left: 0px; background: #000000; width: 100%; color: #ECECEC; padding: 3px; z-index: 9999;}
</style> <div id="jbpanel"><marquee behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()"><div align="center">[YOUR TEXT HERE]</div></marquee></div>

yeah, my mistake

for any suggest you can read this : http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/

can we made if the mouse is closer the announcement is transparent ?