kostenloser Webspace werbefrei: lima-city


Div nur mit Javascript anzeigen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    voloya

    voloya hat kostenlosen Webspace.

    Hallo :wave:

    Ich würde gerne einen "slider" auf meiner Seite einbauen, wo man am rechten Bildschirmrand eine Leiste hat. Wenn man die anklickt fährt ein TS-Viewer, Menü o.ä. heraus.

    Dafür gibt es schon verschiedene Scripte vorgefertigt, jetzt habe ich eines gefunden, das so ziemlich genau das macht was ich möchte und auch im IE funktioniert.

    Leider wird der entsprechende <div> auch angezeigt, wenn Javascript nicht aktiviert ist, und zwar an der Stelle, an dem ich den <div> eingebunden habe.

    Da dachte ich mir, müsste man doch den <div> lediglich mit Javascript einbinden, dann wird er ohne Javascript auch nicht angezeigt. Das funktioniert aber irgendwie nicht, zumindest nicht so wie ich es versuchte.

    Dabei sei anzumerken, dass ich überhaupt keine Ahnung von Javascript habe.

    Folgendes habe ich probiert:

    1.
    <Script Language="JavaScript">
    document.write("<div class="slider" >")
    document.write("Inhalt")
    document.write("</div>")
    </script>

    Dies in verschiedenen Ausführungen, mit dem ganzen Code in einem document.write() und Semikolons und Anführungszeichen etc. . :biggrin:

    Ich versuchte auch den Inhalt des <div>s mit Javascript zu verändern, allderings ist mit CSS ein Hintergrundbild vorgegeben, das dann so oder so angezeigt wird.

    2. Beim zweiten Versuch versuchte ich über Javascript display:none auf display:block zu ändern :biggrin: hat aber auch nicht funktioniert.


    Ich war mir so sicher, dass sich das bestimmt in ein paar Zeilen erledigen lässt, bloß wie? Google liefert nur nutzlose Ergebnisse. In dem Forum wo ich die Diskussion über und den Slider selbst fand, ist wohl niemandem aufgefallen, dass der <div> dann unten an der Webseite klebt, wenn jemand Javascript aus hat. :rolleyes:

    mfg :wave:
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. var a = document.createElement('div');
    a.className = "slider";
    a.innerHTML = 'Inhalt';
    document.body.appendChild(a);


    Sollte so funktionieren.

    Ansonsten kannst du auch die CSS-Eigenschaft "display" auf "none" und dies dann mittels JS auf "block" setzen.

    Beitrag zuletzt geändert: 27.1.2012 13:43:41 von fabo
  4. Autor dieses Themas

    voloya

    voloya hat kostenlosen Webspace.

    Hallo :wave:

    fabo schrieb:
    var a = document.createElement('div');
    a.className = "slider";
    a.innerHTML = 'Inhalt';
    document.body.appendChild(a);


    Sollte so funktionieren.


    Leider bekomme ich lediglich eine weiße Seite wenn ich das ausprobiere, genau wie bei allen anderen Sachen, die ich probiert habe. Man sieht es im Quelltext, aber das ist alles.


    fabo schrieb:
    Ansonsten kannst du auch die CSS-Eigenschaft "display" auf "none" und dies dann mittels JS auf "block" setzen.

    Dies habe ich versucht, aber einfach nicht hinbekommen. Vielleicht könntest du dir ja den Quellcode einmal ansehen?
    Ich poste vielleicht am besten mal einen Link zu der Seite woher ich das Script habe:
    klick mich

    Vielen Dank für die Antwort!

    mfg :wave:
  5. Laut dem Beispielcode sollst du das einfügen:

    <style type="text/css">
    .slide-out-div {
    	padding: 0px;
    	width: 250px;
    	height: 80%;
    	background: url(images/ts_3_bg.png) no-repeat #313131;
    	border: 0px;
    	position: absolute;
    }      
    </style>


    Stattdessen fügst du ein:

    <style type="text/css">
    .slide-out-div {
    	padding: 0px;
    	width: 250px;
    	height: 80%;
    	background: url(images/ts_3_bg.png) no-repeat #313131;
    	border: 0px;
    	position: absolute;
            display: none;
    }      
    </style>


    Dann sollst du das einfügen:

    <script type="text/javascript">
    $(document).ready(function(){
        	$("#content").hide();
    
        $("a.open-close").click(function () {
          $("#content").slideToggle("slow");
        });
    
    });
    </script>


    Stattdessen fügst du das ein:

    <script type="text/javascript">
    $(document).ready(function(){
        	$(".slide-out-div").show();
        	$("#content").hide();
    
        $("a.open-close").click(function () {
          $("#content").slideToggle("slow");
        });
    
    });
    </script>


    Beitrag zuletzt geändert: 27.1.2012 16:32:28 von fabo
  6. Autor dieses Themas

    voloya

    voloya hat kostenlosen Webspace.

    Hallo :wave:

    Danke nochmals!
    fabo schrieb:
    ...
    Stattdessen fügst du ein:

    <style type="text/css">
    .slide-out-div {
    	padding: 0px;
    	width: 250px;
    	height: 80%;
    	background: url(images/ts_3_bg.png) no-repeat #313131;
    	border: 0px;
    	position: absolute;
            display: none;
    }      
    </style>


    ...

    Stattdessen fügst du das ein:

    <script type="text/javascript">
    $(document).ready(function(){
        	$(".slide-out-div").show();
        	$("#content").hide();
    
        $("a.open-close").click(function () {
          $("#content").slideToggle("slow");
        });
    
    });
    </script>


    Ich bekomme damit nur eine weiße Seite. Das "display:none;" funktioniert einwandfrei, aber das Javascript tut einfach nicht, weder im IE noch im FF. Ich habe natürlich wieder gegoogelt und auch folgendes ausprobiert:

    document.getElementById(slide-out-div).style.display = "block";


    Aber es tut sich absolut nichts.

    Was mache ich nur falsch? :biggrin:

    mfg :wave:

    Beitrag zuletzt geändert: 27.1.2012 17:10:03 von voloya
  7. EDIT:

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.4.1.js"></script>
    
    <style type="text/css">
    .slide-out-div {
        padding: 0px;
        width: 250px;
        background: url(images/ts_3_bg.png) no-repeat #313131;
        border: 0px;
        display: none;
        height: 300px;
        color: #FFF;
        position: absolute;
    }
    </style>
    
    <script type="text/javascript">
    $(document).ready(function(){
        $('.slide-out-div').show();
    
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',
            //class of the element that will become your tab
            pathToTabImage: 'images/ts_3.png',
            //path to the image for the tab //Optionally can be set using css
            imageHeight: '250px',
            //height of tab image           //Optionally can be set using css
            imageWidth: '60px',
            //width of tab image            //Optionally can be set using css
            tabLocation: 'right',
            //side of screen where tab lives, top, right, bottom, or left
            speed: 300,
            //speed of animation
            action: 'click',
            //options: 'click' or 'hover', action to trigger animation
            topPos: '50px',
            //position from the top/ use if tabLocation is left or right
            leftPos: '10px',
            //position from left/ use if tabLocation is bottom or top
            fixedPosition: false //options: true makes it stick(fixed position) on scroll
        });
    });
    </script>
    </head>
    
    <body>
        <div class="slide-out-div">
            <a class="handle"></a>
            TEAMSPEAK 3 VIEWER CODE
        </div>
    </body>
    </html>


    Beitrag zuletzt geändert: 27.1.2012 17:46:51 von fabo
  8. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    voloya schrieb:
    document.getElementById(slide-out-div).style.display = "block";


    Aber es tut sich absolut nichts.

    Was mache ich nur falsch? :biggrin:
    Das kann nicht funktionieren. Versuch es stattdessen so:
    document.getElementById('slide-out-div').style.display = "block";
    Das Argument für getElementById muss ein String sein!
  9. Ich habe mir den Quelltext angesehen und es spielt keine ROlle, wie man es macht - Es funktioniert so oder so nicht, weil das Ganze total wirr geschrieben wurde. Die oben gepostete Version funktioniert mit 100%iger Sicherheit, obgleich ungetestet.
  10. Autor dieses Themas

    voloya

    voloya hat kostenlosen Webspace.

    Hallo :wave:

    Danke für die rege Unterstützung! :biggrin:
    hackyourlife schrieb:
    voloya schrieb:
    document.getElementById(slide-out-div).style.display = "block";


    Aber es tut sich absolut nichts.

    Was mache ich nur falsch? :biggrin:
    Das kann nicht funktionieren. Versuch es stattdessen so:
    document.getElementById('slide-out-div').style.display = "block";
    Das Argument für getElementById muss ein String sein!


    Habe das auch schon versucht, mit " und ', aber der div taucht trotzdem nicht auf. Hier mal mein Quelltext:


    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
    
        <script type="text/javascript">
        $(function(){
            $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',                     //class of the element that will become your tab
                pathToTabImage: 'images/ts_3.png', //path to the image for the tab //Optionally can be set using css
                imageHeight: '250px',                     //height of tab image           //Optionally can be set using css
                imageWidth: '60px',                       //width of tab image            //Optionally can be set using css
                tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
                speed: 300,                               //speed of animation
                action: 'click',                          //options: 'click' or 'hover', action to trigger animation
                topPos: '50px',                          //position from the top/ use if tabLocation is left or right
                leftPos: '10px',                          //position from left/ use if tabLocation is bottom or top
                fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
            });
    
        });
    
        </script>
    <style type="text/css">
    .slide-out-div {
    	padding: 0px;
    	width: 250px;
    	height: 80%;
    	background: url(images/ts_3_bg.png) no-repeat #313131;
    	border: 0px;
    	position: absolute;
            display: none;
    }      
    </style>
    
    <script type="text/javascript">
    $(document).ready(function(){
    document.getElementById('slide-out-div').style.display = "block";
        	$("#content").hide();
    
        $("a.open-close").click(function () {
          $("#content").slideToggle("slow");
        });
    
    });
    </script>
    
    </head>
    <body>
    <div class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users.html">Content</a>
    	TEAMSPEAK 3 VIEWER CODE
    </div>
    </body>
    </html>


    mit
    document.getElementById('slide-out-div').style.display = "block";

    anstatt
    $(".slide-out-div").show();
    wie fabo es vorgeschlagen hat
  11. Nimm einfach meinen Code da oben - Aber komplett!
  12. Autor dieses Themas

    voloya

    voloya hat kostenlosen Webspace.

    Hallo :wave:

    fabo schrieb:
    Nimm einfach meinen Code da oben - Aber komplett!


    Wahnsinn! Es funktioniert! :biggrin:

    Da habe ich wohl deinen Edit und Post überlesen :rolleyes: Tut mir Leid.

    Vielen vielen vielen Dank! Ich mache mich gleich mal ans Verstehen/Einbauen des Codes!
    :king:

    mfg :wave:
  13. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!