Javascript keeps getting cut off

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
User avatar
mystore
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 21
Joined: Sun Nov 11, 2007 9:10 pm

Javascript keeps getting cut off

Post by mystore » Fri Nov 16, 2007 9:22 am

I'm trying to put the following code in the content portion of the "Home Page" scriptlet:

Code: Select all

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="986" id="AutoNumber1" height="765">
<tr>
<td width="571" align="left" valign="top" height="324" rowspan="2"><SCRIPT TYPE="text/javascript">
<!--
function slide(src,link,text,target,attr) {
this.src = src;
this.link = link;
this.text = text;
this.target = target;
this.attr = attr;
if (document.images) {
this.image = new Image();
}
this.loaded = false;
this.load = function() {
if (!document.images) { return; }

if (!this.loaded) {
this.image.src = this.src;
this.loaded = true;
}
}
this.hotlink = function() {
var mywindow;
if (!this.link) return;
if (this.target) {
if (this.attr) {
mywindow = window.open(this.link, this.target, this.attr);

} else {
mywindow = window.open(this.link, this.target);
}
if (mywindow && mywindow.focus) mywindow.focus();

} else {
location.href = this.link;
}
}
}

function slideshow( slideshowname ) {
this.name = slideshowname;
this.repeat = true;
this.prefetch = -1;
this.image;

this.textid;
this.textarea;


this.timeout = 3000;
this.slides = new Array();
this.current = 0;
this.timeoutid = 0;

this.add_slide = function(slide) {
var i = this.slides.length;

if (this.prefetch == -1) {
slide.load();
}

this.slides[i] = slide;
}

this.play = function(timeout) {
this.pause();

if (timeout) {
this.timeout = timeout;
}


if (typeof this.slides[ this.current ].timeout != 'undefined') {
timeout = this.slides[ this.current ].timeout;
} else {
timeout = this.timeout;
}

this.timeoutid = setTimeout( this.name + ".loop()", timeout);
}

this.pause = function() {

if (this.timeoutid != 0) {

clearTimeout(this.timeoutid);
this.timeoutid = 0;

}
}

this.update = function() {
if (! this.valid_image()) { return; }

if (typeof this.pre_update_hook == 'function') {
this.pre_update_hook();
}

var slide = this.slides[ this.current ];

var dofilter = false;
if (this.image &&
typeof this.image.filters != 'undefined' &&
typeof this.image.filters[0] != 'undefined') {

dofilter = true;

}

slide.load();

if (dofilter) {

if (slide.filter &&
this.image.style &&
this.image.style.filter) {

this.image.style.filter = slide.filter;

}
this.image.filters[0].Apply();
}

this.image.src = slide.image.src;

if (dofilter) {
this.image.filters[0].Play();
}

this.display_text();

if (typeof this.post_update_hook == 'function') {
this.post_update_hook();
}

if (this.prefetch > 0) {

var next, prev, count;

next = this.current;
prev = this.current;
count = 0;
do {

if (++next >= this.slides.length) next = 0;
if (--prev < 0) prev = this.slides.length - 1;

this.slides[next].load();
this.slides[prev].load();

} while (++count < this.prefetch);
}
}

this.goto_slide = function(n) {

if (n == -1) {
n = this.slides.length - 1;
}

if (n < this.slides.length && n >= 0) {
this.current = n;
}

this.update();
}


this.goto_random_slide = function(include_current) {

var i;


if (this.slides.length > 1) {


do {
i = Math.floor(Math.random()*this.slides.length);
} while (i == this.current);


this.goto_slide(i);
}
}



this.next = function() {

if (this.current < this.slides.length - 1) {
this.current++;
} else if (this.repeat) {
this.current = 0;
}

this.update();
}



this.previous = function() {

if (this.current > 0) {
this.current--;
} else if (this.repeat) {
this.current = this.slides.length - 1;
}

this.update();
}



this.shuffle = function() {

var i, i2, slides_copy, slides_randomized;

slides_copy = new Array();
for (i = 0; i < this.slides.length; i++) {
slides_copy[i] = this.slides[i];
}

slides_randomized = new Array();

do {

i = Math.floor(Math.random()*slides_copy.length);

slides_randomized[ slides_randomized.length ] =
slides_copy[i];

for (i2 = i + 1; i2 < slides_copy.length; i2++) {
slides_copy[i2 - 1] = slides_copy[i2];
}
slides_copy.length--;


} while (slides_copy.length);

this.slides = slides_randomized;
}


this.get_text = function() {

return(this.slides[ this.current ].text);
}


this.get_all_text = function(before_slide, after_slide) {

all_text = "";

for (i=0; i < this.slides.length; i++) {

slide = this.slides[i];

if (slide.text) {
all_text += before_slide + slide.text + after_slide;
}

}

return(all_text);
}


this.display_text = function(text) {
if (!text) {
text = this.slides[ this.current ].text;
}

if (this.textarea && typeof this.textarea.value != 'undefined') {
this.textarea.value = text;
}

if (this.textid) {

r = this.getElementById(this.textid);
if (!r) { return false; }
if (typeof r.innerHTML == 'undefined') { return false; }

r.innerHTML = text;
}
}


this.hotlink = function() {

this.slides[ this.current ].hotlink();
}


this.save_position = function(cookiename) {

if (!cookiename) {
cookiename = this.name + '_slideshow';
}

document.cookie = cookiename + '=' + this.current;
}


this.restore_position = function(cookiename) {
if (!cookiename) {
cookiename = this.name + '_slideshow';
}

var search = cookiename + "=";

if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) { 
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
this.current = parseInt(unescape(document.cookie.substring(offset, end)));
}
}
}



this.noscript = function() {

$html = "\n";

for (i=0; i < this.slides.length; i++) {

slide = this.slides[i];

$html += '<P>';

if (slide.link) {
$html += '<a href="' + slide.link + '">';
}

$html += '<img src="' + slide.src + '" ALT="slideshow image">';

if (slide.link) {
$html += "<\/a>";
}

if (slide.text) {
$html += "<BR>\n" + slide.text;
}

$html += "<\/P>" + "\n\n";
}

$html = $html.replace(/\&/g, "&" );
$html = $html.replace(/</g, "<" );
$html = $html.replace(/>/g, ">" );

return('<pre>' + $html + '</pre>');
}


this.loop = function() {
if (this.current < this.slides.length - 1) {
next_slide = this.slides[this.current + 1];
if (next_slide.image.complete == null || next_slide.image.complete) {
this.next();
}
} else { // we're at the last slide
this.next();
}

this.play( );
}


this.valid_image = function() {

if (!this.image)
{
return false;
}
else {
return true;
}
}

this.getElementById = function(element_id) {

if (document.getElementById) {
return document.getElementById(element_id);
}
else if (document.all) {
return document.all[element_id];
}
else if (document.layers) {
return document.layers[element_id];
} else {
return undefined;
}
}



this.set_image = function(imageobject) {

if (!document.images)
return;
this.image = imageobject;
}

this.set_textarea = function(textareaobject) {

this.textarea = textareaobject;
this.display_text();
}

this.set_textid = function(textidstr) {


this.textid = textidstr;
this.display_text();
}
}

//-->
</SCRIPT>

<SCRIPT TYPE="text/javascript">
<!--

SLIDES = new slideshow("SLIDES");
SLIDES.timeout = 8000;
SLIDES.prefetch = -1;
SLIDES.repeat = true;

s = new slide();
s.src = "http://www.domain.com/Images2/SlideShows/SLIDESHOW_1.jpg";
s.text = unescape("");
s.link = "www.domain.com/product1.html";
s.target = "_self";
s.attr = "width:557,height:282";
s.filter = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "http://www.domain.com/Images2/SlideShows/SLIDESHOW_2.jpg";
s.text = unescape("");
s.link = "www.domain.com/product2.html";
s.target = "_self";
s.attr = "width:557,height:282";
s.filter = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "http://www.domain.com/Images2/SlideShows/SLIDESHOW_3.jpg";
s.text = unescape("");
s.link = "www.domain.com/product3.html";
s.target = "_self";
s.attr = "width:557,height:282";
s.filter = "";
SLIDES.add_slide(s);

s = new slide();
s.src = "http://www.domain.com/Images2/SlideShows/SLIDESHOW_4.jpg";
s.text = unescape("");
s.link = "www.domain.com/product4.html";
s.target = "_self";
s.attr = "width:557,height:282";
s.filter = "";
SLIDES.add_slide(s);



if (false) SLIDES.shuffle();

//-->
</SCRIPT>


<P>
<DIV ID="SLIDESTEXT">

<SCRIPT type="text/javascript">
<!--
nodivtext = SLIDES.get_all_text("<li>", "<p>\n");
if (nodivtext) {
document.write("<UL>\n" + nodivtext + "\n</UL>");
}
//-->
</SCRIPT>

</DIV>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1">
<tr>
<td>
<p align="right">
<a href="javascript:SLIDES.hotlink()">
<img name="SLIDESIMG"
src="SLIDESHOW_1.jpg" STYLE="filter:progid:DXImageTransform.Microsoft.Fade()" BORDER=0 alt="Slideshow image" width="557" height="282"></A>
<br>
<SCRIPT type="text/javascript">
<!--
if (document.images) {
SLIDES.image = document.images.SLIDESIMG;
SLIDES.textid = "SLIDESTEXT";
SLIDES.update();
SLIDES.play();
}
//-->
</SCRIPT>

<map name="FPMap0">
<area href="javascript:SLIDES.next()" shape="rect" coords="227, 1, 288, 23">
<area href="javascript:SLIDES.pause()" shape="rect" coords="160, 0, 214, 23">
<area href="javascript:SLIDES.play()" shape="rect" coords="102, 1, 149, 23">
<area href="javascript:SLIDES.previous()" shape="rect" coords="7, 2, 91, 23">
</map>
<img border="0" src="http://www.domain.com/Images2/SlideShows/CONTROL.gif" usemap="#FPMap0" width="289" height="24"></td>
</tr>
</table></td>
<td width="415" align="center" valign="bottom" height="57" colspan="3">
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/mostpopular.gif" width="357" height="35"></td>
</tr>
<tr>
<td width="33" align="left" valign="top" height="267">&nbsp;</td>
<td width="183" align="center" valign="top" height="267">&nbsp;</td>
<td width="199" align="center" valign="top" height="267">&nbsp;</td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="1" colspan="4"></td>
</tr>
<tr>
<td width="986" align="center" height="19" colspan="4" bordercolor="#808080" background="bar.gif">&nbsp;</td>
</tr>
<tr>
<td width="986" align="left" valign="bottom" height="32" colspan="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/spotlight.gif" width="144" height="28"></td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="6" colspan="4" background="littlebar.gif">&nbsp;</td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="130" colspan="4">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="100%">
<tr>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="21" colspan="4" background="bar.gif"></td>
</tr>
<tr>
<td width="571" align="left" valign="top" height="23">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/newarrivals.gif" width="117" height="22"></td>
<td width="33" align="left" valign="top" height="232" rowspan="3">&nbsp;</td>
<td width="382" align="left" valign="top" height="23" colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/featuredbrands.gif" width="148" height="21"></td>
</tr>
<tr>
<td width="571" align="left" valign="top" height="19" background="littlebar.gif">&nbsp;</td>
<td width="382" align="left" valign="top" height="13" colspan="2" background="littlebar.gif">&nbsp;</td>
</tr>
<tr>
<td width="571" align="left" valign="top" height="196">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3" height="100%">
<tr>
<td width="33%" align="center" valign="top">&nbsp;</td>
<td width="33%" align="center" valign="top">&nbsp;</td>
<td width="34%" align="center" valign="top">&nbsp;</td>
</tr>
</table>
</td>
<td width="382" align="center" valign="top" height="196" colspan="2">&nbsp;</td>
</tr>
</table>
HOWEVER, what I end up getting when I go back to check on the code is this:

Code: Select all

</SCRIPT>

<map name="FPMap0">
<area href="javascript:SLIDES.next()" shape="rect" coords="227, 1, 288, 23">
<area href="javascript:SLIDES.pause()" shape="rect" coords="160, 0, 214, 23">
<area href="javascript:SLIDES.play()" shape="rect" coords="102, 1, 149, 23">
<area href="javascript:SLIDES.previous()" shape="rect" coords="7, 2, 91, 23">
</map>
<img border="0" src="http://www.domain.com/Images2/SlideShows/CONTROL.gif" usemap="#FPMap0" width="289" height="24"></td>
</tr>
</table></td>
<td width="415" align="center" valign="bottom" height="57" colspan="3">
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/mostpopular.gif" width="357" height="35"></td>
</tr>
<tr>
<td width="33" align="left" valign="top" height="267">&nbsp;</td>
<td width="183" align="center" valign="top" height="267">&nbsp;</td>
<td width="199" align="center" valign="top" height="267">&nbsp;</td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="1" colspan="4"></td>
</tr>
<tr>
<td width="986" align="center" height="19" colspan="4" bordercolor="#808080" background="bar.gif">&nbsp;</td>
</tr>
<tr>
<td width="986" align="left" valign="bottom" height="32" colspan="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/spotlight.gif" width="144" height="28"></td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="6" colspan="4" background="littlebar.gif">&nbsp;</td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="130" colspan="4">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="100%">
<tr>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
<td width="20%" align="center" valign="top">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="986" align="left" valign="top" height="21" colspan="4" background="bar.gif"></td>
</tr>
<tr>
<td width="571" align="left" valign="top" height="23">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/newarrivals.gif" width="117" height="22"></td>
<td width="33" align="left" valign="top" height="232" rowspan="3">&nbsp;</td>
<td width="382" align="left" valign="top" height="23" colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="http://www.domain.com/Images2/CategoryTitles/featuredbrands.gif" width="148" height="21"></td>
</tr>
<tr>
<td width="571" align="left" valign="top" height="19" background="littlebar.gif">&nbsp;</td>
<td width="382" align="left" valign="top" height="13" colspan="2" background="littlebar.gif">&nbsp;</td>
</tr>
<tr>
<td width="571" align="left" valign="top" height="196">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3" height="100%">
<tr>
<td width="33%" align="center" valign="top">&nbsp;</td>
<td width="33%" align="center" valign="top">&nbsp;</td>
<td width="34%" align="center" valign="top">&nbsp;</td>
</tr>
</table>
</td>
<td width="382" align="center" valign="top" height="196" colspan="2">&nbsp;</td>
</tr>
</table>
Does anyone know why the top portion of the original code keeps getting cut off? What can I do to fix it?

Post Reply