WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

Ezio

avatar
Registered Member
Registered Member
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. afro

so the announcement will be like this : http://ngetest.yes-da.com/

okay, thanks



Last edited by Ezio on Mon Apr 11, 2011 10:55 am; edited 4 times in total

http://www.forumbargedoz.ce.ms

RockerMan

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

http://www.graphics-post.com/

Ezio

avatar
Registered Member
Registered Member
RockerMan wrote:This needs some work and also needs to go into the tutorial proposals Smile

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

http://www.forumbargedoz.ce.ms

Jophy

avatar
Registered Member
Registered Member
Move to 'Tutorial Proposal' Section.

http://www.socialtechforum.com/

Josh

avatar
Registered Member
Registered Member
Can you change the opacity?

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

Ezio

avatar
Registered Member
Registered Member
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..
Very Happy

http://www.forumbargedoz.ce.ms

RockerMan

avatar
Technician
Technician
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


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

Mang


Registered Member
Registered Member
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. afro

so the announcement will be like this : http://ngetest.yes-da.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.

Ezio

avatar
Registered Member
Registered Member
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 Very Happy

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/

http://www.forumbargedoz.ce.ms

tommycoo

avatar
Registered Member
Registered Member
can we made if the mouse is closer the announcement is transparent ?

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum