|
JavaScript - Image Scroller Stops At The End?!
Is there a way to bounce my image scroller back to the left using object.watch() or something?!
at the moment, it reaches the end and stops here is my code from www.dyn-web.com Code: /*************************************************************************
This code is from Dynamic Web Coding at www.dyn-web.com
Copyright 2001-4 by Sharon Paine
See Terms of Use at www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
/* dw_hoverscroll.js version date: June 2004
mouseover scrolling for dw_scrollObj (in dw_scrollObj.js) */
dw_scrollObj.stopScroll = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].endScroll();
}
// increase speed onmousedown of scroll links
dw_scrollObj.doubleSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed *= 2;
}
dw_scrollObj.resetSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed /= 2;
}
// algorithms for time-based scrolling and scrolling onmouseover at any angle adapted from youngpup.net
dw_scrollObj.initScroll = function(wnId, deg, sp) {
if ( dw_scrollObjs[wnId] ) {
var cosine, sine;
if (typeof deg == "string") {
switch (deg) {
case "up" : deg = 90; break;
case "down" : deg = 270; break;
case "left" : deg = 180; break;
case "right" : deg = 0; break;
default:
alert("Direction of scroll in mouseover scroll links should be 'up', 'down', 'left', 'right' or number: 0 to 360.");
}
}
deg = deg % 360;
if (deg % 90 == 0) {
cosine = (deg == 0)? -1: (deg == 180)? 1: 0;
sine = (deg == 90)? 1: (deg == 270)? -1: 0;
} else {
var angle = deg * Math.PI/180;
cosine = -Math.cos(angle); sine = Math.sin(angle);
}
dw_scrollObjs[wnId].fx = cosine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].fy = sine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].endX = (deg == 90 || deg == 270)? dw_scrollObjs[wnId].x:
(deg < 90 || deg > 270)? -dw_scrollObjs[wnId].maxX: 0;
dw_scrollObjs[wnId].endY = (deg == 0 || deg == 180)? dw_scrollObjs[wnId].y:
(deg < 180)? 0: -dw_scrollObjs[wnId].maxY;
dw_scrollObjs[wnId].startScroll(sp);
}
}
// speed (optional) to override default speed (set in dw_scrollObj.speed)
dw_scrollObj.prototype.startScroll = function(speed) {
if (!this.ready) return; if (this.timerId) clearInterval(this.timerId);
this.speed = speed || dw_scrollObj.speed;
this.lyr = document.getElementById(this.lyrId);
this.lastTime = ( new Date() ).getTime();
this.on_scroll_start();
this.timerId = setInterval(this.animString + ".scroll()", 10);
}
dw_scrollObj.prototype.scroll = function() {
var now = ( new Date() ).getTime();
var d = (now - this.lastTime)/1000 * this.speed;
if (d > 0) {
var x = this.x + this.fx * d; var y = this.y + this.fy * d;
if (this.fx == 0 || this.fy == 0) { // for horizontal or vertical scrolling
if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) ||
( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.shiftTo(this.lyr, this.endX, this.endY);
this.on_scroll_end(this.endX, this.endY);
}
} else { // for scrolling at an angle (stop when reach end on one axis)
if ( ( this.fx < 0 && x >= -this.maxX && this.fy < 0 && y >= -this.maxY ) ||
( this.fx > 0 && x <= 0 && this.fy > 0 && y <= 0 ) ||
( this.fx < 0 && x >= -this.maxX && this.fy > 0 && y <= 0 ) ||
( this.fx > 0 && x <= 0 && this.fy < 0 && y >= -this.maxY ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.on_scroll_end(this.x, this.y);
}
}
}
}
dw_scrollObj.prototype.endScroll = function() {
if (!this.ready) return;
if (this.timerId) clearInterval(this.timerId);
this.timerId = 0; this.lyr = null;
}
dw_scrollObj.prototype.on_scroll = function() {}
dw_scrollObj.prototype.on_scroll_start = function() {}
dw_scrollObj.prototype.on_scroll_end = function() {}
Similar TutorialsHi, can someone please help me out with this? I've tried it a few time but couldn't get the image scroller into the infoWindow! I want to sort of MERGE this code Code: <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
#container { text-align: center; }
#imageBox{ margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
#imageBoxInside { width: 10000px; } #imageBox img { float: left; padding: 0px; margin: 0px; }
#imageBox br { clear: both; }
#controls img { border: 0; }
</style>
<script>
function moveToPrevious(){
new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
}
function moveToNext(){
new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
}
</script>
</head>
<body>
<div id="container">
<div id="imageBox">
<div id="imageBoxInside">
<img src="C:/Users/L33508/Desktop/Images/sauce.jpg" />
<img src="C:/Users/L33508/Desktop/Images/fish.jpg" />
<img src="C:/Users/L33508/Desktop/Images/pizza.jpg" />
<img src="C:/Users/L33508/Desktop/Images/noodles.jpg" />
<img src="C:/Users/L33508/Desktop/Images/cover.jpg" />
<img src="C:/Users/L33508/Desktop/Images/hotdog.jpg" />
<br/>
</div>
</div>
<div id="controls">
<a href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="C:/Users/L33508/Pictures/left_arrow.jpg"/></a>
<a href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="C:/Users/L33508/Pictures/right_arrow.jpg"/></a>
</div>
<div>
</body>
</html>
into this one shown he Code: <%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="PeranakanMain.aspx.vb" Inherits="Peranakan_SG.PeranakanMain"
title="" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function addSymbol(){
var map=OneMap.map;
if(map.getLayer("symbolLayer")==null){
map.addLayer(gLayer);
//dojo.connect(omap.map.infoWindow, "onShow", setInfoContent);
map.infoWindow.resize(525,252);
map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
}
gLayer.clear();
alert("Do you know where Peranakan food can be found?? Take a look here!!!!");
var stX = "23319.3347409758";
var stY = "28825.7191286444";
var pt= new esri.geometry.Point(stX,stY,map.spatialReference);
//var strImage = "http://www.rw-designer.com/i/download48b.png";
var strImage = "images/museum.png";
var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"};
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("Building Name:");
infoTemplate.setContent(getInfoContent);
var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate);
gLayer.add(graphic);
}
function setInfoContent(){
infoWindow.setContent(getInfoContent());
}
function getInfoContent(graphic){
var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"});
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 20px width: 100%",
content: "hello Peranakan!! Here is a brief description"
});
bc.addChild(c1);
//make a tab container
var tc = new dijit.layout.TabContainer({
region: "center",
style: "height: 65%; width: 100%; "
}, dojo.create("div"));
//display attribute information
var cp1 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1900 - 1930</font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table>"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "<font color= #E4287C><b>1931 - 1960</b></font>",
content: "<table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table>"
});
tc.addChild(cp2);
var cp3 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1961 - 1990</b></font> ",
content: "<table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp3);
var cp4 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1990 - 2011</b></font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table><br/><table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table><br/><table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp4);
bc.addChild(tc);
return bc.domNode;
}
dojo.addOnLoad(addSymbol);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavigationContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 955px; height: 490px; margin: 0 0 0 0px;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" position=""
style="height: 498px; width: 1004px; margin-left: 63px;" ></div>
</div>
</div>
</asp:Content>
I'm still new & learning, any kind souls willing to help me out? P.S. When I insert the 2 script sources from the first sample into the second, my icon on the map disappears! Any idea why too? I want these images to center align when they have focus (clicked, enlarge), can't figure out how to move them over from the right. js file attached. Some .css may come into play here also, but I think this animation issue is all .js. http://backstageweb.net/MovingBoxes/ Thanks, John I've got a code. I've listed it below. The only question I have which I am sure I'm just overlooking it, but I need to find a way to squeeze this to the top of the screen and to the left. Where can I modify this on this code? The first section is the whole file. Thanks! Edit: I'm trying to remove the awkward gap on top and to the left. I merged the .js file since this will only be a file that is updated with new news. Code: <html>
<head>
<script type="text/javascript">
/* 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)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
///////////////// No Need to Edit - Configuration is Done in the On Page Call(s) /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = /-(.)/g;
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag){
var els = oldie? tag.all : tag.getElementsByTagName('*'), i = els.length - 1, childels = [], newels = [];
for (i; i > -1; --i){
if(els[i].parentNode === tag){
childels.push(els[i]);
newels.push(els[i].cloneNode(true));
}
}
newels.sort(function(){return 0.5 - Math.random();});
i = childels.length - 1;
for (i; i > -1; --i){
tag.replaceChild(newels[i], childels[i]);
}
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if(this.mq.random){
randthem(tag);
}
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse === 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
if(!ims[i].alt && !this.mq.noAddedAlt){
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if(!ims[i].title){ims[i].title = '';}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function(){
if(++ic === ims.length)
cObj.setup(c);
};
}
if(ic === ims.length)
this.setup(c);
}
}
else this.setup(c)
}
Marq.prototype.setup = function(c){
if(this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this, exit = 10000;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse === 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection === 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s && --exit){
w = isNaN(this.cw[0])? this.w - s : --this.cw[0];
if(w < 1 || this.w < Math.max(1, s)){break;}
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction === 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX === 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c === this.c) return true;
while ((c = c.parentNode)) if(c === this.c) return true;}
return false;
}
function resize(){
for(var s, w, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s){
w = isNaN(m.cw[0])? m.w - s : --m.cw[0];
if(w < 1){break;}
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();
/* 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>
</head>
<body>
<font color="white" face="arial" size="2" background="#0066CC">
<div class="marquee" id="mycrawler" align="left">
2/21/12 Today is testing the marquee. This will be used for announcements. Stay tuned!!!                        
</div></font>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '1px',
'width': '1000px', //change to 1000 for normal, change to 0 for off
'background': '#0066CC',
'border': '0px solid black'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
</script>
</body>
</html>
Hi I have a javascript scroller on my site which was added automatically by the web design progam Web Page Maker. It works well..... but..... does anybody know how to make the scrolling faster on mousedown. Its painfully slow at the moment. I dont know ANYTHING about javascripting really. heres the code: <div id="g_iFrame1div" style="position:absolute; left:68px; top:273px; z-index:29"> <table border="0" cellpadding="0" cellspacing="0" width=628> <tr><td> <iframe src="iframes/news_latest.htm" name="g_iFrame1" width="606" height="487" src="" scrolling="no" frameborder="0"></iframe> </td><td align="center" valign="middle" width="22"><img src="arrow_up.gif" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(-3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(-1,20)" onMouseOver="bsh_g_iFrame1(-1,20)" onMouseOut="esh_g_iFrame1()"><br> <img src="arrow_down.gif" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(1,20)" onMouseOver="bsh_g_iFrame1(1,20)" onMouseOut="esh_g_iFrame1()"> <script type="text/javascript" language="javascript"> function bsh_g_iFrame1(step,time){hs_g_iFrame1=setInterval("sh_g_iFrame1("+step+")",time)} function esh_g_iFrame1(){clearInterval(hs_g_iFrame1)} function sh_g_iFrame1(step) { scrollx=g_iFrame1.document.body.scrollLeft scrolly=g_iFrame1.document.body.scrollTop scrolly=scrolly+step g_iFrame1.window.scroll(scrollx,scrolly) } </script> thanks Stuey I am using a Theme Tester on my site so normal users can not see the changes being made. If you can help me, please send me a PM & I will give you a temporary login so you can login & see the new site, and the issue I am having. Basically, I am trying to get this http://flowplayer.org/tools/demos/sc.../navigator.htm scroller to work, but it is not happening at all. Not sure what is going on. Please advise. Thanks! Hello, i'm trying to post news on my site. so i was able to reached this http://www.shmtestforums.uphero.com/...ller/test.html but i couldn't get, exactly what i want. i really want is when load the page it should shows only 3 rows then after few seconds(say 2 seconds), the 1st row should disappear and bellow 3 rows should come up (eg. when google_1 row is disappear, google_2 & google_3 & google_4 rows should come up) this rotation should be continuous i tried this many. but no positive result. so please.... please....help me to solve this. this is the problematic java script, Code: <script type="text/javascript">
var scrollspeed=cache=1
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
thank you . Hi All, I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll. Would someone be willing to take a quick look and see if they can spot anything? None of this code has been altered! Code: <script type="text/javascript">
$(document).ready(function(){
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible:10,
auto:500,
speed:1000
});
});
</script>
This is the HTML and PHP part: Code: <div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&src=employers/logo/big/<?=$aqm[image]?>&maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>
Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.
Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
I need to make a very simple text scroller (either vertical or horizontal) using JavaScript. Can anyone point me in the right direction? Thank you I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks Does anyone have a scroller that goes side to side, to display links for a website? I have a similar thing that goes up and down: www.sjwum.org This one will not adapt to side to side. So who knows of a scroller that moves horizontally and when you click on something it is a link to another page on the website? Thanks Would anyone know why (and the fix) when I place my cursor over the scrolling thumbnails under the main slideshow rotator on my site they "disappear"? http://americanwebmakers.com/demo_college Thanks in advance! Please see URL: http://caspca.org/indexticker.htm The ticker below the navbar works fine in FF and Safari, does not work in IE8 (and mostly likely other IE version as well). In IE, the live page will not even load; will load locally but the ticker doesn't work (remains static). Here is the .js: Code: TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 1;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
ticker_start();
function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";
// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="block";
TICKER_tick();
}
}
function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
Any help to fix is greatly appreciated. Thank you. John Hello, I would like to take current page (which has virtualpaginate numbers below the images to advance through them) and instead of having numbers, to have thumbnails which will be across the bottom of the page (in the footer div)... I will have about 35-40 thumbnails and I'd like it so that the thumbnails correspond to the image that is displayed. I also would like to have the thumbnails be a "slider" type of script which allows the user to browse through the thumbnails by moving their mouse left-and-right The image in the center DIV (and its accompanying information) should be replaced OnClick, not on hover over the thumbnails. I haven't been able to find an example of this, but I was wondering if someone could point me in the correct direction to achieve this. Here is my current code: Code: <!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>Viviana Santamarina</title>
<style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; }
p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
h5 { color: white; font-family: arial; font-size: 16px;}
h6 { color: white; font-family: arial; font-size: 12px; margin-top: 0px;}
a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
#container { width: 1000px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; }
#container #col1 { background: #000; height: 600px; width: 250px; float: left; }
#container #col2outer { width: 750px; float: right; margin: 0; padding: 0; }
#col2outer #col2mid { background: #000; height: 600px; width: 500px; float: left; }
#col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; }
#col2outer #portfolio { background: #000; height: 450px; width: auto; float: center; }
#col2outer #pages { background: #000; height: 50px; width: 250px; float: bottom; margin: 20px; }
#container #footer { float: left; width: 870px; }
</style>
<link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/virtualpaginate.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!-- is the accordian another script file that's missing from this list? -->
<!-- do the lightbox and accordian scripts need to be loaded in a certain order? -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox(); // Select all links in object with gallery ID
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
</head>
<body>
<div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1>
<div id="col1" align="center">
<div id="accordion">
<h2><strong>ABOUT MY WORK </strong></h2>
<div class="pane" style="display:block" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>RECENT AWARDS</strong></h2>
<div class="pane" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>PREVIOUS EXHIBITIONS</strong></h2>
<div class="pane" align="center">
<p>
Gertrude Herbert
"A Sense of Place 2010"
Augusta, GA
September 17th - November 5th, 2010
http://www.ghia.org/
</p>
</div>
<h2><strong>CONTACT INFORMATION</strong></h2>
<div class="pane" align="center">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
</div>
</div>
<div id="col2outer">
<div id="col2mid" align="center"> <p>PORTFOLIO</p>
<div id="portfolio">
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/EVA.jpg" title="Sitting Nude, 2010"><img src="images/work/EVA.jpg" class="img" border="0" /></a>
<h5>"Sitting Nude" 2010 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 24" x 22" x 32"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Corset.jpg" title="Corset, 2009"><img src="images/work/Corset.jpg" class="img" border="0"/></a>
<h5>"Corset" 2009 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 30" x 20" x 3"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Browsing2.jpg" title="Browsing 2, 2010"> <img src="images/work/Browsing2.jpg" class="img" border="0"/></a>
<h5>"Browsing 2" 2010 <p></h5>
<h6>Medium: paper crochet, book<br>
Dimensions: 8" x 11" x 10"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/ShapingTheVoid.jpg" title="Shaping The Void, 2010"><img src="images/work/ShapingTheVoid.jpg" class="img" border="0"/></a>
<h5>"Shaping The Void" 2009 <p></h5>
<h6>Medium: paper crochet, pencils<br>
Dimensions: 22" x 14" x 14"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<a href="images/work/TandemRowingl.jpg" rel="lightbox"><img src="images/work/TandemRowing.jpg"></a>
</div>
</div>
<!-- Pagination DIV -->
<div id="pages">
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous"><<</a>   <span class="flatview"></span>  <a href="#" rel="next" class="imglinks">>></a>
</div>
</div>
<!-- Initialize -->
<script type="text/javascript">
var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
persist: false //Remember last viewed page and recall it when user returns within a browser session?
})
gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
</script>
</div>
<div id="col2side" align="center"> <p>UPCOMING SHOWS</p>
<h6 align="left">
Cherry Creek Art Festival<br>
Denver, CO<br>
July 2nd - 4th, 2011<br>
<a href="http://www.cherryarts.org" rel="nofollow" target="_blank">http://www.cherryarts.org/</a><br><br>
</h6>
</div>
</div>
<div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div>
</body>
</html>
I'd appreciate any thoughts on how I can have the thumbnails in the footer DIV change the picture in the "portfolio" div just like my virtualpaginate numbers currently do. Thank you in advance!! Hi Everyone, I am unable to find a JavaScript picture viewer that does what I would like it to do. I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail. Can anyone point me in a direction please? Anita, Cape Town. I have a basic scroller list code, which works when I use it on a HTML page. However if I duplicate it and change the text, only one of the lists functions. I even tried to use a script from a free website online and duplicate that on the page and it still does not work twice. Could somebody help with this? Hi all, I was following this tutorial for a jquery based scroller but I am having some problems: http://www.webdesignbooth.com/create...carousel-lite/ When it loads the block starts out as I want it then suddenly squeezes down and chops the text? The area in question is 'Featured Employers' http://www.beta.educationvacancies.com/index.php Can anyone advise? many thanks, greens85 i want to adjust text size according to a page without scrollers. e.g the page should be shown that its scrollers are off and the text on the page spread from top to bottom.
|
|||||||