Dear
Its my first post in the forum, I request you to please help me in this...
I want to make JS code to display the news titles of 10 sec each. It should have Next, Pause, Previous button. It will auto load when the page start. Every different title have different background.
One line of 980 Px width and 13 px height. The buttons should be totally on the right side and the text is on the left side.
Please spend some of u r time to solve my request..
What have you got so far? The html/css at lest I hope. Show it to use please or a link to your site. Also the javascript you have already finished.
Dear, I dont know the codes i have not done. Please Click Here for my site. You will see the marquee, i want to change it to js text as mentioned above.
This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
haleemfp making a 980 Px width and 13 px height area to display information and put 3 buttons to the right of it is no big problem. What do you want displayed in that 980x13 area? What do you mean by news titles? Are they the titles you now have like:
Code:
Saudis own 300 private jets worth SR 20 bn
KSA consulate in Hyderabad soon
Saudi Citizen is on death row
And all the rest on the site?
Also need to know where this 980x13 area should go(where to place it on screen)
If your given the code can you install it? (This to me is the biggest question. No since working on something that will not be used).
I just measured your display area and it's only 1000px wide. Can't put buttons to the right of a 980px <input> area. This has to be cut down or the buttons put somewhere else.
If you open my site, you will see the marquee on the top header moving like (*****Earn Money From FEDRi by Converting your Points*****). I want to remove this and place the new JS instead of this.
Yes your correct, I want to display the news titles which I will add manually in the code. Cant we place small three icon or buttons for Like < || > on the same line of the text ????
I am also working for this from yesterday, I found the code from this website and I modify it. But its not working. It will be easy for you if you can edit the below code....
Think I commented on all the changes I made. Play with this and see if it holds together. When you hit plat button the text advances automatically now.
Code:
<!DOC html>
<html>
<head>
<script type='text/javascript' src='javascript/jquery.js'></script>
<script type="text/javascript">
var messages = [
'Messages for <em>kindergarden</em> class',
'Message for <em>1st grade</em>',
'Message for <em>2nd grade</em>',
'Message for <em>3rd grade</em>',
'Message for <em>4th grade</em>',
'Message for <em>5th grade</em>',
'Message for <em>6th grade</em>'
];
var msgPtr = 0;
var player;
function nextMsg(direction, loop) {
msgPtr = msgPtr + direction;
if (msgPtr < 0) { msgPtr = messages.length-1; }
if (msgPtr > messages.length-1) { msgPtr = 0; }
document.getElementById('msg').innerHTML = messages[msgPtr];
if(loop){
player = setTimeout(function(){ nextMsg(1, true); }, 2500);
}
}
/* this function toggleMsg() is not used, maybe removed */
function toggleMsg()
{
clearTimeout(player);
}
$(function(){
$('.prev').click(function(){
clearTimeout(player);
nextMsg(-1, true);
$('.playpause').removeClass('playing').addClass('stopped');
$("#playpause").removeClass('stopped').addClass('playing').text('pause'); /* Added this */
});
$('.next').click(function(){
clearTimeout(player);
nextMsg(1, true);
$('.playpause').removeClass('playing').addClass('stopped');
$("#playpause").removeClass('stopped').addClass('playing').text('pause'); /* Added this */
});
$('#playpause').click(function(){ /* Made some changes this function */
if($(this).hasClass('stopped'))
{
clearTimeout(player);
nextMsg(1, true);
$(this).removeClass('stopped').addClass('playing').text('pause');
}
else
{
clearTimeout(player);
nextMsg(0, false); // added
$(this).removeClass('playing').addClass('stopped').text('play');
}
});
});
</script>
<style type="text/css">
em { color:orange; } // don't know what this is
#msg {
font-family:monospace;
background-color:yellow;
font-size:1.45em;
width:840px;
height: 1.40em; // Added this to let us read the marquee
border:1px dotted red;
overflow:hidden;
float: left;
}
#buttons {float: right;}
#mark{width: 980px;} // this does not need to be here when you add to the page. It should already be there.
</style>
</head>
<body>
<div id="mark">
<div id="msg"></div>
<div id="buttons">
<button class="prev"><</button>
<button id="playpause" class="playing">pause</button> <!-- Made a change here -->
<button class="next">></button>
</div>
</div>
<!-- Placed JS here so it starts after the page loads -->
<script type="text/javascript">
nextMsg(0, true);
</script>
</body>
</html>
This line:
<script type='text/javascript' src='javascript/jquery.js'></script>
Calls my jquery.
Replace it with a call to retrieve your jquery or get it from google with
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
BTW jquery ver is now 1.9.0, but things work in the link I gave you so why fight it.
Replace it with a call to retrieve your jquery or get it from google with
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
That’s a reference to prototype, though, not jQuery.
This line:
<script type='text/javascript' src='javascript/jquery.js'></script>
Calls my jquery.
Replace it with a call to retrieve your jquery or get it from google with
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
BTW jquery ver is now 1.9.0, but things work in the link I gave you so why fight it.
Thanks dear for your support.
Its working now...
I really appreciate your help...
Before you post, read our: 
