Marquee Quote of the day

adam · Post by **adam** » 25 Jul 2011, 10:33

The following code adds 'Quote of the Day' to blog, and the quote will keep on changing each day automatically.

<script type="text/javascript" src="http://www.brainyquote.com/link/quotebr.js"></script>

The following code adds a marquee effect to the text and displays in the blog.

Code: Select all

<marquee behavior="alternate" direction="left" bgcolor="#FFFFFF"   onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50">I want my quote of the day to be placed in here</marquee>

My question of concern is how to combine the two codes so that it displays the Quote of the day text as marquee effect and keeps on changing everyday automatically.

I hope I've made my question clear.

Any help on this would be kindly appreciated.

Thanks in advance.

Post by **HansV** » 25 Jul 2011, 11:16

Have you tried replacing the text in the marquee ("I want my quote...") with the code for the quote of the day?

adam · Post by **adam** » 25 Jul 2011, 11:45

With your assumption it does work. Meaning the code does display the Quote of the day text as marquee effect. But it diplays the text as following
Quote of the Day
If life had a second edition, how I would correct the proofs.
John Clare

Would it be possible to make a change in the code so that it displays the text as(one sentence), like;
Quote of the Day If life had a second edition, how I would correct the proofs. John Clare

Any suggestion would be kindly appreciated

Post by **HansV** » 25 Jul 2011, 11:55

The quote of the day is generated by JavaScript, you have no influence on the way it is formatted.
Perhaps you can find another source for quotes that delivers them as a single line.

Jezza · Post by **Jezza** » 25 Jul 2011, 18:56

Adam,

Have a look at this code I have cobbled together from various sources on the interweb thingy. It is best as a vertical scroll in my opinion only because it would take loads of space up on a page:

Code: Select all

<html>
<head>
<title>My Document</title>
<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 100px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

var delayb4scroll=1000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>

</head>
<body>

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<div id="scroll" style="width:250px; height:200px; overflow:hidden"><script type="text/javascript" src="http://www.brainyquote.com/link/quotebr.js"></script>
</br>
</hr>
<p>Learn more about running</p>
<a href="http://ultramagicforest.blogspot.com/">Magic Forest</a>


</div>


</div>
</div>

</body>
</html>

adam · Post by **adam** » 26 Jul 2011, 16:15

Thanks for the help Jezz. Following is how I've modified your code. How could I make the text My Document to be removed from the code. In other words how to not make the My Document part of the code not to appear in my web page? Any help on this would be kindly appreciated.

Code: Select all

My Document
<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 50px; /*marquee height */
background-color: white;
overflow: hidden;
border: none;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

var delayb4scroll=1000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",2)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>




<div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<div id="scroll" style="width:250px; height:200px; overflow:hidden"><script type="text/javascript" src="http://www.brainyquote.com/link/quotebr.js"></script>



</div>


</div>
</div>

Jezza · Post by **Jezza** » 26 Jul 2011, 17:18

Hi Adam

It should read:

Code: Select all

<title>My Document</title>

You can just change the title tags to say

Code: Select all

<title>Whatever I want to call my page</title>

adam · Post by **adam** » 26 Jul 2011, 17:46

Thanks for the help Jezza. How could I increase the scrolling speed of the text?

Post by **HansV** » 26 Jul 2011, 19:28

See the comment in Jezza's code - it tells you what to change to speed up scrolling.

Jezza · Post by **Jezza** » 26 Jul 2011, 21:20

adam wrote:Thanks for the help Jezza. How could I increase the scrolling speed of the text?

Hi Adam

Have a look at the section of the script that reads:

Code: Select all

var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)

I set it at 1 to be very slow so as to show the effect however be very careful about this speed setting because if it goes too fast people will not be able to read it and it will defeat the object.

Be mindful that the marquee tag has been deprecated and is frowned upon in web development circles so use this code wisely.

Eileen's Lounge

Marquee Quote of the day

Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day

Re: Marquee Quote of the day