Jump to content
veldfiets

Problem with Z index

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.

 

 

 

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Sorry, I am not that often busy with the elements...

See again

 

:good:

Edited by veldfiets

Share this post


Link to post
Share on other sites

Now see what happen when you follow instruction carefully and correctly, your IKEA furniture when put together, looks like the furniture at IKEA showroom, and player on site toggles overlapping text at the press of a button. :)

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...