Click here to Skip to main content
15,921,841 members
Home / Discussions / JavaScript
   

JavaScript

 
GeneralRe: clearInterval Not working on IE Pin
greendragons4-Sep-10 23:56
greendragons4-Sep-10 23:56 
Questiononmouseorver for child element Pin
greendragons3-Sep-10 2:13
greendragons3-Sep-10 2:13 
AnswerRe: onmouseorver for child element Pin
NeverHeardOfMe5-Sep-10 4:08
NeverHeardOfMe5-Sep-10 4:08 
QuestionHow to unblock the pop-under window using javascript? Pin
jasimmd2-Sep-10 4:46
jasimmd2-Sep-10 4:46 
AnswerRe: How to unblock the pop-under window using javascript? Pin
User 17164922-Sep-10 4:54
professionalUser 17164922-Sep-10 4:54 
AnswerRe: How to unblock the pop-under window using javascript? Pin
J4amieC2-Sep-10 4:54
J4amieC2-Sep-10 4:54 
QuestionScrolling of images.. Pin
swornavidhya_m1-Sep-10 3:31
swornavidhya_m1-Sep-10 3:31 
QuestionHow to give - space between scrolling images and border for the images Pin
swornavidhya_m31-Aug-10 23:46
swornavidhya_m31-Aug-10 23:46 
Hai

I am trying scrolling of images as like (http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm). I do want to set border for the images with border property as "2px solid #000" and i do want gap between the images so that the horizontal gap value is 20px.
I tried even with image border propoerty and image style properties both border and padding as 0 20px. Both not working properly. The style padding property is working fine in firefox and google chrome. But it is working in IE 6.0

I'll paste my code for your reference.
********************************************************************************
                                 HTML CODE IS
********************************************************************************
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript" src="crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
</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': '150px',
		'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://i40.tinypic.com/9tlic8.jpg" style="padding:0 20px;" onclick="javascript:alert('9tlic8.jpg')";/> 
 <img src="http://i43.tinypic.com/1zbqs5t.jpg" style="padding:0 20px;" onclick="javascript:alert('1zbqs5t.jpg')"/> 
 <img src="http://i44.tinypic.com/2419ul3.jpg" style="padding:0 20px;" onclick="javascript:alert('2419ul3.jpg')"/> 
 <img src="http://i43.tinypic.com/296nh3r.jpg" style="padding:0 20px;" onclick="javascript:alert('296nh3r.jpg')"/> 
 <img src="http://i40.tinypic.com/mk7ki.jpg" style="padding:0 20px;" onclick="javascript:alert('mk7ki.jpg')"/>  
</div>

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '2px',
		'width': '700px',
		'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)
	direction: 'right', // ('right' or 'left') Direction of marquee. (defaults to 'left' - easiest for reading text marquees)
	noAddedSpace: false, // (true or false) Should marquee not have an added space at the beginning to ensure that the first and last elements or sentences do not butt up against each other? (defaults to false (a space will be added) - optimal for text marquees and for image marquees with spaces between the images)
	stopped: false, // (true or false) Should marquee start out in stopped mode?, then set 'true'. Useful for some 'cursor driven' marquees. (defaults to false).
//	The 3 parameters below are applicable only in mouse: 'cursor driven' marquees
	moveatleast: 4, // Minimum speed for 'cursor driven' marquee when mouse is off of it. If not specified and this is a 'cursor driven' marquee, the marquee will stop when moused out. (defaults to no motion onmouseout)
	neutral: 150, // Size of neutral area for 'cursor driven' marquee. This is size of the area in the center of the marquee where hovering it will stop it. (defaults to 16)
	savedirection: 'true' // (true, false, or 'reverse') Directional behaviour of 'cursor driven' marquee that has a moveatleast property when moused out. Will it remember it's initial direction (true), continue it's current direction (false), or will it reverse ('reverse') its current direction? (defaults to false)
});
</script>
</body>

</html>


