Få screen.width från en extern javascriptsfil

Sida 1 av 1

Du kan inte starta en ny tråd
Du kan inte svara i tråden

#1
Posidon_2

Användare

Grupp: Medlemmar
Inlägg: 39
Gick med: 2006-11-02

Skrivet 27 apr 2011, 00:32

Hej

ställer ytterligare en nybörjarfråga här så ni får ursäkta mig.

Det är så att jag har en extern javascriptsfil och vill skriva ut skärmens bredd i mitt html-dokument men vet inte riktit hur jag ska gå tillväga.

Min HTML-fil ser ut som följande

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <div>
            Fönstrets namn: <span id="v01"></span>
            <p></p>
            Fönstrets default statusmeddelande:      <span id="v02"></span>
            <p></p>
            Fönstrets statusmeddelande:      <span id="v03"></span>
            <p></p>
            Fönstrets öppnare:
            <input type="button" value="Klicka på mig" onclick="openWin()" />
            <p></p>
            Fönstrets förälder:
            <input type="button" value="Klicka på mig" onclick="openParent()" />
            <p></p>
            Fönstrets topnivåförälder:
            <input type="button" onclick="check()" value="Top eller ej?" />
            <p></p>
            Fönstret är stängt:
                   <input type="button" value="Har förstret som öpnades stängts?" onclick="checkWin()" />
            <div id="msg"></div>
            <p></p>
            Fönstrets bredd:      <span id="v04"></span>
        </div>
        
        
        <script type="text/javascript" src="windowname.js"></script>

    </body>
</html>

och det är just in i "v04" jag vill skriva ut skärmens bredd från min javascriptsfil som ser ut som följande (windowWidth är där jag vill skapa funktionen)

function windowname() 
{
var textNode = document.createTextNode("Hej");
document.getElementById("v01").appendChild(textNode);


}



function defaultstatus()
{

var txt = "Webbutveckling klientsidan";

var textNode = document.createTextNode(txt);
document.getElementById("v02").appendChild(textNode);
window.defaultStatus= (txt);
}



function status()
{
var txt = "Hej och valkommen";

var textNode = document.createTextNode(txt);
document.getElementById("v03").appendChild(textNode);
window.status= (txt);


}


function openWin()
 {
 myWindow=window.open('','','width=200,height=100');
 myWindow.document.write("Hej svej :)");
 myWindow.focus();

 }


function openParent()
 {
 window.open('','','width=200,height=100');
 alert(window.parent.location);
 }


function check()
 {
 if (window.top!=window.self) 
   {
   document.write("<p>Detta ar inte det oversta fonstret!</p>")
   }
 else
   { 
   document.write("<p>Detta ar det oversta fonstret!</p>")
   } 
 }


var myWindow;

function checkWin()
 {
 if (!myWindow)
   {
   document.getElementById("msg").innerHTML="Fonstret har aldrig oppnats!";
   }
   else
   {
   if (myWindow.closed)
     { 
     document.getElementById("msg").innerHTML="Fonstret har stangts!";
     }
   else
     {
     document.getElementById("msg").innerHTML="Fonstret har inte stangts!";
     }
   } 
 }


function windowWidth()
{




        
}



function init()
{
    windowname();
    defaultstatus();
    status();
    windowWidth();
}

window.onload = init;

Tacksam för all hjälp

Inlägget är redigerat av Posidon_2: 27 apr 2011, 00:33.

#2
Jonas__B

Stjärna

Grupp: Moderatorer
Inlägg: 4 080
Gick med: 2006-03-09
Ort:Göteborg

Skrivet 27 apr 2011, 07:22

function windowWidth()
{
var textNode = document.createTextNode("skärmens bredd: "+ screen.width );
document.getElementById("v01").appendChild(textNode);       
}

du skriver att du vill ha skärmens bredd i ditt inlägg, men i koden står det fönstrets bredd. Två skilda saker.

För att istället skriva ut fönstrets bredd använder du window.innerWidth istället för screen.width

Jonas :: Moderator - CD/DVD-bränning, Kameror, Print - om trycksaker samt Bildredigering.

Hjälpte jag dig, eller gillar du det jag skrev?!
Visa din uppskattning genom att klicka på Plus-ikonen till höger ----------------------------------------------------->>

#3
Posidon_2

Användare

Grupp: Medlemmar
Inlägg: 39
Gick med: 2006-11-02

Skrivet 04 okt 2011, 17:08

Tack så mycket för din hjälp

du får verkligen ursäkta min okunskap inom området. Jag försöker verkligen hitta svaren själv innan jag frågar!

Jag har ytterligare ett litet problem nu som jag stött. Det är att jag från min HTML-fil vill exekvera ett "alert-meddelande" så fort storleken på fönstret ändras från min externa .js fil

Så här ser HTML-koden ut

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="3.1.2.js">
           window.onResize = OnResizeDocument;

        </script>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

och så här ser .js filen ut

function OnResizeDocument ()
{
           window.alert ("The size of the window has been changed");
          
 }

Behövs det en eventlyssnare för det här eller är det redan inbyggt?

Tacksam för hjälpen!

Jonas__B, den 27 apr 2011, 07:22, sa:

function windowWidth()
{
var textNode = document.createTextNode("skärmens bredd: "+ screen.width );
document.getElementById("v01").appendChild(textNode);       
}

#4
Jonas__B

Stjärna

Grupp: Moderatorer
Inlägg: 4 080
Gick med: 2006-03-09
Ort:Göteborg

Skrivet 04 okt 2011, 17:25

Så länge som du definierar functionen innan den anropas funkar det. Prova att lägga window.onresize i egen script-tag så kanske det fungerar bättre.

<!-- Den översta är egentligen en extern js-fil -->
<script type="text/javascript">
	var _d = document.getElementById("result");
	function dothis()
	{
		var winW = 630, winH = 460;
		if (document.body && document.body.offsetWidth) {
		 winW = document.body.offsetWidth;
		 winH = document.body.offsetHeight;
		}
		if (document.compatMode=='CSS1Compat' &&
			document.documentElement &&
			document.documentElement.offsetWidth ) {
		 winW = document.documentElement.offsetWidth;
		 winH = document.documentElement.offsetHeight;
		}
		if (window.innerWidth && window.innerHeight) {
		 winW = window.innerWidth;
		 winH = window.innerHeight;
		}
		_d.innerHTML = winW + " x " + winH;
	}
  </script>	
  <script type="text/javascript">
	window.onresize = dothis;
  </script>

#5
Posidon_2

Användare

Grupp: Medlemmar
Inlägg: 39
Gick med: 2006-11-02

Skrivet 12 okt 2011, 17:59

Tack så mycket det löste sig

har dock en till fråga.

När man för muspekaren över texten "Hej och...." så lyckas jag få skriptet att skriva "hååå " men vill att det ska försvinna så fort man för bort muspekaren över "Hej och...."

Jag lyckas bara inte få det att fungera.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">


function mouseOver()
{
var newp = document.createElement("p");
var newtext = document.createTextNode("hååå ");
var para = document.getElementById("p1");
para.appendChild(newtext);

}


function mouseOut()
{
var para = document.getElementById("p1");
para.removeChild(newtext);
}

</script>

    </head>
    
    <body>
        <div>
            <p id="p1" onmouseover="mouseOver()" onmouseout="mouseOut()">Hej och....<br /></p>
        </div>
        
        <br />
    </body>
</html>

#6
Jonas__B

Stjärna

Grupp: Moderatorer
Inlägg: 4 080
Gick med: 2006-03-09
Ort:Göteborg

Skrivet 12 okt 2011, 21:39

Det går inte att göra så, utan texten måste in som ett element man kan ta bort(typ i en span) eller så får man ändra till ursprungstexten "Hej och ..."

#7
Posidon_2

Användare

Grupp: Medlemmar
Inlägg: 39
Gick med: 2006-11-02

Skrivet 13 okt 2011, 01:20

Jonas__B, den 12 okt 2011, 21:39, sa:

Det går inte att göra så, utan texten måste in som ett element man kan ta bort(typ i en span) eller så får man ändra till ursprungstexten "Hej och ..."

Har nu försökt ett tag men inte lyckas ändå inte få det att fungera. Har ändrat i koden så den ser ut som följande




<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">


function mouseOver()
{
var box = document.getElementById( "ac" );
var newp = document.createElement("p");
var msg = document.createTextNode( "hååååå" );
newp.appendChild( msg );
box.parentNode.appendChild( newp );
}


function mouseOut()
{
var box = document.getElementById( "ac" );
var boxpara = document.getElementById("p");
box.removeChild( boxpara);
}




</script>
    </head>
    
    <body>
        
        <div id="ac">
            
            <p id="p1" onmouseover="mouseOver()" onmouseout="mouseOut()">Hej och....<br /></p>
        </div>
        
    

        
    </body>
</html>

Inlägget är redigerat av Posidon_2: 13 okt 2011, 01:21.

#8
Jonas__B

Stjärna

Grupp: Moderatorer
Inlägg: 4 080
Gick med: 2006-03-09
Ort:Göteborg

Skrivet 13 okt 2011, 06:33

Du har inte lagt in ett id på det element som du lägger in,
typ

var newp = document.createElement("p");
p.id="nyId";

sedan
var boxpara = document.getElementById("nyId");

#9
Posidon_2

Användare

Grupp: Medlemmar
Inlägg: 39
Gick med: 2006-11-02

Skrivet 14 okt 2011, 12:44

Jonas__B, den 13 okt 2011, 06:33, sa:

Du har inte lagt in ett id på det element som du lägger in,
typ

var newp = document.createElement("p");
p.id="nyId";

sedan
var boxpara = document.getElementById("nyId");

Jag gjorde ett nytt försök på sättet du föreslog med lite modifiering men fick fortfarande inte "håååå" att försvinna. Koden ser nu ut som följande

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">


function mouseOver()
{
var box = document.getElementById( "ac" );
var newp = document.createElement("p");
newp.id="nyId";
var msg = document.createTextNode( "hååååå" );
newp.appendChild( msg );
box.parentNode.appendChild( newp );
}


function mouseOut()
{
var box = document.getElementById( "ac" );
var boxpara = document.getElementById("nyId");
box.removeChild( boxpara);
}




</script>
    </head>
    
    <body>
        
        <div id="ac">
            
            <p id="p1" onmouseover="mouseOver()" onmouseout="mouseOut()">Hej och....<br /></p>
        </div>
        
    

        
    </body>
</html>

Inlägget är redigerat av Posidon_2: 14 okt 2011, 13:21.

#10
Jonas__B

Stjärna

Grupp: Moderatorer
Inlägg: 4 080
Gick med: 2006-03-09
Ort:Göteborg

Skrivet 14 okt 2011, 15:38

byt

box.parentNode.appendChild( newp );

till

box.appendChild( newp );

Sida 1 av 1

Du kan inte starta en ny tråd
Du kan inte svara i tråden