Div nur mit Javascript anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
voloya

voloya hat kostenlosen Webspace.
13:34, 27.1.2012
Hallo

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. .

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 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.

mfg
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

fabo hat kostenlosen Webspace.
13:42, 27.1.2012
```
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
Autor dieses Themas
voloya

voloya hat kostenlosen Webspace.
16:05, 27.1.2012
Hallo
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

16:32, 27.1.2012

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

Autor dieses Themas

voloya

voloya hat kostenlosen Webspace.

17:09, 27.1.2012

Hallo

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

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

fabo

fabo hat kostenlosen Webspace.

17:16, 27.1.2012

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

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
17:53, 27.1.2012
voloya schrieb:
```
document.getElementById(slide-out-div).style.display = "block";
```
Aber es tut sich absolut nichts.

Was mache ich nur falsch?
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!
fabo

fabo hat kostenlosen Webspace.

17:59, 27.1.2012
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.

Autor dieses Themas

voloya

voloya hat kostenlosen Webspace.

18:00, 27.1.2012

Hallo

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?
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

fabo

fabo hat kostenlosen Webspace.

18:10, 27.1.2012
Nimm einfach meinen Code da oben - Aber komplett!
Autor dieses Themas
voloya

voloya hat kostenlosen Webspace.

18:18, 27.1.2012
Hallo

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

Wahnsinn! Es funktioniert!

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

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

mfg
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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city