|
JavaScript - Change Font Size Multiple Times By Reference To Id
Similar TutorialsI want to deviate from using css to designate a font size in one place. I have a string with a name. This is stored in a variable called "name." I just re-defined name to include district number. Now, it is name=lastname+', '+district; I am appending this string into the html dom. I want the district portion to appear in a slightly smaller font. How can I do this without having to set up a separate <span>? Or can this be done? Dear All, I need to get JavaScript to change the font size used for a website if Opera is detected. I have been trying this but it hasn't worked: Code: function changeFooter(){
if (navigator.userAgent.indexOf("Opera") >= 0) { // if I alert this line the output is 0
document.getElementById("footer").style.fontSize = '0.5em';
};
};
in the head of the html document (as well as the link to the external JavaScript file): Code: <script type="text/javascript"> changeFooter(); </script> I tried using window.onload = changeFooter(); but still no luck. I used the same principle in a different function to change another css property via getElementById and it works beautifully so I am a bit puzzled. I then realised that I actually need to change the value of the font size in the body tag from 100% to 90% when Opera is detected so I changed the script to this: Code: function changeFooter(){
if (navigator.appName == 'Opera') {
document.write('<link href="styleOpera.css" rel="stylesheet" type="text/css" />');
}
else {
document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
};
};
But it's still not working. I was hoping that I could benefit from your collective wisdom as I am not sure where I am going wrong with this and several hours spent searching the web for answers have been fruitless so far... My knowledge of JavaScript is not very extensive, I haven't studied it in great depth so perhaps I am making some very silly mistakes here. My pseudo code for this exercise is something like this: Code: detect browser
if browser = Opera {
change font-size for body to 90%
}
else {
do nothing
}
alternatively:
detect browser
if browser = Opera {
link to stylesheet1
}
else {
link to stylesheet2
}
Thanks in advance for your help, much appreciated. Kind regards, Cristina Alciati Hi there! I need help! Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words. I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet Please help me! Thanks so so much! follow me on twitter - @robyn_90 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! 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? Hey everyone, I'm having a problem with a project i'm working on. We have a webpage setup to alpha page individual people with pagers at work. It is a simple form that submits to a php file on the pager server. I am working on creating a script that submits a alpha-page to everyone at once. There are about 120 different ppl in the company, I want the script to submit the form once for each persons pager. I'm new to javascript but have alittle programming understanding. This is what i have so far: Code: <html> <head> <title>Send a Page</title> </head> <body> <center> <form action="http://sendpage/pager/PageSend.php" method="POST"> <input type="hidden" name="ContactPagerNumberId[]" value="120"> <input type="hidden" name="PagemessageId" value="What are you doing?"> <input type="hidden" name="ScheduledDeliverydateId" value="2011-08-22"> <input type="hidden" name="ScheduledDeliveryTimeId" value="19:30:00"> <input type="hidden" name=ScheduledDeliveryAmPmId" value="selected"> <button style="width:140px; height:30px" type="submit" name="SEND">Submit</button> </form> </body> </html> The ContactPagerNumberId[] is the arbitrary value set to individual ppl's pagers. I'm not sure where to place the javascript code at. It doesn't seem as hard as I'm making it out to be. Any suggestions? Hey guys. I need little bit of help which i know it will be piece of cake for you. In emp_rota.php , i want the user to select multiple dates (through a calendar) which will be fetched in the php in the next page. everything works except that the calendar script works only on DATE1, when user clicks to add another date then though everything works , except the calendar doesnt come up. help MEE !! P.s. i am attaching the whole script along with this http://www.mediafire.com/?ayz7mpiauba4dya OK, so I've written a small timer at http://zeroerror.co.uk/public/cubetimer.php for general purpose timing. My first is that I cannot find a way to accurately time with the format 00:00.00, as the milliseconds seem to run too slowly. My second is that when the font size is set to a large size (for example, 200px or 300px) the timer runs even more slowly (just over half the speed it should). Is there any way to optimise the timer so it runs at a more accurate speed, or is this just a problem with my browser parsing the Javascript in time? Here's the code: Code: function timeIt()
{
init = 1;
if (countMsL == 9)
{
countMsL = 0;
if (countMsU == 9)
{
countMsU = 0;
if (countSecs == 59)
{
countSecs = 0;
countMins++;
}
else
{
countSecs++
}
}
else
{
countMsU++;
}
}
else
{
countMsL++;
}
displayMsL = countMsL;
displayMsU = countMsU;
if (countSecs < 10)
{
displaySecs = '0' + countSecs;
}
else
{
displaySecs = countSecs;
}
if (countMins < 10)
{
displayMins = '0' + countMins;
}
else
{
displayMins = countMins;
}
readout = displayMins + ':' + displaySecs + '.' + displayMsU + displayMsL;
timerDisplay.innerHTML = readout;
timerActual = setTimeout('timeIt()', 10);
}
Thanks in advance! Hi i am using the following code to load a part of page dynamically using jquery Code: loadNextBackInPage_URL = null;
function callBackFunctionLoadNextBackInPage(data)
{
//alert(data);
$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);
if(supports_history_api())
{
history.pushState(null, null, loadNextBackInPage_URL);
window.addEventListener("popstate", function(e) {
alert('s');
loadNextBackInPage(location.pathname);
});
}
else
{
}
}
function loadNextBackInPage(url,parm)
{
//alert(url);
loadNextBackInPage_URL = url;
$("#left").fadeTo(100,.2);
$.post(url,parm,callBackFunctionLoadNextBackInPage,'html');
}
The loading part and even changing the browser URL is working. but why is the PoP state function being fired multiple times? I call loadNextBackInPage() originally through an onclick function. First off I didn't know whether to post this here or in the PHP section since it deals with both, but mostly JS. I have a PHP scraper that scrapes the job title, company name and location from a website and stores them in separate arrays. These values are then extracted out one at a time from the array and stored into a string, that is then passed to a Google Maps API. I can make this successfully happen once, the thing is I need to do it multiple times. I have an idea on what I should do but don't really know how to implement it (correctly). The idea I had was to create a function in the JavaScript section that accepts three values from PHP. This function would be called in my PHP for loop that extracts the values from the array into a string. The thing that confuses me is that the Map function is called via <body onLoad="initialize()">. Here's the link to my code The following code works find in firefox and chrome. In IE, it only works the first time I click on a link. Any ideas? Thanks in advance, // I have some div's where help is, which I make non-viewable <div id='help_guides'> <div id='issue1'>Help with issue 1</div> <div id='issue2'>Help with issue 2</div> </div> <a href="#" id="issue_1_link">Help with issue #1</a> <a href="#" id="issue_2_link">Help with issue #2</a> <div id='help'></div> // I grab the help guide div into a variable var issue_1_help = $('issue_1').remove(); var issue_2_help = $('issue_2').remove(); // When the help link is clicked, the help DIV displays the help guide Event.observe( $('issue_1_link'), 'click', function() { $('help').update( issue_1_help ); }); Event.observe( $('issue_2_link'), 'click', function() { $('help').update( issue_2_help ); }); 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. 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 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? Hi, I have 3 sum fields which I want to change to a red colour if the value is > or < 100. Apparently this is a DAP, but I am using javascript to tweek some of the settings in DAP. function subtotal() if(document.getElementById("Sum1").value>100&&<100) { this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: red' { else this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966' </SCRIPT> <SPAN class=MSTheme-Label id="Sum1_Label" style="Z-INDEX: 1; LEFT: 0.25in; OVERFLOW: hidden; WIDTH: 0.711in; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.161in">Totals:</SPAN><SPAN class=MsoBoundSpan id="Sum1" onmouseover="subtotal()" dataFormatAs=TEXT style="Z-INDEX: 2; LEFT: 5.416in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in" MsoTextAlign="General">Sum of Product 1</SPAN><SPAN class=MsoBoundSpan id="Sum2" onmouseover="subtotal()" dataFormatAs=TEXT style="Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in" MsoTextAlign="General">Sum of Product 2</SPAN><SPAN class=MsoBoundSpan id="Sum3" dataFormatAs=TEXT style="Z-INDEX: 2; LEFT: 7.917in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in" MsoTextAlign="General">Sum of Product 3</SPAN></DIV> I'm a noobie at coding, and I was wondeirng if anyone can help me with the coding. Many Thanks I am trying to figure out how to change certain text's font color, in the text area. I have been looking everywhere, but I haven't found a solution. Any help would be great, thanks, mazzzzz 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> Hello all, Can anyone help me with a script for changing font color of a number within a table when there is a match? Table A contains numbers and table B contains numbers. When table B numbers matches some of the numbers in table A, the numbers in table A need to change color. I hope you understand what I mean. Hi sorry if this is a very simple question but how do I change the font color for certain elements of this javascript code that the client sees on their brower? This is a count down script and I have made the code red that I am trying to change - any idea how to do this? Thanks v much!!!! <script type="text/javascript"> var today=new Date() //Enter the occasion's MONTH (1-12) and DAY (1-31): var theoccasion=new Date(today.getFullYear(), 03, 21) //Customize text to show before and on occasion. Follow grammer below: var beforeOccasionText="until this event" var onOccasiontext="Event is Today!" var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec") theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion var one_day=1000*60*60*24 var calculatediff="" calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day)) if (calculatediff<0){ //if bday already passed var nextyeartoday=new Date() nextyeartoday.setFullYear(today.getFullYear()+1) calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff) } //Display message accordingly var pluraldayornot=(calculatediff==1)? "day" : "days" if (calculatediff>0) document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"</b>") else if (calculatediff==0) document.write("<b>"+onOccasiontext+" "+showdate+"!</b>") </script> I'm using javascript to change the color of certain words in an html document. Right now it uses <font> to make the change. I would like to use a CSS class named "alert" from an external style sheet to make the change. I've tried multiple things but no luck (className="alert", setClassName="alert" ) What is the correct way to replace the font part with a CSS class? Here is the working script: Code: <script type = "text/javascript">
window.onload = function (){
var text = document.getElementsByTagName('body')[0].innerHTML;
text = text.replace(/disabled/gi, "<font color=red>Disabled</font>" );
text = text.replace(/\blocked/gi, "<font color=red>Locked</font>" );
document.getElementsByTagName('body')[0].innerHTML = text;
}
</script>
|
|||||||