Slide JV anpassen - Standard close

[aJunkie]

Hallo,

ich habe ein Script gefunden und diesen hier zu Testzwecken eingebaut.

Erste Frage:
Sobald man auf die Seite kommt, zeigt der mir schon den Text/die Biographie an.
Ich wollte es so haben, dass es erst dann anzeigt, wenn man auf "Biographie anzeigen" klickt.
Also standardmäßig soll es zubleiben.

Wenn es zu ist... wird da der Text von Spidern trotzdem gelesen oder ignoriert?
Also zum Beispiel Google. Der liest ja den Quelltext oder muss er wie der Besucher es öffnen, bevor er den Text lesen kann?
Sonst würde er den Text ja gar nicht in den Index aufnehmen?!

Also... wenn die Frage geklärt ist, würde ich gerne wissen, wie ich was anpassen muss, damit der Text erst ausgefahren ist, wenn man dementsprechend geklickt hat.

Hier die JS- Datei.

 

[Mars@Gera]

<a id="v_slidein" href="#" onclick="slide()">Biographie anzeigen</a>
<div id="vertical_slide" style="display: none" onclick="slide()">test</div>

function slide(){
if(document.getElementById("vertical_slide").style.display == "none"){
   document.getElementById("vertical_slide").style.display == "";
   document.getElementById("v_slideein").innerHTML == "Biographie ausblenden";
}else{
  document.getElementById("vertikal_slide").style.display == "none";
  document.getElementById("v_slideein").innerHTML == "Biographie einblenden";
}

ungetestet, sollte aber gehen

mfg Marcel

 

[aJunkie]

Hey danke.
Wo kommt denn der Code rein? In Javascript?
Wenn ja, muss ich da vorher was ersetzen?

 

[Mars@Gera]

naja den HTML code in die HTML-Datei
und das Javascript zeugs in die JavaScript-Datei ;-)

 

[aJunkie]

Ja schon klar, aber ich würde ja nicht fragen, wenn's funktioniert hätte
Bekomme Syntaxfehler.
Was mache ich denn mit dem Rest im JS? Vielleicht beißen die sich ja, deswegen. ^^

window.addEvent('domready', function() {
    var status = {
        'true': 'open',
        'false': 'close'
    };
    
    //-vertical

    var myVerticalSlide = new Fx.Slide('vertical_slide');

    $('v_slidein').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.slideIn();
    });

    $('v_slideout').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.slideOut();
    });

    $('v_toggle').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.toggle();
    });

    $('v_hide').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.hide();
        $('vertical_status').set('html', status[myVerticalSlide.open]);
    });
    
    $('v_show').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.show();
        $('vertical_status').set('html', status[myVerticalSlide.open]);
    });
    
    // When Vertical Slide ends its transition, we check for its status
    // note that complete will not affect 'hide' and 'show' methods
    myVerticalSlide.addEvent('complete', function() {
        $('vertical_status').set('html', status[myVerticalSlide.open]);
    });


    //--horizontal
    var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});

    $('h_slidein').addEvent('click', function(e){
        e.stop();
        myHorizontalSlide.slideIn();
    });

    $('h_slideout').addEvent('click', function(e){
        e.stop();
        myHorizontalSlide.slideOut();
    });

    $('h_toggle').addEvent('click', function(e){
        e.stop();
        myHorizontalSlide.toggle();
    });

    $('h_hide').addEvent('click', function(e){
        e.stop();
        myHorizontalSlide.hide();
        $('horizontal_status').set('html', status[myHorizontalSlide.open]);
    });
    
    $('h_show').addEvent('click', function(e){
        e.stop();
        myHorizontalSlide.show();
        $('horizontal_status').set('html', status[myHorizontalSlide.open]);
    });
    
    // When Horizontal Slide ends its transition, we check for its status
    // note that complete will not affect 'hide' and 'show' methods
    myHorizontalSlide.addEvent('complete', function() {
        $('horizontal_status').set('html', status[myHorizontalSlide.open]);
    });
});

 

[Mars@Gera]

index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../slide.css" type="text/css" />
    <script type="text/javascript" src="../slide.js"></script>
    <title>Fx.Slide Demo</title>
</head>
<body>
<h1>Test</h1>
    <div class="marginbottom">
        <a id="v_slidein" href="#">Biographie anzeigen</a>
    </div>
    <div id="vertical_slide" style="display: none;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <p><a id="v_slideout" href="#">Biographie zumachen</a></p>
    </div>
</body>
</html>

slide.js

function slide(){
if(document.getElementById("vertical_slide").style.display == "none"){
   document.getElementById("vertical_slide").style.display == "";
   document.getElementById("v_slideein").innerHTML == "Biographie ausblenden";
}else{
  document.getElementById("vertikal_slide").style.display == "none";
  document.getElementById("v_slideein").innerHTML == "Biographie einblenden";
}

 

[aJunkie]

Funktioniert gar nicht mehr. ^^

 

[Mars@Gera]

ja weil du den JavaScript-Code nicht mit eingefügt hast ;-)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../slide.css" type="text/css" />
    <script type="text/javascript" src="../slide.js"></script>
    <title>Fx.Slide Demo</title>
</head>
<body>
<h1>Test</h1>
    <div class="marginbottom">
        <a id="v_slidein" href="#" onclick="slide()">Biographie anzeigen</a>
    </div>
    <div id="vertical_slide" style="display: none;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <p><a id="v_slideout" href="#">Biographie zumachen</a></p>
    </div>
</body>
</html>

 

[aJunkie]

Ich habe es eins zu eins übernommen, wie du es gepostet hast. ^^
Die index.html und alles was in der Datei slide.js drin war, habe ich durch deinen Schnipsel ersetzt!?

Kannst jetzt gerne mal schauen auf www.meladie.de/test/index.html
Damit du es selbst siehst.

 

[Mars@Gera]

habe dir eine nachricht geschickt

so hast es ;-)

 

[aJunkie]

Danke. :-)