[GELÖST] Div ein- und ausblenden mit Javascript (display="none" -> display="block")

LikeStar · 04. Juli 2014

Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Ich habe in den letzten Stunden ein Script für mich angepasst, welches wunderbar funktioniert.

Ich kann per Klick Texte an der selben Stelle ein und ausblenden.
Javascript Datei:

PHP:

function toggleMe(a){


AlleAus()

var e = document.getElementById(a);

// Prüfung exixtiert eine Element mit dieser ID?
if(!e)return true;

  // Umschaltung
  if(e.style.display == "none")
  {
  e.style.display = "block"
  }
  else
  {
  e.style.display = "none"
  }

return true;
}


// hier müssen alle Container-IDs eingetragen werden
// die Funktion schaltet alle Boxen auf unsichtbar

function AlleAus() {
   para10.style.display = "none";
   para11.style.display = "none";
   para12.style.display = "none";
}

Html Datei:

HTML:

<body>
<div style="display:block;"id="para10" class="test">Inhalte 1</div>
<div style="display:none;" id="para11" class="test">Inhalte 2</div>
<div style="display:none;" id="para12" class="test">Inhalte 3</div>

<a onClick="return toggleMe('para10')" href="javascript:void(0)">Linktext 01</a>
<a onClick="return toggleMe('para11')" href="javascript:void(0)">Linktext 02</a>
<a onClick="return toggleMe('para12')" href="javascript:void(0)">Linktext 03</a>

</body>

Drücke ich auf den Link "Linktext 01" erscheint Text.
Und sobald ich auf den Link "Linktext 02" klicke, erscheint an der gleichen Stelle ein anderer Text.

und es funktioniert wunderbar.

Ich will das Script in mein Template einbauen:
Treble - One Page Responsive Theme - Live Preview - WrapBootstrap
Anhang anzeigen 4302

Jetzt habe ich mir gedacht, füge ich diesen Code auch in mein Responsive Template ein.
Allerdings will er nicht so wirklich das Tun, was ich möchte :/

kkapsner · 05. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

LikeStar schrieb:
Allerdings will er nicht so wirklich das Tun, was ich möchte :/

Was tut es denn? Da das Problem anscheinend am Template liegt, musst du uns schon Informationen dazu liefern oder einen Testlink, wo wir uns das live ansehen können...

PS: href="javascript:void(0)" ist komplett unnötig/unschön. Aussehen bestimmt man mit CSS.
PPS: es heißt onclick.
PPPS: Ist ja schön, dass du wenigstens eine Einrückung hast, aber wirklich konsisten ist die nicht...
PPPPS: Elemente über die automatisch registrierten globalen Variablen anzusprechen und zum einen schlechter Stil und zum anderen kann das schnell in die Hose gehen und du findest die Ursache nicht so schnell. Besser wäre, in der AlleAus() auch mit document.getElementById() zu arbeiten.

Noch besser wäre es, wenn du die AlleAus() gar nicht bräuchtest (würde auch das Probelm beseitigen, dass du jetzt gar nicht "toggeln" kannst). Würde dein Skript auch viel wartungsfreundlicher machen:

Code:

function toggleMe(id){
	var e = document.getElementById(a);
	if (toggleMe.last && toggleMe.last !== e){
		toggleMe.last.style.display = "none";
	}
	toggleMe.last = e;
	// Prüfung exixtiert eine Element mit dieser ID?
	if (e){
		// Umschaltung
		if (e.style.display === "none"){
			e.style.display = "block"
		}
		else {
			e.style.display = "none"
		}
	}
}

- kleiner Nachteil: du musst im HTML alle Elemente am Anfang ausblenden und dann im window.onload einmal die toggleMe() mit dem am Anfang zu zeigenden Element aufrufen.

LikeStar · 05. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Hi und danke für deine Antwort.

Es handelt sich hier nur um eine Test Html Seite. Ich habe hier keinerlei CSS Formatierungen.
Das Script dient hier nur zur Veranschaulischung. Ich habe es demnach so einfach wie möglich
aufbauen wollen, damit die User mein Anliegen verstehen.

Das Template ist eben auch nur eine HTML Seite, und theoretisch lässt sich auch ein div
ein und ausblenden Code einbauen.

Aber der will einfach nicht. =/
Ich poste gleich mal ein paar Details. Ich will auch nicht zu viel Code zeigen, weil es wahrscheinlich auch nicht gut ankommt.

Viele Grüße

miniA4kuser · 05. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Was soll nicht gut ankommen!?

LikeStar · 05. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Hi

Ich habe hier vorsichtshalber ein Bild erstellt. Ich hoffe dass es übersichtlich genug ist.
Das Template kann man sich hier anschauen.

Treble - One Page Responsive Theme - Live Preview - WrapBootstrap

und hier mein Anliegen.

BILD

Viele Grüße

dbarthel · 05. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Soweit ich das auf den recht kleinen Bild erkennen konnte, fehlt da eine eindeutige ID über die du die Links ansprechen könntest, um sie dann auszublenden.

LikeStar · 05. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

dbarthel schrieb:
Soweit ich das auf den recht kleinen Bild erkennen konnte, fehlt da eine eindeutige ID über die du die Links ansprechen könntest, um sie dann auszublenden.

Nett dass du mir schreibst. Das Bild ist übrigens anklick bar und dann wird es groß!

Anhand des Bildes kann man erkennen, dass bisher nichts unternommen wurde.
Es dient nur zur Veranschaulischung. Ich habe es für euch User reingerahmt.

Deshalb frage ich euch, ob dies überhaupt möglich ist. Ich habe das Script angepasst und eingebaut.
Aber das Script klappt wirklich nur ein Div Container zu und das wars. Wenn ich Link 2 drücke, klappt Container 2
erst recht NICHT auf. Das ist der Grund weshalb ich euch anschriebe. Normalerweise kriege ich so Etwas
sofort hin.

Viele Grüße

LikeStar · 05. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Schade

kkapsner · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Was ist schade?

LikeStar schrieb:
Ich habe das Script angepasst und eingebaut.

Genau das wollen wir sehen. Sonst können wir dir nicht sagen, was da falsch läuft.

LikeStar · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

kkapsner schrieb:
Was ist schade?

Genau das wollen wir sehen. Sonst können wir dir nicht sagen, was da falsch läuft.

Erm? Link zum Template steht doch da. Quellcode lässt sich wunderbar anschauen.
Des Weiteren habe ich ein Bild mit reingestellt, welches sehr übersichtlich zu sein scheint.

Schade, dass Texte immer überflogen werden müssen ...

Trotzdem Danke!!

kkapsner · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Aber du hast das Template doch verändert... wie das Template im Original aussieht, ist doch für dein Problem komplett egal.

Wir wolles den Quelltext sehen, nachdem du in verändert hast.

LikeStar · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block&quot

kkapsner schrieb:
Aber du hast das Template doch verändert... wie das Template im Original aussieht, ist doch für dein Problem komplett egal.

Wir wolles den Quelltext sehen, nachdem du in verändert hast.

Woher möchtest du das denn wissen? An dem Template wurde absolut nichts geändert.
Es wurden evtl. Texte ausgetauscht.

Mehr auch nicht.

Schönen Gruß

Edit: Es ist auch egal, es funktioniert einfach nicht!

- - - Aktualisiert - - -

Möglicherweise kommt mein Bootstrap Template nicht mit diesem Code klar.

PHP:

function Aendern1 () {
  document.all.meinAbsatz.innerHTML = Neu1;
}

Ich arbeite im Übrigen mit

innerHTML

Ich denke, dass ist das Problem.

kkapsner · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

LikeStar schrieb:
Woher möchtest du das denn wissen?

LikeStar schrieb:
Ich habe das Script angepasst und eingebaut.

Das hatte ich so interpretiert. Bzw. wie hast du es denn eingebaut, wenn du das Template nicht verändert hast?

Aber irgendwie reden wir aneinander vorbei... kannst du uns nicht einen Testlink geben, wo wir uns das live ansehen können?

LikeStar · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block&quot

Ne. Mehr als ein Bild von meinem Script und mein Template
kann ich nun wirklich nicht machen.

Ich bewege mich dann im Kreis.

Also wenn man sich den Quelltext anschaut, sieht man, dass das
Template eine menge JS Dateien eingebunden bekommt. Das viele Javascript
zerschiesst meinen CODE.

Ich verstehe das nicht.

Meine Test.html Seite funktioniert doch einwandfrei. Ist doch echt zum Kotzen.

- - - Aktualisiert - - -

Das ist mein Javascript Code:

PHP:

var Neu1 = "<h4 class=\"line-divider\">1</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>";
var Neu2 = "<h4 class=\"line-divider\">2</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>";
var Neu3 = "<h4 class=\"line-divider\">3</h4><h1>WHAT WE DO</h1><div class=\"row\"><div class=\"span8 offset2\"><p>Shows und Celebrations verleihen Ihrer Organisation einen enormen Motivationsschub. Nutzen Sie die Potentiale einer punktgenauen psychologischen Planung.</p></div></div>";
function Aendern1 () {
  document.all.meinAbsatz.innerHTML = Neu1;
}
function Aendern2 () {
  document.all.meinAbsatz.innerHTML = Neu2;
}
function Aendern3 () {
  document.all.meinAbsatz.innerHTML = Neu3;
}

und das ist mein Link:

HTML:

<a href="javascript:Aendern3()" class="plugin-filter" data-filter="contemp">LINK3</a>

Wenn ich drauf drücke, passiert nichts. Aber sobald ich class="plugin-filter" entferne. Funktioniert es wunderbar.

Aber ich kann dem Link, auf Grund eines JS Effects, das class="plugin-filter" nicht einfach entfernen.

dbarthel · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block&quot

Warum machst du da für jede Änderung eine neue Funktion?
Es würde doch auch eine Funktion langen, der du dann die ID des zu ändernden Element übergibst - vorausgesetzt, du gibst den Elementen eine eindeutige ID.

Code:

<a id="L1" href="javascript:aendern(1);" class="plugin-filter"> testen </a>

function aendern(nr)
{
document.["L"+nr].innerHTML = Neu[nr];
}

Dann musst du Neu aber als Array deklarieren.

VAR Neu=[ ];

und über

Neu[1] = "";

befüllen.

Habe den Code jetzt nur so auf die schnelle gemacht, insofern ist es vielleicht verbesserungswürdig, aber nur mal als Denkanstoß.

- - - Aktualisiert - - -

LikeStar schrieb:
Aber sobald ich class="plugin-filter" entferne. Funktioniert es wunderbar.

Aber ich kann dem Link, auf Grund eines JS Effects, das class="plugin-filter" nicht einfach entfernen.

Wie sieht das CSS zur Klasse "plugin-filter" eigentlich genau aus?
Gibt es da Funktionen (wie sehen die aus?), die auf dieser Klasse Aktionen ausführen?

LikeStar · 06. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

dbarthel schrieb:
.
Wie sieht das CSS zur Klasse "plugin-filter" eigentlich genau aus?
Gibt es da Funktionen (wie sehen die aus?), die auf dieser Klasse Aktionen ausführen?

folgende JS Datei habe ich gefunden (bestehend aus 2 Teilen -> Im Forum sind nur 101 Zeichen erlaubt):

PHP:

