CODEWITHSUNDEEP
jqueryhtmlcss
Trance84
Trance84

Reputation: 171

Position element on top of jQuery

I have a popup music player in my website (www.tranceil.fm -> right click on headphones -> popup)

That window holds a jQuery plugin..

on that popup.html i added stream info to the page, but whatever im trying to do it gets stuck behind the player..notice the player and the content behind it.

enter image description here

I tried positioning that div in diffrent places..tried z-index:1000 and absolute to the element style..nothing.

This is the full popup page code.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Fullwidth Audio Player</title>

        <!-- Style sheets -->
        <link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css" />
        <style type="text/css">

            /* RESET */
            html, body, div, span, applet, object, iframe, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }

            /* SET HERE YOUR BACKGROUND COLOR OF THE POPUP WINDOW */
            body {
                background-color: #141414;
            }

        </style>

        <!-- Include js files -->
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.js" type="text/javascript"></script>
        <script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
        <script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript" src="http://94.23.250.14:2199/system/recenttracks.js"></script>

        <script type="text/javascript">

            //DO NOT CHANGE ANYTHING FROM THIS JAVASCRIPT CODE

            //let target window know that popout window is openend
            function notifyOpener() {
                //close popout when target window gets closed, comment the next line if you dont want that
                if(!self.opener) { self.close(); }

                if(self.opener || !self.opener.fapPopupWin) self.opener.fapPopupWin = self;

            }
            setInterval( notifyOpener, 200 );
            self.focus();

            //some soundmanager settings
            soundManager.url = 'swf/';
            soundManager.flashVersion = 9;
            soundManager.useHTML5Audio = true;

            //functions that will be called from the target window
            function initPlayer(opts, html) {
                opts.wrapperPosition = 'bottom';
                $('#fap-popup').html(html).fullwidthAudioPlayer(opts);

            }

            function addTrack(trackUrl,title,meta,cover,linkUrl) {
                $.fullwidthAudioPlayer.addTrack(trackUrl, title, meta, cover, linkUrl, true);
            }

        </script>

    </head>
    <body>
        <div id="cc_recenttracks_tranceilfm" style= "z-index:1000;" class="cc_recenttracks_list">Loading...</div>
        <!-- Fancy Music Player Container -->
        <div id="fap-popup"></div>
    </body>
</html>

The div i want on top is: "cc_recenttracks_tranceilfm"

Any thoughts?

Upvotes: 0

Views: 577

Answers (1)

Lee
Lee

Reputation: 10603

The z-index of your player is 100000, so just make the cc_recenttracks_tranceilfm element a higher index than that (i.e. 100001 or above).

Also dont forget you need to position the element to have the z-index take effect (by applying a relative, absolute or fixed position)

Upvotes: 1

Related Questions