943,169 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > How to give - space between scrolling images and border for the images
Ad:
Permalink
Sep 1st, 2010
0

How to give - space between scrolling images and border for the images

Expand Post »
Hai

I am trying scrolling of images as like (http://www.dynamicdrive.com/dynamici...wler/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
********************************************************************************

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2.  
  3. <head>
  4. <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
  5. <meta name="ProgId" content="FrontPage.Editor.Document">
  6. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  7. <title>New Page 1</title>
  8. <script type="text/javascript" src="crawler.js">
  9. /*
  10. Text and/or Image Crawler Script ©2009 John Davenport Scheuer
  11. as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
  12. This Notice Must Remain for Legal Use
  13. */
  14. </script>
  15. </head>
  16.  
  17. <body>
  18. <div class="marquee" id="mycrawler">
  19. 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.
  20. </div>
  21.  
  22. <script type="text/javascript">
  23. marqueeInit({
  24. 	uniqueid: 'mycrawler',
  25. 	style: {
  26. 		'padding': '5px',
  27. 		'width': '150px',
  28. 		'background': 'lightyellow',
  29. 		'border': '1px solid #CC3300'
  30. 	},
  31. 	inc: 8, //speed - pixel increment for each iteration of this marquee's movement
  32. 	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
  33. 	moveatleast: 4,
  34. 	neutral: 150,
  35. 	savedirection: true
  36. });
  37. </script>
  38.  
  39. <div class="marquee" id="mycrawler2">
  40.  <img src="http://i40.tinypic.com/9tlic8.jpg" style="padding:0 20px;" onclick="javascript:alert('9tlic8.jpg')";/> 
  41.  <img src="http://i43.tinypic.com/1zbqs5t.jpg" style="padding:0 20px;" onclick="javascript:alert('1zbqs5t.jpg')"/> 
  42.  <img src="http://i44.tinypic.com/2419ul3.jpg" style="padding:0 20px;" onclick="javascript:alert('2419ul3.jpg')"/> 
  43.  <img src="http://i43.tinypic.com/296nh3r.jpg" style="padding:0 20px;" onclick="javascript:alert('296nh3r.jpg')"/> 
  44.  <img src="http://i40.tinypic.com/mk7ki.jpg" style="padding:0 20px;" onclick="javascript:alert('mk7ki.jpg')"/>  
  45. </div>
  46.  
  47. <script type="text/javascript">
  48. marqueeInit({
  49. 	uniqueid: 'mycrawler2',
  50. 	style: {
  51. 		'padding': '2px',
  52. 		'width': '700px',
  53. 		'height': '180px'
  54. 	},
  55. 	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
  56. 	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
  57. 	direction: 'right', // ('right' or 'left') Direction of marquee. (defaults to 'left' - easiest for reading text marquees)
  58. 	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)
  59. 	stopped: false, // (true or false) Should marquee start out in stopped mode?, then set 'true'. Useful for some 'cursor driven' marquees. (defaults to false).
  60. //	The 3 parameters below are applicable only in mouse: 'cursor driven' marquees
  61. 	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)
  62. 	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)
  63. 	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)
  64. });
  65. </script>
  66. </body>
  67.  
  68. </html>

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /* Text and/or Image Crawler Script ©2009 John Davenport Scheuer
  2.    as first seen in http://www.dynamicdrive.com/forums/
  3.    username: jscheuer1 - This Notice Must Remain for Legal Use
  4.    */
  5.  
  6. ///////////////// DO NOT EDIT /////////////////
  7.  
  8. function marqueeInit(config){
  9.  if(!document.createElement) return;
  10.  marqueeInit.ar.push(config);
  11.  marqueeInit.run(config.uniqueid);
  12. }
  13.  
  14. (function(){
  15.  
  16.  if(!document.createElement) return;
  17.  
  18.  marqueeInit.ar = [];
  19.  
  20.  document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
  21.  '#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
  22.  var c = 0, tTRE = [new RegExp('^\\s*$'), new RegExp('^\\s*'), new RegExp('\\s*$')],
  23.  req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
  24.   style: { //default style object for marquee containers without configured style
  25. 	'margin': '0 auto'
  26.   },
  27.   direction: 'left',
  28.   inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
  29.   mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
  30.  }, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
  31.  
  32.  /*@cc_on @*/
  33.  /*@if(@_jscript_version >= 5)
  34.  ie = true;
  35.  try{document.documentMode = 2000}catch(e){};
  36.  iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
  37.  if(iever < 6)
  38.   oldie = 1;
  39.  if(iever < 5.5){
  40.   Array.prototype.push = function(el){this[this.length] = el;};
  41.   ie5 = true;
  42.   dash = new RegExp('(-(.))');
  43.   String.prototype.encamel = function(s, m){
  44.    s = this;
  45.    while((m = s.match(dash)))
  46.     s = s.replace(m[1], m[2].toUpperCase());
  47.    return s;
  48.   };
  49.  }
  50.  @end @*/
  51.  
  52.  if(!ie5){
  53.   dash = new RegExp('-(.)', 'g');
  54.   function toHump(a, b){return b.toUpperCase();};
  55.   String.prototype.encamel = function(){return this.replace(dash, toHump);};
  56.  }
  57.  
  58.  if(ie && iever < 8){
  59.   marqueeInit.table = [];
  60.   window.attachEvent('onload', function(){
  61.    marqueeInit.OK = true;
  62.    for(var i = 0; i < marqueeInit.table.length; ++i)
  63.    marqueeInit.run(marqueeInit.table[i]);
  64.   });
  65.  }
  66.  
  67.  function intable(el){
  68.   while((el = el.parentNode))
  69.    if(el.tagName && el.tagName.toLowerCase() === 'table')
  70.     return true;
  71.    return false;
  72.  };
  73.  
  74.  marqueeInit.run = function(id){
  75.    if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
  76.     marqueeInit.table.push(id);
  77.     return;
  78.    }
  79.    if(!document.getElementById(id))
  80.     setTimeout(function(){marqueeInit.run(id);}, 300);
  81.    else
  82.     new Marq(c++, document.getElementById(id));
  83.  }
  84.  
  85.  function trimTags(tag){
  86.   var r = [], i = 0, e;
  87.   while((e = tag.firstChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
  88.    tag.removeChild(e);
  89.   while((e = tag.lastChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
  90.    tag.removeChild(e);
  91.   if((e = tag.firstChild) && e.nodeType == 3)
  92.    e.nodeValue = e.nodeValue.replace(tTRE[1], '');
  93.   if((e = tag.lastChild) && e.nodeType == 3)
  94.    e.nodeValue = e.nodeValue.replace(tTRE[2], '');
  95.   while((e = tag.firstChild))
  96.    r[i++] = tag.removeChild(e);
  97.   return r;
  98.  }
  99.  
  100.  function Marq(c, tag){
  101.   var p, u, s, a, ims, ic, i, marqContent, cObj = this;
  102.   this.mq = marqueeInit.ar[c];
  103.   for (p in defaultconfig)
  104.    if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
  105.     this.mq[p] = defaultconfig[p];
  106.   this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
  107.   if(!tag.getElementsByTagName('img')[0])
  108.    this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
  109.   else
  110.    this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
  111.   u = this.mq.style.width.split(/\d/);
  112.   this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
  113.   marqContent = trimTags(tag);
  114.   tag.className = tag.id = '';
  115.   tag.removeAttribute('class', 0);
  116.   tag.removeAttribute('id', 0);
  117.   if(ie)
  118.    tag.removeAttribute('className', 0);
  119.   tag.appendChild(tag.cloneNode(false));
  120.   tag.className = ['marquee', c].join('');
  121.   tag.style.overflow = 'hidden';
  122.   this.c = tag.firstChild;
  123.   this.c.appendChild(this.c.cloneNode(false));
  124.   this.c.style.visibility = 'hidden';
  125.   a = [[req1, this.c.style], [this.mq.style, this.c.style]];
  126.   for (i = a.length - 1; i > -1; --i)
  127.    for (p in a[i][0])
  128.     if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
  129.      a[i][1][p.encamel()] = a[i][0][p];
  130.   this.m = this.c.firstChild;
  131.   if(this.mq.mouse == 'pause'){
  132.    this.c.onmouseover = function(){cObj.mq.stopped = true;};
  133.    this.c.onmouseout = function(){cObj.mq.stopped = false;};
  134.   }
  135.   this.m.style.position = 'absolute';
  136.   this.m.style.left = '-10000000px';
  137.   this.m.style.whiteSpace = 'nowrap';
  138.   if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
  139.   if(!this.mq.noAddedSpace)
  140.    this.m.appendChild(document.createTextNode('\xa0'));
  141.   for(i = 0; marqContent[i]; ++i)
  142.    this.m.appendChild(marqContent[i]);
  143.   if(ie5) this.m = this.c.firstChild;
  144.   ims = this.m.getElementsByTagName('img');
  145.   if(ims.length){
  146.    for(ic = 0, i = 0; i < ims.length; ++i){
  147.     ims[i].style.display = 'inline';
  148.     ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
  149.     if(typeof ims[i].complete == 'boolean' && ims[i].complete)
  150.      ic++;
  151.     else {
  152.      ims[i].onload = function(){
  153.        if(++ic == ims.length)
  154.         cObj.setup();
  155.       };
  156.     }
  157.      if(ic == ims.length)
  158.       this.setup();
  159.    }
  160.   }
  161.    else this.setup()
  162.  }
  163.  
  164.   Marq.prototype.setup = function(){
  165.   if(this.mq.setup) return;
  166.   this.mq.setup = this;
  167.   var s, cObj = this;
  168.   if(this.c.style.height === 'auto')
  169.    this.c.style.height = this.m.offsetHeight + 4 + 'px';
  170.   this.c.appendChild(this.m.cloneNode(true));
  171.   this.m = [this.m, this.m.nextSibling];
  172.   if(this.mq.mouse == 'cursor driven'){
  173.    this.r = this.mq.neutral || 16;
  174.    this.sinc = this.mq.inc;
  175.    this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
  176.    if(this.mq.moveatleast){
  177.     this.mq.inc = this.mq.moveatleast;
  178.     if(this.mq.savedirection){
  179.      if(this.mq.savedirection == 'reverse'){
  180.       this.c.onmouseout = function(e){
  181.        if(cObj.contains(e)) return;
  182.        cObj.mq.inc = cObj.mq.moveatleast;
  183.        cObj.mq.direction = cObj.mq.direction == 'right'? 'left' : 'right';};     
  184.      } else {
  185.       this.mq.savedirection = this.mq.direction;
  186.       this.c.onmouseout = function(e){
  187.        if(cObj.contains(e)) return;
  188.        cObj.mq.inc = cObj.mq.moveatleast;
  189.        cObj.mq.direction = cObj.mq.savedirection;};     
  190.     }
  191.     } else
  192.      this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
  193.    }
  194.    else
  195.     this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
  196.   }
  197.   this.w = this.m[0].offsetWidth;
  198.   this.m[0].style.left = 0;
  199.   this.c.id = 'marq_kill_marg_bord';
  200.   this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
  201.   this.c.id = '';
  202.   this.c.removeAttribute('id', 0);
  203.   this.m[1].style.left = this.w + 'px';
  204.   s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
  205.   while(this.c.offsetWidth > this.w - s)
  206.    this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
  207.   this.c.style.visibility = 'visible';
  208.   this.runit();
  209.   }
  210.  
  211.  Marq.prototype.slowdeath = function(){
  212.   var cObj = this;
  213.   if(this.mq.inc){
  214.    this.mq.inc -= 1;
  215.    this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
  216.   }
  217.  }
  218.  
  219.  Marq.prototype.runit = function(){
  220.   var cObj = this, d = this.mq.direction == 'right'? 1 : -1;
  221.   if(this.mq.stopped || this.mq.stopMarquee){
  222.    setTimeout(function(){cObj.runit();}, 300);
  223.    return;
  224.   }
  225.   if(this.mq.mouse != 'cursor driven')
  226.    this.mq.inc = Math.max(1, this.mq.inc);
  227.   if(d * parseInt(this.m[0].style.left) >= this.w)
  228.    this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
  229.   if(d * parseInt(this.m[1].style.left) >= this.w)
  230.    this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
  231.   this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
  232.   this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
  233.   setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
  234.  }
  235.  
  236.  Marq.prototype.directspeed = function(e){
  237.   e = e || window.event;
  238.   if(this.timer) clearTimeout(this.timer);
  239.   var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX == 'number'?
  240.    e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
  241.   lb = (w - this.r) / 2, rb = (w + this.r) / 2;
  242.   while((c = c.offsetParent)) mp -= c.offsetLeft;
  243.   this.mq.direction = mp > rb? 'left' : 'right';
  244.   this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
  245.  }
  246.  
  247.  Marq.prototype.contains = function(e){
  248.   if(e && e.relatedTarget){var c = e.relatedTarget; if(c == this.c) return true;
  249.    while ((c = c.parentNode)) if(c == this.c) return true;}
  250.   return false;
  251.  }
  252.  
  253.  function resize(){
  254.   for(var s, m, i = 0; i < marqueeInit.ar.length; ++i){
  255.    if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
  256.     m = marqueeInit.ar[i].setup;
  257.     s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
  258.     m.c.style.width = m.mq.style.width;
  259.     m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
  260.     while(m.c.offsetWidth > m.w - s)
  261.      m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
  262.    }
  263.   }
  264.  }
  265.  
  266.  if (window.addEventListener)
  267.   window.addEventListener('resize', resize, false);
  268.  else if (window.attachEvent)
  269.   window.attachEvent('onresize', resize);
  270.  
  271. })();



Kindly help me.

M.Sworna Vidhya
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
swornavidhya_m is offline Offline
12 posts
since May 2010
Permalink
Sep 1st, 2010
0
Re: How to give - space between scrolling images and border for the images
put a STYLE tag at the top of your html page with the css definitions that you want - ex:
html Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. img{
  3. margin-right: 15em !important;img{margin-right: 15em !important; 
  4. border:2px solid #000;}
  5. </style>

if you have other images that should NOT be affected by the above changes, then give your images a common class - ex: class="marqueeImg" then use that class name in the css definition.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. .marqueeImg{margin-right: 15em !important;border:2px solid #000;}
  3. </style>
  4.  
  5. ...
  6. <div class="marquee" id="mycrawler2">
  7.  <img class="marqueeImg" src="http://i40.tinypic.com/9tlic8.jpg" style="padding:0 20px;" onclick="javascript<b></b>:alert('9tlic8.jpg')";/> 
  8.  <img class="marqueeImg" src="http://i43.tinypic.com/1zbqs5t.jpg" style="padding:0 20px;" onclick="javascript<b></b>:alert('1zbqs5t.jpg')"/> 
  9.  <img class="marqueeImg" src="http://i44.tinypic.com/2419ul3.jpg" style="padding:0 20px;" onclick="javascript<b></b>:alert('2419ul3.jpg')"/> 
  10.  <img class="marqueeImg" src="http://i43.tinypic.com/296nh3r.jpg" style="padding:0 20px;" onclick="javascript<b></b>:alert('296nh3r.jpg')"/> 
  11.  <img class="marqueeImg" src="http://i40.tinypic.com/mk7ki.jpg" style="padding:0 20px;" onclick="javascript<b></b>:alert('mk7ki.jpg')"/>  
  12. </div>
Reputation Points: 116
Solved Threads: 243
Veteran Poster
hielo is offline Offline
1,123 posts
since Dec 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: limit textfield to three words
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to make CSS opacity setting work in IE7 ?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC