PDA

View Full Version : Text and Image Marquee Crawler v1.53 help please



rlhenryjr
03-13-2013, 08:27 PM
1) Script Title:
Text and Image Crawler v1.53
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
3) Describe problem:
Hello,

I have used the above script marquee to place an image of a railroad train gif moving to the left. I have the railroad tracks, but dont know where to place them. Where ever I placed them on my site the train images wont show up.

Would someone please be so kind and show me how to add train tracks to the bottom of a train gif?

Also, if you have a script for railroad trains that would be even better where 2-3 trains can be seen on different tracks going in two different directions..

If you dont have this script for trains them maybe you can refer me to where I can find one.

I really appreciate any help to get these train tracks on the site or a new script especially for train gifs and the tracks.

Thanks so much.

Beverleyh
03-13-2013, 09:04 PM
You should be able to use absolute positioning and z-index to place (layer) the track images underneath where the train moves.

Info on absolute positioning: http://www.impressivewebs.com/absolute-position-css/

Info on z-index: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

If you need more help, please post a link to your page.

rlhenryjr
03-13-2013, 09:24 PM
I dont understand CSS yet. I usually will copy and paste code and hope it works.
Here's the link to the website.
http://www.railmemberfansite.com/index.html

Its not finished yet, just need help with the trains and tracks. Would you post the code that i can copy and paste for 2-3 tracks of trains going in two different directions. Please use the same gifs going in both directions.
Thanks so much for your help.

rlhenryjr
03-13-2013, 09:26 PM
I just thought about it, Is it possible to make the trains go at different speeds on each track???
Thanks for any assist.

Beverleyh
03-13-2013, 10:09 PM
Now is a good a time as any for you to learn a little bit of CSS - nothing expert level or anything - just some beginners stuff. Asking other people to just give you the answers, without any understand, isn't going to help you much in the long run and for that reason (as well as the fact that i have limited facilities on iphone), here is a link to a very easy positioning tutorial: http://www.htmlgoodies.com/beyond/css/article.php/3470391/So-You-Want-Positioning-Huh.htm#its
It uses the img tag and it uses inline styles (CSS) which are usually easier for newbies to understand because they're placed right there in the HTML element where the CSS is to be applied.

Have a go at doing it yourself first using your track images, and let us know how you get on. We can help you tweak your markup once its in the page.

Your other question relates to customising the JavaScript which I am unable to help with at this time. Hopefully somebody else will be able to advise on that. There may be an alternative script you can use.

rlhenryjr
03-14-2013, 11:00 PM
Hello,
Thanks so much for your help and pointing me to the pages that I needed to learn.
CSS is a bit overwhelming but once someone tells you what you are looking for the job is easy to do. I have often looked at css and had no idea what most of it was about. I learned a lot reading these pages and have the train track right where it's suppose to be. Thanks so much for your help. again.

Would you be so kind and tell me what I need to look up in CSS to make the trains appear to be on two or more tracks and go in different directions. I am a hard worker but dont always know what I am looking for. I can make them work once I have gotten information about the topic. Please tell me what I am looking for so I can make the trains appear to be on two or more tracks and go in different directions.

Beverleyh
03-15-2013, 06:25 AM
That's excellent news. You've learnt something and successfully used it, and now hopefully you feel a little less overwhelmed than you did before. CSS should start to become a little easier now - inline styles tend to make more sense when you're starting out and I bet you'll be making other tweaks, such as applying different font-family (eg font-family:Arial; ) or color (eg color:red; ), to your other elements, all within that inline style="" attribute in no time at all. ;)

BTW, here's another easy guide to inline styles thst you might like http://www.ironspider.ca/adv/basic_css/inline.htm

I'll have a look at the 2-train JavaScript changes/additions once I'm back on a PC. Give me a couple of hours and I'll reply again soon.

Beverleyh
03-15-2013, 01:48 PM
This code should insert another crawler onto your page;
<div class="marquee" id="mycrawler" style="" ><img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '2px',
'width': '990px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
direction: 'right',
savedirection: true,
random: true
});
//]]>
</script>The DD script supports multiple instances - the critical point being that a unique id must be used for each script-call, so Ive put those in and highlighted them in red. See how the same id is used once in the div that holds your train images, and then again in the script-call below.

Ive used the same code that you've used except that Ive inserted a unique id (the one currently on your page is called "mycrawler2") and I've also added the direction parameter (blue) so your 2nd train track will run the other way.

That's it for the implementation. You should just be able to paste that code into your web page markup and see a second train on the page once you refresh the browser.

Next comes positioning, so this is another time when you can use the style="" attribute inside of the div that holds your train images. I've put that into the opening div tag for you (green) so its ready to fill with your positioning CSS.

