Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Ein DIV ausklappen?
#1
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
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Ist eigentlich eine simple Sache mit jQuery.

Code:
jQuery('#dein-button').click(function(e){
  jQuery('#dein-block').slideDown();
});

Musst halt die richtigen Selektoren eintragen.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hey, die erste Nachricht hier und dann direkt auch noch was Sinnvolles thumbs up

Werde das direkt mal testen.

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
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/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
@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!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
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


.jpg  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.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Hm....ok....Gehirnfraß bei mir.....
Ich seh den Fehler nicht...Mist Mist Mist....
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
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;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
slideToggle() zu nutzen macht schon Sinn.
Hatte nur kurz was zusammengeschreibselt Wink
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Ich habe es jetzt mal mit einem ganz simplen Popup gemacht.
Eigentlich auch brauchbar (und viel arbeitsärmer).

Wie seht Ihr das?
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
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:


.jpg  Screenshot_20191203-135957_Samsung Internet.jpg (Größe: 73,27 KB / Downloads: 10)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Nur im Samsung browser?
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
(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
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

Benutze zum arbeiten: Win10 (Windows Insider) - Firefox, Edge (Chromium) - EmEditor, Visual Studio Code - WAMP,  FileZilla, paint.net und Gimp
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
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"> <!-- body { overflow-x: hidden; } --> </style>

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


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


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


.jpg  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
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
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)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!