[eluser]iainco[/eluser]
Hey guys, I'm using Mootools' Fx.Slide to hide some extra features on my page.
http://79.99.41.1/slide.php
Clicking the top left corner link "Rate/Comment" will reveal the extra functionality.
My only problem is that because the lower content is an iframe, as the top panel slides in, it pushes the frame down and the bottom part is cut off, most noticeable by the disappearing scroll down arrow button.
I thought one solution would be to set the footer div's height to x pixels, and then using an Fx.Morph, subtract x from the iframe height... but seems a little messy.
Here is all the code required for slide.php to work:
Code:
<?='<?'?>xml version="1.0" encoding="UTF-8"<?='?>'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Slide</title>
<link rel="stylesheet"type="text/css" href="http://www.tracesport.com/beta/assets/css/article.css">
[removed][removed]
[removed][removed]
[removed]
window.addEvent('domready', function() {
var w = 0, h = 0;
if(typeof(window.innerWidth) == 'number') {
w = window.innerWidth;
h = window.innerHeight;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
$('frame').setStyle('height', h - 18);
$$('.footer-block').setStyle('width', 0.25 * (0.6 * w));
/* Slide */
$('footer').setStyle('height','auto');
var mySlide = new Fx.Slide('footer').hide();
$('toggler').addEvent('click', function(e) {
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
[removed]
</head>
<body>
<div id="wrapper">
<div style="height:18px;width:100%;"><a id="toggler" href="#">Rate/Comment</a></div>
<div id="footer" style="width:100%;">
<div style="width:60%;">
<div class="footer-block">
Rate<br />
<form id="rate" action="" method="post">
<input type="hidden" name="articleID" value="" />
<input id="vote" type="hidden" name="vote" />
<input id="positive" type="submit" value="Positive" />
<input id="negative" type="submit" value="Negative" />
</form>
</div>
<div class="footer-block">
Archive<br />
<form id="archive" action="" method="post">
<input type="hidden" name="articleID" value="" />
<input type="submit" value="Archive Save" />
</form>
<form id="archive" action="" method="post">
<input type="hidden" name="articleID" value="" />
<input type="submit" value="Archive Delete" />
</form>
<form id="delete" action="" method="post">
<input type="hidden" name="articleID" value="" />
<input type="submit" value="Delete" />
</form>
</div>
<div class="border-r">
<div class="footer-block">
E-mail<br />
<form id="email" action="" method="post">
<input type="hidden" name="articleID" value="" />
<input type="text" name="email" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<div class="footer-block">
Tag<br />
<form id="tag" action="" method="post">
<input type="hidden" name="articleID" value="" />
<input type="text" name="tag" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<div style="width:40%;">
<form id="comment" action="" method="post">
<input type="hidden" name="articleID" value="" />
<textarea name="comment"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
<iframe id="frame" frameborder="0" width="100%" src="http://news.bbc.co.uk/sport/"></iframe>
</div>
</body>
</html>
Any help much appreciated!
Thanks!
