Beiträge von fei12A

Hi basti1012 ,

aktuell sieht es so aus:
https://jsfiddle.net/1z834uf7/2/

Die Probleme liegen jetzt woanders.

1. Wenn man durch die Galerien klickt (die divs mit dem weißen Text auf schwarzem Hintergrund), schaltet das Icon um. Das soll nicht passieren.

2. Wenn man das Icon mit der Draggable-Funktion bewegt, bewegen sich die Galerien mit. Das soll auch nicht passieren.

3. Wenn die Galerien geöffnet sind und man auf das Icon klickt, sollen sich diese schließen.

4. Wenn man auf »Zwei« klickt, erscheint zu beginn nur ein schwarzer Streifen. Wieso?

Kannst du mir bitte helfen?

Hallo,

hier ist mein Code:

    var toggle = true;

function doNotToggle() {
    toggle = false;
}

var works = document.querySelector('#works');
var cross_one = document.querySelector('#cross_one');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
      if (toggle) {
          if (cross_one.style.display == "") {
              cross_one.style.display = "none";
              works_navigation.style.display = "block";
          } else {
              cross_one.style.display = "";
              works_navigation.style.display = "none";
          }
      }
});

Dieser bewirkt eine Toggle-Funktion, wenn eine SVG-Grafik angeklickt wird. Wenn ein Link innerhalb der SVG-Grafik angeklickt wird, wird die Toggle-Funktion komplett gestoppt, auch wenn man außerhalb des Links, die SVG-Grafik anklickt. Ich möchte aber, dass der Toggle nur zu dem Zeitpunkt gestoppt wird, wenn der Link angeklickt wird. Wenn ein anderer Bereich der SVG-Grafik angeklickt wird, soll die Toggle-Funktion weiterhin bestehen.

Kann mir da jemand helfen?

Danke!

Perfekt! Vielen, vielen Dank!

Hallo,

hier ist mein Code:
https://codepen.io/nicerboy/pen/LwORNV

Wenn man den Button klickt, erscheint ein div. Wenn man das div klickt, erscheint das nächste div. Wenn man den Button verschiebt, wird nicht »geklickt« (was gut ist). Wenn man das div (Klasse »trip«) verschiebt, wird dieses damit angeklickt (was nicht gut ist).

Regeln lässt sich das mit dem »mouseup«-Befehl. Dafür müsste man vermutlich dieses »let containers = $('.trip').hide(); ... });« zu jQuery machen und in ein mouseup-Teil einbauen. Das schaffe ich aber leider nicht.

Wisst ihr, wie das geht?

Wäre euch seeehr dankbar.

Grüße

Ich checke das mal, danke!

Sempervivum: Ja genau!

@basti1012: »multitoggleClass« kann ich mal recherchieren.

Hi,

ich habe hier diesen Code:
https://codepen.io/nicerboy/pen/BXpjdz

Das Ganze sollte aber nicht animiert sein. Bei Klick auf ein div sollte das nächste div (nichtanimiert) eingeblendet werden. Und das in Endlosschleife.

Wie kann man das machen?

Liebe Grüße

(Ich hoffe, ich lerne dann damit langsam ein bisschen JavaScript. )

Okay, ich habe jetzt die Schrift vom Hintergrund getrennt und jetzt sieht es gut aus.
Danke für eure Hilfe!

Hallo @Sempervivum,

danke dir!
Leider habe ich mit Version A Probleme in Safari. Der letzte Frame wird dann einfach nicht mehr dargestellt.

Und auch basti1012: Es sollte kein weicher Übergang da sein, sondern eher so typisch GIF-artig aussehen.

Hallo Sempervivum,

danke für deine Antwort!

Aktuell sieht es dann so aus:
https://codepen.io/nicerboy/pen/EqNdKY

Ich schaffe es leider nicht so, dass es funktioniert.

Hallo,

hier ist mein Code:
https://codepen.io/nicerboy/pen/ZgBRRz

Leider schaffe ich es nicht, dass sich .cls2 und .cls3 bei Klick auf den roten Button einfärben.
(Die weiße Form im Hintergrund brauche ich noch.)

Wie kann man das machen?

Liebe Grüße

Cool, danke!

Okay, danke Basti! Ich hab es jetzt geschafft.

Hallo,

ich hätte gerne eine Animation wie hier bei dem »beyond boundaries«-Schriftzug.
Wie macht man das?

Ich habe schon ein paar Sachen mit paroller.js getestet, leider wird der Text dann aber nicht direkt von der Seite reingescrollt, sondern erst ein einige Pixel raus und dann wieder rein ...

Liebe Grüße

basti1012 Es funktioniert mit meinem Code eigentlich sehr gut. Ich habe der Script-Verlinkung eine ID gegeben und dann entferne ich bei unter 960px das Script mithilfe der ID.

Lösung:

$(window).resize(function(){  if( $(this).width() <= 960 ) {  $("#script").html().remove();  } });

@basti1012 Kannst du dann die Sachen bitte wieder löschen?

if (window.innerWidth > 800) {
        var head = document.getElementsByTagName('head')[0];

        var s1 = document.createElement("script");
        s1.type = "text/javascript";
        s1.src = "js/jquery.splitter.js";
        head.appendChild(s1);
    }

Damit funktioniert es, wenn die Seite in der jeweiligen Bildschirmbreite geladen wird. Allerdings updated es nicht, wenn die Fenstergröße verändert wird.

basti1012 Unter 500px würde ich das Script gerne komplett deaktivieren. Und im Code konnte ich nichts dafür finden.

Versucht habe ich es damit:

if ($(window).width() < 500) {   alert('Less than 500');
}
else {   alert('ok');   $.getScript( 'js/jquery.splitter.js' );
}

Aber es klappt so leider nicht.

Ah und ich habe noch eine Frage:

Wie deaktiviert man die »jquery.splitter.js« für eine Window Size unter 500px?

Hey,

danke fürs Nachschauen!

Ja, bei mir bleibt er dann ungefähr bei 80 Prozent hängen. Das liegt an dem »limit: 400«-Befehl, der hier dominiert ...
Kann man in JavaScript »!important« angeben?

Grüße