JavaScript - Detect The Current Font Size ?

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?

I 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

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!

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

hey all

is there a code where I can detect if the browser is IE6 or IE7 and send them to another webpage?

my current design is not compatible with IE6 or 7 and i want to make a new page that's compatible.


thanks!

im totally new to javascript and i would like to know how i can make my internet page detect the resolution of someone's computer and on base of that use different 'html pages' so that the background fits etc.

I have been searching for a way to accomplish a unique task for a while. Here's the situation: We have several users who are in locations where YouTube is blocked for various reasons. On our homepage we would like to embed a YouTube video except for when YouTube is blocked and then embed an alternative video that is hosted off one of our servers. Is there a way to use JavaScript to detect whether or not YouTube is available and then put in the correct video?

Thanks in advance!

I am attempting to make an page on my website where visitors can set my website as their homepage. I am trying to make my website read which browser my visitors are using and then redirects them to the page for the right browser where I can tell them how they can set my website as their homepage.
Basically I need exactly the same thing as THIS. Could you explain to me in plain English how I can realize this.
This is what I know have:

Code:

<table width="759" border="0" align="center" cellpadding="0" cellspacing="0" >
  <tr align="center">
    <td width="378" height="28" align="right">Selecteer jouw browser   </td>
    <td width="16"></td>
    <td width="365" align="left"><form id="browserSelection" name="browserSelection" action="customizeBrowser" method="GET"><select name="browser" size="1" id="browser" onchange="document.browserSelection.submit();"><option value="ff" selected>Firefox</option><option value="ie">Internet Explorer</option><option value="chrome">Chrome</option><option value="opera">Opera</option><option value="safari">Safari</option></select></form></td>
  </tr>
</table>

________________________________________

Please tell me if I make any English mistakes in my posts. I am trying to write as perfectly possible.

I really want to learn a way determine whether custom fonts via @font-face got downloaded by the client machine and then set styles differently depending on whether they got the fonts or not.

To start I could run a fonts-inactive.css file to setup the styles to look nice without custom-fonts (this is the base style which should look fine without any JS, flash, custom fonts, etc.).

Then run a JS that will run the font-face-rules.css (which attempts to load the fonts via @font-face css rules) - this way if JS isn't active then no fonts will be loaded and the document will default to its fonts-inactive.css.

If the JS does run then font-face-rules.css will try to send the fonts. So the JS needs to somehow determine whether the fonts worked or not.

If the fonts worked then the JS would run the fonts-active.css which would alter some style rules to make the page look better with the custom fonts (since we know they got the fonts we can tweak the page a little to look better with them).

If the fonts didn't work then the JS needs to not run the fonts-active.css and instead just exit out leaving the document with its original, unaltered rules from fonts-inactive.css. (since we know they didn't get the fonts we leave them with the baseline stylesheet which optimizes the appearance for default fonts).

Sadly I don't know the first thing about Javascript so I am hoping that you guys might be able to help me come up with something that works.

Cheers,
line

Hi,
I am currently detecting for Shockwave within IE by doing the following:
Code:

var isInstalled = false;  
if (window.ActiveXObject) {  
    var control = null;  
    try {  
        control = new ActiveXObject('SWCtl.SWCtl');  
    } catch (e) {  
        return;  
    }  
    if (control) {  
        isInstalled = true;  
    }  
}

This works as expected and if it fails to detect Shockwave I tell the user to install Shockwave.
The problem comes when AcitveX is disabled as it still returns the same message that it's not installed. I would prefer to be able to include an extra step to detect if ActiveX is disabled, in which case I can tell the user to enable it rather than giving them false advice.

My only idea would be to detect for an ActiveX Object that every IE user should have installed.

Any ideas on what that ActiveX Object could be or any ideas on how I could tackle this problem are greatly appreciated.

Thanks

Hi all,i'm wondering how to detect select option changes.For example i want the data in database changed when i click on update button and if there are changes on the select option side.If the values on the select option are not changed,i can't update the data..Is there a way to achieve it?Thanks a lot...

i have a problem. i want to check that whether an element with a specific id exist on page or not. example
Code:

 
<script type="text/javascript">
function bgcolo()
{

if(document.getElementById("jj") == null) 
{
return red;
}
else
{
return green;
}
}

</script>
</head>

<body>
<table width="100%" border="1">
  <tr>
    <td id="oo" bgcolor="return bgcolo();">bvbv</td>
  </tr>
</table>
<div id="jj">fggftrytyyyyyyyyy</div>
</body><

Hi all,

The code I am working on uses the idea of detecting mime type support, to see if the add-on is there. Then if the mime type is not supported, it assumes, the add-on is not installed. (No other add-ons have this mime type.)

However, there is a problem, if someone disables the add-on, the there is no mime type handler in navigator.mimeTypes['the/MimeType'].

Is there some way to detect if an add-on is installed, and also if the add-on is enabled?

Thanks,
Grae