Nein, Du brauchst nur nur eine einheitliche CSS-Datei für alle Seiten. Das Bild wird ja im HTML eingebunden, wie ich oben geschrieben habe:
ZitatDas wird wesentlich einfacher, wenn Du keine Hintergrundgrafik verwendest, sondern einfach ein img-Tag:
Code
so auf contact.html und entspr. auf impressum.hml:
Code
usw.
Also mir erschließt sich ja nicht wirklich, was es bringen soll, so etwas einfaches mit :before bzw. : after zu machen. Erschwert unnötig das Verständnis und die Lesbarkeit. Probiere lieber den Weg, den ich beschrieben habe, so ist es wesentlich einfacher.
Mit CSS kann man nur Elemente ansprechen, aber keine einzelnen Zeichen in einem input-Feld. Mit Javascript ist es jedoch ziemlich einfach:
<input id="input1" />
<script>
input1.addEventListener("keyup", function () {
this.value = this.value.replace(/ /g, '')
.replace(/[A-Z0-9]{4}/g, function (match) {
return match + ' ';
});
});
</script>ZitatBesser gesagt kann ich statt fixed etwas anderes eingeben, denn in meiner css habe ich das background-attachement: fixed bereits im „Hauptteil“ geschrieben, sprich wenn ich es bei den mediaqueries weglasse bleibt es dort ja trotzdem bestehen.
Ja, Du kannst scroll angeben, dann ist der Parallax-Effekt weg und Hintergrund und Bild bewegen sich gleich.
Nein, Du brauchst nicht zu befürchten, dass Du nervst.
Ich empfehle, den Container nicht ganz wegzuschalten, sondern nur das background-attachment:fixed erst ab einer bestimmten Breite einzuschalten, etwa so:
@media (min-width: 600px) {
.bannerabout {
background-attachment: fixed;
}
/* usw. */
}Allerdings wäre es besser, hier ein feature detect zu verwenden und mit Modernizr zu prüfen, ob dieses feature vom Browser unterstützt wird.
Edit: Erneut Ernüchterung: background-attachment:fixed wird offenbar von Modernizr nicht unterstützt und das Erkennen scheint generell problematisch zu sein:
https://stackoverflow.com/ques…ckground-attachment-fixed
PS: Hat denn mit dem Javascript der Parallax-Effekt auf deinem iPhone funktioniert? Liest man sich das Stackoverflow in #14 durch, so scheint das ja fraglich zu sein.
1. HTML so ändern, wie ich geschrieben habe. Bildadressen durch deine eigenen ersetzen.
2. CSS so ergänzen:
#banner_right {
float:left;
width:219px;
height:700px;
/* background:url(banner_left.png) no-repeat; */
}
#banner_right img {
width: 100%;
height: auto;
}D. h. das Bild wird nicht durch CSS sondern durch HTML eingebunden.
ZitatCodeWenn man auf die Startseite kommt, hat man im Mainbereich eine Grafik auf der rechten Seite. Wie kann ich das einstellen / coden das auf jeder anderen Seite die geöffnet wird ( zb kontakt, news ect ) eine andere Grafik in der selben Größße erscheint ?
Das wird wesentlich einfacher, wenn Du keine Hintergrundgrafik verwendest, sondern einfach ein img-Tag:
<div id="banner_right"><img src="banner_right_contact.jpg"></div>so auf contact.html und entspr. auf impressum.hml:
<div id="banner_right"><img src="banner_right_impressum.jpg"></div>usw.
ZitatDie Rekursivefunktion ist erstmal Zweitrangig.
Das scheint mir eher nicht so, denn das ganze Iterieren und die Rekursionen funktionieren in deinem Code nicht richtig. So geht es:
var a = [
0, 1, 2,
[4, 5, [8, 9]],
[5, 3, 9],
4, 8, 1
];
var endArray = [];
function rekDim(arr) {
for (var i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
console.log("true");
console.log("i" + i);
rekDim(arr[i]);
} else {
endArray.push(arr[i]);
}
console.log(endArray);
}
}
rekDim(a);
console.log(endArray);PS: Ernüchterung:
Ein anderer Thread bei Stackoverflow:
https://stackoverflow.com/ques…lls-with-the-page-on-ios7
sagt:
ZitatMobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript.
aber auch:
ZitatI would recommend looking into scrollr (https://github.com/Prinzhorn/skrollr). It's a parallax library allowing you to achieve the same effect. They have carefully considered issues with mobile devices too
D. h. wenn die erste Lösung, die ich eben gepostet habe, auf dem iPhone nicht funktioniert, könnte man dieses testen.
Ich habe dieses gefunden:
https://stackoverflow.com/ques…ackground-image-with-ios7
und die Lösung der DEMO aus der ersten Antwort übernommen, zunächst nur für "about" und "services". Funktioniert einwandfrei:
CSS:
/* Parallax Section */
.bannerabout {
background: center;
background-image: url(../images/Laptop.jpg);
height: 500px;
/*background-attachment: fixed;*/
background-size: 100vw 100vh; /* geaendert */
background-repeat: no-repeat;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
}
.bannerservices {
background: center;
background-image: url(../images/Idee.jpg);
height: 500px;
/*background-attachment: fixed;*/
background-size: 100vw 100vh; /* geaendert */
background-repeat: no-repeat;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
}Dies muss man bei allen Alternativen der Mediaqueries machen.
JS:
var bannerabout = $('section.bannerabout');
var bannerservices = $('section.bannerservices');
var posabout = bannerabout.offset().top;
var posservices = bannerservices.offset().top;
function posbg() {
var scrolledY = $(window).scrollTop();
bannerabout.css('background-position', 'center ' + ((scrolledY) - posabout) + 'px');
bannerservices.css('background-position', 'center ' + ((scrolledY) - posservices) + 'px');
}
posbg();
$(window).scroll(function () {
posbg();
});Kleiner Nachteil noch: Das Seitenverhältnis der Hintergrundbilder wird verzerrt. Kann ich aber noch mit wenigen zusätzlichen Berechnungen beheben.
*smile* oh ja, jetzt kommt wieder die Zeit der Adventskalender ...
Mit dem Date-Objekt warst Du schon auf dem richtigen Weg. Was für den Vergleich noch fehlt, ist die Nummer des Tages für das Bild. Die habe ich mal durch Javascript hinzu gefügt, damit man es nicht von Hand editieren muss. Dies sollte funktionieren:
<table id="Tabelle_01" width="620" height="1020" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/Adventskalender/img/fst_px/px01_01.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_01.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_02.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_02.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_03.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_03.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_04.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_04.gif')"></a>
</td>
</tr>
<tr>
<td>
<img src="/Adventskalender/img/fst_px/px01_05.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_05.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_06.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_06.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_07.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_07.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_08.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_08.gif')"></a>
</td>
</tr>
<tr>
<td>
<img src="/Adventskalender/img/fst_px/px01_09.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_09.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_10.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_10.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_11.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_11.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_12.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_12.gif')"></a>
</td>
</tr>
<tr>
<td>
<img src="/Adventskalender/img/fst_px/px01_13.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_13.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_14.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_14.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_15.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_15.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_16.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_16.gif')"></a>
</td>
</tr>
<tr>
<td>
<img src="/Adventskalender/img/fst_px/px01_17.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_17.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_18.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_18.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_19.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_19.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_20.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_20.gif')"></a>
</td>
</tr>
<tr>
<td>
<img src="/Adventskalender/img/fst_px/px01_21.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_21.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_22.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_22.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_23.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_23.gif')"></a>
</td>
<td>
<img src="/Adventskalender/img/fst_px/px01_24.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_24.gif')"></a>
</td>
</tr>
</table>
<script>
// Schleife ueber alle Bilder
var images = document.querySelectorAll("#Tabelle_01 td img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("data-day", i + 1); // Nummer des Tages als data-Attribut hinzu fuegen
images[i].src = "http://lorempixel.com/output/nature-q-c-160-160-5.jpg"; // nur zum Test
}
function switchImage(img, imgSrc) {
now = new Date();
day = now.getDate();
month = now.getMonth() + 1;
day = 3; // nur zum Test
month = 12; // nur zum Test
if (month == 12 && day >= img.getAttribute("data-day")) {
console.log("ok");
if (imgSrc != "none") {
img.src = imgSrc;
}
}
}
</script>ZitatUnd wenn man am nächsten Tag die Seite aufruft, dann sollen die bereits angeklickten Bilder sichtbar bleiben..
Das kannst Du erreichen, indem Du im Local-Storage speicherst, wenn ein Türchen geöffnet wurde.
Auch kein Problem, man muss dann nur die Hintergrundfarbe ändern:
<style>
#machinedata {
border-collapse: collapse;
}
</style>
<script>
function hightlighttime() {
var therows = machinedata.rows;
for (var i = 1; i < therows.length; i++) {
var cell = therows[i].cells[1];
cell.innerHTML = cell.innerHTML - 1; // nur zum Test
if (cell.innerHTML < 5) {
//cell.classList.add("low");
therows[i].style.color = "white";
therows[i].style.backgroundColor = "red"
} else {
therows[i].style.color = "black";
therows[i].style.backgroundColor = "white";
}
}
}
setInterval(hightlighttime, 1000);An dieser Stelle offenbaren sich die Vorteile des Verfahrens mit einer Klasse, das ich zuerst gepostet hatte, denn dann muss man nur das CSS ändern.
ZitatVergleicht der Befehl cell.innerHTML die zweite Spalte oder wie ?
Genau das tut er:
var cell = therows[i].cells[1];cells[1] ist die zweite Zelle in der Zeile. cells[0] die erste, cells[1] die zweite, cells[2] wäre die dritte.
ZitatUnd ich möchte dann das die ganze Zeile rot eingefärbt wird.
Auch das ist kein Problem:
<script>
function hightlighttime() {
var therows = machinedata.rows;
for (var i = 1; i < therows.length; i++) {
var cell = therows[i].cells[1];
cell.innerHTML = cell.innerHTML - 1; // nur zum Test
if (cell.innerHTML < 5) {
//cell.classList.add("low");
therows[i].style.color = "red"
} else {
therows[i].style.color = "black";
}
}
}
setInterval(hightlighttime, 1000);
</script>ZitatBei mir ist der Unterschied, das ich in meiner HTML Datei den Tabellenkopf definiere und in der Javascript Datei wird die Tabelle mit Inhalt gefüllt.
Ich weis deshalb nicht wie ich dann die Farbe änder.
Auch das ist kein Problem: Das Skript basiert auf dem DOM und nicht auf dem HTML-Text. DOM-Elemente bzw. Tabellenzeilen und -zellen, die Du mit Javascript hinzu fügst, werden genau so berücksichtigt.
Leider habe ich keine einfache Lösung mit CSS gefunden, um das Menü wieder zu schließen. Dieses kleine Javascript tut es jedoch:
<script>
$(".nav-container a").on("click", function () {
$("nav input#nav").trigger("click");
});
</script>Da es jQuery benutzt, musst Du es hinter den Einziehen von jQuery platzieren, am besten vor dem schließenden </body>.
Eine Alternative wäre, das Menü nicht mit absoluter Positionierung, floating etc. aus dem Fluss herauszunehmen. Dann würde es nach oben verschwinden, wenn der Browser zu dem betr. Anker springt.
Um das Skript zu verstehen, musst Du dir auch das CSS ansehehen.
Dieses Javascript:
if (cell.innerHTML < 5) {
cell.classList.add("low");
}fügt die Klasse "low" zu der Tabellenzelle hinzu, wenn der Inhalt kleiner als 5 ist.
Und dieses CSS:
#machinedata td.low {
color: red;
}ändert die Schriftfarbe auf rot, wenn die Klasse "low" bei der Tabellenzelle vorhanden ist.
Ohne CSS würde es so aussehen:
<script>
function hightlighttime() {
var therows = machinedata.rows;
for (var i = 1; i < therows.length; i++) {
var cell = therows[i].cells[1];
cell.innerHTML = cell.innerHTML - 1; // nur zum Test
if (cell.innerHTML < 5) {
//cell.classList.add("low");
cell.style.color = "red"
} else {
cell.style.color = "black";
}
}
}
setInterval(hightlighttime, 1000);
</script>ZitatDa zählst du ja selber runter und lässt die Farbe dann aufleuchten aber ich lasse die Tabelle erzeugen mit den Daten der Datenbank
Ja natürlich, ich habe ja dran geschrieben, dass das "selber runterzählen" nur zum Test ist. Meine Absicht war, dir die Lösung für die Ausleuchtung zu zeigen.
Zitatkann ich nicht auch ne Schleife davor schalten und sagen if Zeit[m]<5{Schrift.schwarz }
else (Schrift.rot) oder sowas
Genau das macht doch mein Skript. Ich habe nur den Umweg über eine Klasse gewählt, weil es dann flexibler ist. Du kannst auch den Rahmen oder den Hintergrund einfärben, nur durch Änderung des CSS.
ZitatIch habe ein iPhone, da kann man gar nichts von dem eigentlichen Bild erkennen.
Das ist ein wichtige Information. Dann kann ich leider nicht helfen, weil ich kein Apple-Gerät habe. Nur mutmaßen: Möglicherweise streikt der Browser bei diesem Element, wenn eine CSS-Eigenschaft unbekannt ist? Ich empfehle, zunächst alle erweiterten CSS-Eigenschaften für das HG-Bild wegzulassen und zu prüfen, ob es dann angezeigt wird.
Es gibt dazu auch mehrere Diskussionen bei Stackoverflow:
https://www.google.de/search?c…d=opera&ie=UTF-8&oe=UTF-8
ZitatIch frage mich warum das Parallax nicht funktioniert, auf anderen Webseiten klappt es doch auch
Das könnte daran liegen, dass man häufig unter Parallax etwas anderes versteht als einen fixierten Hintergrund, nämlich dass sich der Hintergrund ebenfalls verschiebt, nur langsamer als der Inhalt. Siehe z. B. hier:
http://pixelcog.github.io/parallax.js/
Das ist dann meistens mit Javascript realisiert.
Für mich ist die Darstellung auf meinem Handy (jetzt Chrome) bzgl. der Bilder soweit OK und ich dachte, Du hättest das Problem inzwischen schon gelöst. Kannst Du näher beschreiben, was Du mit
ZitatAllerdings auf dem Smartphone kann man nichts erkennen, als hätte man das Bild zu nah rangezoom
meinst? Da das Parallax nicht funktioniert, ist bei den Bilder natürlich oben/unten etwas ab geschnitten.
Klick mal links auf "External Resources" ...
Zu Nr. 1: Das benutzt Highcharts, die JS-Dateien sind im Fiddle im HTML so eingebunden:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>Ich empfehle aber, nicht so viele Kriegsschauplätze gleichzeitig aufzumachen, sondern dich erst Mal mit den Grundlagen von jQuery vertraut zu machen, z. B. hier:
https://www.html-seminar.de/jquery-tutorial.htm
und dich dann auf ein Projekt zu konzentrieren.