Få screen.width från en extern javascriptsfil

26 april, 2011

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

27 april, 2011

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

4 oktober, 2011

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

4 oktober, 2011

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>

12 oktober, 2011

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>

12 oktober, 2011

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

13 oktober, 2011

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>

13 oktober, 2011

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

14 oktober, 2011

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>

14 oktober, 2011

byt

box.parentNode.appendChild( newp );

till

box.appendChild( newp );

Få screen.width från en extern javascriptsfil

Rekommendera Poster

Posidon_2

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Posidon_2

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Posidon_2

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Posidon_2

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Posidon_2

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 0 Medlemmar, 0 anonym, 5 gäster (Visa hela listan)

Populära medlemmar

Publika meddelanden

Senaste som Tittar

Senaste inlägg

Forum

Aktivitet

pcforalla.se