 Help with spacing |
  |
| bsvence |
 Jul 2 2009, 06:15 PM
Post
#1
|
|
Group: Members Posts: 5 Joined: 2-July 09 Member No.: 9,059  |
Hello,
I am a complete newbie. I am so new I am not even sure I can phrase my question correctly. I have downloaded a freeware program that allowed me to use a scrolling news ticker for my own use. I have been able to figure out most of the edits I need but it shows up on the far left of my page. I need it to be moved to the middle of the page and down towards the center of my webpage. I am using microsoft frontpage. I have tried everything and asked everyone I know and nobody can solve my problem. You are my last hope. I can copy and paste the html code if you need it. Please help. I am desperate. |
  |
 
|
| pandy |
Jul 2 2009, 06:54 PM
Post
#2
|
|
Don't like donuts. Don't do MySpace.  Group: WDG Moderators Posts: 13,800 Joined: 9-August 06 Member No.: 6 |
So what is this ticker? JavaScript? You can center script output as you would center anything else on your page. Exactly how is hard to say without seeing what you have.
 -------------------- "Never go to excess, but let moderation be your guide."
- Cicero  |
 |
|
| bsvence |
Jul 2 2009, 07:04 PM
Post
#3
|
|
Group: Members Posts: 5 Joined: 2-July 09 Member No.: 9,059 |
Well, I can center the text but the border is what I am having problems with. I am unsure if I can copy the html. Don't want to break any rules. Also, I don't know how to move it to the center of my page. If I can, let me know and I will cut and paste it here.
I just checked, <script type="text/javascript"> I am assuming this means yes, it is a java script This post has been edited by bsvence: Jul 2 2009, 07:12 PM |
|
|
|
| pandy |
Jul 2 2009, 07:21 PM
Post
#4
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 13,800 Joined: 9-August 06 Member No.: 6 |
Yes. It's JavaScript.
Can you post the URL to the page? It's easier if we get all the bits and pieces. -------------------- "Never go to excess, but let moderation be your guide."
- Cicero |
|
|
|
| bsvence |
Jul 2 2009, 09:13 PM
Post
#5
|
|
Group: Members Posts: 5 Joined: 2-July 09 Member No.: 9,059 |
QUOTE(pandy @ Jul 2 2009, 07:21 PM)  Yes. It's JavaScript. Can you post the URL to the page? It's easier if we get all the bits and pieces. Well, it isn't up yet. I am in the beginning stages. I can send you the html and let you see what you can do if you want. Here is the html: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <style type="text/css"> /*Example CSS for the two demo scrollers*/ #pscroller1{ width: 200px; height: 200px; border: 2px solid black; padding: 5px; background-color: darkgray; } .someclass{ //class to apply to your scroller(s) if desired } </style> <script type="text/javascript"> /*Example message arrays for the two demo scrollers*/ var pausecontent=new Array() pausecontent[0]='3/26</a><br /><center></a><br /><b>Girls Volleyball</b></a><br /></a><br />Home Vs. Huth</a><br /></a><br />3:30 start</center>' pausecontent[1]='3/28</a><br /></a><br /><Center><b>Boys Volleyball</b></a><br /></a><br />at Forest Trail</a><br /></a><br />3:30 start</center>' pausecontent[2]='</a><br /><b>Student Council Meeting</b></a><br /></a><br />Wednesday March 4</a><br /></a><br />3:30' pausecontent[3]='3/30</a><br /><b>Chess Club</b></a><br />Practice today 3:30</a><br />Room 807' pausecontent[4]='<b>Cross Country Practice</b></a><br />August 24th</a><br />8:30 a.m.' </script> <script type="text/javascript"> /*********************************************** * Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ function pausescroller(content, divId, divClass, delay){ this.content=content //message array content this.tickerid=divId //ID of ticker div to display information this.delay=delay //Delay between msg change, in miliseconds. this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is) this.hiddendivpointer=1 //index of message array for hidden div document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>') var scrollerinstance=this if (window.addEventListener) //run onload in DOM2 browsers window.addEventListener("load", function(){scrollerinstance.initialize()}, false) else if (window.attachEvent) //run onload in IE5.5+ window.attachEvent("onload", function(){scrollerinstance.initialize()}) else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec setTimeout(function(){scrollerinstance.initialize()}, 500) } pausescroller.prototype.initialize=function(){ this.tickerdiv=document.getElementById(this.tickerid) this.visiblediv=document.getElementById(this.tickerid+"1") this.hiddendiv=document.getElementById(this.tickerid+"2") this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv)) //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px" this.getinline(this.visiblediv, this.hiddendiv) this.hiddendiv.style.visibility="visible" var scrollerinstance=this document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1} document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0} if (window.attachEvent) //Clean up loose references in IE window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null}) setTimeout(function(){scrollerinstance.animateup()}, this.delay) } pausescroller.prototype.animateup=function(){ var scrollerinstance=this if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){ this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px" this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px" setTimeout(function(){scrollerinstance.animateup()}, 50) } else{ this.getinline(this.hiddendiv, this.visiblediv) this.swapdivs() setTimeout(function(){scrollerinstance.setmessage()}, this.delay) } } pausescroller.prototype.swapdivs=function(){ var tempcontainer=this.visiblediv this.visiblediv=this.hiddendiv this.hiddendiv=tempcontainer } pausescroller.prototype.getinline=function(div1, div2){ div1.style.top=this.visibledivtop+"px" div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" } pausescroller.prototype.setmessage=function(){ var scrollerinstance=this if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) setTimeout(function(){scrollerinstance.setmessage()}, 100) else{ var i=this.hiddendivpointer var ceiling=this.content.length this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1 this.hiddendiv.innerHTML=this.content[this.hiddendivpointer] this.animateup() } } pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any if (tickerobj.currentStyle) return tickerobj.currentStyle["paddingTop"] else if (window.getComputedStyle) //if DOM2 return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") else return 0 } </script> </head> <body> <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent, "pscroller1", "someclass", 3000) document.write("<br />") </script> </body> </html> This post has been edited by bsvence: Jul 2 2009, 09:26 PM |
|
|
|
| pandy |
Jul 2 2009, 09:46 PM
Post
#6
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 13,800 Joined: 9-August 06 Member No.: 6 |
Yeah, but it matters what the script writes out.
-------------------- "Never go to excess, but let moderation be your guide."
- Cicero |
|
|
|
| Frederiek |
Jul 3 2009, 04:21 AM
Post
#7
|
|
Programming Fanatic Group: Members Posts: 3,586 Joined: 23-August 06 From: Europe Member No.: 9 |
It's a script from DynamicDrive: http://www.dynamicdrive.com/dynamicindex2/crosstick.htm.
Simply try out the, by the OP given, code. Go see at http://css-discuss.incutio.com/?page=CenteringBlockElement. Just apply (parts of) the CSS of their #wrapper to your #pscroller1. And what problem do you have with the border? A rule for that is set in the CSS of #pscroller1. -------------------- "The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French) "Leave scepticism to others and take action" from HOME by Goodplanet An inconvenient truth by Al Gore |
|
|
|
| pandy |
Jul 3 2009, 10:13 AM
Post
#8
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 13,800 Joined: 9-August 06 Member No.: 6 |
Oops! Didn't see the whole script was embedded. Well, you have that CSS bit in HEAD. AFAICS centering #pscroller1 would do the trick. You can do that with auto left and right margins. Vertical centering is tricky. Maybe it's enough to push it down a bit with a top margin?
Try to add the last line here. CODE #pscroller1{ width: 200px; height: 200px; border: 2px solid black; padding: 5px; background-color: darkgray; margin-left: auto; margin-right: auto; margin-top: 150px; } Please use a doctype. Otherwise browsers will be in quirks mode and IE won't understand auto margins. If you don't know what to use, the following will do. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Also see: http://www.htmlhelp.com/tools/validator/doctype.html http://hsivonen.iki.fi/doctype/ -------------------- "Never go to excess, but let moderation be your guide."
- Cicero |
|
|
|
| bsvence |
Jul 4 2009, 10:08 AM
Post
#9
|
|
Group: Members Posts: 5 Joined: 2-July 09 Member No.: 9,059 |
Thanks everyone. I will try it as soon as I can and let you know.
|
|
|
|
| bsvence |
Jul 7 2009, 12:15 PM
Post
#10
|
|
Group: Members Posts: 5 Joined: 2-July 09 Member No.: 9,059 |
Thank you very much for all of your help Pandy. With some quick adjustments, it worked exactly like I wanted it too. Now the problem is I can't get it to show up on the screen when I preview it with Microsoft internet explorer 6. I did use your doc line but still no go. I will keep trying things.
If you have any suggestions, they would be greatly appreciated. |
|
|
|
| pandy |
Jul 7 2009, 01:13 PM
Post
#11
|
|
Don't like donuts. Don't do MySpace. Group: WDG Moderators Posts: 13,800 Joined: 9-August 06 Member No.: 6 |
Let's see what you have now then. The code you pasted above worked in IE6.
-------------------- "Never go to excess, but let moderation be your guide."
- Cicero |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th June 2013 - 02:15 AM |
Invision Power Board
© 2013 IPS, Inc.
Licensed to: HTMLHelp.com, LLC