CODEWITHSUNDEEP
javascripthtml
Barry Jarvis
Barry Jarvis

Reputation: 339

DIV swap onclick

I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.

So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.

here's the code:

<div id="mobmp3">
    <div id="yoursecDiv" style="display:block; z-index: 999;">  <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);"> 
                                            <iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
                                            </iframe>
                                    </a>

    </div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
    <iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
    frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
    height="280" max-width="97.4%"></iframe>
</div>

So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.

I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.

So i guess my question is: Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?

Upvotes: 0

Views: 176

Answers (1)

Barry Jarvis
Barry Jarvis

Reputation: 339

this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.

Upvotes: 0

Related Questions