Kolla om javascript är aktiverat

[rumbleinthejungles]

Hur gör man det?

 

Jag har tre javascriptmenyer. När man klickar på en menyrubrik, fälls menyn ut, klickar man på den igen, fälls menyn in.

Detta fungerar ju inte om man "disablar" javascript. Jag trodde därför i min enfald att jag kunde skriva på följande sätt:

 

<script type="text/javascript">

 

BLA BLA BLA

</script>

<noscript>Alternativ text för webbläsare som inte kör javascript</noscript>

 

Det borde fungera, men gör det inte. Jag har testat med IE och FF, stängt av javascript, laddat om sidan. Menyn fungerar givetvis inte, men jag får heller inte upp den ersättningstext som ligger mellan <noscript> och</noscript>.

Någon som vet bättre?

 

En möjlighet är ju att man kollar om javascript är aktiverat och sedan använder en serie if-satser för att få det att fungera. Hur gör man något sådant med javascript?

[inlägget ändrat 2009-04-13 19:00:08 av rumbleinthejungles]

[Jonas__B]

En möjlighet är ju att man kollar om javascript är aktiverat och sedan använder en serie if-satser för att få det att fungera. Hur gör man något sådant med javascript?

Och noscript-taggen(och dess innehåll) göms inte med css eller liknande?

 

Det skall fungera så som du beskriver. Har du någon länk att visa?

 

[rumbleinthejungles]

Tack för ditt svar. Jag fick det att fungera. En mindre miss av mig.

 

Nu står jag inför ett annat problem. Jag vill kunna ändra teckensnittsstorleken i textstycken med en knapptryckning. Jag får det att fungerar om jag ger varje textstycke ett id, men så kan man ju inte arbeta. Istället har jag testat

getElementsByTagName(), men vet inte hur jag använder denna finess.

Jag testade med följande utan framgång:

 

var x =document.getElementsByTagName("p").style.fontSize;

if (x=="12px"){

document.getElementsByTagName("p").style.fontSize="14px";

 

Om jag istället använder id, fungerar det bra. Tips emottages tacksamt!

 

[Jonas__B]

Du kanske måste loopa igenom alla elementen för att sätta style.

 

Är det verkligen bara stycken som du skall ändra storleken på och inte allt?

Om du hade använt em eller % som font-storlek hade du kunnat ändra standardstorleken på body bara så följer allt efter.

 

[rumbleinthejungles]

Jag vill bara ändra storleken på textstycken, dvs <p>. Loopa har jag testat tidigare och det fungerar, men jag vill göra lite mer. Så här ser det ut:

 

function oka(){

var textstycke = document.getElementsByTagName("p");

for(i = 0; i < textstycke.length; i++){

textstycke.style.fontSize = '26px';

}

}

 

Detta ökar textstorleken från faktisk storlek till 26px. Jag vill smyga in en if-sats som först kontrollerar den faktiska storleken innan den ökas till 26px eller något annat värde. På detta sätt vill jag kunna styra storleksförändringen. Det jag undrar över är hur man gör denna kontroll.

Jag gissar att man använder document.getElementsByTagName("p"), men på vilket sätt?

 

[Jonas__B]

Om man kan göra det skulle man göra så här. Jag har inte testat själv, bör tilläggas.

 

function oka(){
var textstycke = document.getElementsByTagName("p");
for(i = 0; i < textstycke.length; i++){
[color="#ff0000"]if(textstycke[i].style.fontSize =='12px') [/color]textstycke[i].style.fontSize = '26px';
}
}

 

[inlägget ändrat 2009-04-15 15:04:49 av Jonas_Bo]

[rumbleinthejungles]

Jag ändrade till följande, men det fungerar inte:

 

function oka(){

var textstycke = document.getElementsByTagName("p");

for(i = 0; i < textstycke.length; i++){

if(textstycke.style.fontSize =='12px'){

textstycke.style.fontSize = '26px';

}

}

}

 

Det är if-satsen som det är fel på.

[inlägget ändrat 2009-04-15 15:17:20 av rumbleinthejungles]

[Anjuna Moon]

Jag ändrade till följande, men det fungerar inte

För att det exemplet ska fungera måste font-storleken sättas inline i P-taggarna och inte via stylesheet.

 

[rumbleinthejungles]

Aj då, det får jag dessvärre inte göra... Finns det ingen nåd?

 

[Anjuna Moon]

Du kan ju ändra klassen för P-taggarna. Skapa en klass-selektor för 12px och en för 16px och sedan kontrollerar du className på taggarna. Matchar detta din 12px-klass ändrar du className till 16px-klassen.

 

Det beror ju lite på hur du gjort i stilmallen

 

[Jonas__B]

stylesheet-switcher?!

 

[rumbleinthejungles]

Men Classname är väl inte jättekompatibelt bakåt?

 

[rumbleinthejungles]

Jag skall ha en sådan också, dock inte för detta problem. :-)

 

[Anjuna Moon]

Något sånt här tänkte jag mig:

 

<html><head><style>
.P12px {
font-size:12px;
}
.P16px {
font-size:16px;
}
</style>
<script>
function oka(){
var textstycke = document.getElementsByTagName("p");
for(i = 0; i < textstycke.length; i++)
{
	if(textstycke[i].className =='P12px')
	{
		textstycke[i].className = 'P16px';
	}
}
}
</script>
</head>
<body>
<p class="P12px">TEST</p>
<input type="button" value="Förstora" onclick="oka();">
</body></html>

 

[Jonas__B]

fast imo kan väl .P12 skippas då det är satt i stilmallen och bara lägga till/ta bort .p16px-klassen?!

 

Tänker jag fel?

 

Edit: fast det är nog bra om man inte skall förstora allt. vet inte vad författaren tänkte. /edit

[inlägget ändrat 2009-04-15 15:36:32 av Jonas_Bo]

[Anjuna Moon]

Men Classname är väl inte jättekompatibelt bakåt?

Jodå, längre tillbaka än du behöver oroa dig över iallafall (HTML 4.0/CSS1.0)

Om du hittar någon browser som inte fixar det får du gärna tipsa om det.

 

[rumbleinthejungles]

Jag förstår. Men det innebär ju att jag måste märka mängder av textstycken som <p class="P12px"> för att det skall fungera. Det hade varit smidigt om man bara hade kunnat lägga till stylesheeten.

 

[inlägget ändrat 2009-04-15 15:36:29 av rumbleinthejungles]

[Anjuna Moon]

fast imo kan väl .P12 skippas då det är satt i stilmallen och bara lägga till/ta bort .p16px-klassen?!

Inte säker på vad du menar. Tanken med 12-klassen var för att tillåta kontrollen av om stilen har 12px. Hur tänkte du annars kontrollera detta?

 

[Anjuna Moon]

Men det innebär ju att jag måste märka mängder av textstycken som <p class="P12px"> för att det skall fungera. Det hade varit smidigt om man bara hade kunnat lägga till stylesheeten.

Jag hänger nog inte med här. Om du inte redan har klasser satta innebär det väl att ALLA P-taggar har samma stil satt. Vadan då if-satskontrollen?

Eller använder du arvs-selektorer i stilmallen?

 

[inlägget ändrat 2009-04-15 15:38:28 av Anjuna Moon]

[rumbleinthejungles]

Jo, men säg att jag har en rubrik och tio textstycken och vill ändra storleken på texten:

 

<h3>RUBRIK</h3>

 

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

<p class="P12px"> Textstycke</p>

 

Jag måste ju lägga till formateringsanvisningen inline och det är ju lite oekonomiskt.

 

[Jonas__B]

if(!stycken.className=='P16px') stycken.className='P16px';

 

 

Här hittade jag ett annat tillvägagångssätt

http://www.javascriptkit.com/script/script2/doctextresizer.shtml

 

[Anjuna Moon]

På något sätt måste du ändå särskilja dessa tio P-taggar från övriga P-taggar i dokumentet, så någon form av identifiering kommer du bli tvungen att göra i vilket fall. Dock skulle du ju kunna lägga dem inom ex. en DIV-tagg och ändra loopen till följande:

 

<html><head><style>
P {
font-size:12px;
}
</style>
<script>
function oka(){
var textstycke = document.getElementById("PTaggar").getElementsByTagName("p");
for(i = 0; i < textstycke.length; i++)
{
	textstycke[i].style.fontSize="16px";
}
}
</script>
</head>
<body>
<div id="PTaggar">
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
</div>
<input type="button" value="Förstora" onclick="oka();">
</body></html>

 

[rumbleinthejungles]

Poängen är att textstycken skall alltid se likadana ut, men att man med en knapp skall kunna ändra textstorleken på <p></p>. All css skall placeras i en separat fil. Det fungerar om man storleksdeklarerar inline. Man kan använda en loop för att ändra storleken, men jag vill också kontrollera den faktiska storleken innan jag bestämmer till vilken storlek texten skall ändras till. jag har laborerat med id-satsen instoppade i loopen, men de vill inte fungera.

Något i denna stil:

 

function oka(){

var textstycke = document.getElementById("PTaggar").getElementsByTagName("p");

for(i = 0; i < textstycke.length; i++)

{

if(textstycke.style.fontSize=="12px"){

textstycke.style.fontSize="16px";

}

}

}

[inlägget ändrat 2009-04-15 15:55:26 av rumbleinthejungles]

[Jonas__B]

Jag testade lite lokalt och det gick fint

man kan särskilja genom att definiera förälderdivven, lämpligtvis

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Detta är rubriken på sidan </title>
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <script type="text/javascript">
window.onload = function(){
	document.getElementById("bigger").onclick = function(){
		var paragraphs = document.getElementsByTagName("p");
		for (i=0;i<paragraphs.length;i++ )
		{
			paragraphs[i].className="bigger";
		}
		return false;
	}
	document.getElementById("biggest").onclick = function(){
		var paragraphs = document.getElementsByTagName("p");
		for (i=0;i<paragraphs.length;i++ )
		{
			paragraphs[i].className="biggest";
		}
		return false;
	}
	document.getElementById("normal").onclick = function(){
		var paragraphs = document.getElementsByTagName("p");
		for (i=0;i<paragraphs.length;i++ )
		{
			paragraphs[i].className="";
		}
		return false;
	}
}
 </script>
 <style type="text/css">
