Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 21.03.2006 23:03

televizor
Новичок
Зарегистрирован: 21.03.2006
Сообщений: 10

доступ к дочерним элементам

Дано некое динамическое меню, которое по неизвестным мне причинам выглядит примерно так:

<span>Родительский элемент
<span>Дочерний элемент 1
<span>Дочерний элемент 1.1
<span>Дочерний элемент 1.1.1</span>
</span>
<span>Дочерний элемент 1.2</span>
</span>
<span>Дочерний элемент 2
<span>Дочерний элемент 2.1</span>
<span>Дочерний элемент 2.2</span>
<span>Дочерний элемент 2.n</span>
</span>
<span>Дочерний элемент n</span>
</span>
ну и так далее.
С помощью DOM пытаюсь сделать обычную вещь: если нажать на родительский элемент, то дочерние скрываются или наоборот раскрываются. Только хочется, чтобы раскрывались только прямые потомки, а потомки потомков оставались скрытыми, пока на их непосредственных родителей не ткнули. А этого пока не получается.
Скрипт у меня вот такой:

function chch(a){
var par=a.parentNode;
var spanNodes=par.getElementsByTagName("span");
    if(spanNodes[0].style.display=="none"){
        for(var i=0; i<spanNodes.length; i++){
        spanNodes[i].style.display = "block";
        }
    }
    else{
        for(var i=0; i<spanNodes.length; i++){
        spanNodes[i].style.display = "none";
        }
    }
}

извините, если вопрос идиотский, это мой первый опыт с DOM

Нет на форуме

 

#2 25.03.2006 01:55

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

вопрос не идеотский. я вот не могу на него ответить, могу лишь порекомендовать vbscript, если интересно, скажи, всё сделаю. кстати dom утяжеляет html-файл, так что не надо им злоупотреблять, если, например, в меню всего 20 элементов общей сложностью.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#3 26.03.2006 13:50

televizor
Новичок
Зарегистрирован: 21.03.2006
Сообщений: 10

Re: доступ к дочерним элементам

у меня в меню элементов очень много, потому и хочу все сворачивать-разворачивать

Отредактированно televizor (26.03.2006 15:55)

Нет на форуме

 

#4 26.03.2006 18:36

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

А меню из span'ов? Было бы удобней делать меню из маркированного списка, тогда бы и осуществить доступ к дочерним элементам было проще...

Нет на форуме

 

#5 26.03.2006 20:48

televizor
Новичок
Зарегистрирован: 21.03.2006
Сообщений: 10

Re: доступ к дочерним элементам

оно именно из спанов
но подскажите, что делать с маркированными списками - на будущее :-)

Нет на форуме

 

#6 26.03.2006 23:28

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

моё меню без скрипта выглядит где-то так:

Код:

<UL id="main_menu">
    
        <LI>
                
                    На главную
                
            
            <UL>
            <LI><A href="#news">Новости</A></LI>
        </UL>
    </LI>

        <LI>
            
                
                    Поиск
                
            
        <UL>
            <LI><A href="someHref">Карта сайта</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Новости
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Миротворческое
            
        <UL>
            <LI><A href="someHref">Конкурс фотографий</A></LI>
            <LI><A href="someHref">Конкурс идей</A></LI> 
            <LI>Проекты &plusmn;
                <UL>
                    <LI><A href="someHref">•Прошедшие</A></LI>
                    <LI><A href="someHref">•Осуществляющиеся</A></LI>
                    <LI><A href="someHref">•Будущие</A></LI>
                    <LI><A href="someHref">•Рецензии</A></LI>
                </UL>
            </LI>
        </UL>
    </LI>
    <LI>
                Наши проекты
            
        <UL>
            <LI><A href="someHref">Конкурс фотографий</A></LI>
            <LI><A href="someHref">Конкурс идей</A></LI> 
            <LI>Конкурс на лучший рассказ &plusmn;
                <UL>
                    <LI><A href="someHref">•Конкурс в Красноярске</A></LI>
                </UL>
            </LI>
        </UL>
    </LI>
    <LI>
                Креативные игры
            
        <UL>
            <LI><A href="someHref">Методология</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    <LI>
                Библиотека
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Тех. новинки
            
        <UL>
            <LI><A href="someHref">Технологии коммуникаций</A></LI>
            <LI><A href="someHref">Поисковые технологии</A></LI>
            <LI><A href="someHref">Базы данных</A></LI>
            <LI><A href="someHref">Другое</A></LI>
        </UL>
    </LI>
    
    <LI>
                Музыка
            
        <UL>
            <LI><A href="someHref"></A></LI>
            <LI><A href="someHref"></A></LI>
        </UL>
    </LI>
    
    <LI>
                Кино
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Фотографии
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Доноры
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Гранты
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Организации
            
        <UL>
            <LI><A href="someHref">В чем мы нуждаемся</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Консультации
            
        <UL>
            <LI><A href="someHref">Юридические</A></LI>
            <LI><A href="someHref">Медецинцкие</A></LI>
            <LI><A href="someHref">IT консультации</A></LI>
            <LI><A href="someHref">Переводческие услыги</A></LI>
            <LI><A href="someHref">Другое</A></LI>
        </UL>
    </LI>
    
    <LI>
                On-Line курсы
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Общение
            
        <UL>
            <LI><A href="someHref">Форум</A></LI>
            <LI><A href="someHref">Чат</A></LI>
        </UL>
    </LI>
    
    <LI>
                Newsletter
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Архив
        
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Календарь
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Реклама
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Обратная связь
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Информациия
            
        <UL>
            <LI><A href="someHref">Chapter 1</A></LI>
            <LI><A href="someHref">Chapter 2</A></LI>
        </UL>
    </LI>
    
    <LI>
                Links
            
        <UL>
            <LI><A href="someHref">Учебные заведения </A></LI>
            <LI><A href="someHref">Библиотеки</A></LI>
            <LI><A href="someHref">Миротворческие организации</A></LI>
            <LI><A href="someHref">Релевантные сайты</A></LI>
            <LI><A href="someHref">СМИ</A></LI>
            <LI><A href="someHref">Полезные ссылки</A></LI>
        </UL>
    </LI>
</UL>

Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#7 26.03.2006 23:43

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

+css и скрипт, разумеется:


jscript_


