Any jQuery Experts?

**Vendzilla** · 07-24-2010, 11:42 AM

I'm using CSS and html validators, I can't find it, I posted on a jquery forum, but that could be a while, I need this to wrk by monday, well atleast I hope

**flashfreak** · 07-24-2010, 11:50 AM

you need a IE6 png transparency fix.

try to solve it with superslight

**mafia_man** · 07-24-2010, 12:06 PM

Originally posted by flashfreak

you need a IE6 png transparency fix.

try to solve it with superslight

Doesn't work in IE8 though.

**beta-tester** · 07-24-2010, 12:27 PM

try using position: absolute on overlay helpers, instead of position: fixed.

**Vendzilla** · 07-24-2010, 01:11 PM

Here's the css, the position is already absolute

Code:

div.overlay {
background:url(white.png) no-repeat;

padding:40px;
width:600px;
display:none;
}

div.overlay div.close {
background:url(white.png) no-repeat;
position:absolute;
top:2px;
right:5px;
width:35px;
height:35px;
cursor:pointer;
}

a.player {
display:block;
height:400px;
}

img {border:none;
}
/* the overlayed element */
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(http://flowplayer.org/img/overlay/close.png);
	position:absolute; right:1px; top:1px;
	cursor:pointer;
	height:35px;
	width:35px;
}

and here's the code for the html

Code:

<html>
<head>
<title>Briana Banks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script> 
<script src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"/></script>
<script type="text/javascript" src="js/flowplayer-3.2.2.min.js"/></script>
<link rel="stylesheet" type="text/css" href="http://brianabanksreloaded.com/js/overlay.css"/>
<style>
	
	/* black version of the overlay. simply uses a different background image */
	div.apple_overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
	}
	
	div.black h2 {
		color:#fff;
	}
	
	#triggers {
		margin-top:10px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	</style>
 
	
	
	<!--[if lt IE 7]>
	<style> 
	div.apple_overlay {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
		color:#fff;
	}
	
	/* default close button positioned on upper right corner */
	div.apple_overlay div.close {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
	
	}	
	</style>
	<![endif]-->

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script> 
$(function() {
 
	// setup overlay actions to buttons
	$("a[rel]").overlay({
 
		// use the Apple effect for overlay
		effect: 'apple',		
		
		expose: '#789',				
		
		onLoad: function(content) {
			// find the player contained inside this overlay and load it
			this.getOverlay().find("a.player").flowplayer(0).load();
		},
		
		onClose: function(content) {
			$f().unload();
		}
	});				
	
	// install flowplayers
	$("a.player").flowplayer("js/flowplayer-3.2.2.swf"); 
});	
</script> 
<!-- END FLOWPLAYER JAVASCRIPT -->

      <div align="center"><a href="#" rel="#overlay1" >Click Here</a></div>	
      <div id="triggers">
<img src="http://brianabanksreloaded.com/js/2.jpg" rel="#photo1"/>
<img src="http://brianabanksreloaded.com/js/1.jpg" rel="#photo2"/></div>

<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay" id="photo1">
	<img src="http://brianabanksreloaded.com/js/briana2.jpg" />

	<div class="details">

		<h2>Brianas phots</h2>

		<p>
			Briana is going to stay on a busy schedule of shooting for her fans,getting new photo sets, showing off all the hard work in the gym.
	  </p>
	</div>
</div>

<div class="apple_overlay" id="photo2">
	<img src="http://brianabanksreloaded.com/js/briana3.jpg" />

	<div class="details">
		<h2>Just Hanging with Briana</h2>

		<p>
			Briana is ready to hang out with you, she's tied to her work, her weekly webcam shows will leave you wet and worn
		</p>
	</div>
</div>


<!-- make all links with the 'rel' attribute open overlays -->

<script>


