div in div - innerer DIV Breite anpassen

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

hi leute, danke für die gestrigen antworten! waren super.

könnte man das verschwinden der DIVS (auf display: none) verzögern?

wenn ja wie?

hier habe ich das script für das "ausblenden" der div's :

Code:

function toggleswitch(div)
{
var option=['conti1','conti2','conti3','conti4']; // nach belieben fortsetzen ...
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; }
}

dann habe ich div's mit der ID - conti1 & conti2 etc... die werden dann dementsprechend ein / ausgeblendet... und genau das zu verzögern...

damit eben die slide-animation (scroll-animation) funktioniert (sichtbar ist) ...

ich danke euch für eure antworten!!!

Myhar · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Deine Herangehensweise an dein Problem ist verständlich, jedoch viel zu kompliziert. Du brauchst nicht das togglen zu verzögern sondern lediglich die Funktion toggleSwitch an der Stelle aufrufen, an der sie benötigt wird.
Du bindest die Funktion mit einem onclick Event auf die jeweiligen Elemente. Das machst du direkt über die onclick Eigenschaft des Elements. Zusätzlich definierst du noch eine onclick Funktion, welche das scrollen ermöglicht. Du musst nun den einen, direkt im HTML Code stehenden onclick Event entfernen und deine jQuery onload Funktion anpassen:

