|
|||
Skript nur bei bestimmter Browserbreite ausführen
Hallo Leute
Wie kann ich es denn bewerkstelligen, dass ein Skript nur ausgeführt wird, wenn die Breite des Browsers kleiner 750 Pixel ist??? |
Sponsored Links |
|
||||
Script nur bei bestimmter Browserbreite ausführen
der erste Treffer... |
Sponsored Links |
|
|||
Zitat:
Bevor ich diesen Beitrag geschrieben habe, habe ich natürlich versucht, mithilfe einer Suchmaschine eine Lösung zu finden, aber gefunden habe ich nichts. Vielleicht habe ich auch die falschen Suchbegriffe verwendet. Das zweite Suchergebnis mit deinen Suchbegriffen war jedoch genau das, was ich gesucht habe: jQuery Skripte abhängig von Viewport/Bildschirmgröße ausführen - fontface - Webdesign & more ich habe versucht, das Ganze umzusetzen, aber funktioniert hat es nicht. Siehe hier: Simple dann habe ich noch folgendes probiert, was aber auch nicht funktioniert: Simple und so sollte das Ganze funktionieren, wenn die Breite des Browserfensters < 750 Pixel ist: Simple die Seite ruft ein Skript auf, und ich möchte es so haben, dass dieses Skript entweder nur geladen oder nur ausgeführt wird, wenn die Breite des Browserfensters kleiner 750 Pixel ist. Wie bewerkstellige ich denn dies? |
|
|||
Zitat:
Zitat:
Von Javaskript habe ich gar keine Ahnung. Weiß nicht was ich tun soll, um damit mein Problem zu lösen. |
|
|||
Ich habe versucht, den Code in meine Seite zu integrieren und folgendes ist dabei herausgekommen:
Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Simple</title> <link rel="stylesheet" href="toggle.css" /> <script src="toggle.js"></script> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <div id="basic-accordian"> <div id="test-header" class="accordion_headings header_highlight" >Home</div> <div id="test-content"> <div class="accordion_child"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan. </div> </div> </div> <script> var fn = function () { if (window.matchMedia('(max-width: 749px)').matches) { console.log('viewport ist kleiner als 750'); } else { console.log('viewport ist größer/gleich 750'); } }; document.addEventListener('DOMContentLoaded', fn); window.addEventListener('resize', fn); </script> </body> </html> Ich weiß auch nicht, was die Zeile Code:
console.log('viewport ist kleiner als 750'); |
|
||||
Zitat:
Zitat:
Das Skript zeigt, wie ein JS Code ausgeführt wird, wenn die von dir genannte Bedingung eintritt. D.h. du musst lediglich deinen Code an der Stelle einbauen, an dem er aufgerufen werden soll. Die Datei toogle.js ist bereits eingebunden. |
Sponsored Links |
|
|||
Vielen Dank für deine Antwort!
Natürlich habe ich versucht, das Skript in der if-Zeile einzubinden, aber mehr als das folgende habe ich nicht zu Stande gebracht. Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Simple</title> <link rel="stylesheet" href="toggle.css" /> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <div id="basic-accordian"> <div id="test-header" class="accordion_headings header_highlight" >Home</div> <div id="test-content"> <div class="accordion_child"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan. </div> </div> </div> <script> var fn = function () { if (window.matchMedia('(max-width: 749px)').matches) { ('<script src="toggle.js"><\/script>'); } else { console.log('viewport ist größer/gleich 750'); } }; document.addEventListener('DOMContentLoaded', fn); window.addEventListener('resize', fn); </script> </body> </html> Leider funktioniert dieses Beispiel immer noch nicht. Könnt ihr mir bitte noch ein paar Tipps geben? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Text soll nur erscheinen, wenn Java Skript aktiviert ist | Erdbeertorte | (X)HTML | 4 | 05.12.2012 15:24 |
Kleines Skript: Alle Umlaute in der Datenbank reparieren | Boris | Serveradministration und serverseitige Scripte | 9 | 29.12.2011 09:18 |
Skript für Automatische eingabe | Haveaniceday | Offtopic | 8 | 18.09.2009 19:01 |
Skript Aufbau Frage ? | dan_23 | Serveradministration und serverseitige Scripte | 9 | 14.03.2008 01:01 |
Java Skript Problem mit Begrüßung body unonload | Angeltrangel | Javascript & Ajax | 11 | 26.07.2006 14:17 |