атрибут "id"

[web_finans]

Всем доброго времени суток.

Не получается разобраться в проблеме с атрибутом "id"

Line 41, Column 72: value of attribute "id" invalid: "1" cannot start a name

…ader">А</div><div class="content" id="1-content"><div class="text">Писатели на…

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

[sammasati]

Имя идентификатора не может начинаться с числа.

[web_finans]

Это я понимаю, но у меня их много, и все идут с одного стиля. Соответственно чтобы не было конфликта, я приписал значения в цифрах. Это можно как то обойти? Или может ставить цифры в конце идентификатора?

[sammasati]

Да, можно спокойно в конце добавлять, но не в начале. Имя идентификатора должно начинаться только с буквы.

[web_finans]

Да, можно спокойно в конце добавлять, но не в начале. Имя идентификатора должно начинаться только с буквы.

Благодарю за отзывчивость.

Спасибо.

И все же проблема осталась, а точнее появилась другая:

Таким код был до изменений, но валидацию не проходил:

<div class="header" id="1-header">А</div><div class="content" id="1-content"><div class="text">...</div></div>

<div class="header" id="2-header">Б</div><div class="content" id="2-content"><div class="text">...</div></div>

<div class="header" id="3-header">В</div><div class="content" id="3-content"><div class="text">...</div></div>

Такой код сейчас, но блоки теперь не открываются:

<div class="header" id="header-1">А</div><div class="content" id="content-1"><div class="text">...</div></div>

<div class="header" id="header-2">Б</div><div class="content" id="content-2"><div class="text">...</div></div>

<div class="header" id="header-3">В</div><div class="content" id="content-3"><div class="text">...</div></div>

Код CSS:

#slider {

width: 116px;

color: #fff;

font-family: Georgia;

font-size: 14px;

}

.header {

width: 110px;

height: 20px;

border: 2px solid #3F3F3F;

padding: 1px;

font-weight: bold;

margin-top: 2px;

cursor: pointer;

background: url(knopka2.jpg);

text-align: center;

}

.header:hover {

background: url(knopka3.jpg);

color: #B7B7B7;

}

.content {

overflow: hidden;

}

[Sensei]

скорей всего потому что идентификаторы используются js, вы их изменили, вот теперь блоки и не открываются. если я вас правильно понял.

[web_finans]

скорей всего потому что идентификаторы используются js, вы их изменили, вот теперь блоки и не открываются. если я вас правильно понял.

У меня тоже такая мысль (изначально была).

Попытался поиграть с файлом js, но безрезультатно, в силу того , что писал его не я (помогли).

Подскажите, в какую область лезть пожалуйста.

var array = new Array();

var speed = 10;

var timer = 10;

// Loop through all the divs in the slider parent div //

// Calculate seach content divs height and set it to a variable //

function slider(target,showfirst) {

var slider = document.getElementById(target);

var divs = slider.getElementsByTagName('div');

var divslength = divs.length;

for(i = 0; i < divslength; i++) {

var div = divs;

var divid = div.id;

if(divid.indexOf("header") != -1) {

div.onclick = new Function("processClick(this)");

} else if(divid.indexOf("content") != -1) {

var section = divid.replace('-content','');

array.push(section);

div.maxh = div.offsetHeight;

if(showfirst == 1 && i == 1) {

div.style.display = 'block';

} else {

div.style.display = 'none';

}

}

}

}

// Process the click - expand the selected content and collapse the others //

function processClick(div) {

var catlength = array.length;

for(i = 0; i < catlength; i++) {

var section = array;

var head = document.getElementById(section + '-header');

var cont = section + '-content';

var contdiv = document.getElementById(cont);

clearInterval(contdiv.timer);

if(head == div && contdiv.style.display == 'none') {

contdiv.style.height = '0px';

contdiv.style.display = 'block';

initSlide(cont,1);

} else if(contdiv.style.display == 'block') {

initSlide(cont,-1);

}

}

}

// Setup the variables and call the slide function //

function initSlide(id,dir) {

var cont = document.getElementById(id);

var maxh = cont.maxh;

cont.direction = dir;

cont.timer = setInterval("slide('" + id + "')", timer);

}

// Collapse or expand the div by incrementally changing the divs height and opacity //

function slide(id) {

var cont = document.getElementById(id);

var maxh = cont.maxh;

var currheight = cont.offsetHeight;

var dist;

if(cont.direction == 1) {

dist = (Math.round((maxh - currheight) / speed));

} else {

dist = (Math.round(currheight / speed));

}

if(dist <= 1) {

dist = 1;

}

cont.style.height = currheight + (dist * cont.direction) + 'px';

cont.style.opacity = currheight / cont.maxh;

cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';

if(currheight < 2 && cont.direction != 1) {

cont.style.display = 'none';

clearInterval(cont.timer);

} else if(currheight > (maxh - 2) && cont.direction == 1) {

clearInterval(cont.timer);

}

}

