Well, there's no communication of the sort required for this allowed between the top page and one in its iframe unless both pages are on the same domain.
Even when they are on the same domain, it can get complicated depending upon what exactly you're trying to do.
And you should be aware that, although it perhaps looks cool or whatever to have these font-size controls on the page, they're not required. All browsers have these built in and they're very easy too use, and will almost always work better than any you can make using javascript.
That said, if the pages are on the same domain, this appears to work. Put the same scripts and controls on the page in the iframe as on the top page, but use display none for the style, skip any javascript:mytextsizer links, and add a helper script. So if your top page is like so:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}
.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}
.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fluidtextresizer.js">
/***********************************************
* Fluid Text Resizer- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
var mytextsizer=new fluidtextresizer({
controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc]
levels: 3, //number of levels users can magnify (or shrink) text
persist: "session", //enter "session" or "none"
animate: 200 //animation duration of text resize. Enter 0 to disable
})
</script>
</head>
<body>
<div id="sizecontroldiv" class="controlstyle">
Increase/Decrease controls: <a href="#smaller"><img src="fontminus.gif" /></a> <a href="#bigger"><img src="fontplus.gif" /></a><br /><br />
Font levels controls: <a href="#fontsize-1"><img src="-1.gif" /></a> <a href="#fontsize0"><img src="0.gif" /></a> <a href="#fontsize1"><img src="1.gif" /></a> <a href="#fontsize2"><img src="2.gif" /></a>
</div>
<p>Arbitrary link control: <a href="javascript:mytextsizer.setFontLevel(0)">Set font level to default</a>
<iframe src="demo_framed.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe>
</body>
</html>
Make the page in the iframe like so:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.controlstyle {
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fluidtextresizer.js">
/***********************************************
* Fluid Text Resizer- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
var mytextsizer=new fluidtextresizer({
controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc]
levels: 3, //number of levels users can magnify (or shrink) text
persist: "session", //enter "session" or "none"
animate: 200 //animation duration of text resize. Enter 0 to disable
})
jQuery(function($){
$(parent.document).find('a').click(function(){
if(/^#(smaller|bigger|fontsize-?\d)$/.test(this.hash)){
$('a[href=' + this.hash + ']').trigger('click');
} else if (/^\s*javascript\s*:\s*mytextsizer\./.test(this.href)){
var fontFunction = new Function(this.href);
fontFunction();
}
});
});
</script>
</head>
<body>
<div id="sizecontroldiv" class="controlstyle">
Increase/Decrease controls: <a href="#smaller"><img src="fontminus.gif" /></a> <a href="#bigger"><img src="fontplus.gif" /></a><br /><br />
Font levels controls: <a href="#fontsize-1"><img src="-1.gif" /></a> <a href="#fontsize0"><img src="0.gif" /></a> <a href="#fontsize1"><img src="1.gif" /></a> <a href="#fontsize2"><img src="2.gif" /></a>
</div>
<p>High Folks!</p>
</body>
</html>
More info:
Since they're not going to be seen anyway, on the page in the iframe you can simplify:
Code:
<div id="sizecontroldiv" class="controlstyle">
Increase/Decrease controls: <a href="#smaller"><img src="fontminus.gif" /></a> <a href="#bigger"><img src="fontplus.gif" /></a><br /><br />
Font levels controls: <a href="#fontsize-1"><img src="-1.gif" /></a> <a href="#fontsize0"><img src="0.gif" /></a> <a href="#fontsize1"><img src="1.gif" /></a> <a href="#fontsize2"><img src="2.gif" /></a>
</div>
to:
Code:
<div id="sizecontroldiv" class="controlstyle">
<a href="#smaller"></a><a href="#bigger"></a>
<a href="#fontsize-1"></a><a href="#fontsize0"></a><a href="#fontsize1"></a><a href="#fontsize2"></a>
</div>
Also of note, this will not work in Chrome unless the pages are live.
Does Fluid Text Resizer work for iframe?
Reply With Quote
Bookmarks