Image script (dynamic div dimensions)

**pad** · 07-14-2009, 07:37 PM

Hello all!

Basically I'm having a few issues, I've tried searching but to no avail.

I'd like to be able to use a script that will size a div automatically to the width and height of its background image. So for example:

<div id="dynamic" style="background: url('PINK.jpg');"> </div>

would automatically resize to the size of "PINK.jpg". This is so I can protect my images from people right clicking and saving as.

An alternative solution (possibly) would be this:

<div id="photoholder">
<img src="PINK.jpg" />
<img src="transparentoverlay.gif" />
</div>

So, somehow, the photoholder div and overlay div would (using js) size to the image, and overlay img would go on top of the image meaning users would save this instead of the image itself. I'd also like the image to fade in once it's loaded, and for the "photoholder" bit to have a "preloading" graphic.

I'm sorry if this seems complicated.

But basically all I need is a way to automatically set the width/height

I bet this makes no sense to anyone and sinks away into oblivion now

**vwphillips** · 07-15-2009, 09:11 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.d1 {
  background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.d2 {
  background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}

/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/

function ReSize(cls,maxsec){
 var objs=zxcByClassName(cls)
 for (var bg,oop,z0=0;z0<objs.length;z0++){
  bg=zxcSV(objs[z0],'background-Image');
  if (bg!='none') oop=new DoReSize(objs[z0],bg,maxsec);
 }
}

function DoReSize(obj,bg,maxsec){
 this.obj=obj;
 this.img=new Image();
 this.img.src=bg.replace('url(','').replace(/[)"]/g,'');
 this.srt=new Date();
 this.maxsec=maxsec||10;
 this.CkLoad();
}

DoReSize.prototype.CkLoad=function(){
 var now=new Date();
 if (this.img.complete&&this.img.width>40){
  this.obj.style.width=this.img.width+'px';
  this.obj.style.height=this.img.height+'px';
 }
 else if ((now-this.srt)/1000<10){
  var oop=this;
  setTimeout(function(){ oop.CkLoad(); },100);
 }
}

function zxcSV(obj,par){
 if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

/*]]>*/
</script>
</head>

<body onload="ReSize('resize',10);" >
<div class="d1 resize" ></div>
<div class="d2 resize" ></div>
</body>

</html>

**pad** · 07-15-2009, 01:10 PM

Ooh that is MARVELOUS, thank you so so much! Is there a way to improve it further?

At the moment, I have an image within a div, and the div background is a spinner loading graphic. Then I use this script to fade the image in when loaded:

Code:

<script type="text/javascript">
<!--
document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");

function initImage() {
	imageId = 'thephoto';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 25;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

I'd like to retain this if possible, so have the div fade in when the background has loaded, and have the loader image spinning in the meantime. Is this possible?

Thanks so much for the first code though, I'll definitely use it if we can't improve it.

**vwphillips** · 07-15-2009, 04:08 PM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.d1 {
  background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.d2 {
  background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes

// see http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.htm
//

// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
 return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 clearTimeout(this.to);
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.ms=this.mS;
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 this.ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
 this.apply();
 if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Bounce&&this.Bounce[2]>0) this.bounce();
 }
}

zxcBAnimatorOOP.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

zxcBAnimatorOOP.prototype.bounce=function(){
 if (this.Bounce[2]%2==0)
 this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
 this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
 this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script  type="text/javascript">
/*<![CDATA[*/

function ReSize(cls,maxsec,ms){
 var objs=zxcByClassName(cls)
 for (var bg,oop,z0=0;z0<objs.length;z0++){
  bg=zxcSV(objs[z0],'background-Image');
  if (bg!='none') oop=new DoReSize(objs[z0],bg,maxsec,ms);
 }
}

function DoReSize(obj,bg,maxsec,ms){
 this.obj=obj;
 this.img=new Image();
 this.img.src=bg.replace('url(','').replace(/[)"]/g,'');
 this.srt=new Date();
 this.maxsec=maxsec||10;
 this.ms=ms||1000;
 this.CkLoad();
}

DoReSize.prototype.CkLoad=function(){
 var now=new Date();
 if (this.img.complete&&this.img.width>40){
  this.obj.style.width=this.img.width+'px';
  this.obj.style.height=this.img.height+'px';
  zxcBAnimator('opacity',this.obj,0,100,this.ms);
 }
 else if ((now-this.srt)/1000<10){
  var oop=this;
  setTimeout(function(){ oop.CkLoad(); },100);
 }
}

function zxcSV(obj,par){
 if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

/*]]>*/
</script>
</head>

<body onload="ReSize('resize',10,5000);" >
<div class="d1 resize" ></div>
<div class="d2 resize" ></div>
</body>

</html>

**pad** · 07-15-2009, 04:35 PM

I absolutely love you. Thank you so, so much!

Thread: Image script (dynamic div dimensions)

Thread Tools

Search Thread

Image script (dynamic div dimensions)

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions