jquery sliding div

**TheJoshMan** · 07-29-2008, 10:34 AM

Wondering if anyone knows how I could use this to display just ONE single image in the box with a sliding description div on mouseover. Right now I can't get the script to work unless there is at least two images with sliding descriptions.

the "slider.js" file:

Code:

// ========================================================
//              ===== images slider ====
// script: Gerard Ferrandez - Ge-1-doot - February 2008
// http://www.dhteumeuleu.com
// CC-BY-NC
// ========================================================

/* ==== slider nameSpace ==== */
var slider = function() {
	/* ==== private methods ==== */
	function getElementsByClass(object, tag, className) {
		var o = object.getElementsByTagName(tag);
		for ( var i = 0, n = o.length, ret = []; i < n; i++) {
			if (o[i].className == className) ret.push(o[i]);
		}
		if (ret.length == 1) ret = ret[0];
		return ret;
	}
	function setOpacity (obj,o) {
		if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
		else obj.style.opacity = o / 100;
	}
	/* ==== Slider Constructor ==== */
	function Slider(oCont, speed, iW, iH, oP) {
		this.slides = [];
		this.over   = false;
		this.S      = this.S0 = speed;
		this.iW     = iW;
		this.iH     = iH;
		this.oP     = oP;
		this.oc     = document.getElementById(oCont);
		this.frm    = getElementsByClass(this.oc, 'div', 'slide');
		this.NF     = this.frm.length;
		this.resize();
		for (var i = 0; i < this.NF; i++) {
			this.slides[i] = new Slide(this, i);
		}
		this.oc.parent = this;
		this.view      = this.slides[0];
		this.Z         = this.mx;
		/* ==== on mouse out event ==== */
		this.oc.onmouseout = function () {
			this.parent.mouseout();
			return false;
		}
	}
	Slider.prototype = {
		/* ==== animation loop ==== */
		run : function () {
			this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
			this.view.calc();
			var i = this.NF;
			while (i--) this.slides[i].move();
		},
		/* ==== resize  ==== */	
		resize : function () {
			this.wh = this.oc.clientWidth;
			this.ht = this.oc.clientHeight;
			this.wr = this.wh * this.iW;
			this.r  = this.ht / this.wr;
			this.mx = this.wh / this.NF;
			this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
		},
		/* ==== rest  ==== */
		mouseout : function () {
			this.over      = false;
			setOpacity(this.view.img, this.oP);
		}
	}
	/* ==== Slide Constructor ==== */
	Slide = function (parent, N) {
		this.parent = parent;
		this.N      = N;
		this.x0     = this.x1 = N * parent.mx;
		this.v      = 0;
		this.loaded = false;
		this.cpt    = 0;
		this.start  = new Date();
		this.obj    = parent.frm[N];
		this.txt    = getElementsByClass(this.obj, 'div', 'text');
		this.img    = getElementsByClass(this.obj, 'img', 'diapo');
		this.bkg    = document.createElement('div');
		this.bkg.className = 'backgroundText';
		this.obj.insertBefore(this.bkg, this.txt);
		if (N == 0) this.obj.style.borderLeft = 'none';
		this.obj.style.left = Math.floor(this.x0) + 'px';
		setOpacity(this.img, parent.oP);
		/* ==== mouse events ==== */
		this.obj.parent = this;
		this.obj.onmouseover = function() {
			this.parent.over();
			return false;
		}
	}
	Slide.prototype = {
		/* ==== target positions ==== */
		calc : function() {
			var that = this.parent;
			// left slides
			for (var i = 0; i <= this.N; i++) {
				that.slides[i].x1 = i * that.Z;
			}
			// right slides
			for (var i = this.N + 1; i < that.NF; i++) {
				that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
			}
		},
		/* ==== HTML animation : move slides ==== */
		move : function() {
			var that = this.parent;
			var s = (this.x1 - this.x0) / that.S;
			/* ==== lateral slide ==== */
			if (this.N && Math.abs(s) > .5) {
				this.obj.style.left = Math.floor(this.x0 += s) + 'px';
			}
			/* ==== vertical text ==== */
			var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
			if (Math.abs(v - this.v) > .5) {
				this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
				this.v = v;
				this.cpt++;
			} else {
				if (!this.pro) {
					/* ==== adjust speed ==== */
					this.pro = true;
					var tps = new Date() - this.start;
					if(this.cpt > 1) {
						that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
					}
				}
			}
			if (!this.loaded) {
				if (this.img.complete) {
					this.img.style.visibility = 'visible';
					this.loaded = true;
				}
			}
		},
		/* ==== light ==== */
		over : function () {
			this.parent.resize();
			this.parent.over = true;
			setOpacity(this.parent.view.img, this.parent.oP);
			this.parent.view = this;
			this.start = new Date();
			this.cpt = 0;
			this.pro = false;
			this.calc();
			setOpacity(this.img, 100);
		}
	}
	/* ==== public method - script initialization ==== */
	return {
		init : function() {
			// create instances of sliders here
			// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
			this.s1 = new Slider("slider", 8, 3.5/3.5, 3.3/6.3, 100);
			setInterval("slider.s1.run();", 16);
		}
	}
}();

The HTML:

Code:

<html>
<head>
<title>Slider Test</title>
	<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/Scripts/slider.js">slider.js</script>
	<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/Scripts/jquery-1.2.3.pack.js"></script>
	<script type="text/javascript" language="javascript">
	$(document).ready(
	function () {
		$('.themes:last').css('margin','0')
		});
		</script>
