The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with spacing
bsvence
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2009, 06:54 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bsvence
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2009, 07:21 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes. It's JavaScript. smile.gif

Can you post the URL to the page? It's easier if we get all the bits and pieces.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bsvence
post 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. smile.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2009, 09:46 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, but it matters what the script writes out.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 3 2009, 10:13 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bsvence
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bsvence
post 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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 7 2009, 01:13 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Let's see what you have now then. The code you pasted above worked in IE6.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 02:35 AM