html

Rick · 02-07-2009, 12:13 AM

In making web sites I prefer to be 100% compliant with CSS and HTML rules as set forth by w3c.

One thing I always have hated about web design is the best way to make sure your design will retain its looks no matter what resolution the browser is using.

The normal ways people do this is either by designing the site in fluid(stretches) or fixed.

I have never been a huge proponent of either, as the both really can have flaws.

So I have been working on doing it a different way, through javascript.

Code:

function alertSize() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth  ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth  ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  if(myWidth <= 1024)
  {
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.media = 'Screen';
    cssNode.href = 'bvstyle.css';
    cssNode.title = 'dynamicLoadedSheet';
    document.getElementsByTagName("head")[0].appendChild(cssNode);
  }
  else if(myWidth > 1024)
  {
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = 'bvstyle2.css';
    cssNode.media = 'screen';
    cssNode.title = 'dynamicLoadedSheet';
    document.getElementsByTagName("head")[0].appendChild(cssNode);
  }
}
alertSize();

Essentially what I have going there is when the page is loaded it goes to the script and decides what resolution it is and loads the appropriate stylesheet that is designed just for that resolution.

Everything is fine but it is not 100% compliant.

In order to capture whenever the user resizes thier screen so that it may adjust itself to the appropriate sheet I use the <body onresize="alertSize()">

the new standards from w3c does not seem to support this.

Anyone know of a compliant code that does the same thing as the resize?

Rick · 02-07-2009, 12:51 AM

actually i got it working by adding window.onresize = alertSize; to thr front of my javascript file and removing the onresize from the body tag making it

Code:

window.onresize = alertSize;

function alertSize() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth  ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth  ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  if(myWidth <= 1024)
  {
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.media = 'Screen';
    cssNode.href = 'bvstyle.css';
    cssNode.title = 'dynamicLoadedSheet';
    document.getElementsByTagName("head")[0].appendChild(cssNode);
	alert("1024");
  }
  else if(myWidth > 1024)
  {
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = 'bvstyle2.css';
    cssNode.media = 'screen';
    cssNode.title = 'dynamicLoadedSheet';
    document.getElementsByTagName("head")[0].appendChild(cssNode);
	alert("more than 1024");
  }
}
alertSize();

That works fine.

When I have those alerts in there though when the page is loaded it fires the event twice. Any thoughts on why it passes through the code 2 times?

i am still a little new to javascript.

Rick · 02-07-2009, 01:13 AM

I think I see why it is being triggered twice.

When it intially hits the script it says ok load the function alertsize.

When it detects that the window has been resized it does it again so on a resize it makes it go through twice.

I think this wont be a big deal since when live I wont have the alerts in place.

Anyone have any better ideas on how to manage this?

studbucket · 02-07-2009, 08:40 AM

No clue, but I find this interesting, thanks!

I'm always scared of depending on JS heavily, but this is pretty slick.

Thnikkaman · 03-16-2009, 11:36 AM

Is the page content static or dynamic? My javascript is very poor, but this is very interesting. Web development was always frustrating for me since I spent too much time getting the events I wanted in the right order. That is why I wanted a job in embeded development.

Rick · 03-16-2009, 05:47 PM

I havent worked on this in a little bit, plan to again soon but have had some health stuff pop up that i am focusing on right now.

Shouldn't matter if static or dynamic web page.

If dynamic loading it will still load in a predetermined block that gets its size off the css page that is picked through the javascript.

Day1BroncoFan · 03-16-2009, 06:58 PM

What if you create a variable that can be seen outside of the function. When it loads the function have it set -1 (true) into the function and check that value before it loads the second time. If it equals that value then skip the function and reset the value back to 0 (false).

I don't know if that would work or not but it's a suggestion.

Rick · 04-05-2009, 04:08 PM

Originally Posted by studbucket

No clue, but I find this interesting, thanks!

I'm always scared of depending on JS heavily, but this is pretty slick.

Why don't you like depending on java script?

Too many people disabling javascript on thier machines?

I have modified my code a little.

Taking a bit of code I found on making slide shows I have edited to load all the images on my page via javascript as well.

I will post the code when I have it completed.

What this will allow me to do is not only load the right css page depending on the users resolution but also load appropriate sized images too.

So no stretching or pushing together images, just load the right image designed exactly for that resolution.

studbucket · 04-05-2009, 04:58 PM

Originally Posted by Rick

Why don't you like depending on java script?

Too many people disabling javascript on thier machines?

A little bit of that, a little bit of loading time issues, a little of bit it not being as slick in some cases (like menus, CSS menus are much nicer than JS).

Just a few reasons, I use it here and there but I try to use backend code, CSS, etc before using JS.

Rick · 04-05-2009, 06:07 PM

I dont think you can set images in css though can you?

As in in the java script I am working on I will choose one size of the image for this res and have a different sized logo for another.

Certainly I could have it shring or strecth but that can distort it.

can css assign a src file location for a loading image?

studbucket · 04-05-2009, 08:53 PM

Originally Posted by Rick

I dont think you can set images in css though can you?

As in in the java script I am working on I will choose one size of the image for this res and have a different sized logo for another.

Certainly I could have it shring or strecth but that can distort it.

can css assign a src file location for a loading image?

I don't know if it can, with what you are doing, it certainly makes sense to use JS, and it's probably necessary here. I know that CSS/HTML can use some relative stuff to 'dynamically' size stuff, but images are a whole 'nother problem. I've also used it to make IE-specific stylesheets.

I am not sure if there are any options other than what you are doing, and I think you've done a good job.

Rick · 04-21-2009, 04:59 PM

I am actually doing a combo now of both CSS and javascript depending on the images I need but said i would post the javascript code for loading the images so here is an example:

Code:

<script type="text/javascript">
function show()
{
	var images = ['header.jpg','left.gif','rup.jpg','rb.jpg'];
	var head = document.getElementById("header");
	headIndex = images[0];
	head.src = headIndex;
	var lBottom = document.getElementById("lb");
	lbIndex = images[1];
	lBottom.src = lbIndex;
	var rUpper = document.getElementById("ru");
	ruIndex = images[2];
	rUpper.src = ruIndex;
	var rBottom = document.getElementById("rb");
	rbIndex = images[3];
	rBottom.src = rbIndex;
}
</script>

And the html example to call it:

Code:

<body onload="show()">
<img id="header" src=""/>
<img id="lb" src=""/>
<img id="ru" src=""/>
<img id="rb" src=""/>
</body>

Now in the javascript I posted much earlier if you are using this depending on the users browser size you would essentially place identicle code in each part of your if/else depending on the size.

The picture going in the array would change for each if/else beauce you are looking to load the properly sized image exactly for that resolution but the IDS WOULD STAY THE SAME.

This allows for the html to load the proper image, and the proper one will be sent each time because the java will send the one that matches your resolution.

The html code for functionality doesnt actually need the src="" as that is set in the javascript but I have it in there beacuse it does not pass web standards without it being in there so just toss it in and forget it.

Hope this helps any other nut like me

Thread: html

Thread Tools

Display

html/javascript

The Following User High Fived Rick For This Post:

The Following User High Fived Rick For This Post:

The Following User High Fived Rick For This Post:

The Following User High Fived Rick For This Post:

Thread Information

Users Browsing this Thread

Similar Threads

http://850koa.com/main.html

Posting Permissions