Копался тут var section = divid.replace('-content','');

и тут var head = document.getElementById(section + '-header');

Edited June 22, 2012 by web_finans

[Sensei]

Копался тут var section = divid.replace('-content','');

и тут var head = document.getElementById(section + '-header');

попробуйте заменить на 'content-' и 'header-'

[web_finans]

Копался тут var section = divid.replace('-content','');

и тут var head = document.getElementById(section + '-header');

попробуйте заменить на 'content-' и 'header-'

вот-вот.. менял уже..

[Sensei]

А в 17 строке меняли?

[mfred]

Ну вроде если поменять

var section = divid.replace('-content',''); на var section = divid.replace('content-','');

var cont = section + '-content'; на var cont = section + 'content-';

var head = document.getElementById(section + '-header'); на var head = document.getElementById(section + 'header-');

должно работать

[web_finans]

Ну вроде если поменять

var section = divid.replace('-content',''); на var section = divid.replace('content-','');

var cont = section + '-content'; на var cont = section + 'content-';

var head = document.getElementById(section + '-header'); на var head = document.getElementById(section + 'header-');

должно работать

да.. Пробовал с самого начала решения проблемы.

[mfred]

дайте полностью скрипт и страницу, помогу решить.

[web_finans]

дайте полностью скрипт и страницу, помогу решить.

Html страница

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

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

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

<body onload="slider('slider',0)">

<div id="slider">

<div class="header" id="header-1">А</div><div class="content" id="content-1"><div class="text">...</div></div>

<div class="header" id="header-2">Б</div><div class="content" id="content-2"><div class="text">...</div></div>

<div class="header" id="header-3">В</div><div class="content" id="content-3"><div class="text">...</div></div>

</div>

</body>

</html>

Скрипт js

var array = new Array();

var speed = 10;

var timer = 10;

// Loop through all the divs in the slider parent div //

// Calculate seach content divs height and set it to a variable //

function slider(target,showfirst) {

var slider = document.getElementById(target);

var divs = slider.getElementsByTagName('div');

var divslength = divs.length;

for(i = 0; i < divslength; i++) {

var div = divs;

var divid = div.id;

if(divid.indexOf("header") != -1) {

div.onclick = new Function("processClick(this)");

} else if(divid.indexOf("content") != -1) {

var section = divid.replace('-content','');

array.push(section);

div.maxh = div.offsetHeight;

if(showfirst == 1 && i == 1) {

div.style.display = 'block';

} else {

div.style.display = 'none';

}

}

}

}

// Process the click - expand the selected content and collapse the others //

function processClick(div) {

var catlength = array.length;

for(i = 0; i < catlength; i++) {

var section = array;

var head = document.getElementById(section + '-header');

var cont = section + '-content';

var contdiv = document.getElementById(cont);

clearInterval(contdiv.timer);

if(head == div && contdiv.style.display == 'none') {

contdiv.style.height = '0px';

contdiv.style.display = 'block';

initSlide(cont,1);

} else if(contdiv.style.display == 'block') {

initSlide(cont,-1);

}

}

}

// Setup the variables and call the slide function //

function initSlide(id,dir) {

var cont = document.getElementById(id);

var maxh = cont.maxh;

cont.direction = dir;

cont.timer = setInterval("slide('" + id + "')", timer);

}

// Collapse or expand the div by incrementally changing the divs height and opacity //

function slide(id) {

var cont = document.getElementById(id);

var maxh = cont.maxh;

var currheight = cont.offsetHeight;

var dist;

if(cont.direction == 1) {

dist = (Math.round((maxh - currheight) / speed));

} else {

dist = (Math.round(currheight / speed));

}

if(dist <= 1) {

dist = 1;

}

cont.style.height = currheight + (dist * cont.direction) + 'px';

cont.style.opacity = currheight / cont.maxh;

cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';

if(currheight < 2 && cont.direction != 1) {

cont.style.display = 'none';

clearInterval(cont.timer);

} else if(currheight > (maxh - 2) && cont.direction == 1) {

clearInterval(cont.timer);

}

}

Стили CSS

#slider {

width: 116px;

color: #fff;

font-family: Georgia;

font-size: 14px;

}

.header {

width: 110px;

height: 20px;

border: 2px solid #3F3F3F;

padding: 1px;

font-weight: bold;

margin-top: 2px;

cursor: pointer;

background: url(knopka2.jpg);

text-align: center;

}

.header:hover {

background: url(knopka3.jpg);

color: #B7B7B7;

}

.content {

overflow: hidden;

}