$(document).ready(function(){$(window).height();var b=$(window).width(),a=$("#navigation").outerHeight();$(window).resize(function(){b=$(window).width();$(window).height()});$(window).trigger("scroll");$("#navigation").fixedonlater({speedDown:250,speedUp:100});$(".centralized").centralized({delay:1500,fadeSpeed:500});$.fn.responsivevideos();$("#quote-slider").each(function(){$(".item",this).length&&$(this).carousel({interval:2E4})});$("#main-menu").onePageNav({currentClass:"active",changeHash:!1,
scrollOffset:a-10,scrollThreshold:0.5,scrollSpeed:750,filter:"",easing:"swing"});980<b&&($("#page-welcome").parallax("0%",0.2),$("#page-features").parallax("0%",0.07),$("#page-twitter").parallax("0%",0.1));"undefined"!=typeof window.ontouchstart&&$.each([".social-icons a",".portfolio-items li",".about-items .item"],function(b,a){$(a).each(function(b,a){$(a).bind("click",function(a){$(this).hasClass("clickInNext")?$(this).removeClass("clickInNext"):(a.preventDefault(),a.stopPropagation(),$(this).mouseover(),
$(this).addClass("clickInNext"))})})});$("#page-welcome .logo a").click(function(){$("html, body").animate({scrollTop:$($.attr(this,"href")).offset().top-a+4},800);setTimeout(function(){$(window).trigger("scroll")},900);return!1});$("#welcome-messages

PHP:

ul").bxSlider({mode:"vertical",auto:!0,minSlides:1,responsive:!0,touchEnabled:!0,pager:!1,controls:!1,useCSS:!1,pause:1E4});$(".plugin-filter").click(function(){return!1});$(".plugin-filter-elements").mixitup({targetSelector:".mix",filterSelector:".plugin-filter",
sortSelector:".sort",buttonEvent:"click",effects:["fade","rotateY"],listEffects:null,easing:"smooth",layoutMode:"grid",targetDisplayGrid:"inline-block",targetDisplayList:"block",gridClass:"",listClass:"",transitionSpeed:600,showOnLoad:"all",sortOnLoad:!1,multiFilter:!1,filterLogic:"or",resizeContainer:!0,minHeight:0,failClass:"fail",perspectiveDistance:"3000",perspectiveOrigin:"50% 50%",animateGridList:!0,onMixLoad:null,onMixStart:null,onMixEnd:null});$("#twitterfeed-slider").tweet({modpath:"plugins/twitter/",
username:"TheGridelicious",count:3});$("#twitterfeed-slider").tweetCarousel({interval:7E3,pause:"hover"})});$(document).ajaxSend(function(){0==$(".loading").length&&($("body").append('<div class="loading"><div class="progress progress-striped active"><div class="bar"></div></div></div>'),$(".loading").slideDown(),$(".loading .progress .bar").delay(300).css("width","100%"))});
$(document).ajaxComplete(function(){$(".loading").delay(1E3).slideUp(500,function(){$(this).remove()});$(".close-portfolio span").click(function(b){$(".portfolio-item-details").delay(500).slideUp(500,function(){$(this).remove()});window.location.hash="!";return!1})});

im unteren Teil ist der Plug-in Filter zu finden.

in den css.less Dateien finde ich keine .plug-filter Klasse.

Edit: Notfalls bezahle ich auch.

Vielen Dank nochmal

miniA4kuser · 07. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Laut deinem letzten Post nutzt du ja ein JavaScipt-Framework $(document).ready(function(){...});
Warum nutzt du dessen Funktionen nicht auch für dein ein-/ausblenden?

document.all und <a href="#" bzw. <a href="javascript:###" ist jetzt nicht dein Ernst oder?

LikeStar schrieb:
Edit: Notfalls bezahle ich auch.

Selbst hierfür wird Quellcode benötigt...

LikeStar · 07. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

miniA4kuser schrieb:
Laut deinem letzten Post nutzt du ja ein JavaScipt-Framework $(document).ready(function(){...});
Warum nutzt du dessen Funktionen nicht auch für dein ein-/ausblenden?

document.all und <a href="#" bzw. <a href="javascript:###" ist jetzt nicht dein Ernst oder?

Selbst hierfür wird Quellcode benötigt...

Woher hast du bitte diese Codes? Die sind unmöglich von mir ; - )

Ich spiele gerade mit innerHTML und die Class="plugin-filter" zerschiesst mein Vorhaben...

LikeStar · 07. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Okay, hat sich erledigt.
Danke für einige Beiträge.

mikdoe · 08. Juli 2014

AW: Div ein- und ausblenden mit Javascript (display="none" -> display="block")

Wie hat es sich denn erledigt?

[GELÖST] Div ein- und ausblenden mit Javascript (display="none" -> display="block")

New member

Super Moderator

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Super Moderator

New member

Super Moderator

New member

Super Moderator

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Moderator