zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Skript nur bei bestimmter Browserbreite ausführen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.02.2015, 12:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard 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???
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.02.2015, 17:08
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Script nur bei bestimmter Browserbreite ausführen
der erste Treffer...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.02.2015, 10:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
Tja, der Suchtreffer führt leider nur auf diesen Beitrag.
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?
Mit Zitat antworten
  #4 (permalink)  
Alt 08.02.2015, 11:25
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Ich nehme mal an du möchtest, dass dein Skript immer ausgeführt wird, wenn die Viewport-Breite einen bestimmten Wert unterschreitet, also analog zu einem Mediaquery in CSS?

Dann brauchst du eine Funktion die bei Domready und einem Resize ausgeführt wird, so zum Beispiel:
Code:
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);
Mit Zitat antworten
  #5 (permalink)  
Alt 08.02.2015, 11:33
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von web334 Beitrag anzeigen
Tja, der Suchtreffer führt leider nur auf diesen Beitrag.
Gestern gabs ja diesen Thread noch nicht
Ich meinte natürlich schon den fontface Beitrag.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.02.2015, 16:08
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Ich nehme mal an du möchtest, dass dein Skript immer ausgeführt wird, wenn die Viewport-Breite einen bestimmten Wert unterschreitet, also analog zu einem Mediaquery in CSS?
ja, genau so möchte ich das haben.


Zitat:
Zitat von inta Beitrag anzeigen
Dann brauchst du eine Funktion die bei Domready und einem Resize ausgeführt wird, so zum Beispiel:
Code:
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);
Mit diesem Skript kann ich leider gar nichts anfangen.
Von Javaskript habe ich gar keine Ahnung. Weiß nicht was ich tun soll, um damit mein Problem zu lösen.
Mit Zitat antworten
  #7 (permalink)  
Alt 09.02.2015, 09:15
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von web334 Beitrag anzeigen
Mit diesem Skript kann ich leider gar nichts anfangen.
Von Javaskript habe ich gar keine Ahnung. Weiß nicht was ich tun soll, um damit mein Problem zu lösen.
Das Skript macht das, was du ursprünglich wolltest. Aber wenn du nicht weißt was du damit anfangen sollst, dann stellt sich die Frage, warum du die Frage gestellst hast?
Mit Zitat antworten
  #8 (permalink)  
Alt 09.02.2015, 13:50
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

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>
sicherlich habe ich etwas falsch gemacht, denn es ist kein Unterschied festzustellen.

Ich weiß auch nicht, was die Zeile
Code:
		console.log('viewport ist kleiner als 750');
bewirken soll oder wie diese Zeile aussehen muss, damit das Skript toggle.js geladen wird. Ich möchte ja, dass diese Skript nur geladen oder ausgeführt wird, wenn das Fenster kleiner 750 Pixel ist.
Mit Zitat antworten
  #9 (permalink)  
Alt 09.02.2015, 14:44
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von web334 Beitrag anzeigen
sicherlich habe ich etwas falsch gemacht, denn es ist kein Unterschied festzustellen.
Warum sollte ein Unterschied feststellbar sein?
Zitat:
Zitat von web334 Beitrag anzeigen
Ich weiß auch nicht, was die Zeile
Code:
		console.log('viewport ist kleiner als 750');
bewirken soll
Diese Zeile gibt in der Konsole einen Text aus. Du findest z.b. im Firefox die Konsole im Menü Extras > Webentwickler

Zitat:
Zitat von web334 Beitrag anzeigen
oder wie diese Zeile aussehen muss, damit das Skript toggle.js geladen wird. Ich möchte ja, dass diese Skript nur geladen oder ausgeführt wird, wenn das Fenster kleiner 750 Pixel ist.
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.02.2015, 15:30
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

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>
meine anderen Versuche hatten nur Fehlermeldungen eingebracht.
Leider funktioniert dieses Beispiel immer noch nicht.
Könnt ihr mir bitte noch ein paar Tipps geben?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:56 Uhr.