Help with spacing |
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
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
|
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
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
bsvence |
Jul 2 2009, 09:13 PM
Post
#5
|
Group: Members Posts: 5 Joined: 2-July 09 Member No.: 9,059 |
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
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yeah, but it matters what the script writes out.
|
Frederiek |
Jul 3 2009, 04:21 AM
Post
#7
|
Programming Fanatic Group: Members Posts: 5,146 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. |
pandy |
Jul 3 2009, 10:13 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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/ |
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
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Let's see what you have now then. The code you pasted above worked in IE6.
|
Lo-Fi Version | Time is now: 24th April 2024 - 06:02 AM |