Any jQuery Experts? - GoFuckYourself.com

Vendzilla · 07-24-2010, 08:18 AM

I'm working on this page at http://www.brianabanksreloaded.com/slide.html which works the way I want it to on Fire Fox, but works like shit on IE.
I really love the effects and would love to expand on it, any ideas what I'm missing?

Vendzilla · 07-24-2010, 12:42 PM

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, 12:50 PM

you need a IE6 png transparency fix.

try to solve it with superslight

mafia_man · 07-24-2010, 01:06 PM

Quote:

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, 01:27 PM

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

Vendzilla · 07-24-2010, 02: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, 02: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, 03:16 PM

Quote:

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, 03: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, 03: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, 05:39 PM

just add:

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

before effect: 'apple'

fris · 07-24-2010, 06:36 PM

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

beta-tester · 07-24-2010, 06:42 PM

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

grumpy · 07-25-2010, 04:35 AM

http://stackoverflow.com/ is your friend

Babaganoosh · 07-25-2010, 05:16 AM

Quote:

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, 11:16 AM

Quote:

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

Quote:

Originally Posted by grumpy

http://stackoverflow.com/ is your friend

Going to check that out, thanx

Vendzilla · 07-25-2010, 11:19 AM

Quote:

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, 05:24 PM

Bump to help you get the info you need

Vendzilla · 07-25-2010, 06:12 PM

Quote:

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

07-24-2010, 08:18 AM	#1
Vendzilla Biker Gnome Industry Role: Join Date: Mar 2004 Location: cell#324 Posts: 23,200	Any jQuery Experts? I'm working on this page at http://www.brianabanksreloaded.com/slide.html which works the way I want it to on Fire Fox, but works like shit on IE. I really love the effects and would love to expand on it, any ideas what I'm missing? __________________ Webair died? Carbon is not the problem, it makes up 0.041% of our atmosphere , 95% of that is from Volcanos and decomposing plants and stuff. So people in the US are responsible for 13% of the carbon in the atmosphere which 95% is not from Humans, like cars and trucks and stuff and they want to spend trillions to fix it while Solar Panel plants are powered by coal plants think about that

07-24-2010, 12:42 PM	#2
Vendzilla Biker Gnome Industry Role: Join Date: Mar 2004 Location: cell#324 Posts: 23,200	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 __________________ Webair died? Carbon is not the problem, it makes up 0.041% of our atmosphere , 95% of that is from Volcanos and decomposing plants and stuff. So people in the US are responsible for 13% of the carbon in the atmosphere which 95% is not from Humans, like cars and trucks and stuff and they want to spend trillions to fix it while Solar Panel plants are powered by coal plants think about that

07-24-2010, 12:50 PM	#3
flashfreak Confirmed User Industry Role: Join Date: Jun 2002 Location: cloud number 9 Posts: 4,396	you need a IE6 png transparency fix. try to solve it with superslight __________________ SEO Mogul \| ICQ: 163671223

07-24-2010, 01:27 PM	#5
beta-tester Rock 'n Roll Baby! Join Date: Sep 2004 Location: USA, temporarly Posts: 22,562	try using position: absolute on overlay helpers, instead of position: fixed. __________________ Sig for sale. Affordable prices. Contact me and get a great deal ;) My contact: ICQ: 944-320-46 e-mail: manca {AT} HotFreeSex4All.com

07-24-2010, 03:20 PM	#9
beta-tester Rock 'n Roll Baby! Join Date: Sep 2004 Location: USA, temporarly Posts: 22,562	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.... __________________ Sig for sale. Affordable prices. Contact me and get a great deal ;) My contact: ICQ: 944-320-46 e-mail: manca {AT} HotFreeSex4All.com

07-24-2010, 02:56 PM	#7
beta-tester Rock 'n Roll Baby! Join Date: Sep 2004 Location: USA, temporarly Posts: 22,562	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. __________________ Sig for sale. Affordable prices. Contact me and get a great deal ;) My contact: ICQ: 944-320-46 e-mail: manca {AT} HotFreeSex4All.com

07-24-2010, 03:40 PM	#10
Vendzilla Biker Gnome Industry Role: Join Date: Mar 2004 Location: cell#324 Posts: 23,200	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 __________________ Webair died? Carbon is not the problem, it makes up 0.041% of our atmosphere , 95% of that is from Volcanos and decomposing plants and stuff. So people in the US are responsible for 13% of the carbon in the atmosphere which 95% is not from Humans, like cars and trucks and stuff and they want to spend trillions to fix it while Solar Panel plants are powered by coal plants think about that

07-24-2010, 05:39 PM	#11
beta-tester Rock 'n Roll Baby! Join Date: Sep 2004 Location: USA, temporarly Posts: 22,562	just add: fixed: false, (let comma be there this time) before effect: 'apple' __________________ Sig for sale. Affordable prices. Contact me and get a great deal ;) My contact: ICQ: 944-320-46 e-mail: manca {AT} HotFreeSex4All.com

07-24-2010, 06:36 PM	#12
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,372	what slider are you using? or just your own jquery code? __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

07-24-2010, 06:42 PM	#13
beta-tester Rock 'n Roll Baby! Join Date: Sep 2004 Location: USA, temporarly Posts: 22,562	fris, this is jQuery Tools Overlay 'plugin'... __________________ Sig for sale. Affordable prices. Contact me and get a great deal ;) My contact: ICQ: 944-320-46 e-mail: manca {AT} HotFreeSex4All.com

07-25-2010, 04:35 AM	#14
grumpy Too lazy to set a custom title Join Date: Jan 2002 Location: Holland Posts: 9,870	http://stackoverflow.com/ is your friend __________________ Don't let greediness blur your vision \| You gotta let some shit slide icq - 441-456-888

07-25-2010, 05:24 PM	#18
$5 submissions I help you SUCCEED Industry Role: Join Date: Nov 2003 Location: The Pearl of the Orient Seas Posts: 32,195	Bump to help you get the info you need __________________ Need a NON-ADULT income stream? We build your YOUTUBE CHANNEL for only $20 per video! For Hire: $3/hour or $400 per month Marketing Specialist Virtual Assistants