PDA

View Full Version : How to add style to a script



Ponder
08-08-2012, 09:01 PM
1) Script Title: Mike's DHTML scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/mikescroll.htm

3) Describe problem: Found this but can't get it to work. Can only see the scroll box on the page but nothing is moving and it appears that the text and links that are to be scrolling are stacked up on top of each other in the box....not moving.

Working fine on the DD page but I can't seem to get it to work. Any Ideas? Is there a more recent script?


Thanks for helping..

ajfmrf
08-09-2012, 03:16 AM
please post a link to your page so people can see what is going on.

Other wise it would be a guess as to why it won't work.

Ponder
08-09-2012, 08:04 PM
Here's a link to where we are trying it out.....

http://www.georgiaponds.net/testimonials.php

Thanks very much....

Ponder

jscheuer1
08-09-2012, 08:24 PM
I'd go with:

http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

Then you can use ordinary css to style the contents.

Ponder
08-09-2012, 08:52 PM
Thanks John for that suggestion....

Working on that....Ponder

jscheuer1
08-09-2012, 11:42 PM
Are you familiar with css?

Ponder
08-10-2012, 12:12 AM
Just a bit....but I did install the scroller you suggested on some pages....and I found a site that outlined a lot of how to use css with this particular scroller.......so i tried some if it for color, fonts etc....and got the hang of it somewhat....

Seems like this scroller, since it does not have any ext. script to park in a server file, may take up a lot of space as all the code is on the pages....

I prefer the structures that provide for ext. files and small amounts of code on the page....but maybe it does not make any difference....I am not experienced enough to know....

Ponder

jscheuer1
08-10-2012, 02:00 AM
That's (teaching yourself the css you need for this) very good.

You can make almost everything about this script external. I'd start with the main script (right click and 'Save As'):

4580

Put it in the same folder as your page(s) that use it. Now you can reference it on your page as:


<script src="pausescroller.js" 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.
***********************************************/

</script>

Or you can put it in a different folder, just list its path in the src attribute, ex:


<script src="js/pausescroller.js" 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.
***********************************************/

</script>

You can use the absolute path if you like. Just make sure that you put the above external tag on your page in the same spot where the script would have been had you left it as an internal script.

As for the css, that can all go in an external stylesheet. If you need help with how that's done, or have any other questions, let me know.

jscheuer1
08-10-2012, 05:16 PM
I went a little overboard with this and modified the script a bit so the scroller contents can go on the page in the body. I also made everything external (right click and 'Save As'):

4581

Unzip it to a separate folder and view in the browser.

All script configuration is done on the page. All style configuration is done in the external css file.

Any questions, feel free to ask.

Ponder
08-10-2012, 09:41 PM
Hi John.

I'm just now catching up to your posts....and help....Many Thanks.....

It will take me a few readings and some trial and Error to see and understand what you have put together....but if I can get min on the page and max in folders, then that would be great.

will advise....Thank You..Ponder

Ponder
08-10-2012, 11:42 PM
Hi John.

I tried the "Overboard" idea....I like it the best...but could not get it to work....

I think if you tell me "what goes where" I can get it going...3 files in the zip go in the folder tree in the server?? If this is right, then what on the page in the body section?

Thanks You..Ponder

bernie1227
08-11-2012, 12:01 AM
So basically, the HTML from demo-ext goes in the body of your page and in the same directory I think, go the other two files.

Ponder
08-11-2012, 12:42 AM
Hi Bernie 1227

I placed the Demo HTML on the page where I'd like the scroller to be....and the CSS and JS files are in the same directory.

All I can see on the page is the border and background color of the two scroller boxes..... but no scrolling etc. You can see it here

www.georgiaponds.com/testimonials.php

I think I have not figured out how to link the two ext files ?? Any ideas? Ponder

bernie1227
08-11-2012, 12:51 AM
That's odd, for me they are scrolling fine

Ponder
08-11-2012, 01:20 AM
I have been using Firefox....no scrolling etc.....

But just tried IE and they are in fact scrolling fine here with IE......

Pretty strange.....but thanks very much for helping me along with this.....

funny I have the same scroller on the other pages in this same site and it is working fine with FF and IE....so something has changed for FF on this one page where we have the ext files ....all the other pages have all the code on lthe page....and it works for FF and ie that way....

Do you have a suggestion how I might try to solve this?

Ponder

jscheuer1
08-11-2012, 01:24 AM
Looks good here too.

Make sure to clear the browser's cache and refresh the page.

Ponder
08-11-2012, 01:58 AM
Hi John...yes...did so and tried on two Desktops and two Lap tops...not scrolling fire fox anywhere...different versions of FF too...

I'll try one of the other suggestions you put together for me tomorrow and see....funny the code woks in FF and IE from the DD site....but no ext files...

Ponder

Ponder
08-11-2012, 03:24 AM
Hi John and Bernie1227.

found this on the internet....

http://stackoverflow.com/questions/1888524/text-scrolling-javascript-problem-in-firefox

don't know if it is applicable....and does not answer why the scroller works with all code on the page....

I would like to try the other option to place the JS file as an ext file....that would still take a lot of code off the page...but not sure just exactly what to take out of the total body of code....from what to what??

Thanks for everything....Ponder

jscheuer1
08-11-2012, 04:38 AM
Has nothing to do with it. I tested the code on Firefox and it works. Try it in Firefox here:

http://home.comcast.net/~jscheuer1/side/pausescroller/demo-ext.htm

As I say, works in Firefox here. If your Firefox has a problem with it, it might be outdated, and/or have settings, and/or an addon or third party utility that causes the problem.

Does the above link work for you in your Firefox?

If it does work and yours does not (unfortunately I cannot check yours in Firefox as you've changed it), then it might be an encoding issue.

To check that, you would have to put up a demo of it not working in Firefox for us to look at.

Ponder
08-11-2012, 06:51 AM
Hi John.

The demo file in FF only show the two boxes....but no text and no scrolling. It opens and runs normally with IE......

This is the result at three PC's.....I'll put it back on that same page tomorrow and maybe you can take a look ....

Thanks a lot....

Ponder
08-11-2012, 07:15 AM
Hi John.

Ok the code is back at http://www.georgiaponds.com/testimonials.php

Not working (no text visible and no scrolling) in FF 8

Working perfectly in IE

I did fire up another lap top with FF 12 on it and the scroller worked fine....but I think it should work with FF 8 which is the last version that all our critical add ons works with.....The version of the scroller with all the code on the page works with all versions....

Please take a look if you get a chance....Many Thanks..Ponder

jscheuer1
08-11-2012, 07:44 AM
If your Firefox browsers have a problem with the demo I just linked you to, there's something wrong with those browsers.

I'm guessing that they're out of date, but it could be something else.

I'm testing in Firefox 14.0.1. What version(s) are you using?

Hold on, I just tested in Firefox 5 and I'm seeing just what you say you saw.

Using a text only editor like NotePad, open up the pausescroller.js file. Near the end make the highlighted change:


pausescroller.getContent = function(id){
var el = document.getElementById(id), els = el.childNodes, div = document.createElement('div'), ar = [], i = els.length;
while(--i > -1){
if(els[i].nodeType === 1){
div.appendChild(els[i]);
ar.push(div.innerHTML);
div.removeChild(div.firstChild);
} else {
el.removeChild(els[i]);
}
}
el.parentNode.removeChild(el);
return ar.reverse();
};

The browser cache may need to be cleared and/or the page refreshed to see changes.

I'm a little unsure about this though. I mean I know it should fix it, and I know the other browsers will be fine with it. I'm just not clear on whether or not we should support out of date browsers. They are security risks. Perhaps we should encourage people to update.

We could do it like so:


pausescroller.getContent = function(id){
var el = document.getElementById(id), els = el.childNodes, div = document.createElement('div'), ar = [], i = els.length;
try{
while(els[--i]){
if(els[i].nodeType === 1){
div.appendChild(els[i]);
ar.push(div.innerHTML);
div.removeChild(div.firstChild);
} else {
el.removeChild(els[i]);
}
}
} catch(e){if(!pausescroller.warning){alert('Your Browser May Be Dangerously Out of Date, Consider Updating');} pausescroller.warning = true;}
el.parentNode.removeChild(el);
return ar.reverse();
};

It will still fix it for old Firefox, but will also give an alert:


Your Browser May Be Dangerously Out of Date, Consider Updating

Ponder
08-11-2012, 08:30 AM
OK that fixed it.....just checked the other pc s and everything is working....

Most of our FF version is 8, so it only 7 or 8 months old.....and the new versions do not have add on updates for our PW managers.....which is the only reason I have not updated FF.

Also, the version of the scroller when we had all the code on the page worked with all the browsers.....but now it's fixed with most of the code no longer on the page....

Can't thank you enough......for soooo much help....Thanks.....Ponder

Ponder
08-11-2012, 03:37 PM
Hi...

Not sure how to add text to the scroller.....I tried the same element as the scroller on other pages but no luck.....pausecontent2[0]=' etc etc'

Can you show me the opening and closing code for text please......

thanks..Ponder

jscheuer1
08-11-2012, 04:45 PM
What version of the script are you using? If you're using the latest from this thread, there is no pausescontent2[0], no pausecontent anything. Here:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="pausescroller.css" type="text/css">
<script src="pausescroller.js" 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.
***********************************************/

</script>
</head>
<body>
<div id="pscroller1">
<span><a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!</span>
<span><a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.</span>
<span><a href="http://www.cssdrive.com" target="new">CSS Drive</a><br />Categorized CSS gallery and examples.</span>
</div>
<script type="text/javascript">
//new pausescroller(ID, CSS_classname, pause_in_miliseconds)
new pausescroller("pscroller1", "someclass", 3000)
</script>
<br>
<div id="pscroller2">
<a href="http://www.news.com">News.com: Technology and business reports</a>
<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>
<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>
</div>
<script type="text/javascript">
new pausescroller("pscroller2", "someclass", 2000)
</script>
</body>
</html>

is how the new code works, how each scroller gets its content.

Ponder
08-11-2012, 04:53 PM
I am using the new version that you put together, but I was not able to add test without links, so I began to experiment with the format from the previous but it did not work either...just don't know format to use to display text only.

thanks..

Maybe a better way for me to say it is ...I have not been able to figure out what tags to use for text only content....

jscheuer1
08-11-2012, 05:54 PM
Use span tags.

Ponder
08-11-2012, 06:13 PM
Thank You John....

I tried Span tags earlier but got some errors...but must have made a mistake typing or something....just tried again and it's perfect......

Thanks Very Much..Ponder

Ponder
08-16-2012, 11:44 AM
Hello.

Is there an adjustment I can make in the code to stop the scroll motion and display one selected message?.

Most of the time we will have it scrolling through our messages...but there may be sometimes or some pages where I want to show only one message without scroll....from time to time.

Thanks for helping....Ponder

jscheuer1
08-16-2012, 02:10 PM
On a page, you can just skip both the external and on page scripts. Then here:


<div id="pscroller2">
<span><center><font color=#ffffff> Call, Click or Live Chat if you have a question and would like some help</font color></center></span>
<span><center><font color =#ffffff>Bring your older water feature to life with a Pond Renovation</font color></center></span>
<span><center><font color =#ffffff>We can help you size your equipment for Low Maintenance & Clear Water</font color></center></span>
<span><center><font color =#ffffff>Building your own pond ? .. Get our Professional Help & Advice as you go along</font color></center></span>
<span><center><font color =#ffffff>Schedule a Full Cleaning ... your feature will look like new again</font color></center></span>
</div>

Pick one and make it like so:


<div id="pscroller2">
<span><center><font color=#ffffff> Call, Click or Live Chat if you have a question and would like some help</font color></center></span>
</div>

Ponder
08-16-2012, 09:03 PM
Hi John....

Thanks...this looks very easy but I can't get it to work...

Should I take the two external scrips links ...css and js off the page....or is there a way to comment them...

and take the 5 messages off too and then add back one with the closing div?

Thanks..Ponder

jscheuer1
08-17-2012, 12:55 AM
No. Keep the css. Take away the javascript, both the one on the page:


<script type="text/javascript">
new pausescroller("pscroller2", "someclass", 2000)
</script>

and the external tag linking to the one off the page:


<script src="pausescroller.js" 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.
***********************************************/

</script>

I'm not sure I understand what you're saying about the markup. With that you leave everything except the content that you do not want. So if you have:


<div id="pscroller2">
<span><center><font color=#ffffff> Call, Click or Live Chat if you have a question and would like some help</font color></center></span>
<span><center><font color =#ffffff>Bring your older water feature to life with a Pond Renovation</font color></center></span>
<span><center><font color =#ffffff>We can help you size your equipment for Low Maintenance & Clear Water</font color></center></span>
<span><center><font color =#ffffff>Building your own pond ? .. Get our Professional Help & Advice as you go along</font color></center></span>
<span><center><font color =#ffffff>Schedule a Full Cleaning ... your feature will look like new again</font color></center></span>
</div>

And you just want the one about "Schedule a Full Cleaning", make it like so:


<div id="pscroller2">
<span><center><font color =#ffffff>Schedule a Full Cleaning ... your feature will look like new again</font color></center></span>
</div>

Ponder
08-17-2012, 04:28 AM
That's perfect John...

Thank You so Much.......

Ponder..