HTML:

 $(function() {
                $('ul.nav a').bind('click',function(event){ [...]

Direkt am Ende der Funktion müsstest du dein gewünschtes div ein- oder ausblenden.

Falls ich dich hier missverstanden habe, und du lediglich eine Animation brauchst, welche dir dein div einblendet, dann kannst du das mit jQuery mithilfe der fadeToggle Funktion bewerkstelligen.

Was mir an deinem Code noch aufgefallen ist:
Er ist sehr unprofesionell geschrieben, du verwendest einmal eine direkt im HTML Code geschriebene jQuery onload Funktion und zusätzlich noch die window.onload. Grundsätzlich ist daran nichts falsch, jedoch könnte man dies in eine Funktion zusammenfassen.
Was jedoch unnötig ist, ist die getElementsByClassName Funktion in der oid.js, da du bereits jQuery verwendest und jQuery dies von Haus aus unterstützt.

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Myhar schrieb:
Deine Herangehensweise an dein Problem ist verständlich, jedoch viel zu kompliziert. Du brauchst nicht das togglen zu verzögern sondern lediglich die Funktion toggleSwitch an der Stelle aufrufen, an der sie benötigt wird.
Du bindest die Funktion mit einem onclick Event auf die jeweiligen Elemente. Das machst du direkt über die onclick Eigenschaft des Elements. Zusätzlich definierst du noch eine onclick Funktion, welche das scrollen ermöglicht. Du musst nun den einen, direkt im HTML Code stehenden onclick Event entfernen und deine jQuery onload Funktion anpassen:

HTML:

$(function() { $('ul.nav a').bind('click',function(event){ [...]

Direkt am Ende der Funktion müsstest du dein gewünschtes div ein- oder ausblenden.

das verstehe ich nicht ganz...

mein einziges problem ist nur: es wird ja immer nur den angesprochene div eingeblendet.. nun .. wenn di anderen ausgeblendet werden, sollte das mit einer kleinen zeitverzögerung passieren... damit man eben das scrollen des gerade weg-slidenden div's noch sieht... ansonsten verschwindet der div, der gerade aktiv ist, sofort, und der neue scrollt hinein...

Myhar schrieb:
Falls ich dich hier missverstanden habe, und du lediglich eine Animation brauchst, welche dir dein div einblendet, dann kannst du das mit jQuery mithilfe der fadeToggle Funktion bewerkstelligen.

Was mir an deinem Code noch aufgefallen ist:
Er ist sehr unprofesionell geschrieben, du verwendest einmal eine direkt im HTML Code geschriebene jQuery onload Funktion und zusätzlich noch die window.onload. Grundsätzlich ist daran nichts falsch, jedoch könnte man dies in eine Funktion zusammenfassen.
Was jedoch unnötig ist, ist die getElementsByClassName Funktion in der oid.js, da du bereits jQuery verwendest und jQuery dies von Haus aus unterstützt.

ich bin eine blutige, richtig richtig blutige anfängerin, wenn es darum geht wie es aussehen soll .... das sind mehrere skripte die ich hald nacheinander gereiht habe...

ich könnte dieses skript niemals anders gestalten... ich wüsste nicht wie...
(ist nur eine sporadische frage: könntest / möchtest du mir das machen, dann kann ich die beiden skripte danach vergleichen und sehe, dann, was du gemeint hast, oder wie ich sowas in zukunft realisieren kann... ich möchte nämlich aus allem heraus lernen! -> ist hoffendlich nicht verboten

.. )

ich danke dir aber sicher mal für jeden post..du hast schon auf so viele meiner fragen geantwortet, und immer eine lösung gefunden! DANKE!!

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

www.popchorgossau.ch/testseit2/index2.php - hier sieht man es, habs nun wieder hingekriegt, damit alle divs nebeneinander sind...

Myhar · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

HTML:

<ul class="nav" style="margin-left: 420px; width: 500px;">
  <li>
    <a href="#section2" onclick="toggleswitch('conti2')">
  </li>

Diesen onclick="toggleswitch.." Event meine ich. Lösche den einmal bei jedem Menüpunkt raus, dann sollte es doch (zumindest teilweise) so funktionieren, wie du es möchtest? Dann werden die divs eben nicht ausgeblendet, sondern bleiben immer sichtbar.
Damit die divs nach der Animation korrekt ein- und ausgeblendet werden, müsste die Funktion laut jQuery Dokumentation so erweitert werden (nicht getestet)

HTML:

$(function() {
                $('ul.nav a').bind('click',function(event){ //Den Teil hast du schon

//ganz am Ende...
                   $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    },
                   1200,
                  complete: function(){
                      toggleswitch("conti"+$(this).attr("href").substr(8));
                  }  );

toggleswitch("conti"+$(this).attr("href").substr(8)) ist notwendig, damit du deiner Funktion den korrekten Wert übergibst. Er übergibt damit den String "conti" und hängt die entsprechende Zahl aus dem href Attribut des angeklickten Links dran. Bei href="#section3" wäre das zB #conti3".
Ausprobieren kann ich das schwer, aber ich hoffe, damit sollte dein Problem gelöst sein.

L. G.

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

bei mir sieht das script nun so aus:

Code:

        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                     $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    },
                   1200,
                  complete: function(){
                      toggleswitch("conti"+$(this).attr("href").substr(8));
                  }  );
            });
        </script>

es gibt mir allerdings einen syntaxfehler aus...

ich verstehe deinen ansatz...

das ausblenden das ich da bisher drin hatte, ist dafür da, damit wenn ein div länger ist, als der aktive, man nicht so weit runterscrollen kann... sonst kann man immer soweit runterscrollen, wie der längste div ist in der höhe ist...

Myhar · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Was für einen Syntaxfehler gibt er denn aus? Das wäre gut zu wissen.
Laut einem anderen Beispiel auf http://api.jquery.com/animate/ braucht man das complete in der Funktion nicht extra zu definieren:

HTML:

1200,
                  function(){
                      toggleswitch("conti"+$(this).attr("href").substr(8));
                  }  );

Es sollte jetzt nur mehr an der korrekten Syntax liegen, welche ich aber schwer ausprobieren kann. Das ist alles bei jQuery dokumentiert, inklusive einiger Beispiele.
Das Ausführen von Funktionen nach Vollendung einer Animation habe ich persönlich noch nicht wirklich gebraucht, ich weiß lediglich, dass es machbar ist. Ich müsste mich hier auch erst in die genaue Syntax einlesen (und ausprobieren :-D )

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

ich weiss nicht was es für ein fehler ist. das zeigt dreamweaver auch nicht wirklich an...

mit deiner änderung ohne "complete" ist er auf der zeile wo das script beendet wird

</script> ....

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

hier hast du alle dateien:

ich bitte dich aber diese dateien nicht zu missbrauchen... (stecken so viele gedanken von mir drin

)

Myhar · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Dir das ganze fertig zu programmieren erachte ich als nicht sinnvoll, schließlich möchtest du etwas dabei lernen... Und ja, "ich schaue es mir nachher an und lerne es daran" habe ich schon viel zu oft gehört ;-) Außerdem, du hast doch eine Webseite, welche neue Webseiten anbietet. Das heißt, das müsstest du doch schon können?

Tipps zu Fehlerbehebung sind, dass du Dreamweaver erst mal vergessen sollst und lieber mit einem ordentlichen Programm an die Webseitentwicklung herangehst (sprich ein Editor, damit lernt man meisten). Oder alternativ nur die Code-Ansicht von DW verwendest.
Welche Webdeveloper Tools für den Browser verwendest du denn?
Mit denen kannst du anfangen, das Javascript zu debuggen. Bzw. wäre es interessant für dich, wie die Fehlermeldung genau aussieht, vielleicht gibt die schon Aufschluss über etwas.
Auch die Dokumentation von .animate() in jQuery (von mir schon ein paar mal hier verlinkt) sollte durchgelesen werden, dort stehen alle Antworten.

L. G.

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Ehm... das ist erstens nicht meine Webseite, sondern die meines Bruders

...

Zweitens ... wir sind dort nicht alleine... ich helfe im die Finanzen zu regeln und er macht die Werbung überall... andere programmieren für uns.. die kann ich aber nicht fragen, die würden mir nicht helfen ^^ ...
-------------------------------------------------------

Was für Webdeveloper Tools? .. ich verwende google chrome, firefox, opera und internet explorer... ^^ ... standard ohne irgendwelche erweiterungen oder sowas... als ftp programm habe ich das, was mein bruder benutzt - WinSCP ... Webseiten Programmieren tu ich im Dreamweaver NUR mit der codeansicht... ^^ ...

Myhar · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Achso, ich verstehe. Es hat mich lediglich verwundert, dass du so eine Seite verlinkt hast und davon nicht viel Ahnung hast ;-)

In Chrome einfach mal rechtsklick -> Element untersuchen auswählen (keine Extension, ist standardmäßig dabei). Auch Opera und IE (in der aktuellsten Version) haben solche Werkzeuge standardmäßig dabei.
Mein Favorit ist aber immer noch die Firebug Extension für Firefox.
Was alle Extensions gemeinsam haben: Du kannst Breakpoints im Javascript setzen, den Code Schritt für Schritt durchgehen. Auch kannst du, während du den Code Schritt für Schritt durchgehst, in der Konsole der Programme Javascript eingeben um zu testen, was dieser Code gerade für eine Auswirkung hat etc.
In Chrome ist es sogar möglich, den JS Code live zu verändern (kein reload notwendig)
Auch zum Untersuchen der DOM Struktur einer Webseite, bzw. nachverfolgen, welche CSS Regeln wo zur Anwendung kommen sind diese Werkzeuge unerlässlich.

L. G.

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Code:

function toggleswitch(div)
{
var option=['conti1','conti2','conti3','conti4']; // nach belieben fortsetzen ...
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; }
}

das ist der code, der die div's verschwinden lässt (auf display: none setzt) .. man müsste nur verzögern, dass er von "display: block" .... auf .... "display: none" wechselt..
und umgekehrt von "display: none" .... auf .... "display: block" aber keine verzögerung macht....

ist den das nicht möglich? ... ich suche schon seit ich heute zum erstenmal hier hinein gepostet habe, danach.. und finde immernoch keine lösung...

Myhar · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

Und ich habe dir schon 3 mal gesagt, wie das zu realisieren ist. Es ist wohl nur noch ein syntaxfehler, der das ausführen des Codes verhindert. Welcher genau, kann ich nicht sagen, da nicht mal nach 4 Antworten der genaue Fehler gepostet wurde. (geht nicht ist keine Fehlerbeschreibung)
Alternativ kannst du auch (wie schon 3 mal gesagt) die Dokumentation von jQuery durchschauen (wie gesagt, wurde von mir schon mindestens 2 mal verlinkt), dort findest du die Antwort auf deine Frage zu 100%.
Ich weiß nicht, wie man dir noch mehr helfen kann... Außer dir alles vorzuprogrammieren, worauf ich persönlich keine Lust habe. Aber das schließt nicht aus, das andere User die Lust dazu verspüren.

L. G.

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

ja myhar das wäre die allerbeste lösung glaub ich

...

AN ALLE USER DIE DAS MACHEN WÜRDEN, SAGT ES MIR!!

...

ich versuch mal diese dokumentation durchzusehen.. aber ich bin schwer von begriff und lese nicht gerne

... ^^

mal gucken...

elyion_g2 · 15.11.2011

AW: div in div - innerer DIV Breite anpassen

habe nun den syntaxfehler beheben können... es fehlt aber trotzdem was...

... die anderen div's verschwinden nicht mehr .. "display: none" wird nicht mehr ausgeführt...

www.popchorgossau.ch/testseit2/index2.php