Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2015, 19:34
Аспирант
Отправить личное сообщение для Нубопрогер Посмотреть профиль Найти все сообщения от Нубопрогер
 
Регистрация: 26.05.2014
Сообщений: 72

Как упростить этот код при использовании jquery ?
Собственно, вот код.
function onclicker(x) {
var content = document.getElementById('content');
var header = document.getElementById('header');
var prehed = document.getElementById('uppodheader');
if (x==1) {
prehed.style.visibility = "hidden";
content.style.width = "100%";
content.style.margin = "0";
header.style.width = "100%";
header.style.margin = "0";
header.style.height = "50px";
header.style.padding = "0";
header.style.borderRadius = "0px";
}

И вот так примерно он должен выглядеть.
Код:
$('div').click(function() {
$('#header').style(...);
}
Заранее спасибо за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2015, 21:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Вынеси стили из js в css файл, применяй их путем назначения css-класса и код станет коротким
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 15.02.2015, 07:05
Аспирант
Отправить личное сообщение для Нубопрогер Посмотреть профиль Найти все сообщения от Нубопрогер
 
Регистрация: 26.05.2014
Сообщений: 72

Неужто непонятно?
Эти стили применяются ПО КЛИКУ.
В ксс не получится подставить
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2015, 07:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Нубопрогер
Неужто непонятно?
Ну извини, я же нуб. Ничего не понимаю.

<style>
#uppodheader{
  background: red;
}
#content{
  width: 80%;
  margin: 0 auto;
  background: blue;
}
#header{
  height: 20px;
  border-radius: 10px;
  background: orange;
}

.layout2 #uppodheader{
    visibility: hidden;
}
.layout2 #content{
    width: 100%;
    margin: 0;
}
.layout2 #header{
    border-radius: 0;
    width: 100%;
    height: 50px;
}
</style>

<script>
function onclicker(x) {
    var content = document.getElementById('content');
    var header = document.getElementById('header');
    var prehed = document.getElementById('uppodheader');
    if (x==1) {
        document.body.classList.add('layout2');
    }
}
</script>

<div id="uppodheader">uppodheader</div>
<div id="header">header</div>
<div id="content">content</div>
<button onclick="onclicker(1)">Жми сюды</button>

classList не работает в старых браузерах, но это легко решается.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JQUERY - конфиликт функция при скроллинге alecto jQuery 7 13.11.2014 08:39
Отступ слева при использовании скрипта JQuery pro_moscow jQuery 1 12.08.2011 11:41
Как в jQuery разбить код на части? muravey jQuery 3 10.02.2011 12:05
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19
Подскажите плизз как можно упростить код frolvict Общие вопросы Javascript 19 08.04.2010 14:23