PDA

View Full Version : Inserting script into Dreamweaver page.



edencorgis
03-26-2012, 05:45 PM
1) Script Title: :: Text and Image Crawler v1.5

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

3) Describe problem: I am trying to insert this crawler into a Dreamweaver html page. I have not experience with Javascript, but I have followed the directions carefully. The pictures and text appear, but the animation is not there. What am I doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<script type="text/javascript" src="crawler.js">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/

</script>
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}

/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ This is the layout information. ~~

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {

padding: 10px 0;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
style: {
'width': '100%',
'height': '200px',
'color': '#fff',
'background-color': '#32f' //<--No comma following the very last line!
}
-->
</style></head>

<body>

<div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>

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


<div class="marquee" id="mycrawler2">
<img src="http://img42.imageshack.us/img42/6331/beachgl.jpg" /> <img src="http://img222.imageshack.us/img222/8854/waterox.jpg" /> <img src="http://img405.imageshack.us/img405/7314/cocovv.jpg" /> <img src="http://img853.imageshack.us/img853/5038/bonsaiy.jpg" />
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
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>
<h1><!-- end .content --></h1>
</div>
<!-- end .container --></div>
</body>
</html>

traq
03-26-2012, 07:42 PM
is the path to the <script> correct?

Also,
Please use the forum's bbcode tags and indent your code to make it more readable:

for php code............
<?php /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................

edencorgis
03-27-2012, 02:46 AM
Adrian,
Thanks the script path is correct, and to be honest, I really don't understand what you are asking me to do re: the rest of the reply. I really know nothing about js.

:o

traq
03-27-2012, 03:20 AM
Actually - take a good look at your markup: you have the script inside your style block, so it's not being read as a script.

to clarify, your page looks like this:
<style>
<script src="script.js"></script>
/* .... */
</style>your script needs to be outside the style element:
<style>
/* .... */
</style>
<script src="script.js"></script>


------------------------------

regarding the "BBCode" tags:

use them! they make your posts much easier to read.

for example,



<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML page!</title>
<meta charset="UTF-8">
</head>
<body>
<p>I'm using BBCode!</p>
</body>
</html>


becomes:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML page!</title>
<meta charset="UTF-8">
</head>
<body>
<p>I'm using BBCode!</p>
</body>
</html>
:D

edencorgis
03-27-2012, 02:14 PM
You are very nice to be so patient. I am very new at this, as I am sure you can guess.

Thanks so much!

traq
03-27-2012, 03:13 PM
no problem. did moving the <script> element solve your problem?

If your question has been answered, please mark your thread "resolved":
On your original post (post #1), click [edit], then click [go advanced]. In the "thread prefix" box, select "Resolved". Click [save changes].