rlhenryjr
03-15-2013, 05:14 PM
Hello again,
I appreciate your help. I am learning a lot.
This script is so cool, it's getting deep now, lol, but I had a feeling I wasn't clear about my question. What I meant to say was, "Please tell me what I need to do to make two trains passing one another going in opposite directions and appear to be on the same track".
Please forgive me for being unclear in my question. Please help me out again. I am learning so much.

Beverleyh
03-15-2013, 07:02 PM
Ah yes, this is the beauty of positioning in the style="" attribute. In the same way that you have your track image positioned like this;
<IMG STYLE="position:absolute; TOP:567px; LEFT:10px; WIDTH:990px; HEIGHT:5px" SRC="images/trackbed.gif">You can also put style="blah:blah" in the divs for each crawler. So at the minute, one of your crawlers looks like this;
<div class="marquee" id="mycrawler2"><img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" /></div>You can just add in the style attribute and play around with the positioning to suit - even to make them overlap each other to give the appearance of running along the same track ;)
<div class="marquee" id="mycrawler2" STYLE="position:absolute; TOP:567px; LEFT:10px;"><img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" /></div>You can put the style="" attribute in any element tag (except <script>) - paragraphs <p>, spans <span>, unordered lists <ul>, tables <table>, individual table cells <td>, etc. - and apply and styling/CSS that you want.

Hope that makes sense.

rlhenryjr
03-17-2013, 01:34 PM
ok yes, it makes since, but going back a little to position, please.

On this site: http://www.htmlgoodies.com/beyond/cs...ng-Huh.htm#its
"Quote" It says, "position:absolute; states that the image will go exactly where I say it will. If text or another picture is already there -- tough. This will go right over top of it. That is one of the drawbacks to this positioning stuff. "
Position:absolute worked on the trackbed.gif. But when I added another track a couple of px above, it completely hid the first track also the train when I tried to up it by a couple of px above the train.gifs too. It appears as though it will not let the gifs overlap in the "position=absolute". I have tested it over and over and keep coming up with the same thing.

The trackbed.gif is positioned well, no problem with that for now, But when I put a:
style="position:absolute; TOP:517px; LEFT:10px;" after the Id crawlers both train gifs are hidden completely.
What am i doing wrong? Please look at my source.

ps: The htmlgoodies.com site is great, easy to understand. Thanks.

Beverleyh
03-17-2013, 03:25 PM
I just looked at your source code but the script calls for each marquee are missing - there are only pairs of empty script tags that look like this;
<script type="text/javascript">
//
</script>
Is your web page editor removing the scripts? Try using something like Notepad++ http://www.google.com/m?q=notepad%20plus%20plus (or even good old Notpad in your Windows programme accessories folder) to edit your web page.

Once the scripts are back in place we can work more on positioning.

rlhenryjr
03-17-2013, 05:01 PM
I haven't done anything different(using notepad). The only thing different is this code that I see in my source.
When I added the "style="position:absolute; TOP:517px; LEFT:10px; "
to mycrawler and mycrawler2 the train.gifs just disappeared from the page.
I will go back to the original so you can see. I dont know what happened.

The original is there now. both trains are showing as before. All I did was remove the style from the div class in both mycrawler and mycrawler2. umph?? :confused:

<!-- ============ Begin Train Marquee ============== -->
<table width="0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle">

<div class="marquee" id="mycrawler" style="position:absolute; TOP:517px; LEFT:10px;" >
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />

</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '2px',
'width': '990px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
direction: 'right',
savedirection: true,
random: true
});
//]]>
</script>


<div class="marquee" id="mycrawler2" style="position:absolute; TOP:517px; LEFT:10px;">
<img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '990px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
//]]>
</script>

</td>
</tr>
</table>



<IMG STYLE="position:absolute; TOP:537px; LEFT:10px; WIDTH:990px; HEIGHT:5px" SRC="images/trackbed.gif">
<!-- ============ END Train Marquee ============== -->

Beverleyh
03-18-2013, 11:08 AM
I think the javascript is modifying the style attribute - no worries - try wrapping the crawler div in another set of div tags and add the style="" to that instead.
<div style="">
<DIV id="mycrawler2" class="marquee"><IMG alt="" src="About%20Railmember%20Fan%20Site_files/shastadaylight.gif">
<IMG alt="" src="About%20Railmember%20Fan%20Site_files/sanfranciscochief.gif">
</DIV>
</div>

rlhenryjr
03-18-2013, 11:46 AM
ok I have wrapped the crawler divs in another set of div tags. I see my source on the net but the train.gifs have disappeared again. The tracks are still there.
Here's the source:

<div style="">
<div class="marquee" id="mycrawler" style="position:absolute; TOP:517px; LEFT:10px;" >
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>


ps. Would you be so kind as to direct me to an easy site that explains divs and what they are all about. I am so used to html basic code but never learned about divs. I would like to understand them, please.

Beverleyh
03-18-2013, 03:07 PM
You still have the style attribute inside the "mycrawler" div so the same thing as before is still happening.

What I meant was to remove the styling from the "mycrawler" div (as you currently have it) and instead style the div on the outside of that;

<div style="position:absolute; TOP:517px; LEFT:10px;" >
<div class="marquee" id="mycrawler" >
<img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>

A div is just a container for other elements, but here's some info as requested: http://www.tizag.com/htmlT/htmldiv.php

jscheuer1
03-18-2013, 03:18 PM
Beverleyh meant:


<div style="position:absolute; TOP:517px; LEFT:10px;">
<div class="marquee" id="mycrawler">
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>

And she's right. You cannot apply style directly to the class="marquee" div.

Alternatively you can use the style property of the init, see the script's documentation for specifics. Do not do both. Example of using the init's style property:


<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
</script>

Zooming in on the highlighted section, you would do like:


style: {
'position': 'absolute',
'top': '517px',
'left': '10px',
'height': '250px' //change the height to the desired height
},

Further, to your question about the div tag - The div is a generic block level tag with no other special properties. Any good HTML reference will tell you about it. It's a lot like the p tag, except that it is not self closing (means it needs a closing </div> tag to close it, a p tag will close, in addition to the usual ways, when it hits the next opening block level element) and unlike p, div has no default margin.

rlhenryjr
03-18-2013, 09:17 PM
I am so thankful for the help from you both Beverleyh and John.
I have learned a lot.
I have made the corrections and the code can be seen in the source.
Please tell my why I see only one of the two trains going to the left when they should be passing one another going in opposite directions and appear to be on the same track? It looks like my code is correct now. But I also noticed that the tran.gifs and track are now covered my my google ad which wasn't a problem before. Please tell me how to correct that.
I know this has to do with the position but this is a new problem.

rlhenryjr
03-18-2013, 09:19 PM
Thanks also for the info on divs. The webpage you sent me to was the first time I really understood divs and seeing an example. Very helpful. thanks again to both of you.

jscheuer1
03-19-2013, 07:58 AM
On that page I see two crawlers. They are both the exact same size and both in the exact same position. Since they are both positioned absolute, the second one covers the first one. If you want both to be seen in the way I think that you're describing, they should each be half the width that they are now, and one should be positioned farther to the right by that same amount. Something like (changes in 3 places highlighted):


<div style="position:absolute; TOP:507px; LEFT:10px;">
<div class="marquee" id="mycrawler" >
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '2px',
'width': '495px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
direction: 'right',
savedirection: true,
random: true
});
//]]>
</script>
<div style="position:absolute; TOP:507px; LEFT:505px;">
<div class="marquee" id="mycrawler2">
<img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '495px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
//]]>
</script>

rlhenryjr
03-21-2013, 08:17 PM
Hi John.
I can't seem to get the train. gifs to do what I want. I am so frustrated I will have to work on this another time. At present I will leave it as it is with the two train tracks going on two different tracks. Thanks so much I have learned a lot and need to rest. I am posting another question in the html section of your website. I sure hope someone can help me its really simple i can seem to get my site to make the 3 columns that I want it to do. thanks so much.

jscheuer1
03-21-2013, 08:59 PM
You haven't followed the instructions from my previous post. If you had, you would have been very close. Now you've changed things so much, I cannot see an easy way back. Do you have a copy of the page from when you first asked the question, or better yet from when you first tried to implement my suggestion? If You put that up, I can easily make a demo for you.

Are you looking for something like this:

http://home.comcast.net/~jscheuer1/side/demos/crawler/trains-h.htm

ajfmrf
03-21-2013, 10:33 PM
I took one train and made three parts but can not
get the images together

Here they are if someone wnats/can/has/time to assemble
them with the engine on the right

the engine
http://www.web-user.info/train/engine2.png
the next train car
http://www.web-user.info/train/cars2.png
the rest of the train cars
http://www.web-user.info/train/cars.png

<img scr="http://www.web-user.info/train/cars2.png">
<img scr="http://www.web-user.info/train/cars.png">
<img scr="http://www.web-user.info/train/engine2.png">

Hey John,that looks great.It should be what is wanted.

I just thought it would be nice to have trains with engines facing each other but I don't know how to put the three images together with out using div or tables.

Maybe one of our members is an expert with that type of thing and can put the three images together.....

jscheuer1
03-22-2013, 03:22 AM
Or maybe:

http://home.comcast.net/~jscheuer1/side/demos/crawler/trains-2-h.htm