JavaScript - Screen

Hi friends,
I have a dropdown menu,when i select one item from the dropdown menu,i want a checkbox to be created on the screen.How do i achieve this?

Thank You
Madhusudan

Ok. My first fish is swimming across the screen perfectly fine. He starts from the left side and goes to the right side.
But for the second fish, he is on the right side and he won't swim to the left side.
How do I get him to start swimming? Then he will stop after the interval of 80 reaches like the left one and then start over from the left to the right.
Here is my code:

Code:

		var fish1Position = 0;
		var fish2Position = 0;
		
		horizontal = new Array(80);
		var fillPosition = 10;
		for(var i = 0; i < 80; ++i) {
				horizontal[i] = fillPosition;
				fillPosition += 10;
		}
		
		horizontal2 = new Array(80);
		var fillPosition2 = 10;
		for(var i2 = 80; i2 > 0; i2--) {
			horizontal2[i2] = fillPosition2;
			fillPosition2 = fillPosition2 - 10;
			alert(fillPosition2);
		}
		
		function fish1Swim() {
				document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
				++fish1Position;
				if (fish1Position == 79)
						fish1Position = 0;
		}
		function fish2Swim() {
			document.getElementById("fish2").style.right = horizontal2[fish2Position] + "px";
			++fish2Position;
			if (fish2Position = 79)
				fish2Position = 0;
		}
		function startSwimming() {
				setInterval("fish1Swim()",100);
				setInterval("fish2Swim()",100);
		}

I am using this javascript code to detect screen size and display an alternate css.

Code:

if (screen.width<1600)
{
 document.write('<link rel="stylesheet" href="<?php echo $path ?>/css/templateadjust.css" type="text/css" />');
}

This works fine in FF and Chrome but doesn't seem to work in IE. Any idea why?

Hi Guys,

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat

else

background = #000000

THANKS A MILLION!

Hi there

I know this picture_viewr js is a fullscreen slide

Would it be possible to set a screen size (700x500 e.g.) and then set a background color or the part that would be outside this window???


Thx a lot
allberto


http://www.alfaaudiovisual.com/pictu...er/ByB/ByB.htm

Hi,

I want a link on my website where when you press it, it print screens. somthing like,

<a href=printscrn();">Print Screen</a>

anyone any ideas?
Simon

Hi nerds,

We have some problems with some javascript code.
We are creating a new button like the ones known from addthis/sharethis and would like the same behavior as there popups.

We have tried by putting together some different scripts, and the action is about right. We do still have one problem, and that is the position of the popup.
If the button is placed at the right site of a website, it floats out of the screen, making scrollbars. Also it don't have same position behavior in Firefox, IE, Opera ...

The button can be seen he http://www.langthis.com

The code related to this problem should bed this:
Code:

function move_box(an, box)
{
    var cleft = 0;
    var ctop = 0;
    var obj = an;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }

	var winW = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
	var winH = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
	
	if (cleft+box.offsetWidth > winW) {
		cleft = cleft - box.offsetWidth - 30;
		if (cleft < 3)	
			cleft = -3;
	}
	

    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;

    // Handle Internet Explorer body margins,
    // which affect normal document, but not
    // absolute-positioned stuff.
    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(document.body.currentStyle['marginTop']);
    }

	if (ctop+box.offsetHeight > winH) {
		ctop = ctop - box.offsetHeight - 20;
		if (ctop < 3)
			ctop = -3;
	}

    box.style.top = ctop + 'px';
}

If someone would be interested in rewriting the script, we would credit this in our about page. Else we would be thankful if someone just could help with the existing code.

Best regards
Langthis team

I have been using wz_tooltip and have a big tooltip that needs to be opened at the top of the screen, not by the cursor in order to be read. What do I add to the script to do this?
Thanks, Wina

I wish to create an applett, which i am working on, Though I want to know if there is any way to:

1) Take screenshots of entire web page
2) Take screenshots of a certian part of the web page selected by the user with a Rectangle tool
3) Take screenshots of a certian part of the web page selected by the user with a FreeForm tool

Im not asking for a full code or anything, But I just wish to know in what way could i go about this?

Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz.



Code:

<html>
<head>
<title>Image Mover</title>

<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">


function Start() {

var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650);  //Ending Location - left
var dest_y = 500;   //Ending Location - top
var interval = 10; //Move 10px every initialization
	moveImage();

}

function NewDest() {

var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650);  //Ending Location - left
var dest_y = 500;   //Ending Location - top
var interval = 10; //Move 10px every initialization
	moveImage();
}


function moveImage() {
	//Keep on moving the image till the target is achieved
	if(x < dest_x) x = x + interval; 
	if(y < dest_y) y = y + interval;
	
	//Move the image to the new location
	document.getElementById("ufo").style.top  = y+'px';
	document.getElementById("ufo").style.left = x+'px';

	if ((x+interval < dest_x) && (y+interval < dest_y)) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		window.setTimeout('moveImage()',30);
	
	if (x == dest_x) && (y == dest_y) {
		NewDest();
		}
		
			





}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>

</body>
</html>

Good day,

This program is supposed to have a "box" cover the entire screen and then collapse upon opening the page...

I cannot find what is wrong, other than the obvious error that there is no object or it is null, but this is the example the book gave...

Anyone care to give me a point in the right direction

Thanks, in advance.

ao5431

<code>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Boxed In</title>
<link rel="stylesheet" href="js_styles.css" type="text/css" />
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */

var clipSpeed = 5;
var clipRight = 0;
var clipLeft = 0;
var clipTop = 0;
var boxSize;
var stopShrinking;
var clipBottom = 0;
var clipBox;
var clipBox = document.getElementById("box").style;

function startShrinking() {
if(navigator.appName == "Microsoft Internet Explorer") {
boxSize = document.documentElement.clientWidth / document.documentElement.clientHeight;
clipRight = document.documentElement.clientWidth;
clipBox.width = clipRight + "px";
clipBottom = document.documentElement.clientHeight;
clipBox.height=clipBottom + "px";
}
else {
boxToShrink = window.innerWidth/window.innerHeigth;
clipRight = window.innerWidth;
clipBox.width = clipRight + "px";
clipBottom = window.innerHeight;
clipBox.height = clipBottom + "px"
}
stopShrinkingInterval("shrinkBox()", 100);
}

function shrinkBox() {
if(navigator.appName == "Microsoft Internet Explorer")
minBoxSize=document.documentElement.clientWidth/2;
else
minBoxSize = window.innerWidth/2;
if (clipLeft > minBoxSize) {
clearInterval(stopShrinking);
clipBox.display = "none";
}
clipBox.clip = "rect(" + clipTop + "px" + clipRight + "px" + clipBottom + "px" + clipLeft + "px)"
clipLeft += boxSize * clipSpeed;
clipTop += clipSpeed;
clipRight -= boxSize * clipSpeed;
clipBottom -= clipSpeed;
}


/* ]]> */
</script>
</head>
<body onload="startShrinking()" >

<div id="box" style="position:absolute; background-color:blue"></div>

</body>
</html>

</code>

Hi there.

I'm considering using the script below to detect the screen resolution of the user and then call a specific CSS for that user. The main aim is so that I can design the website at a fixed width for a larger resolution (used by most people), but if the user has a 980px resoltion then they can be catered for as well.

Code:

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
 window.location="highres.html";
}
else
{
  window.location="lowres.html";
}
//-->
</SCRIPT>

I don't want to use liquid layouts as I think it looks messy, and I don't want to design to a width of 960px as I don't like the blank space at the sides on larger resolutions.

Is this an acceptable method, or do you think i'll run into problems?

Any advice would be great.

Cheers.
Pat.

Hi Everyone, I have just inherited a website which has a javascript menu tab and picture fader on the home page. This moves through 6 states changing a menu tab and main picture beneath to make it look like you're flicking through the menu yourself.
This works perfectly, apart from the fact that every time the picture changes the page flicks back to the top. Very annoying if you have scrolled down are reading things at the bottom of the page!!

The page uses jquery-1.2.3.pack.js. I am a PHP man just starting to learn Javascript and don't understand why it is doing this, can anyone help ???

The Relevant Code is:
Code:

<script>
		var scurrent_tab='tab1';
		var scurrent_click_tab='';
		
		var arTabsMain = new Array
		(
			"tab1",
			"tab2",
			"tab3",
			"tab4",
			"tab5",
			"tab6",
			"bottomtab"
		);
		
		function ChangeMainPictureClick(s)
		{
			bStopAutoLoad = true;
			ChangeMainPicture(s);
		}
		
		function ChangeMainPicture(s)
		{
			scurrent_click_tab = s;
			$("#tabs_content_container").fadeOut("slow", 
				function() 
				{
					$("#tabs_content_container").html($('#tabs_content_container_'+scurrent_click_tab).html()).fadeIn("slow");
				} 
			);
			
			$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');
			$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');
			$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');
			$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');
			$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');
			$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');
			
			$('#main_tab_'+s+'_img').attr('src','images/tab_'+s+'_on.jpg');
			scurrent_tab = s;
		}
		$('#main_tab_tab1').hover
		(
			function(){$('#main_tab_tab1_img').attr('src','images/tab_tab1_on.jpg');},
			function(){if(scurrent_tab=='tab1')return;$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');}
		);
		$('#main_tab_tab2').hover
		(
			function(){$('#main_tab_tab2_img').attr('src','images/tab_tab2_on.jpg');},
			function(){if(scurrent_tab=='tab2')return;$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');}
		);
		$('#main_tab_tab4').hover
		(
			function(){$('#main_tab_tab4_img').attr('src','images/tab_tab4_on.jpg');},
			function(){if(scurrent_tab=='tab4')return;$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');}
		);
		$('#main_tab_tab3').hover
		(
			function(){$('#main_tab_tab3_img').attr('src','images/tab_tab3_on.jpg');},
			function(){if(scurrent_tab=='tab3')return;$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');}
		);
		$('#main_tab_tab6').hover
		(
			function(){$('#main_tab_tab6_img').attr('src','images/tab_tab6_on.jpg');},
			function(){if(scurrent_tab=='tab6')return;$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');}
		);
		$('#main_tab_tab5').hover
		(
			function(){$('#main_tab_tab5_img').attr('src','images/tab_tab5_on.jpg');},
			function(){if(scurrent_tab=='tab5')return;$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');}
		);

		function AutoLoadTopic()
		{
			if(bStopAutoLoad) 
			{
				window.setTimeout(function() {AutoLoadTopic();}, 8000);
				return true;
			} 
			
			iCurrentSlide++;
			if(iCurrentSlide >= arTabsMain.length-1)
				iCurrentSlide = 0;
			
			ChangeMainPicture(arTabsMain[iCurrentSlide]);
			window.setTimeout(function() {AutoLoadTopic();}, 8000);
		}
		var bStopAutoLoad = false;
		var iCurrentSlide = 0;
		window.setTimeout(function() {AutoLoadTopic();}, 8000);
	</script>
	
	
	//   ######
	
	
	
	<script>
		$('#button_start_bottomtab').hover
		(
			function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic_on.gif');},
			function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic.gif');}
		);
	</script>

The code 'works' as in there are no issues in its functionality, I just want it work in a better way.

Any help or ideas would be greatly appreciated.

I am new to Javascripting but am teaching myself and have written this script from my portfolio site in an effort to detect the users screen resolution so that my art is viewed properly. I have ran the code through a debugger and it has comback as "free of errors" but when I run the webpage on my local machine it does nothing, the page displays as if I had written nothing and due to my limited knowledge of Javascript I am at a loss and hoping for someone to say, "look you screwed this part up fix this and it's good to go"... I'm hoping. Thank You all in advance..

Here is the code

Code:

<script language="Javascript">
			function detect(){
                if(screen.width<1280||screen.height<720){
                    alert("This web page is best viewed with a screen resolution of 1280 by 720 or higher.  Your current resolution is "+screen.width+" by "+screen.height+".  If possible please change your resolution.")
            }
            else{
                alert("Whoa, you have a high resolution.  Nice Job!")
            }
        }
</script>

I have this script:

Code:

<SCRIPT language="JavaScript">
<!--
// small
if ((screen.width>=1024) && (screen.width<1280))
{
 window.location="0_framside/1_small/849x507.html";
}

// medium
else if ((screen.width>=1280) && (screen.width<1400))
{
 window.location="0_framside/2_medium/1105x507.html";
}

// large
else if ((screen.width>=1400) && (screen.width<1600))
{
 window.location="0_framside/3_large/1225x639.html";
}

// xlarge
else if ((screen.width>=1600) && (screen.width<1920))
{
 window.location="0_framside/4_xlarge/1425x789.html";
}

// manual
else
{
  window.location="resolution.html";
}
//-->
</SCRIPT>

See the page in action he http://www.kollalfa.com/temp_LesForMeg/index2.html

The problem?

On a computer with 1280x1024 resolution, IE detects it to be 1024 (thus sending the user to the wrong page). It works perfectly in all other browsers (that I have tried).

Any ideas? Thanks in advance!