Другие языки программирования и технологии
Нужен скрипт, позволяющий определить разрешение экрана и, в зависимости от него, загрузить определённый файл стиля.
К примеру, если x<=1024 тогда подгружаем style1.css, иначе style2.css. Так же буду признателен, если кто подскажет неплохой сайт-учебник java script, на подобие html и css http://www.htmlbook.ru. Заранее спасибо.
вообще-то странная задача. при чем тут разрешение экрана? - размер окна браузера не зависит от разрешения экрана. у тех, кто использует разрешение > 1600 вообще редко бывает развернуто окно на весь экран.
далее. подгрузили стиль. человек изменил размер окна браузера. что делать? загружать стиль опять?
к тому же, полезный размер окна у всех может быть разный - боковые панели браузера, размеры скроллбара и обрамления - во всех браузерах это все по разному.
делается по-другому. не стиль грузится, а ставится функция джаваскрипт, которая определяет размер окна и соответствующим образом меняет размеры у нужных элементов.
с учетом того, что джаваскрипт может быть выключен, основной стиль должен вполне приемлемо работать при разных размерах экрана.
скрипт, определяющий размер окна - т. е. как раз то, что нужно - http://webew .ru/articles/152.webew ( пробел перед .ru убрать )
все размеры - размеры страницы, окна, позиция скроллов:
function getPageSize(){
var xScroll,yScroll,yScrPos,xScrPos;
yScrPos=0;
xScrPos=0;
if (document.body && typeof document.body.scrollTop != 'undefined') {
yScrPos+= document.body.scrollTop;
xScrPos+= document.body.scrollLeft;
if(document.body.parentNode && typeof document.body.parentNode.scrollTop!= 'undefined'){
yScrPos+= document.body.parentNode.scrollTop;
xScrPos+= document.body.parentNode.scrollLeft;
}
}else if (typeof window.pageXOffset != 'undefined'){
yScrPos+= window.pageYOffset;
xScrPos+= window.pageXOffset;
}
if(window.innerHeight && window.scrollMaxY){
xScroll=document.width;
yScroll=window.innerHeight+window.scrollMaxY;
}else if(document.body.scrollHeight>document.body.offsetHeight){ // all but Explorer Mac
xScroll=document.body.scrollWidth;
yScroll=document.body.scrollHeight;
}else if(document.documentElement && document.documentElement.scrollHeight>document.documentElement.offsetHeight){ // Explorer 6 strict mode
xScroll=document.documentElement.scrollWidth;
yScroll=document.documentElement.scrollHeight;
}else{ // Explorer Mac...would also work in Mozilla and Safari
xScroll=document.body.offsetWidth;
yScroll=document.body.offsetHeight;
}
var windowWidth, windowHeight;
if(self.innerHeight){ // all except Explorer
windowWidth=self.innerWidth;
windowHeight=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientHeight){ // Explorer 6 Strict Mode
windowWidth=document.documentElement.clientWidth;
windowHeight=document.documentElement.clientHeight;
}else if(document.body){ // other Explorers
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll<windowHeight){
pageHeight=windowHeight;
}else{
pageHeight=yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll<windowWidth){
pageWidth=windowWidth;
}else{
pageWidth=xScroll;
}
return [pageWidth,pageHeight,windowWidth,windowHeight,xScrPos,yScrPos];
}
обе функции запускать по window.onload и window.onresize
htmlbook не учебник, а справочник. справочник по джаваскрипт - https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference
там же - справочник DOM - https://developer.mozilla.org/en/DOM
пользуй поиск по сайту для быстрого доступа к отдельным функциям / элементам
для упрощения работы правильнее пользоваться библиотеками JavaScript - например jQuery - там уже есть нужные функции и работа с элементами / стилями значительно проще.
далее. подгрузили стиль. человек изменил размер окна браузера. что делать? загружать стиль опять?
к тому же, полезный размер окна у всех может быть разный - боковые панели браузера, размеры скроллбара и обрамления - во всех браузерах это все по разному.
делается по-другому. не стиль грузится, а ставится функция джаваскрипт, которая определяет размер окна и соответствующим образом меняет размеры у нужных элементов.
с учетом того, что джаваскрипт может быть выключен, основной стиль должен вполне приемлемо работать при разных размерах экрана.
скрипт, определяющий размер окна - т. е. как раз то, что нужно - http://webew .ru/articles/152.webew ( пробел перед .ru убрать )
все размеры - размеры страницы, окна, позиция скроллов:
function getPageSize(){
var xScroll,yScroll,yScrPos,xScrPos;
yScrPos=0;
xScrPos=0;
if (document.body && typeof document.body.scrollTop != 'undefined') {
yScrPos+= document.body.scrollTop;
xScrPos+= document.body.scrollLeft;
if(document.body.parentNode && typeof document.body.parentNode.scrollTop!= 'undefined'){
yScrPos+= document.body.parentNode.scrollTop;
xScrPos+= document.body.parentNode.scrollLeft;
}
}else if (typeof window.pageXOffset != 'undefined'){
yScrPos+= window.pageYOffset;
xScrPos+= window.pageXOffset;
}
if(window.innerHeight && window.scrollMaxY){
xScroll=document.width;
yScroll=window.innerHeight+window.scrollMaxY;
}else if(document.body.scrollHeight>document.body.offsetHeight){ // all but Explorer Mac
xScroll=document.body.scrollWidth;
yScroll=document.body.scrollHeight;
}else if(document.documentElement && document.documentElement.scrollHeight>document.documentElement.offsetHeight){ // Explorer 6 strict mode
xScroll=document.documentElement.scrollWidth;
yScroll=document.documentElement.scrollHeight;
}else{ // Explorer Mac...would also work in Mozilla and Safari
xScroll=document.body.offsetWidth;
yScroll=document.body.offsetHeight;
}
var windowWidth, windowHeight;
if(self.innerHeight){ // all except Explorer
windowWidth=self.innerWidth;
windowHeight=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientHeight){ // Explorer 6 Strict Mode
windowWidth=document.documentElement.clientWidth;
windowHeight=document.documentElement.clientHeight;
}else if(document.body){ // other Explorers
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll<windowHeight){
pageHeight=windowHeight;
}else{
pageHeight=yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll<windowWidth){
pageWidth=windowWidth;
}else{
pageWidth=xScroll;
}
return [pageWidth,pageHeight,windowWidth,windowHeight,xScrPos,yScrPos];
}
обе функции запускать по window.onload и window.onresize
htmlbook не учебник, а справочник. справочник по джаваскрипт - https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference
там же - справочник DOM - https://developer.mozilla.org/en/DOM
пользуй поиск по сайту для быстрого доступа к отдельным функциям / элементам
для упрощения работы правильнее пользоваться библиотеками JavaScript - например jQuery - там уже есть нужные функции и работа с элементами / стилями значительно проще.
Похожие вопросы
- На каком разрешении экрана лучше записывать содержимое экрана с помощью Camtasia Studio? (см. внутри)
- Как сделать шапку сайта, что-бы при меньшем разрешении экрана её размер подгонялся под экран?
- не понимаю что значит разрешения экрана в дисплеях.
- Здравствуйте. Нужен скрипт который в блокноте напишет вот так:
- Нужен скрипт, бинд, прога, макрос, хоткей. Что угодно. Помогите, пожалуйста, очень нужно.
- Подскажите почему Паскаль не делает нужного расчета и выводит на экран просто S вместо его значения? Как это исправить?
- У нас стало очень большое разрешение экрана...
- Php!? Нужен скрипт подсчета пользователей(онлайн) чата!?
- Как заблокировать определённые файлы на компьютере?
- Подскажите, профи! Как в иллюстраторе определить разрешение импортируемой картинки???