var openLists = [], oIcount = 0;
function compactMenu(oID,oAutoCol,oPlMn,oMinimalLink) {
    if( !document.getElementsByTagName || !document.childNodes || !document.createElement ) { return; }
    var baseElement = document.getElementById( oID ); if( !baseElement ) { return; }
    compactChildren( baseElement, 0, oID, oAutoCol, oPlMn, baseElement.tagName.toUpperCase(), oMinimalLink && oPlMn );
}
function compactChildren( oOb, oLev, oBsID, oCol, oPM, oT, oML ) {
    if( !oLev ) { oBsID = escape(oBsID); if( oCol ) { openLists[oBsID] = []; } }
    for( var x = 0, y = oOb.childNodes; x < y.length; x++ ) { if( y[x].tagName ) {
        //for each immediate LI child
        var theNextUL = y[x].getElementsByTagName( oT )[0];
        if( theNextUL ) {
            //collapse the first UL/OL child
            theNextUL.style.display = 'none';
            //create a link for expanding/collapsing
            var newLink = document.createElement('A');
            newLink.setAttribute( 'href', '#' );
            newLink.onclick = new Function( 'clickSmack(this,' + oLev + ',\'' + oBsID + '\',' + oCol + ',\'' + escape(oT) + '\');return false;' );
            //wrap everything upto the child U/OL in the link
            if( oML ) { var theHTML = ''; } else {
                var theT = y[x].innerHTML.toUpperCase().indexOf('<'+oT);
                var theA = y[x].innerHTML.toUpperCase().indexOf('<A');
                var theHTML = y[x].innerHTML.substr(0, ( theA + 1 && theA < theT ) ? theA : theT );
                while( !y[x].childNodes[0].tagName || ( y[x].childNodes[0].tagName.toUpperCase() != oT && y[x].childNodes[0].tagName.toUpperCase() != 'A' ) ) {
                    y[x].removeChild( y[x].childNodes[0] ); }
            }
            y[x].insertBefore(newLink,y[x].childNodes[0]);
            y[x].childNodes[0].innerHTML = oPM + theHTML.replace(/^\s*|\s*$/g,'');
            theNextUL.MWJuniqueID = oIcount++;
            compactChildren( theNextUL, oLev + 1, oBsID, oCol, oPM, oT, oML );
} } } }
function clickSmack( oThisOb, oLevel, oBsID, oCol, oT ) {
    if( oThisOb.blur ) { oThisOb.blur(); }
    oThisOb = oThisOb.parentNode.getElementsByTagName( unescape(oT) )[0];
    if( oCol ) {
        for( var x = openLists[oBsID].length - 1; x >= oLevel; x-=1 ) { if( openLists[oBsID][x] ) {
            openLists[oBsID][x].style.display = 'none'; if( oLevel != x ) { openLists[oBsID][x] = null; }
        } }
        if( oThisOb == openLists[oBsID][oLevel] ) { openLists[oBsID][oLevel] = null; }
        else { oThisOb.style.display = 'block'; openLists[oBsID][oLevel] = oThisOb; }
    } else { oThisOb.style.display = ( oThisOb.style.display == 'block' ) ? 'none' : 'block'; }
}
function stateToFromStr(oID,oFStr) {
    if( !document.getElementsByTagName || !document.childNodes || !document.createElement ) { return ''; }
    var baseElement = document.getElementById( oID ); if( !baseElement ) { return ''; }
    if( !oFStr && typeof(oFStr) != 'undefined' ) { return ''; } if( oFStr ) { oFStr = oFStr.split(':'); }
    for( var oStr = '', l = baseElement.getElementsByTagName(baseElement.tagName), x = 0; l[x]; x++ ) {
        if( oFStr && MWJisInTheArray( l[x].MWJuniqueID, oFStr ) && l[x].style.display == 'none' ) { l[x].parentNode.getElementsByTagName('a')[0].onclick(); }
        else if( l[x].style.display != 'none' ) { oStr += (oStr?':':'') + l[x].MWJuniqueID; }
    }
    return oStr;
}
function MWJisInTheArray(oNeed,oHay) { for( var i = 0; i < oHay.length; i++ ) { if( oNeed == oHay[i] ) { return true; } } return false; }
function selfLink(oRootElement,oClass,oExpand) {
    if(!document.getElementsByTagName||!document.childNodes) { return; }
    oRootElement = document.getElementById(oRootElement);
    for( var x = 0, y = oRootElement.getElementsByTagName('a'); y[x]; x++ ) {
        if( y[x].getAttribute('href') && !y[x].href.match(/#$/) && getRealAddress(y[x]) == getRealAddress(location) ) {
            y[x].className = (y[x].className?(y[x].className+' '):'') + oClass;
            if( oExpand ) {
                oExpand = false;
                for( var oEl = y[x].parentNode, ulStr = ''; oEl != oRootElement && oEl != document.body; oEl = oEl.parentNode ) {
                    if( oEl.tagName && oEl.tagName == oRootElement.tagName ) { ulStr = oEl.MWJuniqueID + (ulStr?(':'+ulStr):''); } }
                stateToFromStr(oRootElement.id,ulStr);
} } } }
function getRealAddress(oOb) { return oOb.protocol + ( ( oOb.protocol.indexOf( ':' ) + 1 ) ? '' : ':' ) + oOb.hostname + ( ( typeof(oOb.pathname) == typeof(' ') && oOb.pathname.indexOf('/') != 0 ) ? '/' : '' ) + oOb.pathname + oOb.search; }

***

cookie_

function retrieveCookie( cookieName ) {
    /* retrieved in the format
    cookieName4=value; cookieName3=value; cookieName2=value; cookieName1=value
    only cookies for this domain and path will be retrieved */
    var cookieJar = document.cookie.split( "; " );
    for( var x = 0; x < cookieJar.length; x++ ) {
        var oneCookie = cookieJar[x].split( "=" );
        if( oneCookie[0] == escape( cookieName ) ) { return unescape( oneCookie[1] ); }
    }
    return null;
}

function setCookie( cookieName, cookieValue, lifeTime, path, domain, isSecure ) {
    if( !cookieName ) { return false; }
    if( lifeTime == "delete" ) { lifeTime = -10; } //this is in the past. Expires immediately.
    /* This next line sets the cookie but does not overwrite other cookies.
    syntax: cookieName=cookieValue[;expires=dataAsString[;path=pathAsString[;domain=domainAsString[;secure]]]]
    Because of the way that document.cookie behaves, writing this here is equivalent to writing
    document.cookie = whatIAmWritingNow + "; " + document.cookie; */
    document.cookie = escape( cookieName ) + "=" + escape( cookieValue ) +
        ( lifeTime ? ";expires=" + ( new Date( ( new Date() ).getTime() + ( 1000 * lifeTime ) ) ).toGMTString() : "" ) +
        ( path ? ";path=" + path : "") + ( domain ? ";domain=" + domain : "") +
        ( isSecure ? ";secure" : "");
    //check if the cookie has been set/deleted as required
    if( lifeTime < 0 ) { if( typeof( retrieveCookie( cookieName ) ) == "string" ) { return false; } return true; }
    if( typeof( retrieveCookie( cookieName ) ) == "string" ) { return true; } return false;
}

***

CSS_

LI
    {
    display: inLine;
    }

UL, LI
    {
    padding: 0px;
    list-style-type: none;
    margin: 0;
    color: mediumpurple;
    font-weight: bold;
    border-top: 5ps solid rgb(233,238,242);
    }

LI A
    { 
    display: block;
    padding: 0px;
    text-decoration: none;
    width: 100%;
    height: 100%;
    color: midnightblue;
    font-weight: bold;
    font-size: 16;
    background: rgb(233,238,242); 
    border-right: 18px solid white;
    border-top: 0;
    border-right: 18px solid rgb(233,238,242);
    }

LI LI A
    {
    display: block;
    background-color: transparent;
    font-size: 14;
    color: darkgreen;
    border-top: 0;
    border-right: 18px solid rgb(233,238,242);
    margin-left: 8px;
    }

LI LI LI A
    {
    display: block;
    background-color: transparent;
    font-size: 12;
    color: steelblue;
    border-top: 0;
    border-right: 18px solid rgb(233,238,242);
    margin-left: 16px;
    }

LI A, LI LI A, LI LI LI A
    {

    }

LI A:HOVER
    {
    display: block;
    color: black;
    }

LI LI A:HOVER
    {
    display: block;
    background-color: transparent;
    color: black;
    }

LI LI LI A:HOVER
    {
    display: block;
    background-color: transparent;
    color: royalblue;
    }

LI A:HOVER, LI LI A:HOVER, LI LI LI A:HOVER
    { 
    display: block;
    ;
    border: 0;
    }


LI A:ACTIVE, LI LI A:ACTIVE, LI LI LI A:ACTIVE
    { 
    display: block;
    color: orangered;
    }

***

заодно и зацените мой новый ява-скрипт. первый блин.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#8 26.03.2006 23:45

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

забыл тег code, простите:(


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#9 27.03.2006 00:41

televizor
Новичок
Зарегистрирован: 21.03.2006
Сообщений: 10

Re: доступ к дочерним элементам

ух, спасибо! буду разбираться

Нет на форуме

 

#10 27.03.2006 14:51

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

Wizard
Мне понравилось - интересные возможности для изменения отображения списка и маркеров (понравился вид if oMinimalLink == true)!
Чуть-чуть подправил в стилях:

Код:

LI A {
    height:auto!important;// для FF
    height:100%;// оставить для IE
    ...
    }

А что значит "первый блин"?

Нет на форуме

 

#11 27.03.2006 17:12

televizor
Новичок
Зарегистрирован: 21.03.2006
Сообщений: 10

Re: доступ к дочерним элементам

Меж тем, не прошло и полгода, как мной был придуман тупой костыль: в процессе присвоения потомкам дисплей:блок, я каждого проверяю - если предок его предка (то есть, дедушка) это тот самый элемент, чьим прямым детям я хочу дать блок, то значит этот элемент остается дисплей:нет. Ну, или чуть проще: если ты внук, а не сын, значит рано тебе на свет появляться.
скрипт теперь выглядит так:

Код:

function chch(a){
var par=a.parentNode;
var spanNodes=par.getElementsByTagName("span");
       if(spanNodes[0].style.display=="none"){
               for(var i=0; i<spanNodes.length; i++){
                   if(spanNodes[i].parentNode.parentNode != par){
               spanNodes[i].style.display = "block";
                   }
               }
       }
       else{
               for(var i=0; i<spanNodes.length; i++){
               spanNodes[i].style.display = "none";
               }
       }
}

Только это почему-то работает для первого-второго уровня, а потом опять внуки раньше времени ползут (акселераты, наверное :-))

Нет на форуме

 

#12 27.03.2006 18:47

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

AKS, первый сетевой java-script моего производства. Спасибо за правочку:)


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#13 27.03.2006 18:51

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

televizor, поддерживаю твою любовь к всему простому;)) я вообще стараюсь обходится CSS, это возможно чаще, чем кажется на первый взгляд. ДОМ хорош тем, что его интерпретируют все браузеры, вынужденно, одинаково, мне так кажется... Если всё получится, дашь ссылку на результат?


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#14 27.03.2006 18:57

televizor
Новичок
Зарегистрирован: 21.03.2006
Сообщений: 10

Re: доступ к дочерним элементам

на результат вряд ли: это мне нужно для админки одной CMS, где беспощадно разросся список категорий, то есть чисто для внутреннего пользования
а вот скрипт тут выложу, если доведу до ума (то, что сейчас он выдает, уже сильно облегчило работу) :-)

но меня все же гложут подозрения, что наверняка эта моя проблема уже неоднократно решена

Нет на форуме

 

#15 27.03.2006 21:14

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

веб-дизайн штука неблагодарная, зато приятно, когда всё складываеться:)


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#16 28.03.2006 11:49

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

televizor
Раз уж нельзя отказаться от span'ов, тогда...

Все span'ы я поместил в div для удобства доступа:
HTML

Код:

<div id="spanlist">
<span>Родительский элемент
<span class="hidden">Дочерний элемент 1
<span class="hidden">Дочерний элемент 1.1
<span class="hidden">Дочерний элемент 1.1.1</span>
</span>
<span class="hidden">Дочерний элемент 1.2</span>
</span>
<span class="hidden">Дочерний элемент 2
<span class="hidden">Дочерний элемент 2.1</span>
<span class="hidden">Дочерний элемент 2.2</span>
<span class="hidden">Дочерний элемент 2.n</span>
</span>
<span class="hidden">Дочерний элемент n</span>
</span>
</div>

