NOF-Schule | Forum

stobi_de · 02.12.2019, 19:27

Tommy hatte das schonmal irgendwo vergestellt, aber ich finde es nicht.
https://www.afripix.de/hold/

Im Block
"Unsere Sicherungssysteme in der Übersicht"
Gibt es 3 Produkte mit einem Button bei Mouseover.

ich hatte geplant, einfach ein Popup anzuzeigen beim Klicken.
Aber da soll nun erheblich mehr Text rein.

Also will ich ein ganzes Div aufklappen.

Frank

gehKa · 02.12.2019, 22:04

Ist eigentlich eine simple Sache mit jQuery.

Code:
jQuery('#dein-button').click(function(e){

  jQuery('#dein-block').slideDown();

});

Musst halt die richtigen Selektoren eintragen.

stobi_de · 02.12.2019, 22:31

Hey, die erste Nachricht hier und dann direkt auch noch was Sinnvolles thumbs up

Werde das direkt mal testen.

Frank

Tommy Herrmann · (Dieser Beitrag wurde zuletzt bearbeitet: 03.12.2019, 06:37 von Tommy Herrmann.)

Moin gehKa,

willkommen bei uns im Forum :hallo:

@Frank,

ich glaube Du meinst dieses Beispiel hier von mir, am Button "Slide / Toggle" (ganz oben):

http://www.mobirise-tutorials.com/Testse...ungen.html

Dort ist ein Link zu meiner HTML, CSS und diesem JavaScript:

Code:
<!-- Slider von oben nach unten JavaScript in die Seiteneinstellungen am 'end of <body> code' -->

<script type="text/javascript">

    $(document).ready(function(){

        $(".slide-toggle").click(function(){

            $(".box").slideToggle(1000);

            });

        });

</script>

Hier noch einige andere Beispiele auf meinen alten NOF-Seiten:

http://www.nof-tutorials.com/Formular-Sl...orial.html

http://www.nof-tutorials.com/jQuery-Beispiele/

http://www.nof-tutorials.com/jQuery-Slide/

http://www.nof-tutorials.com/Formular-Slider/

stobi_de · 03.12.2019, 11:44

@Tommy: klappt das auf einem Handy?
Ich habe es mal eingebaut, weiß aber noch nicht, ob mir das gefällt.

@gehKa: ich glaube, Deine Lösung gefällt mir besser, bin aber in Javascript komplett eingerostet (Werner hat schon recht - zu Mobi-verwöhnt)

Ich habe nun die 3 Mobi-Blöcke erstmal verschwinden lassen mit
<script>
jQuery('#content9-7g-hoehensicherung').slideUp();
jQuery('#content9-7h-gurt').slideUp();
jQuery('#content9-7d-hold-system').slideDown();
);
</script>

Soweit OK

Nun will ich aber den Button "Mehr Info" so verbinden (hier die erste ID)

<script>
jQuery('#ID-BTN-HOLD').click(function(e)
{
jQuery('#content9-7g-hoehensicherung').slideUp();
jQuery('#content9-7h-gurt').slideUp();
jQuery('#content9-7d-hold-system').slideDown();
}
);
</script>

Aber wie verbinde ich die Aktion nun mit dem Button. Au weia----ich wusste das mal!

Tommy Herrmann · (Dieser Beitrag wurde zuletzt bearbeitet: 03.12.2019, 12:02 von Tommy Herrmann.)

Moin,

nee - Dein Versuch funktioniert nicht an meinem Handy. Du hast aber da auch was falsch gemacht, denn Du hast einen riesen Querscroller am Handy kreiert :eek:

Mein Script funktioniert aber eigentlich sehr gut am Handy:

http://www.mobirise-tutorials.com/Testse...ungen.html

Slide_Toggle_am_Samsung.jpg (Größe: 909,35 KB / Downloads: 4)

... im Übrigen sind doch beide Scripts fast gleich :confused:

Guckst Du auch mal hier:

https://www.w3schools.com/jquery/eff_slidedown.asp

Ob das "gefällt" ist ja keine Frage, das hat doch nur mit der CSS zu tun, die Du natürlich anpassen musst, bis es Dir gefällt.

stobi_de · 03.12.2019, 12:03

Hm....ok....Gehirnfraß bei mir.....
Ich seh den Fehler nicht...Mist Mist Mist....

Tommy Herrmann · (Dieser Beitrag wurde zuletzt bearbeitet: 03.12.2019, 12:06 von Tommy Herrmann.)

Zeige mal Deine CSS

