PDA

Click to See Complete Forum and Search --> : Abercrombie item scroll that's baffled everyone i've asked

jerryike
05-22-2008, 11:23 AM
I'm trying to get the items on my site to be viewed in the same manner that abercrombie has theirs... (http://www.abercrombie.com/webapp/wcs/stores/servlet/category1_10051_10901_12215_-1_12202)
yet i havent found it. Does anyone know how to do this, or at least what it's called so i can continue my neverending search?

Thank you very very much for any advice.
WebJoel
05-22-2008, 11:29 AM
<script type="text/javascript" src="/anf/js/scroller.js"></script>
<script type="text/javascript">
fixClip();
scrollMe();
if(! noScroll){
document.getElementById('deptScroller').style.display = 'block';
}

function displayDept(count){
contentWidth = ((count * 290) + 95);
var tds = document.getElementById('deptImgs').getElementsByTagName('td');
var tables = document.getElementById('deptImgs').getElementsByTagName('table');
for(i=0; i < tables.length; i++){
if(division != 12204 && division != 12205 && division != 12105 && division != 12104){
addEvent(tables[i], 'mouseover', getDeptMOver(tables[i].getElementsByTagName('span')[0]));
addEvent(tables[i], 'mouseout', getDeptMOut(tables[i].getElementsByTagName('span')[0]));
}else{
(tables[i].getElementsByTagName('span')[0]).style.visibility = 'visible';
}
}
}
</script> It's a javascript scroller.

http://www.abercrombie.ca/anf/js/scroller.js

If you turn-off javascript (or do not have it in the first place), you get this big, honkin' hole in the center of your page that is not displayed...

This whole effect could be created using HTML and CSS (but again, one might choose for whatever reason to turn-off CSS, but that is less likely than someone turning off javascript/not having *js)
jerryike
06-06-2008, 09:01 AM
i tried to use this,but for some reason it isnt working on my site. any reason on why it isnt?






______________________________________________________________________________-
<!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"><!-- InstanceBegin template="/Templates/main TV template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style1 {color: #0D0D0D}
-->
</style>
<!-- InstanceEndEditable -->
</head>

<body bgcolor="#000000">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->

<tr>
<td width="100%" height="46" valign="top" bgcolor="0000000000"><div align="center"><img src="images/top%20front%20crop.gif" width="1152" height="105" /></div></td>
</tr>
<tr>
<td height="157" valign="top" bgcolor="#0D0D0D"><div align="center"><!-- InstanceBeginEditable name="EditRegion1" --><script type="text/javascript" src="/anf/js/scroller.js"></script>
<script type="text/javascript">
fixClip();
scrollMe();
if(! noScroll){
document.getElementById('deptScroller').style.display = 'block';
}

function displayDept(count){
contentWidth = ((count * 290) + 95);
var tds = document.getElementById('deptImgs').getElementsByTagName('td');
var tables = document.getElementById('deptImgs').getElementsByTagName('table');
for(i=0; i < tables.length; i++){
if(division != 12204 && division != 12205 && division != 12105 && division != 12104){
addEvent(tables[i], 'mouseover', getDeptMOver(tables[i].getElementsByTagName('span')[0]));
addEvent(tables[i], 'mouseout', getDeptMOut(tables[i].getElementsByTagName('span')[0]));
}else{
(tables[i].getElementsByTagName('span')[0]).style.visibility = 'visible';
}
}
}
</script>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssshg rhgkshkghkhgkhjdhlshjgfhsgkhklghskjhglfshgjhkhgskjhlgkfhsdghskjhgshlghfsljhgflkshkkghskhgkshlkghfklh ghkdshllshkghskjhfkjghsklgsdsssssssssssssssssssss<!-- InstanceEndEditable --></div></td>
</tr>
<tr>

<td height="14" valign="top"><div align="center"><img src="images/bottom%20crop.gif" width="611" height="82" border="0" usemap="#Map2" /></div></td>
</tr>
</table>


<map name="Map2" id="Map2"><area shape="rect" coords="167,3,223,27" href="aboutusexp.html" />
<area shape="rect" coords="249,6,287,28" href="props.html" />
<area shape="rect" coords="317,4,380,27" href="#" /><area shape="rect" coords="406,5,501,28" href="#" /><area shape="rect" coords="527,5,606,27" href="#" /></map></body>
<!-- InstanceEnd --></html>
WebJoel
06-06-2008, 12:32 PM
i tried to use this,but for some reason it isnt working on my site. any reason on why it isnt?/QUOTE]

You also need this part, referanced in ambercrombie as an external *js file:

http://www.abercrombie.ca/anf/js/scroller.js

I respond again because the author of this script DOES allow this public use, so long as the credits in the top of the *js file remain intact. :)
jerryike
06-11-2008, 02:55 PM
and i can just plug that script anywhere within the coding and it'll work?
WebJoel
06-11-2008, 05:50 PM
If you're not comfortable 'borrowing' someone else's 'borrowed' open-source code and playing around to make it work, you could try sites that have pre-canned scripts ready to use and with instructions. Something like "dynamicdrive.com" in 'document effects' perhaps.
I know that I have seen this 'scroller' used elsewhere, and have seen it for free-use with instructions for use. :) I think that I have even seen a JAVA version (which I thought was easier to use)