Добавил стилей:
CSS

Код:

span { cursor : pointer; }
.hidden { display : none; }
.nothidden { display : block; }

JavaScript

Код:

function changeDisplay(el, spans) { 
    var i = 0, len = spans.length;
    for(; i < len; i++) {
        if(spans[i].className == "hidden") { 
            if(spans[i].parentNode.parentNode != el) {
                spans[i].className = "not" + spans[i].className;
            }
        }
        else {
            spans[i].className = spans[i].className.substr(3);
        }
    }
}

function spanClick() {
    var e = (window.event) ? window.event : arguments[0];
    if(window.event) { e.cancelBubble = true; }
    else { e.stopPropagation(); }    
    var el = e.srcElement || e.target, 
    spans = el.getElementsByTagName("span");
    if(spans) {  
        changeDisplay(el, spans); 
    }
    else return false;
}

onload = function() { 
    var div = document.getElementById("spanlist"), 
    spans = div.getElementsByTagName("span");
    for(var i = 0; i < spans.length; i++) { 
        spans[i].onclick = spanClick;
    }
}

Остается еще добавить в JavaScript запрет на выделение текстовых элементов,
т.к. это случается при частом кликанье...

Нет на форуме

 

#17 28.03.2006 14:02

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

здоровая идея, я чуть доработал и кинул в личную коллекцию динамичных списков) советую фокус и выделение с помощью сss убрать.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#18 28.03.2006 16:21

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

Wizard
А я не знаю, как с помощью CSS можно снять выделение текста...
Можно подсказку?

Нет на форуме

 

#19 28.03.2006 17:03

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

а у меня получилось так:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
...
<style type="text/css">
.logo_ir {
    display:block;
    width:252px;
    height:52px;
    margin:20px auto;
    }

.logo_ir a:hover {
    border-color:#000;
    }
</style>
...
<body>
...
<span class="logo_ir"><a href="#nogo" title="back to index">Home</a></span>
...
</body>

или ещё так:

Код:

HTML_
<span class="logo_nafir"><a href="#nogo"><em title="back to homepage">Home</em></a></span>

&

Код:

CSS_
.logo_nafir {
    display:block; 
    width:252px; 
    height:52px; 
    margin:20px auto;
    }
    /* make the actual link ZERO size and position relative
    the zero size stops the dotted border from displaying */
.logo_nafir a {
    display:block; 
    width:0;
    height:0;
    position:relative;
    }
    /* move the link styling to the em and make it position absolute */
.logo_nafir a em { 
    display:block; 
    text-indent:-10000px;
    width:250px; 
    height:50px; 
    position:absolute; 
    background:#fff url(graphics/cssplay_logo.gif); 
    border:1px solid #ddd; 
    cursor:pointer; /* to set the pointer correctly as a link in IE */
    }
.logo_nafir a:hover em {
    border-color:#000;
    }
    /* for IE to make the active/focus state work correctly */
.logo_nafir a:active {
    color:#fff;
    }
    /* style the active/focus state */
.logo_nafir a:active em, .logo_nafir a:focus em {
    border-color:#c00;
    }