$(function() {
	$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>


<div class="overlay" id="overlay1" > 
	<a class="player" href="trailercut.flv" > 
		&nbsp;
	</a> 
</div>
 
 
</body>
</html>

**beta-tester** · 07-24-2010, 01:56 PM

the absolute position is for the close box icon... you need to change it for the whole overlay.

try something like:
inside onLoad: before (but inside the function): this.getOverlay().find("a.player").flowplayer(0).l oad();

put this:

this.getOverlay().css("position", "absolute").

That would force the overlay to have absolute position once fired up.

**Vendzilla** · 07-24-2010, 02:16 PM

Originally posted by beta-tester

the absolute position is for the close box icon... you need to change it for the whole overlay.

try something like:
inside onLoad: before (but inside the function): this.getOverlay().find("a.player").flowplayer(0).l oad();

put this:

this.getOverlay().css("position", "absolute").

That would force the overlay to have absolute position once fired up.

First thanx for helping, I made that change and it didn't seem to work, still working the same as it was, here's the new html page

Code:

<html>
<head>
<title>Briana Banks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script> 
<script src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"/></script>
<script type="text/javascript" src="js/flowplayer-3.2.2.min.js"/></script>
<link rel="stylesheet" type="text/css" href="http://brianabanksreloaded.com/js/overlay.css"/>
<style>
	
	/* black version of the overlay. simply uses a different background image */
	div.apple_overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
	}
	
	div.black h2 {
		color:#fff;
	}
	
	#triggers {
		margin-top:10px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	</style>
 
	
	
	<!--[if lt IE 7]>
	<style> 
	div.apple_overlay {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
		color:#fff;
	}
	
	/* default close button positioned on upper right corner */
	div.apple_overlay div.close {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
	
	}	
	</style>
	<![endif]-->

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script> 
$(function() {
 
	// setup overlay actions to buttons
	$("a[rel]").overlay({
 
		// use the Apple effect for overlay
		effect: 'apple',		
		
		expose: '#789',				
		
		onLoad: function(content) {
			// find the player contained inside this overlay and load it
			this.getOverlay().css("position", "absolute").
			this.getOverlay().find("a.player").flowplayer(0).l oad();
		},
		
		onClose: function(content) {
			$f().unload();
		}
	});				
	
	// install flowplayers
	$("a.player").flowplayer("js/flowplayer-3.2.2.swf"); 
});	
</script> 
<!-- END FLOWPLAYER JAVASCRIPT -->

      <div align="center"><a href="#" rel="#overlay1" >Click Here</a></div>	
      <div id="triggers">
<img src="http://brianabanksreloaded.com/js/2.jpg" rel="#photo1"/>
<img src="http://brianabanksreloaded.com/js/1.jpg" rel="#photo2"/></div>

<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay" id="photo1">
	<img src="http://brianabanksreloaded.com/js/briana2.jpg" />

	<div class="details">

		<h2>Brianas phots</h2>

		<p>
			Briana is going to stay on a busy schedule of shooting for her fans,getting new photo sets, showing off all the hard work in the gym.
	  </p>
	</div>
</div>

<div class="apple_overlay" id="photo2">
	<img src="http://brianabanksreloaded.com/js/briana3.jpg" />

	<div class="details">
		<h2>Just Hanging with Briana</h2>

		<p>
			Briana is ready to hang out with you, she's tied to her work, her weekly webcam shows will leave you wet and worn
		</p>
	</div>
</div>


<!-- make all links with the 'rel' attribute open overlays -->

<script>


$(function() {
	$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>


<div class="overlay" id="overlay1" > 
	<a class="player" href="trailercut.flv" > 
		&nbsp;
	</a> 
</div>
 
 
</body>
</html>

**beta-tester** · 07-24-2010, 02:20 PM

this.getOverlay().css("position", "absolute").

you don't need "." - that's syntax error. Instead use: ";"

do the same for the two image helpers. This:
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});

replace with:
$(function() {
$("#triggers img[rel]").overlay({
effect: 'apple',
onLoad: function(content) {
this.getOverlay().css("position", "absolute");
}
});
});

Hope it helps....

**Vendzilla** · 07-24-2010, 02:40 PM

use IE and look at http://brianabanksreloaded.com/slide.html Getting closer

it corrects itself from loading to the left to center
Still working good in FF
This is going to look very cool when I use this with the design

**beta-tester** · 07-24-2010, 04:39 PM

just add:

fixed: false, (let comma be there this time)

before effect: 'apple'

**fris** · 07-24-2010, 05:36 PM

what slider are you using? or just your own jquery code?

**beta-tester** · 07-24-2010, 05:42 PM

fris, this is jQuery Tools Overlay 'plugin'...

**grumpy** · 07-25-2010, 03:35 AM

http://stackoverflow.com/ is your friend

**Babaganoosh** · 07-25-2010, 04:16 AM

Originally posted by grumpy

http://stackoverflow.com/ is your friend

I love stackoverflow but some of the guys are more hostile to anyone they perceive to be a newbie than GFYers are.

**Vendzilla** · 07-25-2010, 10:16 AM

Originally posted by beta-tester

just add:

fixed: false, (let comma be there this time)

before effect: 'apple'

ding ding ding I think we have a winner, thank you for your help, this is going to work slick when I get it into the design

Originally posted by grumpy

http://stackoverflow.com/ is your friend

Going to check that out, thanx

**Vendzilla** · 07-25-2010, 10:19 AM

Originally posted by Babaganoosh

I love stackoverflow but some of the guys are more hostile to anyone they perceive to be a newbie than GFYers are.

I think if you can hold your own on GFY, you can do it anywhere

**$5 submissions** · 07-25-2010, 04:24 PM

Bump to help you get the info you need

**Vendzilla** · 07-25-2010, 05:12 PM

Originally posted by $5 submissions

Bump to help you get the info you need

I have it working now, I have two pages, one that we worked on here and another with a slider, that was a lot easier after getting this one done.

I really like jQuery, going to have to learn more of it, looks cool on a webpage

Any jQuery Experts?

Any jQuery Experts?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment