Jump to content

code check: javascript to call pages...

- - - - -
Started by Injury, Dec 30 2010 09:24 AM

This topic has been archived. This means that you cannot reply to this topic.
9 replies to this topic

#1
Injury
Posted 30 December 2010 - 09:24 AM

Injury

    Newbie

  • Members
  • PipPip
  • 19 posts
Hello! I intend to update this as questions pop up...I'd really appreciate any help! I think the code looks right, but I need everyone's help to make sure!

The Idea (step by step):

user enters site (onLoad)
loads default.css page
the file "main.js" function setScreen(); finds the screen settings
the file "main.js" setStyle(); finds the browser
the file "main.js" loadCSS(filename); then calls the appropriate "*.css" file. (ie if the browser is iE then it would load "ieWidescreen.css" or "ieStandard.css"
user then interacts with site.

---
The Code:
(index.html):
<!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>

<link href="/css/main.css" type="text/css" media="all" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css" media="all">

@import url('./css/default/default.css');

</style>

<!-- load external .js file -->

<script type="text/javascript" src="/main.js"></script>

<!--[if IE><link href="/css/ie/default.css" type="text/css" media="all" /><![endif]-->

<title>Plaid Apple Studios</title>

	</head>

<!-- This is the structure of the page -->

	<body id="mainBody">

	<div id="header1">- Plaid Apple Studios -</div>

<span id="menu1">Menu</span>

<!-- This is content for the page -->

<span id="contentOverlay1"></span>

<span id="contentBG">text</span>

	<div id="valid" align="center"><p><img src="http://www.w3.org/Icons/valid-xhtml10" height="31" width="88" alt="img" />

<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></p>

		</div>

	</body>

</html>
(main.js):
<!--

//Find monitor settings

var screenWidth = screen.width;

var screenHeight = screen.width;

var screenAvailWidth = screen.availWidth;

var screenAvailHeight = screen. availHeight;

//Find browser settings

var browserName = navigator.appCodeName;

var browserVer = navigator.version;

var browserPlat = navigator.platform;

var userAgent = navigator.userAgent;

//setup dimensions

if (screenWidth <= 1024)

{

	if(screenHeight <= 768)

	//screen resolution is standard

	document.write("standard!");

}

else if (screenWidth <= 1280)

{

	if (screenHeight <=1024)

	//screen resolution is widescreen

	document.write("Widescreen!");

}

//call proper pages

//load either widescreen IE.css or stanard IE.css

//if not IE then main.css and main.js. IE will not have Javascript

//support beyond parsing the broswer's info and screen info.

// -->

Thank you all for your time! I'm going to continue coding other parts as this is reviewed, and hopefully update this question with another...

Thank you again!
:thumbup:

Edited by Injury, 07 January 2011 - 08:50 AM.
More info!

#2
Injury
Posted 01 January 2011 - 10:18 PM

Injury

    Newbie

  • Members
  • PipPip
  • 19 posts
*bump*
Also, have I called main.js right? will any of this work by calling main.js to index.html? how would this work otherwise?

Thanks again

#3
Alexander
Posted 02 January 2011 - 06:39 AM

Alexander

    It's Science!

  • Moderators
  • 4,124 posts
Yes, including the JS file allows global access to the HTML file that includes it. Your script looks alright, although the widescreen check should look at aspect ratio (width / height = being more than 1.25 (4:3)) to be more accurate.
Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#4
Injury
Posted 03 January 2011 - 05:45 PM

Injury

    Newbie

  • Members
  • PipPip
  • 19 posts
I've moved this all to my workbed portion of my site. Now if you could be so kind as to clue me into the secret of JS and CSS dynamic loading...I'd be very grateful!

My thoughts on the concept are:

HTML loads main.js and default.css, standard files that define the layout and the variables that attain a value after the page has loaded.

In the head of the HTML file, two functions are called from main.js, resolution(screenResolution=0)[0 is standard and 1 is widescreen].

The second function called is cssStyle(browserName). It will find the browser name, passed through main.js. Based on the resolution() function and the browser name value passed through main.js, the page will load the proper style sheets.

I don't understand how to do this onLoad. Do I put it in the head, or the body? What?

Show me the way! :D:D:D:D:D

#5
Alexander
Posted 03 January 2011 - 06:31 PM

Alexander

    It's Science!

  • Moderators
  • 4,124 posts
Body is the body content of the HTML, so I would put it there:
<body onLoad="cssStyle();">

Including a JS file, basically is the same thing as pasting the whole JS function in <head>, so you can access cssStyle() anywhere for example. It is just a way to separate JS logic from HTML.
Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#6
Injury
Posted 06 January 2011 - 06:07 AM

Injury

    Newbie

  • Members
  • PipPip
  • 19 posts
Ok, so now my question is: why does javascript not have the ability to call a .css file? I've looked around, and it seems like you have to reassign classes and individual rules. We can't just use a function in the main.js file to call a full .css file when the <body onLoad="cssStyle();"> is parsed?

Am I lost on some convention? All the examples to change styles involved links and buttons, I just want it to sort everything out before the first page's content is loaded.

Read main.js (find browser and screen)
send .css style to the front end based on main.js

thanks again for all your help! Rep++

#7
Alexander
Posted 06 January 2011 - 01:38 PM

Alexander

    It's Science!

  • Moderators
  • 4,124 posts
Hi, JS and CSS both are client-side scripts handled by the browser, so they should work modifying eachother, try an example here:
function loadcssfile(filename){
  var fileref = document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);

  if (typeof fileref != "undefined") {
    document.getElementsByTagName("head")[0].appendChild(fileref);
  }
}
And in pseudocode you can call it like this:
if(screentype == "widescreen") {
    loadcssfile("/stylesheets/widescreen.css");
}
That will essentially append the stylesheet HTML link, based on what you pass to the function. You can tell it to load whichever you want, and when the page loads (via onLoad) it will choose the appropriate one based on your JS code!

Hope that makes sense! Feel free to post your full codes and we could show you examples if you have trouble.
Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#8
Injury
Posted 07 January 2011 - 07:34 AM

Injury

    Newbie

  • Members
  • PipPip
  • 19 posts
Yes, this is 100% clear now! you can use javascript to create functions that pass values that refer to HTML elements. its just creating the attributes as objects to be modified via js scripts! awesome! :D:D:D

I will share my code once I get a good workbed established! I'm working on it as we speak!

Thanks again! This has been a great help and its your fault!

#9
BlaineSch
Posted 07 January 2011 - 07:38 AM

BlaineSch

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 2,448 posts
You should actually put the default in there, and just edit it once you figure out what they are. If they have javascript disabled and you try to append it they won't see any stylesheet.

Browser detection is not really a good theory on making websites work. What if they are using a browser you are not familiar with? The mobile javascript does not send a screen width?
Google - I'm Feeling Lucky | Youtube Classes! | BlaineSch's Project Blog

Posted Image

#10
Injury
Posted 07 January 2011 - 08:08 AM

Injury

    Newbie

  • Members
  • PipPip
  • 19 posts
So just load one file, append it based on the browser and spit it out? I was trying to avoid a lot of style manipulating and just calling the stylesheet with rules set for that browser. I'm mainly concerned about IE/FF/Chrome at this point.

As for the mobile thing, wouldn't xml cover that? thats another challenge altogether!

You know WAY better than me, so please show me the way! :D

Thanks again :)

