Avatar billede rdc Nybegynder
26. februar 2009 - 13:16 Der er 1 kommentar og
1 løsning

show/hide div, vis altid plus cookie

hejsa,

mit script virker perfekt, men jeg skal have lavet nogle ændringer i det for at kunne vise div'sene fra start af... altså det skal ikke være som det er nu, hvor man trykker på et billede og der fremkommer noget med slide effect, og når man så trykker på billedet igen så skjules det.... Dette skal forblive... Men man skal fra start af ikke trykke for at kunne se indholdet... indholdet skal vises fra start af...
En anden ting er om, det er muligt at tilføje cookie til scriptet, så det husker at brugeren at trykket show/hide på et f.eks. et billede...

style er:

        <style type="text/css">
            .dhtmlgoodies_question{    /* Styling question */
                /* Start layout CSS */
                margin-bottom:0px;
                margin-top:0px;
                padding-left:0px;           
                font-size:0.9em;
                width:260px;
                background-image:url('images/right_content/top_right_content.gif');
                height:33px;
                /* End layout CSS */
                overflow:hidden;
                cursor:pointer
            }
            .dhtmlgoodies_answer{    /* Parent box of slide down content */
                /* Start layout CSS */
                background-image:url('images/right_content/middle_right_content.gif');
                width:260px;
                margin-bottom:0px;
                margin-top:0px;
                padding-top:0px;
                padding-right:0px;
                padding-left:0px;
                padding-bottom:0px;
                       
                /* End layout CSS */
                visibility:hidden;
                height:0px;
                overflow:hidden;
                position:relative;
            }
   
            .dhtmlgoodies_answer_content{    /* Content that is slided down */
                padding:0px;
                font-size:0.9em;   
                position:relative;
                margin-bottom:0px;
                margin-top:0px;
                padding-left:0px;           
            }
        </style>

scriptet er:
        <script type="text/javascript">
            var dhtmlgoodies_slideSpeed = 7;    // Higher value = faster
            var dhtmlgoodies_timer = 7;    // Lower value = faster
            var objectIdToSlideDown = false;
            var dhtmlgoodies_activeId = false;
            var dhtmlgoodies_slideInProgress = false;
   
            function showHideContent(e,inputId)    {
                if(dhtmlgoodies_slideInProgress)return;
                dhtmlgoodies_slideInProgress = true;
                if(!inputId)inputId = this.id;
                inputId = inputId + '';
                var numericId = inputId.replace(/[^0-9]/g,'');
                var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
                objectIdToSlideDown = false;
                if(!answerDiv.style.display || answerDiv.style.display=='none')    {       
                    if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId)    {               
                        objectIdToSlideDown = numericId;
                        slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
                    }    else    {
                        answerDiv.style.display='block';
                        answerDiv.style.visibility = 'visible';
                        slideContent(numericId,dhtmlgoodies_slideSpeed);
                    }
                }    else    {
                    slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
                    dhtmlgoodies_activeId = false;
                }   
            }


            function slideContent(inputId,direction)    {
                var obj =document.getElementById('dhtmlgoodies_a' + inputId);
                var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
                height = obj.clientHeight;
                if(height==0)height = obj.offsetHeight;
                height = height + direction;
                rerunFunction = true;
                if(height>contentObj.offsetHeight)    {
                    height = contentObj.offsetHeight;
                    rerunFunction = false;
                }
                if(height<=1)    {
                    height = 1;
                    rerunFunction = false;
                }
                obj.style.height = height + 'px';
                var topPos = height - contentObj.offsetHeight;
                if(topPos>0)topPos=0;
                contentObj.style.top = topPos + 'px';
                if(rerunFunction)    {
                    setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
                }else    {
                    if(height<=1)    {
                        obj.style.display='none';
                        if(objectIdToSlideDown && objectIdToSlideDown!=inputId)    {
                            document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
                            document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
                            slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);               
                        }else    {
                            dhtmlgoodies_slideInProgress = false;
                        }
                    }else    {
                        dhtmlgoodies_activeId = inputId;
                        dhtmlgoodies_slideInProgress = false;
                    }
                }
            }
   
            function initShowHideDivs()    {
                var divs = document.getElementsByTagName('DIV');
                var divCounter = 1;
                for(var no=0;no<divs.length;no++)    {
                    if(divs[no].className=='dhtmlgoodies_question')    {
                        divs[no].onclick = showHideContent;
                        divs[no].id = 'dhtmlgoodies_q'+divCounter;
                        var answer = divs[no].nextSibling;
                        while(answer && answer.tagName!='DIV')    {
                            answer = answer.nextSibling;
                        }
                        answer.id = 'dhtmlgoodies_a'+divCounter;   
                        contentDiv = answer.getElementsByTagName('DIV')[0];
                        contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';    
                        contentDiv.className='dhtmlgoodies_answer_content';
                        contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
                        answer.style.display='none';
                        answer.style.height='0px';
                        divCounter++;
                    }       
                }   
            }

            window.onload = initShowHideDivs;
        </script>

mit html er:
            <div class="dhtmlgoodies_question">
                TEST
            </div>
            <div class="dhtmlgoodies_answer"">
                <div>
                    test<br><br><br><br><br>
                </div>
            </div>

            <div class="dhtmlgoodies_question">
                TEST1
            </div>
            <div class="dhtmlgoodies_answer"">
                <div>
                    test1<br><br><br><br><br>
                </div>
            </div>

på forhånd tusind tak for hjælpen
Avatar billede rdc Nybegynder
26. februar 2009 - 22:37 #1
ingen der kan hjælpe?
Avatar billede rdc Nybegynder
02. marts 2009 - 15:23 #2
lukker
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester