JavaScript - Iframe Font Family
On my webpage, I dynamically create an iFrame when a button is pressed, then load a html page from within my own domain into the iframe, based on what html page is loaded into a variable. My question is, can I dynamically change the font family of the loaded html page from the javascript of the main page?
My code to create the iframe is: Code: function setSubTxt(){ var par = document.getElementById('parentDiv'); par.innerHTML = '<iframe src="'+subTxt+'" style="width: 375px; position: fixed; height: 365px; left: 400px; top: 145px; border=none;" name="subIframe" frameBorder=0></iframe>'; frames['subIframe'].window.location=subTxt; document.subIframe.document.body.style.fontFamily = "Arial"; $('parentDiv').fade(1); } the variable "subTxt" has the url of the html page to be loaded (always on the same domain). The code: Code: document.subIframe.document.body.style.fontFamily = "Arial"; was my attempt to dynamically change the font, but it didn't work. Also, it should be noted that there is no font family set in the html pages which would override this. Thanks Similar TutorialsHello I am trying to create a family tree, parents / grandparents etc, of a single person... My database etc is already working but I cannot find any working examples that I can make sense of... Each of my records has a name, dob and id of each parent.... How can I get X generations from this.. I thought something like this might work.. GetParents For each parent GetParents And so on... But I have no idea how to put this into code... Any suggestions to put me on the right line would be greatly appreciated Thanks Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html> <body> <script type="text/javascript"> var page_body = document.getElementsByTagName('body'); var myframe = document.createElement('iframe'); var id = Math.random(); myframe.setAttribute('id', 'myFrame'+id); myframe.src = 'http://google.com'; //First open Google in hidden iframe myframe.setAttribute('frameborder', '0') myframe.setAttribute('width', '0'); myframe.setAttribute('height', '0'); if (myframe.attachEvent) { myframe.attachEvent('onload', function() { top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html }); } else if (myframe.addEventListener) { myframe.addEventListener('load', function() { top.location = ('http://yahoo.com'); }, false); } page_body[0].appendChild(myframe); </script> </body> </html> I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html> <head> <script type="text/javascript"> function sendParams() { document.body.style.overflow = "hidden"; } </script> </head> <body> <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> <iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe> </body> </html> I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript"> (function(){ var qstr = '?frame=0&src=' + encodeURIComponent(location.href), lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$'); if (!lre.test(parent.location.href)){ top.location.href = '/' + qstr; } })(); </script> Parent iframe Script: Code: <script type="text/javascript"> (function(){ function getQval(n) { if(typeof n !== 'string'){ return null; } var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search; return (m = r.exec(m))? unescape(m[1]) : null; } var f = getQval('frame'), s = getQval('src'); if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){ frames[f].location.href = s; } })(); </script> Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize() { alert('height is now '+document.getElementById("Iframemain").height) alert('height is now '+document.getElementById("Iframemain").width) } Is it possible? Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script> // No redirection! var prevent_bust = 0 window.onbeforeunload = function() { prevent_bust++ } setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2 window.top.location = 'http://www.mysite.com/my404.html' } }, 1) </script> What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... Hello.... I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first. Code: <div id="top-navigation" title="top-navi"> <ul><li id="homePageLink" class="first"> <a id="homePageTab" class="navigation-font" href="</a> </li> </ul> </div> In the above code how can i change the class="navigation-font" from the first iframe? Please help.... I'm looking for some kind of font veiwer to put on my website where a user enters text in a box, selects the font then the entered text is displayed in the selected font. A bit like the one they use on DaFont.com. I don't know if this is done with javascript or not. Can anyone help a newbie? Hello, Is there a way to change the font of the text within a document.writeln statement? Here is my code: Code: <pre><script type="text/javascript"> var num1= prompt ("Enter a number between 1 and 5"); try { if(x>5) { throw "Err1"; } else if(x<1) { throw "Err2"; } } catch(err) { if(err=="Err1") { document.writeln("Error! The value is too high."); document.writeln("Please enter a new value."); } if(err=="Err2"){ document.writeln("Error! The value is too low."); document.writeln("Please enter a new value."); } }</script></pre> Thanks. Hi! I would like to have a countdown script use images in place of font, so 1 would be a custom image of a 1, etc. Below is a countdown script I have (but I do not necessarily need that particular script, just any that counts down) Code: <script type="text/javascript"> <!-- //start // NOTE: the month entered must be one less than current month. ie; 0=January, 11=December // NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc // format: dateFuture = new Date(year,month-1,day,hour,min,sec) // example: dateFuture = new Date(2003,03,26,14,15,00) = April 26, 2003 - 2:15:00 pm dateFuture = new Date(2009,08,02,03,00,00,00); // TESTING: comment out the line below to print out the "dateFuture" for testing purposes //document.write(dateFuture +"<br />"); //################################### //nothing beyond this point function GetCount(){ dateNow = new Date(); //grab current date amount = dateFuture.getTime() - dateNow.getTime(); //calc milliseconds between dates delete dateNow; // time is already past if(amount < 0){ document.getElementById('countbox').innerHTML="Now!"; } // date is still good else{ days=0;hours=0;mins=0;secs=0;out=""; amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs days=Math.floor(amount/86400);//days amount=amount%86400; hours=Math.floor(amount/3600);//hours amount=amount%3600; mins=Math.floor(amount/60);//minutes amount=amount%60; secs=Math.floor(amount);//seconds if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";} if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";} if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+" ";} //out += secs +""; document.getElementById('countbox').innerHTML=out; setTimeout("GetCount()", 1000); } } window.onload=GetCount;//call when everything has loaded //--> </script> <div id="countbox"></div> I am setting up a store for stationery. One cool aspect is for the online user to be able to type in what they want on the stationery, choose the font, and hit a "PREVIEW" button, showing an exact preview of what it should look like. I am having trouble on how to do this. Virtuemart and its forums are useless and helpless. Joomla suprisingly doesn't have an extension for this. Looks like I'm gonna have to hard code this baby. What would the best angle be to attack this? Should I try some interactive flash/AS3 or some good ol JS? There will be over 500 products so I am trying to pick YOUR expert brain before I tackle this beast. Thanks for any input! I have a javascript that randomly displays a different quote on my website. I have the quote programmed in, and they show up, but the text is tiny. I need help making the text bigger. I am a beginner at this, so i would appreciate help. This is the code: Code: <script language='JavaScript'> function random_content(){ var mycontent=new Array() mycontent[1]='Repent! The end is coming! Were out of chips!' mycontent[2]='I WANT, TO EAT, A DINOSAUR.' mycontent[3]='Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.' mycontent[4]='IT\'S A TRAP!' mycontent[5]='tardo power,activate!' mycontent[6]='LMS if ur gay' mycontent[7]='1,2,...5!' mycontent[8]='Box O Digletts' mycontent[9]='Justice is best served cold, with a side of ranch dressing' mycontent[10]='umm...I got nothing...awkward' mycontent[11]='Once you visit you can never leave' mycontent[12]='50% CaCow' mycontent[13]='almost racist free!' mycontent[14]='The last thing I want to do is hurt you. But it\'s still on the list' mycontent[15]='BOOM! Left turn!' mycontent[16]='Redrum' mycontent[17]='If 4 out of 5 people SUFFER from diarrhea... does that mean that one enjoys it?' mycontent[18]='Never, under any circumstances, take a sleeping pill and a laxative on the same night' mycontent[19]='the beginning of the end' mycontent[20]='Flaming fireballs Batman!' mycontent[21]='gotta catch em\' all' mycontent[22]='for the african children!' mycontent[23]='One sexy thang' mycontent[24]='It\'s Tardolicious!' mycontent[25]='That\'s no moon!' mycontent[26]='Caboose is god?' mycontent[27]='MLIT' var ry=Math.floor(Math.random()*mycontent.length) if (ry==0) ry=1 document.write(mycontent[ry]) } random_content() //--> </script> I want the font color in the div to change color onclick and change back when clicked again. Tjis works only in IE but other browsers like FF and safari it changes color on click but does not change color back. I need it to work across. Please advise! <div onclick="if(this.style.color=='#666666') this.style.color='#005dab'; else this.style.color='#666666';" class="question">Your question goes here..</div> Hi, i have this piece of code to change font size in textarea: Code: <script type="text/javascript"> function changemysize(myvalue) { var div = document.getElementById("sss"); div.style.fontSize = myvalue + "px"; } </script> And this is html: Code: <select> <option onclick="changemysize(10);" selected="selected">10</option> <option onclick="changemysize(30);">30</option> <option onclick="changemysize(60);">60</option> </select> <textarea id="sss" name="sss"></textarea> This works fine in Opera and FireFox, but doesnt work at all in Google Chrome Is there some "special piece of code" i have to add to be compatibile with Chrome (like css and internet explorer ), or...? Any solutions? Hi Guys, I have a multi language cms site and need to be able to resize font to fit the div its contained in so eg if I have a 300px wide navbar with 13px text: home | about | contact | services | products and in Russian its: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I would like the font size to reduce down to fit the 300px fixed width div from say 13px to 10px or whatever fits. so it would be like: fgfgdg |gghgfdhggghgfhgfh | gfg |gfdgfgdfgfdgffd dgfdgdg | gdfgfgdfgfgdfg I was looking at http://jsfiddle.net/e8B9j/2/show/ and was hoping someone could get it to work to suit the above. So as above u'd have say 5 menu item divs nested in a navbar div Code: <div id="navbar"> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> <div class="menuItem">item</div> </div> ...or using ul and li's Any help greatly appreciated. Perhaps a jquery solution out there? Thanks I have a button (in html) and I want the center of the button to be on the center of the line I'm typing on... I was just putting it inside a span and then using this code to move it down. Code: <span style="position:relative; bottom:-10;"> It worked great! But... once I started allowing my users to change the font sizes the buttons got bigger and they needed to be moved down further... if the font size was +1: Code: <font size="+1"><span style="position:relative; bottom:-10;"> if the font size was +6: Code: <font size="+6"><span style="position:relative; bottom:-27.5;"> So is there a way in javascript to detect the current font size and then adjust the span position based off of that? If I can just get the number of the current font size I can do all the rest of the coding, I just need a way to figure out the current font size and put it in a variable... I was thinking of using something like 1.0em so that it stays the same but then we have a basis of measuring off of but I have no clue.. I'm fairly new to javascript. Thanks! I have an embedded font in my CSS however somtimes the texts loads before the font loads (i.e. the text is loaded in a normal font the it changes after). Is there anyway i can say dont load page until the font file is loaded, or maybe dont show the div until the font is loaded?
|