body{ font: normal  100%/1.5 Arial, sans-serif; 	}
.content {
	width:40em;
}
p {font-size: 75%;}
.content p.bigger {font-size: 100%;}
.content p.biggest {font-size: 125%;}
 </style>
</head>
<body>
 <h1>Detta är rubriken på sidan</h1>
 <div>
<a href="#" id="normal">Normal size</a> 
<a href="#" id="bigger">Bigger</a> 
<a href="#" id="biggest">biggest</a> </div>
 <p>Detta är också ett stycke, men påverkas inte</p>
<div class="content">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros sem, vehicula nec, imperdiet vel, commodo ac, dolor. Ut non quam ac odio sodales congue. Fusce bibendum erat quis augue dictum imperdiet. Mauris non magna. Nam augue sapien, malesuada nec, ullamcorper in, iaculis quis, sem. Donec mattis. In pulvinar urna interdum diam. Donec eu mauris eget nibh ornare rutrum. Duis tincidunt odio vitae metus. Aenean felis. Aenean facilisis iaculis erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin imperdiet. Donec iaculis, augue sit amet pellentesque mollis, tellus dolor mattis lorem, eu rutrum est felis nec nibh. Curabitur egestas dapibus lorem. Praesent ipsum. Suspendisse adipiscing. Curabitur lacus mi, imperdiet tristique, luctus nec, sollicitudin sed, ipsum. Nullam pharetra consectetur nunc. Fusce velit lacus, tincidunt at, semper a, tempus at, turpis.</p>
 <p>Etiam faucibus nisi ut risus. In hac habitasse platea dictumst. Etiam turpis. Morbi viverra nulla vel est. Cras quam. Vivamus at augue nec ante dictum ultrices. Fusce hendrerit pede sit amet justo. Quisque sit amet metus. Nam vehicula ullamcorper leo. Donec tortor magna, porta quis, lacinia nec, sollicitudin ac, tellus. Cras id sem sed ipsum convallis mollis. Sed pede. Phasellus est neque, porttitor eget, tempus id, euismod sed, leo. In dictum. Suspendisse diam mauris, tincidunt ac, facilisis at, tristique sit amet, nulla. Nullam dictum sapien vel nibh commodo gravida. </p>
 <h2>Andra rubriken</h2>
 <p>Donec dignissim nulla at nibh. Vivamus sed mauris. Nunc nec metus nec turpis pharetra adipiscing. Suspendisse mi erat, dapibus sit amet, viverra vel, ullamcorper eu, felis. In nec justo quis leo eleifend sollicitudin. Praesent vitae erat eget metus gravida ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

 <p>Vestibulum feugiat purus sed enim. Nullam pulvinar justo at dui. Vestibulum eget urna. Pellentesque non velit. Nullam fringilla. Quisque pulvinar auctor odio. Etiam sollicitudin porta turpis. Morbi facilisis. Morbi a eros. Donec ante pede, consectetur eu, pharetra non, vehicula et, velit. </p><p>Quisque rutrum, velit in sodales ultrices, odio enim vulputate justo, eu fermentum libero mi vitae nisi. Aliquam faucibus mi nec urna. Morbi imperdiet nisl in lacus. Nunc malesuada egestas libero. Integer lobortis elit et est. Aenean magna nibh, ultrices sit amet, ornare in, mollis sit amet, dolor. Proin nulla ante, pharetra porttitor, viverra a, blandit a, ipsum. </p><p>Vestibulum eget elit. Maecenas scelerisque, nisl nec suscipit malesuada, massa sem ultrices mi, eu luctus lacus quam vitae sem. Etiam vitae odio. Pellentesque tempus rutrum quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae enim eget purus pellentesque pharetra. </p><p>Ut vitae arcu. Phasellus ut lectus. In hac habitasse platea dictumst. Vivamus iaculis adipiscing metus. Nunc eget urna vel quam hendrerit feugiat. Cras feugiat, neque eu scelerisque eleifend, felis nibh luctus velit, sit amet commodo orci pede vitae turpis. Sed sed libero. Etiam aliquam varius diam. Aenean ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus nulla a sapien auctor mattis. </p><p>Nulla ac eros. Curabitur purus magna, sodales congue, viverra ac, posuere nec, velit. Morbi ante mi, consectetur ut, imperdiet a, ornare in, ipsum. Proin sit amet mauris. Nam commodo lorem tincidunt elit. In hac habitasse platea dictumst. Maecenas purus. Vestibulum ligula lorem, posuere in, varius ut, malesuada sit amet, purus. Proin elementum lacus ac risus. Vivamus velit. In rutrum justo id tortor.</p> 
 </div>
</body>
</html>

 

[rumbleinthejungles]

Tack, jag skall grunna på din idé. Jag har fått för mig att jag skall ha ne knapp som ändrar storleken, men man kan ju ha tre... :-)