********************************************************************************
                                 Javascript CODE IS(crawler.js)
********************************************************************************

/* Text and/or Image Crawler Script ©2009 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */

///////////////// DO NOT EDIT /////////////////

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 = [new RegExp('^\\s*$'), new RegExp('^\\s*'), new RegExp('\\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 = new RegExp('(-(.))');
  String.prototype.encamel = function(s, m){
   s = this;
   while((m = s.match(dash)))
    s = s.replace(m[1], m[2].toUpperCase());
   return s;
  };
 }
 @end @*/

 if(!ie5){
  dash = new RegExp('-(.)', '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 Marq(c, tag){
  var p, u, s, a, ims, ic, i, marqContent, cObj = this;
  this.mq = marqueeInit.ar[c];
  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';
    ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
    if(typeof ims[i].complete == 'boolean' && ims[i].complete)
     ic++;
    else {
     ims[i].onload = function(){
       if(++ic == ims.length)
        cObj.setup();
      };
    }
     if(ic == ims.length)
      this.setup();
   }
  }
   else this.setup()
 }

  Marq.prototype.setup = function(){
  if(this.mq.setup) return;
  this.mq.setup = this;
  var s, cObj = this;
  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)
   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, 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)
     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);

})();


***************************************************************************
                                 END  OF  CODING  PART
***************************************************************************




Kindly help me.

M.Sworna Vidhya
QuestionDetect Java Installed in machine Pin
ShafiqA30-Aug-10 0:04
ShafiqA30-Aug-10 0:04 
AnswerRe: Detect Java Installed in machine [modified] Pin
daveyerwin30-Aug-10 2:30
daveyerwin30-Aug-10 2:30 
Questionchanging input value atrribute Pin
Sonar8729-Aug-10 11:05
Sonar8729-Aug-10 11:05 
AnswerRe: changing input value atrribute Pin
daveyerwin29-Aug-10 13:11
daveyerwin29-Aug-10 13:11 
GeneralRe: changing input value atrribute Pin
Sonar8729-Aug-10 21:08
Sonar8729-Aug-10 21:08 
GeneralRe: changing input value atrribute Pin
PoojaBorhade30-Aug-10 0:25
PoojaBorhade30-Aug-10 0:25 
GeneralRe: changing input value atrribute Pin
Sonar8730-Aug-10 9:33
Sonar8730-Aug-10 9:33 
QuestionLogin Page with out Menu bar Pin
vishnukamath26-Aug-10 21:09
vishnukamath26-Aug-10 21:09 
AnswerRe: Login Page with out Menu bar Pin
daveyerwin27-Aug-10 2:47
daveyerwin27-Aug-10 2:47 
GeneralRe: Login Page with out Menu bar Pin
vishnukamath27-Aug-10 2:52
vishnukamath27-Aug-10 2:52 
GeneralRe: Login Page with out Menu bar Pin
RahulPuneet27-Aug-10 15:16
RahulPuneet27-Aug-10 15:16 
GeneralRe: Login Page with out Menu bar Pin
vishnukamath27-Aug-10 18:35
vishnukamath27-Aug-10 18:35 
Questionwhat happens when we disable Javascript from the client browser Pin
Amit Spadez22-Aug-10 23:28
professionalAmit Spadez22-Aug-10 23:28 
AnswerRe: what happens when we disable Javascript from the client browser Pin
WoutL23-Aug-10 0:48
WoutL23-Aug-10 0:48 
GeneralRe: what happens when we disable Javascript from the client browser Pin
Amit Spadez23-Aug-10 0:52
professionalAmit Spadez23-Aug-10 0:52 
GeneralRe: what happens when we disable Javascript from the client browser Pin
WoutL23-Aug-10 1:00
WoutL23-Aug-10 1:00 
GeneralRe: what happens when we disable Javascript from the client browser Pin
RahulPuneet27-Aug-10 15:13
RahulPuneet27-Aug-10 15:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.