Jump to content

Problem with Z index


veldfiets
 Share

Recommended Posts

Has anyone an idea how to solve, create the good placement of the z-index: see: www.veldfiets.nl: I wish to have the fixed musicplayer behind the text (div 'inhoud'): if I give the div 'object' -1, only the contactformular goes in front the fixed musicplayer, the div 'inhoud' stays behind the musicplayer.

Thanks.

 

 

 

Link to comment
Share on other sites

Give object a parameter of

 

<param name="wmode" value="transparent">

 

but! doing so you won't be able to access the player

 

 

Hm, nice, but not usefull indeed.

Link to comment
Share on other sites

I suppose you could some sort of button to alternate sending text to back, then back to overlapping again.

Can you give a hint how you imagine your idea?

Link to comment
Share on other sites

Add wmode parameter and button

<button id="access_player">Bring player to front</button>
        <div id="object">klk

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" height="420" width="510">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf">
<param name="bgcolor" value="#ffffff">
<param name="FlashVars" value="mp3=http%3A//veldfiets.nl/PAVANE.mp3%7Chttp%3A//veldfiets.nl/KIEJABAL%20AND%20ROSES.mp3%7Chttp%3A//veldfiets.nl/BEAUTIFUL%20DREAMER.mp3%7Chttp%3A//veldfiets.nl/FEAR%20NO%20DANGER.mp3%7Chttp%3A//veldfiets.nl/CUPID%20ONLY.mp3%7Chttp%3A//veldfiets.nl/TO%20THE%20HiLLS.mp3%7Chttp%3A//veldfiets.nl/REQUIEM%20VOOR%20EEN%20MUZIKANT.mp3%7Chttp%3A//veldfiets.nl/AFFETTUOSO.mp3%7Chttp%3A//veldfiets.nl/B.A.C.H.mp3%7Chttp%3A//veldfiets.nl/SONATA%20IN%20C%20DUR%20779%20andante.mp3%7Chttp%3A//veldfiets.nl/SONATA%20IN%20C%20DUR%20779%20allegro%20%282%20blokfluiten%20en%20obligaat%20orgel%29.mp3%7Chttp%3A//veldfiets.nl/SONATA%20IN%20C%20DUR%20largo%20e%20cantabile.mp3%7Chttp%3A//veldfiets.nl/SONATA%20IN%20C%20DUR%20allegro.mp3%7Chttp%3A//veldfiets.nl/GALLIARD%20BATTAGLIA.mp3%7Chttp%3A//veldfiets.nl/MORGENGEBET.mp3%7Chttp%3A//veldfiets.nl/SERENADE.mp3%7Chttp%3A//veldfiets.nl/PIE%20JESU.mp3%7Chttp%3A//veldfiets.nl/WACHET%20AUF.mp3%7Chttp%3A//veldfiets.nl/ANDANTE%20CANTABILE.mp3%7Chttp%3A//veldfiets.nl/O%20JESU%20CHRIST%20MEINS%20LEBENSLICHT.mp3%7Chttp%3A//veldfiets.nl/VIOOLSONATE%20IN%20A.mp3%7Chttp%3A//veldfiets.nl/SERBAND%20OF%20MOCHT%20ICK%20O%20SWAENTJES.mp3%7Chttp%3A//veldfiets.nl/KONINGIN%20DER%20NACHT.mp3&width=510&height=420">
                <param name="wmode" value="transparent">
            </object></div>

css

#access_player {position: fixed; left:0; top: 0; margin: 15px;}

javascript

   <script type="text/javascript">
        var x;
        window.onload = function() {
            x = document.getElementById("access_player");

            x.onclick = function() {

                toggle_access(this);
            }


        }

        function toggle_access(elem) {
            var y = document.getElementById("object");
            if (elem.innerHTML === "Bring player to front")
            {
                y.style.zIndex = "10";
                elem.innerHTML = "Return player to back"
            }
            else
            {
                y.style.zIndex = "-1";
                elem.innerHTML = "Bring player to front"
            }

        }

    </script>
Link to comment
Share on other sites

Well it wouldn't work if you add the JavaScript code and tags into the css styling, now would it!

 

This is what it has in style tag

 

<style type="text/css">
div#inhoud {
padding: 10px 20px 20px 40px;
line-height: 25px;
font-weight: bold;
margin-left: 11%;
margin-top: 10px;
color: #99ff99;
width: 75%;
font-size: 17px;
font-family: Consolas;
}
body {
background-attachment: fixed;
background-position: center top;
background-image: url(black-butterfly-background-wallpapers-1920x1080-1280x800.jpg);
}
h1 {
color: #ffff66;
margin-left: 27%;
font-size: 38px;
font-family: Comic Sans MS;
position: fixed;
margin-top: -25px;
}
div#object {
margin-right: 10%;
width: 80%;
margin-left: 10%;
z-index: -1;
position: fixed;
}
<script type="text/javascript">
var x;
window.onload = function() {
x = document.getElementById("access_player");

x.onclick = function() {

toggle_access(this);
}


}

function toggle_access(elem) {
var y = document.getElementById("object");
if (elem.innerHTML === "Bring player to front")
{
y.style.zIndex = "10";
elem.innerHTML = "Return player to back"
}
else
{
y.style.zIndex = "-1";
elem.innerHTML = "Bring player to front"
}

}

</script>

#access_player {position: fixed; left:0; top: 0; margin: 15px;}
</style>

 

Does this look like the other css to you? now knowing the answer is no! will it work or fail! remember, there is no JavaScript to toggle player, Why? because ITS HERE where it shouldn't.

Edited by dsonesuk
Link to comment
Share on other sites

I'am studing organ nowadays: same tasks: read, read.

Yes, that's a consequence, too much furniture on the spot: kicked something out and created some more space..how? See for yourself.

Edited by veldfiets
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...