... so sieht meine aus (natürlich passt die so nicht auf Deiner Seite:

Code:
/* meine CSS vom Button und der Slide Box in den 'Code-Editor' im Bereich 'CSS-Editor' */                

.btn-round-xs {

  border-radius: 20px;

  padding-left: 30px;

  padding-right: 30px;

  font-size: 12px;

  text-align: center;

}

.box {

  float: left;

  overflow: hidden;

  background: rgba(25, 25, 112, 0.7);

  border-style: solid;

  border-width: 2px 2px 2px 2px;

  border-color: #fff;

  border-radius: 10px 10px 10px 10px;

  box-shadow: 5px 5px 5px #888888;

  width: 600px;

  max-width: 95%;

  display: none;

  margin: auto;

  left: 0;

  right: 0;

  position: absolute;

  z-index: 2000;

}

.box-inner {

  width: 100%;

  padding: 10px;

}

gehKa · 03.12.2019, 13:12

slideToggle() zu nutzen macht schon Sinn.
Hatte nur kurz was zusammengeschreibselt Wink

stobi_de · 03.12.2019, 13:56

Ich habe es jetzt mal mit einem ganz simplen Popup gemacht.
Eigentlich auch brauchbar (und viel arbeitsärmer).

Wie seht Ihr das?

Tommy Herrmann · 03.12.2019, 15:06

Frank,

Du weißt aber schon, dass Deine Seite irgendwo ein

overflox-x: hidden;

drinnen hat, das am Handy nicht wirkt. Das scheint irgendwie mit dieser externen Navigation zu tun zu haben und es gibt jede Menge auskommentierte Zeilen im Quelltext.

Ich denke, bevor Du da irgend etwas anderes machst, müsstest Du zunächst mal diesen Fehler finden.

So sieht das am Handy aus, 80% der Seite sind (nach rechts) leer, wenn ich das "overflow-x: hidden" rausnehme, dann sieht die Seite am Desktop genauso schlimm aus:

Screenshot_20191203-135957_Samsung Internet.jpg (Größe: 73,27 KB / Downloads: 10)

stobi_de · 03.12.2019, 16:30

Nur im Samsung browser?

Werner123 · 03.12.2019, 16:45

(03.12.2019, 11:44)stobi_de schrieb: Ich habe nun die 3 Mobi-Blöcke erstmal verschwinden lassen mit
<script>
jQuery('#content9-7g-hoehensicherung').slideUp();
jQuery('#content9-7h-gurt').slideUp();
jQuery('#content9-7d-hold-system').slideDown();
);
</script>

Soweit OK

Nun will ich aber den Button "Mehr Info" so verbinden (hier die erste ID)

Das ist nun wirklich nicht schwer:

Code:
<script>

$('#content9-7d-hold-system').hide();

$('#content9-7g-hoehensicherung').hide();

$('#ID-BTN-HOLD').click(function(e) {

 $('#content9-7d-hold-system').slideToggle(500);

  $('#content9-7g-hoehensicherung').hide();

 }

);

$('#ID-BTN-SICHERUNG').click(function(e) {

 $('#content9-7g-hoehensicherung').slideToggle(500);

  $('#content9-7d-hold-system').hide();

 }

);

</script>

Hier ein Beispiel:
https://werner-zenk.de/test/slideToggle/slidetoggle.php

Tommy Herrmann · (Dieser Beitrag wurde zuletzt bearbeitet: 03.12.2019, 17:57 von Tommy Herrmann.)

Du, ich habe heute nur mein eigenes Handy (Samsung) hier.

Das hat aber auf keinen Fall etwas in einer responsiven Seite zu suchen, das ist schlichtweg falsch (keine Ahnung wieso das in Deiner Seite ist). Achte auf den riesen Scrollbalken :eek:

Zitat:<style type="text/css">  </style>

Wenn ich diese Anweisung entferne, dann sieht das in jedem Browser so aus, hier am Desktop im Firefox:

Firefox.JPG (Größe: 228,11 KB / Downloads: 7)

... übrigens so sieht es im IE11 aus:

IE11.JPG (Größe: 303,47 KB / Downloads: 8)

P.S.:

... übrigens - auf dieser Unterseite ist alles in Ordnung:

https://www.afripix.de/hold/kontakt-abst...decker.php

stobi_de · 03.12.2019, 17:59

Das ist dieses Logo, was bis zum Rand reichen soll....
Die "Lösung" stammte vom Programmierer von NAVIK.
Aber scheinbar doch nicht so ganz.

Das Logo soll sich halt verhalten wie das bei http://www.fallprotectionengineering.eu/

Das ist mit Mobi echt schlecht zu lösen (für mich)

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken