Just nu i M3-nätverket
Jump to content

Få screen.width från en extern javascriptsfil


Posidon_2

Recommended Posts

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 5 months later...

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!

 

 

 

 

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

  • 2 weeks later...

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>



Link to comment
Share on other sites

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 ..."

Link to comment
Share on other sites

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>


Link to comment
Share on other sites

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");

Link to comment
Share on other sites

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>


Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...