GoFuckYourself.com - Adult Webmaster Forum

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - Any jQuery Experts? (https://gfy.com/showthread.php?t=979429)

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?

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

you need a IE6 png transparency fix.

try to solve it with superslight

Quote:

Originally Posted by flashfreak (Post 17360287)

you need a IE6 png transparency fix.

try to solve it with superslight

Doesn't work in IE8 though.

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

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>

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.

Quote:

Originally Posted by beta-tester (Post 17360543)

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>

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....

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

just add:

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

before effect: 'apple'

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

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

Quote:

Originally Posted by grumpy (Post 17361330)

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.

Quote:

Originally Posted by beta-tester (Post 17360735)

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 (Post 17361330)

http://stackoverflow.com/ is your friend

Going to check that out, thanx

Quote:

Originally Posted by Babaganoosh (Post 17361366)

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

Bump to help you get the info you need

Quote:

Originally Posted by $5 submissions (Post 17362535)

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