the code as of now:
index.html

<head>

<!--

<script type="text/javascript" language="javascript" src="./js/main.js">\

</script>

-->

<link rel="stylesheet" href="..//workbed/css/default/default.css">

<style type="text/css" media="screen"></style>

</head>

<!-- This is the structure of the page -->

<body onLoad="main();" id="mainBody">

</body>

</html>
main.js

//find browser

function main(){

	screenSet();

	//Screen Settings

function screenSet(){ //edit screen settings in each broswer

	function setRes(screen.Height,screen.Width){ //Finds resolution

		if(screen.Height/screen.Width>1.3){ //if screen is widescreen

			var screenType == "widescreen"; //set to widescreen

		if(navigator.appName == "Microsoft Internet Explorer"){ // if broswer is IE

			loadCSS("/stylesheets/ieWidescreen.css"); // load ieWideScreen via loadCSS function

			}//end if(broswer == IE)

			else{//if it's not IE, load mainWidescreen

				loadCSS("/css/main/mainWidescreen.css");

			}//end else not IE widescreen

		}//end widescreen

	if(screenType == "normal"){ //if not widescreen

		if(navigator.appName = "Microsoft Internet Explorer"){ //and is IE

			loadCSS("/stylesheets/ieStandard.css");	//load IE standard

			} //end if IE standard

		else{ //if not IE...

			loadCSS("/css/main/mainStandard.css"); //load IE standard	

		}//end else

	}//end if normal

} // end setScreen();


function setStyle(objectID,style,newStyle){ // set new .css file styles

var object = document.getElementByID(objectID); //create object to pass values

object.style[styleName] = newStyle; //when you assign a new rule in HTML, it passed here

//<span event/action=setStyle(class,style,value);">content to be changed</span>

} // end function

function loadCSS(filename){ // or load a whole new stylesheet

//creates fileref, references the link element

var fileref = document.createElement("link"); 

 //creates the attributes of fireref with rel,stylesheet

fileref.setAttribute("rel", "stylesheet");

 //type(object), text/css(value)

fileref.setAttribute("type", "text/css");

//and the locations of the file and it's value, filename

fileref.setAttribute("href", filename); 

if (typeof fileref != "undefined"){ 

[COLOR="red"]//dont know[/COLOR]

document.getElementsByTagName("head")[0].appendChild(fileref);

[COLOR="red"] // dont know[/COLOR]

		}

	}

}

Edited by Injury, 07 January 2011 - 08:47 AM.
updated info

Back to Website Design




  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → Website Design
IPB skins by Skinbox