.text {

width: 200px;

border: 2px solid #3F3F3F;

border-top: none;

padding: 15px;

text-align: left;

background: #7F7F7F;

}

Edited June 22, 2012 by web_finans

[Sensei]

Если нужен аккордеон, то на jQuery можно так сделать http://jsfiddle.net/sensei/5prPz/1/

[mfred]

работает

var array = new Array();
var speed = 10;
var timer = 10;

// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
function slider(target,showfirst) {
var slider = document.getElementById(target);
var divs = slider.getElementsByTagName('div');
var divslength = divs.length;
for(i = 0; i < divslength; i++) {
var div = divs[i];
var divid = div.id;
if(divid.indexOf("header") != -1) {
div.onclick = new Function("processClick(this)");
} else if(divid.indexOf("content") != -1) {
var section = divid.replace('content-','');
array.push(section);
div.maxh = div.offsetHeight;
if(showfirst == 1 && i == 1) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
}
}

// Process the click - expand the selected content and collapse the others //
function processClick(div) {
var catlength = array.length;
for(i = 0; i < catlength; i++) {
var section = array[i];
var head = document.getElementById('header-' + section);
var cont = 'content-' + section;
var contdiv = document.getElementById(cont);
clearInterval(contdiv.timer);
if(head == div && contdiv.style.display == 'none') {
contdiv.style.height = '0px';
contdiv.style.display = 'block';
initSlide(cont,1);
} else if(contdiv.style.display == 'block') {
initSlide(cont,-1);
}
}
}

// Setup the variables and call the slide function //
function initSlide(id,dir) {
var cont = document.getElementById(id);
var maxh = cont.maxh;
cont.direction = dir;
cont.timer = setInterval("slide('" + id + "')", timer);
}

// Collapse or expand the div by incrementally changing the divs height and opacity //
function slide(id) {
var cont = document.getElementById(id);
var maxh = cont.maxh;
var currheight = cont.offsetHeight;
var dist;
if(cont.direction == 1) {
dist = (Math.round((maxh - currheight) / speed));
} else {
dist = (Math.round(currheight / speed));
}
if(dist <= 1) {
dist = 1;
}
cont.style.height = currheight + (dist * cont.direction) + 'px';
cont.style.opacity = currheight / cont.maxh;
cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
if(currheight < 2 && cont.direction != 1) {
cont.style.display = 'none';
clearInterval(cont.timer);
} else if(currheight > (maxh - 2) && cont.direction == 1) {
clearInterval(cont.timer);
}
}

[web_finans]

работает

var array = new Array();
var speed = 10;
var timer = 10;

// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
function slider(target,showfirst) {
var slider = document.getElementById(target);
var divs = slider.getElementsByTagName('div');
var divslength = divs.length;
for(i = 0; i < divslength; i++) {
var div = divs[i];
var divid = div.id;
if(divid.indexOf("header") != -1) {
div.onclick = new Function("processClick(this)");
} else if(divid.indexOf("content") != -1) {
var section = divid.replace('content-','');
array.push(section);
div.maxh = div.offsetHeight;
if(showfirst == 1 && i == 1) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
}
}

// Process the click - expand the selected content and collapse the others //
function processClick(div) {
var catlength = array.length;
for(i = 0; i < catlength; i++) {
var section = array[i];
var head = document.getElementById('header-' + section);
var cont = 'content-' + section;
var contdiv = document.getElementById(cont);
clearInterval(contdiv.timer);
if(head == div && contdiv.style.display == 'none') {
contdiv.style.height = '0px';
contdiv.style.display = 'block';
initSlide(cont,1);
} else if(contdiv.style.display == 'block') {
initSlide(cont,-1);
}
}
}

// Setup the variables and call the slide function //
function initSlide(id,dir) {
var cont = document.getElementById(id);
var maxh = cont.maxh;
cont.direction = dir;
cont.timer = setInterval("slide('" + id + "')", timer);
}

// Collapse or expand the div by incrementally changing the divs height and opacity //
function slide(id) {
var cont = document.getElementById(id);
var maxh = cont.maxh;
var currheight = cont.offsetHeight;
var dist;
if(cont.direction == 1) {
dist = (Math.round((maxh - currheight) / speed));
} else {
dist = (Math.round(currheight / speed));
}
if(dist <= 1) {
dist = 1;
}
cont.style.height = currheight + (dist * cont.direction) + 'px';
cont.style.opacity = currheight / cont.maxh;
cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
if(currheight < 2 && cont.direction != 1) {
cont.style.display = 'none';
clearInterval(cont.timer);
} else if(currheight > (maxh - 2) && cont.direction == 1) {
clearInterval(cont.timer);
}
}

Спасибо огромное. Нашел ошибки.