</head>
<body>
<div id="slider">
 	
<div style="border-left: medium none; right: 0px;" class="slide">
            <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/likno_awm.jpg" height="205px" width="410px" alt="Likno All Web Menus Pro v5" title="Likno All Web Menus Pro v5"  style="opacity: 1; visibility: visible;" class="diapo"></a>
			<div style="top: 205px;" class="backgroundText"></div>
            <div style="top: 205px;" class="backgroundText"></div><div style="top: 0px;" class="text">
				  <span class="title"> <a href="#">This is the title</a></span>
                  <p>Blah blah blah, descriptive text here...</p>

 
			</div>
</div>	
<div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; left: 97px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" class="slide">
            <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/fill_green.png" height="205px" width="410px" alt="Likno All Web Menus Pro v5" title="Likno All Web Menus Pro v5"  style="opacity: 0; visibility: hidden;" class="diapo"></a>
			<div style="top: 205px;" class="backgroundText"></div>
            <div style="top: 205px;" class="backgroundText"></div><div style="top: 0px;" class="text">
				  <span class="title"> <a href="#">This is the title</a></span>
                  <p>Blah blah blah blah, descriptive text here</p>

 
			</div>
</div>	


<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script> </div>

The CSS:

Code:

/* Slider */

div.wide #slider {margin-bottom: 0px;}
#slider {height: 205px;	position:relative;	overflow: hidden; margin-top: 0px; border:1px #a4c634 solid;}
#slider .slide {position: absolute;	height:205px; width: 100%;background: #202020;overflow: hidden;border-left: #a4c634 solid 1px;cursor: default;}
#slider .title {font-family:Corbel, Calibri, Verdana, Arial;color: #f0f0f0;font-weight: 80;	font-size: 1.2em;}
#slider .backgroundText {position: absolute;
		width: 100%;
		height: 100%;
		top: 100%;
		background: #000;
		filter: alpha(opacity=80);
		opacity: 0.8;	}
#slider .text {	 position: absolute;	top: 1%;top: 100%;color: #f0f0f0;	font-family: Corbel, Calibri, Verdana, Arial;font-size: 1em;text-align: justify;width: 85%; 	left: 10px;	}
#slider .diapo {position: absolute;	filter: alpha(opacity=100);	opacity: 1;	visibility: hidden;	}
</body>
</html>

**jscheuer1** · 07-29-2008, 05:45 PM

You should know by now that this sort of thing is much easier for us to assist you with if you post a link to a live demo of the page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Without all of the resources (the exact version of jquery used, the images, any other scripts, etc.), creating a local demo for testing would be a huge chore. Just dealing with a live page of this for trouble shooting purposes would be bad enough.

One thought though (without looking through the code or having the advantage of seeing a demo), if the only problem is that you seem to just need two images, how about making the second image the same src as the first, set one of its dimensions to 1px, the other to whatever is required to make this work, and its visibility to hidden.

**TheJoshMan** · 07-29-2008, 09:28 PM

not a bad idea... I didn't think about that. Sorry, I was in a rush to get to work this morning, so I didn't have time to upload the files to my site and make a demo page of it. If this idea you gave me doesn't work, then I'll definitely upload everything and let you take a look at it if you don't mind.

Thanks.
Josh

**TheJoshMan** · 07-29-2008, 10:39 PM

Ok, so I tried what you said and it still doesn't work. It did the same thing it does when there isn't a second image to slide in, the script breaks. So, I've created a demo page and uploaded all the files...

http://www.m-pulsedesigns.com/Testin...ider_demo.html

Thanks in advance for any light you can shed on this situation.

**TheJoshMan** · 07-30-2008, 01:25 AM

Anybody got any ideas about this?

**TheJoshMan** · 07-30-2008, 03:33 AM

I'm still getting nowhere with it, so if anyone else has any ideas I'd be happy to try them...

**jscheuer1** · 07-30-2008, 04:15 AM

Let's get this clear, as it appears to 'work'. Right now there are two sliding divisions and two images (at least that I can see). One image is in what appears to be the background (both sliding division slide over it, depending upon where you hover), the other image looks to be a plain green image in the division that slides in from the right. Is there an image in the division that slides in from the bottom?

Now, do you want to end up with one or two sliding divisions? What image do you want to get rid of (I'd think it is the plain green one, just want to be sure). Are there any other major differences from what the current demo is doing that you want to achieve?

**TheJoshMan** · 07-30-2008, 08:03 PM

sorry I wasn't more specific...

What I'm trying to acheive is to get rid of the green image completely as well as the corresponding black sliding div that comes in from the bottom.

I want to keep the image that is "in the background" along with the sliding div which corresponds to that image.

Thanks

**TheJoshMan** · 07-30-2008, 11:58 PM

Here is an image to show you EXACTLY what I'm trying to get...

I want to keep this image, along with the black div that slides in from the bottom which corresponds with it. I want to completely remove the green image and the black div which slides in from the bottom and corresponds to it (the green image).

I've tried every possible way I can think of, but no matter how I remove the image or shrink it or make it "hidden", the script breaks.

**Medyman** · 07-31-2008, 02:07 AM

@Nyne Lyvez...

I think you're overly complicating the matter. I'm not familiar with the script that you're using, so I won't comment on it. But what you're trying to do can be done with fairly simple jQuery syntax. So, you don't have to go about mucking with other code and trying to make it work. Just code the jQuery yourself!

Here is an example of what I'm assuming you need.

I would explain the code, but I think you should be able to figure it out by reading it. Let me know if something is unclear.