ps не ругайте за тупые имена, я прямо из готового кода брал пример.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#20 28.03.2006 17:19

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

или вы хотели без картинок?smile))) тогда только JS


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#21 28.03.2006 19:11

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

Wizard
Да, меня как раз текстовые элементы интересовали...

Нет на форуме

 

#22 28.03.2006 19:20

televizor
Новичок
Зарегистрирован: 21.03.2006
Сообщений: 10

Re: доступ к дочерним элементам

ух, спасибо!

Нет на форуме

 

#23 28.03.2006 19:58

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

AKS, так можкт televizor другого мнения;)) Хотя я где-то видел пример, как на background текст наклеить. Ну и выделение становится, есессно, недоступно...


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#24 28.03.2006 21:22

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

Wizard
Интересно было бы, конечно, узнать - как это делается. Я-то с CSS-трюками мало знаком, наверно было бы легче в стилях что-нибудь прописать, хотя и со скриптом это сделать очень просто... В любом случае - вопрос со span'ами, судя по всему, решен.
А вообще, полезная тема получилась - лично мне очень понравился Ваш скрипт - есть над чем подумать (представляю, как пришлось задуматься в процессе создания). Спасибо за исходник - буду в нем копаться время от времени...

Нет на форуме

 

#25 28.03.2006 23:50

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

AKS. Рад, что Вам понравился мой скрипт;) Это, как бы сказать, учебный пример, в этот скрипт я вложил почти всё, что только знаю о javascript, буду так же рад, если найдутся мною незамеченные ошибки (недочёты, баги, улучшения).

Другой вопрос: есть скрипт, привязывающий блок div к определённому месту на экране, так, что после скроллинга этот блок остаётся на прежнем месте, относительно дисплея. Мною написанные скрипты позволяют достичь данный эффект лишь рывками, а это не очень красиво и даже раздражает. Может, подскажите, как сделать плавно-плавающий блок?


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#26 29.03.2006 10:20

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

Wizard

1. По-поводу скроллинга было бы удобней создать отдельную тему в форуме, т.к. вопрос этот очень и очень интересный, и заслуживает внимания (хотя в сети можно найти множество решений, но самим-то интересней). Ну что, может создадите отдельную тему?

2. По-поводу Вашего скрипта - если Вы собираетесь заниматься оптимизацией, то конечно можно было бы что-то и обсудить, но только обсудить, т.к. моей квалификации не хватает для того, чтобы обнаружить какие-то ошибки. А вот вопросы имеются, и если Вы найдете время отвечать на них, буду рад...

Нет на форуме

 

#27 29.03.2006 11:32

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

Найдётся, думаю, будет полезно на реальном примере углублять знания в области скрипта. На счёт сети не уверен, на тех сайтах, которым я доверяю, не нашлось удовлетворительного решения, поэтому и интересно обсудить. Сейчас создам тему...


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#28 29.03.2006 14:32

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

Wizard
Есть такие вопросы:
1. Конструктор stateToFromStr() вызывается только из selfLink(), или вызывается еще где-нибудь?
2. Проверяли ли Вы корректность присвоения имени класса в выражении:

Код:

y[x].className = (y[x].className?(y[x].className+' '):'') + oClass;

3. Есть ли необходимость для каждого newLink.onclick в compactChildren() создавать новый экземпляр объекта Function?
4. Ну и конечно не могу не спросить про куки - зачем они?
Пока все вкратце...

Нет на форуме

 

#29 30.03.2006 19:14

Wizard
Разбирающийся
Зарегистрирован: 16.03.2006
Сообщений: 78

Re: доступ к дочерним элементам

Кук чтобы меню держалось после рефреша, он и удаляется сам с сайта, после часа неприбываения на сервере.
Поскольку всё писалось не сразу, есть изличние детали и повторяющиеся фрагменты, которых можно было избежать... Буду дорабатывать стиль когда всё будут работать чётко, есть ещё кой-какие баги.

stateToFromStr()  вызывается лишь единожды.


Жизнь- игра. Сюжет хреновый, зато какая графика!

Нет на форуме

 

#30 31.03.2006 11:22

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: доступ к дочерним элементам

Wizard
А зачем для передачи строки, содержащей имя тега, используется кодирование? Я просто не знаю - хотелось узнать,
с какой целью...
Остальные вопросы, какие были, вобщем-то не имеют смысла, т.к. Вы сами сказали, что будете многое переделывать.

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson