I am looking for a way to hide a button if the link in an iframe
associated with it does not exist
I am looking for a way to hide a button if the link in an iframe
associated with it does not exist.
My html looks a little like this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Day Chooser</title>
<link rel='stylesheet' type='text/css' href='menu-files/style.css' />
<script type='text/javascript'
src='menu-files/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='menu-files/jquery.js'></script>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li><a href="javascript:void(0);"
id="showmonday">Monday</a></li>
<li><a href="javascript:void(0);"
id="showtuesday">Tuesday</a></li>
<li><a href="javascript:void(0);"
id="showwednesday">Wednesday</a></li>
<li><a href="javascript:void(0);"
id="showthursday">Thursday</a></li>
<li><a href="javascript:void(0);"
id="showfriday">Friday</a></li>
<li><a href="javascript:void(0);"
id="showsaturday">Saturday</a></li>
<li><a href="javascript:void(0);"
id="showsunday">Sunday</a></li>
</ul>
</div>
<div id="iframe">
<div id="monday"><h1>Monday</h1><iframe
src="monday/album/index.html" frameborder="0"
style="height:779px; width:1024px;"></iframe></div>
<div id="tuesday"><h1>Tuesday</h1><iframe
src="tuesday/album/index.html" frameborder="0"
style="height:779px; width:1024px;"></iframe></div>
<div id="wednesday"><h1>Wednesday</h1><iframe
src="wednesday/album/index.html" frameborder="0"
style="height:779px; width:1024px;"></iframe></div>
<div id="thursday"><h1>Thursday</h1><iframe
src="thursday/album/index.html" frameborder="0"
style="height:779px; width:1024px;"></iframe></div>
<div id="friday"><h1>Friday</h1><iframe
src="friday/album/index.html" frameborder="0"
style="height:779px; width:1024px;"></iframe></div>
<div id="saturday"><h1>Saturday</h1><iframe
src="saturday/album/index.html" frameborder="0"
style="height:779px; width:1024px;"></iframe></div>
<div id="sunday"><h1>Sunday</h1><iframe
src="sunday/album/index.html" frameborder="0"
style="height:779px; width:1024px;"></iframe></div>
</div>
</div>
</body>
</html>
The js code looks like this
idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval("timerIncrement()", 60000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
})
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 1) { // 20 minutes
window.location.reload();
}
}
$(function(){
$('#showfrontpage').click(function(){
$('#frontpage').show();
$('#monday').hide();
$('#wednesday').hide();
$('#tuesday').hide();
$('#thursday').hide();
$('#friday').hide();
$('#saturday').hide();
$('#sunday').hide();
});
$('#showmonday').click(function(){
$('#frontpage').hide();
$('#monday').show();
$('#wednesday').hide();
$('#tuesday').hide();
$('#thursday').hide();
$('#friday').hide();
$('#saturday').hide();
$('#sunday').hide();
});
$('#showtuesday').click(function(){
$('#frontpage').hide();
$('#monday').hide();
$('#wednesday').hide();
$('#tuesday').show();
$('#thursday').hide();
$('#friday').hide();
$('#saturday').hide();
$('#sunday').hide();
});
$('#showwednesday').click(function(){
$('#frontpage').hide();
$('#monday').hide();
$('#wednesday').show();
$('#tuesday').hide();
$('#thursday').hide();
$('#friday').hide();
$('#saturday').hide();
$('#sunday').hide();
});
$('#showthursday').click(function(){
$('#frontpage').hide();
$('#monday').hide();
$('#wednesday').hide();
$('#tuesday').hide();
$('#thursday').show();
$('#friday').hide();
$('#saturday').hide();
$('#sunday').hide();
});
$('#showfriday').click(function(){
$('#frontpage').hide();
$('#monday').hide();
$('#wednesday').hide();
$('#tuesday').hide();
$('#thursday').hide();
$('#friday').show();
$('#saturday').hide();
$('#sunday').hide();
});
$('#showsaturday').click(function(){
$('#frontpage').hide();
$('#monday').hide();
$('#wednesday').hide();
$('#tuesday').hide();
$('#thursday').hide();
$('#friday').hide();
$('#saturday').show();
$('#sunday').hide();
});
$('#showsunday').click(function(){
$('#frontpage').hide();
$('#monday').hide();
$('#wednesday').hide();
$('#tuesday').hide();
$('#thursday').hide();
$('#friday').hide();
$('#saturday').hide();
$('#sunday').show();
});
});
The code at the top of the js is just a timer which reloads the menu after
time if there is no mouse moment.
The other js code hides all the iframes except the one selected, in the
css there is code that hides all the iframes until they are selected.
What I also need to happen is for the menu buttons to be hidden and only
show if the link in it's associated iframe exists.
All the existing code works, I just need the last bit then I'm done with
this.
One last thing, all this needs to work locally with no server, the code
above does work locally.
Thanks for any help
No comments:
Post a Comment