Scheint mir eher ein Javascript-Problem zu sein: Auf der Seite mit dem Slider wird plugins.js nicht eingezogen. Auf der Seite ohne Slider sieht es so aus:
<script type="text/javascript" src="../../js/jquery.js"></script> <script type="text/javascript" src="../../js/plugins.js"></script>jQuery solltest Du natürlich nicht mehrfach einziehen, aber plugins.js brauchst Du wahrscheinlich.
Leider verschluckt das Forum einen Teil der Zeilenumbrüche. Hier noch Mal der Code ohne Code-Tags:
function show_elements(id) {
var conts = document.querySelectorAll("div[id^='cont']");
for (var i = 0; i < conts.length; i++) {
if (conts[i].id == id) conts[i].style.display = "block";
else conts[i].style.display = "none";
}
}
Das "^" in document.querySelectorAll("div[id^='cont']") gibt an, dass die ID mit "cont" beginnt,
d. h. dieser Selektor erkennt Übereinstimmung für "cont1", "cont2", "cont3" und ggf. weiter so.
In "var conts" ist conts nur ein Name, er ist mehr oder weniger beliebig und könnte genau so gut a oder x sein.
Aber es ist guter Stil, Variablennamen so festzulegen, dass zu erkennen ist, worum es sich handelt, daher habe ich conts gewählt.
Diese Lösung hat den Vorteil, dass man nur das HTML zu erweitern braucht, wenn man neue Container hinzufügt und nichts
am Javascript ändern muss.
Dir gleichfalls frohe Weihnachten und ein gutes 2017!
Da passiert gar nichts wenn ich die neue Funktion rein kopiere
Verstehe ich nicht, ich habe es getestet, bevor ich es gepostet habe, mit deinem CSS und deinem HTML. Hast Du es irgend wo online?
Einfacher ist es, den Parameter bei der Definition der Funktion direkt anzugeben. Ich hoffe, dies ist das, was Du erreichen wolltest:
function show_elements(id) { var conts = document.querySelectorAll("div[id^='cont']");
for (var i = 0; i < conts.length; i++) {
if (conts[i].id == id) conts[i].style.display = "block";
else conts[i].style.display = "none";
} }
Und benutze in Zukunft Code-Tags. Das
[i]wurde als BB-Code für "italic" interpretiert und verschluckt.
Anstatt einen Slider selber zu bauen, könntest Du auch ein Polyfill für input-range verwenden, z. B. dieses hier:
http://rangeslider.js.org/
Das sollte sich dann mit CSS stylen lassen.
1. Ich hätte dir gleich ein Javascript anbieten sollen, das mehrere Slider unterstützt. Das neue benutzt jQuery; Du musst jQuery einbinden, damit es funktioniert.
2. Wenn ich das richtig sehe, brauchst Du für jeden Slider nur ein Textinput.
3. Damit Du jeden Slider unterschiedlich stylen kannst, musst Du ihm einen spezifischen Identifier geben, z. b. eine ID, die für jeden unterschiedlich ist.
4. Das Stylen mit ::-webkit-slider-runnable-track funtioniert nicht in allen Browsern. Wenn ich das richtig sehe, ist das Stylen von Formularelementen so eine Sache. In deinem Fall könnte es angebracht sein, auf das input-range zu verzichten und einen Slider mit HTML und CSS zu bauen. CSS ist jedoch nicht meine Stärke und vielleicht kann dir jemand anders mehr dazu sagen.
<div style="padding-top: 100px;"> <input id="slider1" type="range" min="1" max="100" step="1" style="width: 400px;">
<input class="input-for-range" type="text" style="width: 200px; height: 50px; margin-left: 20Px;">
</div>
<div style="padding-top: 100px;">
<input id="slider2" type="range" min="1" max="100" step="1" style="width: 400px;">
<input class="input-for-range" type="text" style="width: 200px; height: 50px; margin-left: 20Px;">
</div>
<style>
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 16px;
cursor: pointer;
box-shadow: 2px 2px 5px #000000;
border-radius: 5px;
border: 0px solid #000000;
}
input[type=range]#slider1::-webkit-slider-runnable-track {
background: green;
}
input[type=range]#slider2::-webkit-slider-runnable-track {
background: blue;
}
</style>
<script>
$("input.input-for-range").on("keyup", function () {
var rng = $(this).prev("input");
if ($(this)[0].validity.valid) rng.val($(this).val());
}); </script>Schau mal, ob dir dies weiter hilft:
<input id="range" type="range" min="1" max="100" step="1"> <input id="input-for-range" type="text" pattern="[1-9][0-9]*">
<script>
document.getElementById("input-for-range").addEventListener("keyup", function () {
var rng = document.getElementById("range");
if (rng.validity.valid) rng.value = this.value;
}) </script>Warum PHP? Das geht ganz einfach mit Javascript:
<script> var plztopage = [
{ min_plz: "9000", page: "page9.html" },
{ min_plz: "8000", page: "page8.html" },
{ min_plz: "7000", page: "page7.html" },
{ min_plz: "6000", page: "page6.html" },
{ min_plz: "5000", page: "page5.html" },
{ min_plz: "4000", page: "page4.html" },
{ min_plz: "3000", page: "page3.html" },
{ min_plz: "2000", page: "page2.html" },
{ min_plz: "1000", page: "page1.html" },
{ min_plz: "0000", page: "page0.html" },
];
var inp = document.getElementById("input-plz");
inp.addEventListener("change", function() {
var plz = inp.value;
for (var i = 0; i < plztopage.length; i++) {
if (plz >= plztopage[i].min_plz) {
window.location.href = plztopage[i].page;
break;
}
}
}) </script>Wenn der Stoff mit einem select-option-Feld ausgewählt wird, kann man es auch mit CSS realisieren. Mit Hilfe der Pseudoklasse :selected kannst Du jeweils das Element einblenden, das zu dem betr. Feld gehört.
Na, das ist ja super. Ich hatte auch gerade einen Foreneintrag gefunden, aus dem hervor geht, dass man es im Admin-Panel einstellen kann.
Der Grund ist offenbar, dass durch die Kommentarfunktion jQuery ein zweites Mal eingebunden wird. Entfernes dieses:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>Habe es jetzt nicht analysiert, sondern nur einen kurzen Blick in die Console geworfen:
functions.js:12 Uncaught TypeError: Cannot read property 'prototype' of undefined(…)
auf der Seite, wo es nicht funktioniert. Hast Du diese Galerie selbst geschrieben?
Crux in diesem Forum: Du müsstest Code-Tags verwenden, denn hier:
Bilder[i]wird das geklammerte i als BB-Code für italic interpretiert und verschluckt.
Aber: Leider verschluckt das Forum beim Verwenden von Code-Tags die Zeilenumbrüche.
Speichere die Originalfarbe und das Originalbild in einem Data-Attribut:
<img id="dasbild" src="bild3.png" data-o-image="bild3.png" data-o-color="#345678" width="300" height="350">
und registriere ein Mouseout-Event. Dann kannst Du die Original-Eigenschaften mit getAttribute() auslesen:
var ocolor = document.getElementById("dasbild").getAttribute("data-o-color");
Edit: Mir fällt gerade auf, dass Du ja offenbar nur von dem Bildcontainer die Farbe und das Bild zurück setzen willst. Dann sind diese immer die selben und Du kannst sie hart im Javascript kodieren.
Verstehe ich nicht. Liegt dein menu-div vielleicht innerhalb von div.pics234? Am besten postest Du mal die URL deiner Seite.
Du schreibst: "dass nur Bilder der Klasse <div class="pics234">" Was hat es denn mit diesem div auf sich? Liegen die Bilder in diesem div? Dann müsstest Du einen anderen Selektor verwenden:
var images = document.querySelectorAll("div.pics234 img");Du kannst document.querySelectorAll verwenden und die Klasse im Selektor hinzu fügen:
var images = document.querySelectorAll("img.pics234");Die Eigenschaft currentTime gibt die aktuell gespielte Zeit des Videos an:
http://stackoverflow.com/questions/6380…-of-html5-video
Ja, ist im wesentlichen ein Einzeiler:
.pindex_list .pindex_product .pindex_pic { float:left; margin-right:15px; }
.pindex_list .pindex_product .pindex_content { margin-left:215px; }
@media only screen and (max-width: 799px) {
.pindex_list .pindex_product .pindex_pic { margin-left:15px; }
.pindex_list .pindex_product .pindex_content { margin-left:15px; }
}
(Forensoftware verschluckt konsequent die Zeilenumbrüche, daher ohne Code-Tags und Einrückungen.
So funktioniert es:
<img class="firstrow" src="images/dia0.jpg" alt="#"><img class="firstrow" src="images/dia1.JPG" alt="#"><img class="firstrow" src="images/dia2.JPG" alt="#"><img class="firstrow" src="images/dia3.JPG" alt="#">
<style>
.firstrow {
max-width: calc(50% - 10px);
padding: 5px; }
</style>
Die img-Tags müssen dabei ohne Zeilenumbruch in einer Zeile notiert werden.