JavaScript - Snippets: Unterschied zwischen den Versionen
(→Links) |
(→Links) |
||
| Zeile 222: | Zeile 222: | ||
[[Mit JavaScript Get Parameter aus der URL auslesen]] | [[Mit JavaScript Get Parameter aus der URL auslesen]] | ||
| + | === Get Parameter aus URL entfernen === | ||
| + | Alle | ||
| + | var new_url = old_url.substring(0, old_url.indexOf('?')); | ||
| + | |||
| + | var oldURL = [YOUR_URL_TO_REMOVE_PARAMS] | ||
| + | var index = 0; | ||
| + | var newURL = oldURL; | ||
| + | index = oldURL.indexOf('?'); | ||
| + | if(index == -1){ | ||
| + | index = oldURL.indexOf('#'); | ||
| + | } | ||
| + | if(index != -1){ | ||
| + | newURL = oldURL.substring(0, index); | ||
| + | } | ||
=== Anchor Teil bei Links extrahieren === | === Anchor Teil bei Links extrahieren === | ||
Manchmal möchte man nur den Anchor Teil mit #meinAnchor | Manchmal möchte man nur den Anchor Teil mit #meinAnchor | ||
Version vom 10. Mai 2017, 15:36 Uhr
Links
Siehe auch
Sonderzeichen in Alert-Meldungen
Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.
Beispiel:
alert(unescape("So was d%E4mliches%21"));
Zeichen so verschlüsseln: \ \\ " \" ' \' Zeilenumbruch \n Wagenrücklauf \r (Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.) Tabulator \t
Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25
Generier Tool: http://www.salesianer.de/util/alert-umlaute.html
Teil einer Seite drucken
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.
Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011
Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.
Das JavaScript wird nachstehend vorgestellt:
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über
<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .
Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.
Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>
Fehler Behandlung
Prüfen ob ein Element existiert (normales JavaScript)
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
if( "key2" in data && data.key2 != null){
...
}
Eingaben Validieren
Handynummer validieren (normales JavaScript)
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
Datum validieren (normales JavaScript)
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
Maus
Timer
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/
Benötigte Funktionen sind window.setTimeout und window.setInterval
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);
// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}
window.setInterval(machWasOft, 1000);
Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);
Timer mit jQuery
Für größere Projekte gibt es ein komfortableres jQuery Plugin
Mit diesem Plugin geht das “Interval” setzen dann wie folgt:
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:
$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.
JavaScript - Objekte
JavaScript - Objektorientierte Programmierung
Objekte löschen
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};
JavaScript - Strings
JavaScript - HTML5 Audio
Links
Parameter an Link anhängen (jQuery)
Beispiel aus Raumrechner Mietlager
$("a.angebot").attr('href', function(i, h) {
return h + (h.indexOf('?') != -1 ? "&vol="+vol : "?vol="+vol);
});
Get Parameter aus URL auslesen
Mit JavaScript Get Parameter aus der URL auslesen
Get Parameter aus URL entfernen
Alle
var new_url = old_url.substring(0, old_url.indexOf('?'));
var oldURL = [YOUR_URL_TO_REMOVE_PARAMS] var index = 0; var newURL = oldURL; index = oldURL.indexOf('?'); if(index == -1){
index = oldURL.indexOf('#');
} if(index != -1){
newURL = oldURL.substring(0, index);
}
Anchor Teil bei Links extrahieren
Manchmal möchte man nur den Anchor Teil mit #meinAnchor
var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);
JavaScript - Verschiedenes
JavaScript Animation
Siehe Animation im Web
Sortieren
http://www.javascriptkit.com/javatutors/arraysort.shtml
Scrolling
jQuery
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
CSS - wichtig vor allem fixed.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
Smooth Scrolling für Anchor Tags oder toTop Links
Beispiel 1 (jQuery)
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
Beispiel 2 (jQuery) mit Offset
http://1stwebmagazine.com/jquery-scroll-to-anchor-point
Beispiel 3 Pushpin ToTop
jQuery Plugin enthalten in MaterializeCSS http://materializecss.com/pushpin.html
Kann für ToTop Navigation oder Fixed Navigations etc. eingesetzt werden. Liegt im Verzeichnis js/pushpin geht aber nicht ohne weiteres Standalone
//PUSHPIN TOTOP
$( document ).ready(function(){
$('.totop').pushpin({
top: 500,// distance where pin becomes fixed (class)- default 0
bottom: 'infinity', // distance when pin stops being fixed - default infinity
offset: 24 // style="top:[offset]""" - default 0
})
});
//You can remove pushpin and pushpin classes
$('.tabs-wrapper .row').pushpin('remove');
CSS
/* Class for when element is above threshold */
.pin-top {
position: relative;
}
/* Class for when element is below threshold*/
.pin-bottom {
position: relative;
}
/* Class for when element is pinned */
.pinned {
position: fixed !important;
right: 24px;
bottom: 24px;
z-index: 9;
}
/* Only necessary for window height sized blocks. */
html, body, .block {
height: 100%;
}
<body>
<a class="anchor" name="top"></a>
...
<div class="totop"><a href="top"><i class="fa fa-angle-double-up fa-2x"></i></a></div>
