PDA

View Full Version : Does Fluid Text Resizer work for iframe?



goatsy
03-29-2012, 05:36 PM
1) Script Title:
Fluid Text Resizer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.htm

3) Describe problem:
I'm trying to use the "Fluid Text Resizer" on my main page, however, it cannot resize the text for the subpages that show up in my iframe. Is it possible to resize the text within the iframe with the resizer, which is outside of the frame? I've tried setting the "<a target" of the resizer to my iframe name, but that didn't work. Any help would be much 'ppreciated. ;)

:cool:

jscheuer1
03-30-2012, 05:29 AM
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:


<!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>&nbsp;&nbsp;<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:


<!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>&nbsp;&nbsp;<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:


<div id="sizecontroldiv" class="controlstyle">

Increase/Decrease controls: <a href="#smaller"><img src="fontminus.gif" /></a>&nbsp;&nbsp;<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:


<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.

goatsy
04-10-2012, 06:05 PM
Thank you! It worked great, however, every time the iframe is reloaded, whether I've used the text resizer for it or not, it (the text resizer effect) stops working. Is there any around this? Otherwise, it looks like I might just have to get rid of the iframe and make individual pages for each. Thanks so much for your help!

goatsy
04-10-2012, 06:14 PM
Oh gosh, I'm sorry... I got it to work. (I forgot to link to same domain!)

Thank you again! You're awesome. :)