I have this javascript code:
function start1(dis,www){
var visina = screen.availHeight;
var content = '<div id="showRtbn" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;background: #E81515;cursor: pointer; border-radius:5px; margin-left:-15px;"> <iframe src="https://domain.com/hotel/2" style="border:0px #FFFFFF none;" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div> <div id="rtb" style="width:100%; height:100%; opacity:0; position:fixed; box-sizing: border-box; left:0px; top:0px; z-index:99999999; display:none; background:rgba(0, 0, 0, 0.8)"><iframe src="'+www+'" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb" style="background:#fff; cursor:pointer; top:15px; right:15px; z-index:9999999; position:fixed; border-radius:25px;"><img style="width:50px; height50px;" src="http://i.imgur.com/QqlcQwu.png"></div></div>';
var newNode = document.createElement("DIV");
newNode.innerHTML = content;
document.body.appendChild(newNode);
var rtb = document.getElementById("rtb"),
timer = null;
document.getElementById("showRtb").addEventListener("click", function() {
if (rtb.style.opacity != 1) {
clearTimeout(timer);
rtb.style.display = "block";
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity + .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
clearInterval(timer);
}
}, 30)
}
});
document.getElementById("hideRtb").addEventListener("click", function() {
if (rtb.style.opacity != 0) {
clearTimeout(timer);
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity - .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
rtb.style.display = "none";
clearInterval(timer);
}
}, 30)
}
});
}
and as you can see, I create a link inside the body with id showRtb and inside that an iframe with content, but when I click it doesn't work, doesn't want to show div with id rtb ...
When I change the content so instead of an iframe I post an image, then it works well, but now with the iframe it doesn't work. Why? What is the problem?
So, I want when I click on showRtb to open div with ID rtb ...
UPDATE:
var content = '<div id="showRtb1" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;cursor: pointer; border-radius:5px; margin-left:-15px;"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="showRtb" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 99999999;cursor: pointer; opacity:0; pointer; border-radius:5px; margin-left:-15px;"></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Change this:
var content = '<div id="showRtbn"> <iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
To be something like:
var content = '<div id="showRtbn"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div>Show RTB<div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Remove the iFrame from within the anchor tags (<a>..</a>) and you can set its containing <div> as hidden. NOTE: I've removed your styles. You should consider moving them into a stylesheet
JS:
document.getElementById("showRtb").addEventListener("click", function() {
rtb.style.display = "block";
console.log("clicked");
});
Related
I'm attempting to have a YouTube video auto-play when the user scrolls to it and stops when the user scrolls past it. This works fine thanks to this post "JQuery Autoplaying Youtube videos on scroll". Now I want to also do this with window.scroll but it fails. It seems to me that the div containing updated iframe tag is not loaded with youtube APIIframe ready. any one know why. Really appreciate your help?.
Below are my codes
<style type="text/css">
iframe {
width: 200px;
height: 200px;
margin: 10px 10px 100px 10px;
}
</style>
<div id="wrap" class="content" style="border:groove">
<iframe style="margin-top:200px" id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe style="margin-bottom:200px" id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<div style="height:800px"></div>
</div>
<script type='text/javascript'>//<![CDATA[
function my_first(){
var LoadVideo = function(player_id){
var Program = {
Init: function(){
this.NewPlayer();
this.EventHandler();
},
NewPlayer: function(){
var _this = this;
this.Player = new YT.Player(player_id,{});
_this.Player.$element = $('#' + player_id);
},
Play: function(){
if( this.Player.getPlayerState() === 1 ) return;
this.Player.playVideo();
},
Pause: function(){
if( this.Player.getPlayerState() === 2 ) return;
this.Player.pauseVideo();
},
ScrollControl: function(){
//alert('player='+player_id);
//alert('total='+Utils.IsElementInViewport(this.Player.$element[0]) );
if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
else this.Pause();
},
EventHandler: function(){
var _this = this;
$(window).on('scroll', function(){//alert(player_id)
_this.ScrollControl();
});
}
};
var Utils = {
IsElementInViewport: function(el){
if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
return (
rect.top >= 100 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.bottom <= 400 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
};
return Program.Init();
};
$('iframe').each(function(){
LoadVideo($(this).attr('id'));
});
}
function yHandler(){
var wrap=document.getElementById('wrap') ;
var contentHeight = wrap.offsetHeight;//get page content height
var yOffset = window.pageYOffset;//get vertical scroll position
var y = yOffset+ window.innerHeight;
if(y >= contentHeight) {//alert(1234)
wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';
}
}
window.onscroll = function () {
$.getScript('//www.youtube.com/player_api');
yHandler();
my_first();
}
you should be used append not innerHTML.
original:
wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';
edit:
$(wrap).append( '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>' );
reference:
jquery .html() vs .append()
hope it helps
UPDATE
create iframe with different id
function createVideo( $element, url ) {
$element.append( '<iframe style="margin-top:0px" id="player' + $( 'iframe' ).length + 1 + '" frameborder="0" title="YouTube video player" type="text/html" src="' + url + '"></iframe><br/>');
}
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
$(wrap).append( '<div style="height:500px"></div>');
As I'm a noobs on javascript, I need some help to figure out how to grab spesific part of html code using pure javascript.
I wanted to get this part :
6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR
From HTML code below :
<div id="document-container">
<div style="width: 304px; height: 78px;">
<div>
<iframe src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&hl=en&v=r20170816175713&size=normal&cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0">
</iframe>
</div>
<textarea id="g-document-response" name="g-document-response" class="g-document-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; ">
</textarea>
</div>
</div>
I do believe it can be done using document.getElementById or regex. I think i can do it using PHP, but i have no idea how to do it in javascript.
give that iframe some unique id to easily access it with javascript
do document.getElementById(the id you gave that iframe)
read the src attribute from that element
parse that k parameter (you could use some URL builder)
This snippet will get the value of the k param and log it in the console.
const
iframe = document.querySelector('iframe'),
url = iframe.getAttribute('src'),
regex = /k=(.*?)&/,
regexResult = regex.exec(url);
console.log(regexResult[1]);
<div id="document-container"><div style="width: 304px; height: 78px;"><div><iframe src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&hl=en&v=r20170816175713&size=normal&cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0"></iframe></div><textarea id="g-document-response" name="g-document-response" class="g-document-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea></div></div>
HTML:
<iframe id="myIframe" src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&hl=en&v=r20170816175713&size=normal&cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0">
</iframe>
AND JAVASCRIPT:
var iframeSrc = document.getElementById("myIframe").src;
var params = parseQuery(iframeSrc.replace(/^[^\?]+\??/,''));
function parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
alert(params.k);
Here whereas I included id property for your Iframe to map it easily. I got the parser from this site.
Let me know if this worked for you. btw, Sorry for the improper indentions.
ALSO Here is a jsfiddle: https://jsfiddle.net/xx6u9vq8/1/
Background:
I created a (HTML,CSS, JS) lightbox using the tutorial here. When the lightbox overlay div is shown (when the button is clicked), I want to stop the scrollbar ability. That way, when someone is on the page looking at an image in the lightbox, they can't scroll to another part of the page. Then, when the lightbox is closed, the scrollbar ability is enabled again so they can scroll freely. I can't seem to find the right way to do that though.
I tried this:
$(document).css('overflow-y', 'hidden');
But nothing happened when I added it to my code. It was as if I never added it.
Question:
Is there a way to stop the page overflow ability when the lightbox is up and then re-enable it when it is closed?
Sorry if there is a simple answer. I'm new to JavaScript.
Javascript:
function startLightBox() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "block";
lb.style.display = "block";
}
function dismiss() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "none";
lb.style.display = " none";
}
CSS:
#lightBoxBg {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.5;
display: none;
background-color: #000000;
height: 100%;
width: 100%;
}
#lightBox {
position: absolute;
top: 50%;
left: 40%;
display: none;
}
HTML Body
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button onclick="startLightBox()">Light Box</button>
</div>
</div>
</div>
<div id="lightBoxBg" onclick="dismiss()">
</div>
<div id="lightBox">
<img src="test2.png" />
</div>
</body>
Try this-
jquery
Use $("body").css("overflow", "hidden"); in startLightBox() function.
And use $("body").css("overflow", "auto"); in dismiss()function.
Javascript
Use
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
in startLightBox() function.
And use
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
in dismiss()function.
You need to modify the overflow for the selector html, body, you can't directly control document's css - document is not an element.
Here's an example:
var toggled = false;
$('.visible').on('click', 'button', function() {
toggled = !toggled;
$(this).text((toggled ? 'Enable' : 'Disable') + ' scrolling');
$('body, html').css('overflow', toggled ? 'hidden' : '');
});
body {
background-image: linear-gradient(to bottom, white, black);
height: 140vh;
position: relative;
}
.visible, .invisible {
position: absolute;
color: red;
}
.visible {
top: calc(100vh - 2rem);
}
.invisible {
top: calc(140vh - 2rem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visible">Visible <button>Disable scrolling</button></div>
<div class="invisible">Invisible</div>
I have several kinds of videos, like this
<video id='abd' height="200" width="200" ></video>
<embed id='bcd' height="200" width="200" ></embed>
<object id='cde' height="200" width="200" ></object>
I have calculated target position like this
<script>
var vid=document.getElementById('abd');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var div = '<div>Heloo</div>';
</script>
Now i want to put a div at position (x,y).
How can i do this. div is stored in var div, Is there any way to do this perfectly,
Your help will be greatful
Thanks
You can do this using pure CSS - no JS required!
The HTML
<div id="video-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe>
<div class="video-overlay">
Overay Content
</div>
</div>
The CSS
#video-container {
position:relative;
width:420px;
}
.video-overlay {
position:absolute;
top:50px;
right:50px;
background:#000;
color:#FFF;
}
See it in action
http://jsfiddle.net/y28Zs/
try this
http://jsfiddle.net/miquelcamps/BJN8x/3/
html
<video id="embed" width="200" height="200" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
javascript
var vid = document.getElementById('embed');
var width = vid.width;
var height = vid.height;
var x = vid.offsetLeft;
var y = vid.offsetTop;
var div = '<div class="overlay" style="height:'+height+'px;width:'+width+'px;left:'+x+'px;top:'+y+'px;">Hello</div>';
document.body.innerHTML += div;
css
.overlay{
position:absolute;
background:red;
z-index:99;
}
Please check is it what you want :
<div id="adds">
<video id='abd' height="200" width="200" style="border:2px solid" ></video>
</div>
Javascript ----
vid=document.getElementById('abd');
addDiv =document.getElementById('adds');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var newDiv = document.createElement("div");
newDiv.innerText = "Hello....";
newDiv.style.left = "102px";
newDiv.style.top = "108px";
newDiv.style.position = "absolute";
addDiv.appendChild(newDiv);
Live demo : (http://jsfiddle.net/7EhtL/)
I have an index file containing a frameset:
<frameset border="1" frameborder="0" framespacing="0" rows="7%,93%">
<frame src="index_top.htm" scrolling="no" marginwidth="0"
marginheight="0" noresize name="top" target="_self">
<frame name="main" src="index_main.html"
scrolling="auto" marginwidth="0" marginheight="0">
<noframes>
The index_top file looks as following (just the relevant parts):
<table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" class="menyrad">
<tr valign="middle" align="center">
<td width="10%" id="homenav">Furniture home</td>
<td width="10%" colspan="6">Currently browsing: <i id="mainlink"><span id="header">Select page</span><div id="linkdiv"><p>Coffee tables</p><p>
Side tables</p><p>Stand tables</p><p>
Dinner tables</p><p>Stools/Pedestals</p></div></i></td>
<td width="4%" id="galleriesnav">Galleries</td>
<td width="4%" id="pressnav">Press</td>
<td width="4%" id="factsnav">Facts</td>
<td width="4%" id="contactnav">Contact</td>
<td width="10%">About artist Carlson</td>
</tr>
</table>
The relevant CSS for index_top:
#linkdiv
{
position:absolute;
visibility:hidden;
left:502px;
width:100px;
height:130px;
background-color:#FFF;
border-style:solid;
border-color:black;
border-width:2px;
font-style:normal;
}
#header
{
display:inline-block;
text-align:center;
width:100px;
}
#link1, #link2, #link3, #link4, #link5, #link6
{
color:#000;
text-decoration:none;
width:100%;
display:block;
outline:0;
}
#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover, #link6:hover
{
width:100%;
color:#FFF;
font-weight:bold;
}
#mainlink:hover #linkdiv
{
visibility:visible;
}
Aaaaand the JavaScript:
function changeClass(Index)
{
var ids = new Array("null","homenav","galleriesnav","pressnav","factsnav","contactnav");
var color = new Array("null","#c9a900","#4814a9","#71a28a","#ac27a9","#998f86");
var i=1;
var length = ids.length;
while (i<length)
{
document.getElementById(ids[i]).style.backgroundColor = '#FFF';
document.getElementById(ids[i]).className = "blacklink";
document.getElementById(ids[Index]).style.backgroundColor =color[Index];
document.getElementById(ids[Index]).className = "whitelink";
i++;
}
}
function changeHeader(HeadIndex)
{
var headers = new Array("null","Select page","Coffee tables","Side tables","Stand tables","Dinner tables","Stools","Pedestals");
var colors = new Array("null","#f32837","#0085cf","#00aa86","#c99900","c42695","#617f90");
document.getElementById("header").innerHTML = headers[HeadIndex];
if (HeadIndex > 1)
{
document.getElementById("header").style.fontWeight = "bold";
document.getElementById("header").style.color = "#FFF";
document.getElementById("header").style.backgroundColor = colors[HeadIndex];
document.getElementById("header").style.fontStyle = "normal";
}
}
So, my problem here (sorry for the huge amount of code), is that when you try to hover over the "select page" text, the hidden div is being displayed... but under the main frame. Thus, it's impossible to press the links. How can I display the div OVER the main frame so it's clickable? Is it possible even?
Include your show/hide div in index.html OUTSIDE of the frame. Then use css positioning and z-index to force it to appear above the frames.