[JS] Turn off the lights button
Dass ich und JavaScript uns nicht besonders gut verstehen, habe ich glaub ich schon ein paarmal erwähnt. Trotzdem versuche ich ja in letzter Zeit so bisschen damit zu arbeiten. Heute bei der Arbeit musste ich einen Turn off the lights button schreiben und habe festgestellt, dass kein Script das gemacht hat, was ich wollte. Irgendwie hab ich mir dann aus sechs verschiedenen Scripten selbst was zusammengebastelt, dass dann am Ende das getan hat, was ich haben wollte. Und weil ich eigentlich gar nicht sooo viel haben wollte, sondern eigentlich nur das, was in den Kommentaren der jeweiligen Posts auch gefragt wurde (und dann eigentlich nie beantwortet wurde...) habe ich beschlossen meinen Button mit euch zu teilen :)
Me and javaScript haven't really been best friends. that's a fact most of you probably will now about. Still, I try to get a little closer to it, and try writing some simpler scripts. Today at work I had to create a turn off the lights button and realized that all over the internet I could not find one script that did what I wanted. So I had to mix about six different ones until I got the result I was looking for. And since I did not have wishes like noone else but had the same questions usually asked in the comment section of each of the tutorials I decided to share my script with you.
Damit ihr euch das ganze live ansehen könnt, habe ich ein Demo geschrieben, welches das Ganze veranschaulicht.
To visualize I wrote a Demo for you to look at.
Wir haben ein Video, das wir mithilfe eines iframes einbinden, dieses fügen wir in einen Container ein, dort in unserem Seitencode, wo wir's haben wollen.
Am Ende des Codes fügen wir dann noch einen leeren Container ein, dem wir die ID shadow geben. Das wird unser ausgeschaltetes Licht. Weiter fügen wir unten noch jQuery ein, damit machen wir das ganze nämlich.
Und selbstverständlich darf unser Toggle nicht fehlen. Ihr könnt einen Button nehmen, ich habe einen Link genommen, der buchstäblich nirgends hinführt (kein href), weil ich die CSS dafür schon geschrieben hatte und er gleich aussehen sollte, wie die "richtigen" Links, die neben ihm stehen.
jQuery müsst ihr entweder runterladen und hosten, oder ihr verwendet den Google Link
Okay, the basic markup looks like this.
We have a video which we embed in an iframe, which we put in a container.
At the end of our whole markup we add another empty container to which we add the ID shadow. This is the turned off light. Also we do include jQuery, that's what we will be using.
And of course we need a toggle. You can use a button I used literally a link that does not point anywhere (no href), since I had written the CSS already and it had to look like the other links right next to it.
Add jQuery by downloading and hosting or just point to the Google Link.
Was hier besonders wichtig ist, ist der z-Index. Unser Shadow-Container soll alles verdecken, bis auf unseren Link und unser Video.
Ich hab das Video noch responsive gemacht (deswegen der Container, vor allem aber auch, weil es in Wordpress etwas aufwändiger ist, dem iframe eine Klasse zu geben als dem Container) und den Link in einen einfachen Button verwandelt.
Next for the CSS. Most important is the z-index. We wanna cover all of the content with the shadow except for the link and the video. I made my video responsive (that's why the container, and also because it is easier to add a class to that in wordpress than it is to the embeded iframe), the link got a button look.
Man bemerke, ich habe shadow keine Höhe gegeben, da 100% nicht die komplette Höhe des contents, sondern nur den Bildausschnitt bedeckt, die Höhe fügen wir dann nachher im Script hinzu. Ausserdem beginne ich mit einem ausgeblendeten shadow.
Das war's schon, jetzt können wir zum Script kommen.
Note that I do not put a height to the shadow because we want to have it cover all of our content not just what is seen in our window. We'll add the height in our script. Also I start with a shadow that is hidden.
That's it. Now for the script.
Vorher errechnen wir aber noch die Höhe des Contents und fügen diese der shadow-CSS hinzu.
Basically it is extremely simple. jQuery has a function to do exactly what I want. That's how the script looks and it does what it has to. It adds the height to our shadow and fades it in and out when clicking on our button.
Was ich dann gemacht habe, war dem Schalter eine Klasse zu geben, sobald der Schatten sichtbar ist und dann einfach den Text und z-index geändert, sobald die Klasse vorhanden war.
Und somit ist das Script festig und funktioniert absolut wunderbar.
Ich habe dafür das Markup des Links leicht anpassen müssen, weil ich noch ein icon vor dem Text hatte und dieses belassen wollte. Damit ich den Text verändern konnte, musste ich ihn also mit einer einzelnen Klasse versehen.
As I said, it works but the script is not yet as I want it. What bothered me most was that even if the light was turned off, the link still said to turn the lights off instead of on. I wanted to change that and then I did have the navbar. This had to have a higher z-index than the video because the dropdown should be above the video, but when the lights were turned off, I wanted the navbar to be hidden too. What I did was add a class to the swith when the shadow was visible and then I just adjusted the css of the navbar and the text of the link as soon as there was the class.
And then we are done and can go on.
My markup changed because I did only want to change the text of the link, but also had an icon added. So what I did was add a span around the text and only change this when toggling.
Und hier noch einmal die Endversion, die ich "Day-Version" nenne, denn es gibt ja auch noch eine zweite Möglichkeit.
And again the finished demo. I call it the day version because there is also another possibility.
Day Version
Die Frage habe ich auch in meherern Foren gefunden, die ich während meiner Recherche durchforstet habe und deswegen ich antworte in meinem Tutorial auch direkt auf die Umkehrversion.
Dazu passen wir CSS und Script leicht an und haben folgendes:
There is also a night version.
The question I often stumbled upon was if you could start with the lights turned off and so I thought I could add that in my tutorial as well.
We adjust it a little bit and the night version is done.
Night Version
edit
Me and javaScript haven't really been best friends. that's a fact most of you probably will now about. Still, I try to get a little closer to it, and try writing some simpler scripts. Today at work I had to create a turn off the lights button and realized that all over the internet I could not find one script that did what I wanted. So I had to mix about six different ones until I got the result I was looking for. And since I did not have wishes like noone else but had the same questions usually asked in the comment section of each of the tutorials I decided to share my script with you.
Damit ihr euch das ganze live ansehen könnt, habe ich ein Demo geschrieben, welches das Ganze veranschaulicht.
To visualize I wrote a Demo for you to look at.
Markup
Okay, das grundlegende Markup sieht wie folgt aus.Wir haben ein Video, das wir mithilfe eines iframes einbinden, dieses fügen wir in einen Container ein, dort in unserem Seitencode, wo wir's haben wollen.
Am Ende des Codes fügen wir dann noch einen leeren Container ein, dem wir die ID shadow geben. Das wird unser ausgeschaltetes Licht. Weiter fügen wir unten noch jQuery ein, damit machen wir das ganze nämlich.
Und selbstverständlich darf unser Toggle nicht fehlen. Ihr könnt einen Button nehmen, ich habe einen Link genommen, der buchstäblich nirgends hinführt (kein href), weil ich die CSS dafür schon geschrieben hatte und er gleich aussehen sollte, wie die "richtigen" Links, die neben ihm stehen.
jQuery müsst ihr entweder runterladen und hosten, oder ihr verwendet den Google Link
Okay, the basic markup looks like this.
We have a video which we embed in an iframe, which we put in a container.
At the end of our whole markup we add another empty container to which we add the ID shadow. This is the turned off light. Also we do include jQuery, that's what we will be using.
And of course we need a toggle. You can use a button I used literally a link that does not point anywhere (no href), since I had written the CSS already and it had to look like the other links right next to it.
Add jQuery by downloading and hosting or just point to the Google Link.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head Content -->
</head>
<body>
<!-- iframe in Container -->
<div class="video_container">
<iframe width="640" height="360" src="http://www.youtube.com/embed/2qZY3Tv3Z9c" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Toggle Button -->
<a class="lightSwitcher"> Turn off the lights </a>
<div id="shadow"></div>
<!-- jQuery -->
<script src="js/jquery-2.1.1.min.js"></script>
</body>
</html>CSS
Okay, als nächstes die CSS.Was hier besonders wichtig ist, ist der z-Index. Unser Shadow-Container soll alles verdecken, bis auf unseren Link und unser Video.
Ich hab das Video noch responsive gemacht (deswegen der Container, vor allem aber auch, weil es in Wordpress etwas aufwändiger ist, dem iframe eine Klasse zu geben als dem Container) und den Link in einen einfachen Button verwandelt.
Next for the CSS. Most important is the z-index. We wanna cover all of the content with the shadow except for the link and the video. I made my video responsive (that's why the container, and also because it is easier to add a class to that in wordpress than it is to the embeded iframe), the link got a button look.
#shadow{
background: rgba(0, 0, 0, .8);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
display: none;
}
.video_container iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 102 !important;
}
.video_container{
width: 100%;
height: 0;
padding: 56.25% 0 0 0;
position: relative;
}
.lightSwitcher{
position: relative;
z-index: 103;
color: #4F525C;
background: #F5AC0E;
padding: 7px;
font-size: 150%;
top: 10px;
}
.lightSwitcher:hover{
cursor: pointer;
background: #4F525C;
color: #F5AC0E;
text-decoration: none;
}Man bemerke, ich habe shadow keine Höhe gegeben, da 100% nicht die komplette Höhe des contents, sondern nur den Bildausschnitt bedeckt, die Höhe fügen wir dann nachher im Script hinzu. Ausserdem beginne ich mit einem ausgeblendeten shadow.
Das war's schon, jetzt können wir zum Script kommen.
Note that I do not put a height to the shadow because we want to have it cover all of our content not just what is seen in our window. We'll add the height in our script. Also I start with a shadow that is hidden.
That's it. Now for the script.
jQuery
Im Grunde, ist es enorm simpel, denn jQuery hat eine Funktion, die genau das tut, was ich haben will, das Script sieht so aus und tut was es soll, es blendet den shadow ein und aus.Vorher errechnen wir aber noch die Höhe des Contents und fügen diese der shadow-CSS hinzu.
Basically it is extremely simple. jQuery has a function to do exactly what I want. That's how the script looks and it does what it has to. It adds the height to our shadow and fades it in and out when clicking on our button.
$(document).ready(function(){
$("#shadow").css("height", $(document).height());
$(".lightSwitcher").click(function(){
$("#shadow").fadeToggle("350");
});
});Adjustments
Wie gesagt, es funktioniert super, aber es ist noch nicht ganz ausgereift. Was mich am meisten gestört hat, war dass auch bei "ausgeschaltetem" Licht immernoch "turn off the lights" stand. Das wollte ich ändern. Und dann hatte ich da nich die Navbar. Diese hat eigentlich einen z-Index, der höher ist, als das Video, weil ein offenes Dropdown nicht hinter dem Video verschwinden soll. bei ausgeschaltetem Licht hat mich diese Navbar aber gestört. Also musste der z-Index verändert werden.Was ich dann gemacht habe, war dem Schalter eine Klasse zu geben, sobald der Schatten sichtbar ist und dann einfach den Text und z-index geändert, sobald die Klasse vorhanden war.
Und somit ist das Script festig und funktioniert absolut wunderbar.
Ich habe dafür das Markup des Links leicht anpassen müssen, weil ich noch ein icon vor dem Text hatte und dieses belassen wollte. Damit ich den Text verändern konnte, musste ich ihn also mit einer einzelnen Klasse versehen.
As I said, it works but the script is not yet as I want it. What bothered me most was that even if the light was turned off, the link still said to turn the lights off instead of on. I wanted to change that and then I did have the navbar. This had to have a higher z-index than the video because the dropdown should be above the video, but when the lights were turned off, I wanted the navbar to be hidden too. What I did was add a class to the swith when the shadow was visible and then I just adjusted the css of the navbar and the text of the link as soon as there was the class.
And then we are done and can go on.
My markup changed because I did only want to change the text of the link, but also had an icon added. So what I did was add a span around the text and only change this when toggling.
<a class="lightSwitcher">
<span class="switchtext">Turn off the lights</span>
</a>$(document).ready(function(){
$("#shadow").css("height", $(document).height());
$(".lightSwitcher").click(function(){
var $this = $(this);
$("#shadow").fadeToggle("350");
$this.toggleClass('shadowvisible');
if($this.hasClass('shadowvisible')){
$('.switchtext').text('Turn on the lights');
$('.navbar').css({ "z-index": "99" });
} else {
$('.switchtext').text('Turn off the lights');
$('.navbar').css({ "z-index": "105" });
}
});
});Und hier noch einmal die Endversion, die ich "Day-Version" nenne, denn es gibt ja auch noch eine zweite Möglichkeit.
And again the finished demo. I call it the day version because there is also another possibility.
Day Version
Night Version
Es gibt auch noch die Nacht-Version.Die Frage habe ich auch in meherern Foren gefunden, die ich während meiner Recherche durchforstet habe und deswegen ich antworte in meinem Tutorial auch direkt auf die Umkehrversion.
Dazu passen wir CSS und Script leicht an und haben folgendes:
There is also a night version.
The question I often stumbled upon was if you could start with the lights turned off and so I thought I could add that in my tutorial as well.
We adjust it a little bit and the night version is done.
Markup
<a class="lightSwitcher">
<span class="switchtext">Turn on the lights</span>
</a>CSS
#shadow{
background: rgba(0, 0, 0, .8);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
display: block;
}Script
$(document).ready(function(){
$("#shadow").css("height", $(document).height());
$(".lightSwitcher").click(function(){
var $this = $(this);
$("#shadow").fadeToggle("350");
$this.toggleClass('shadowhidden');
if($this.hasClass('shadowhidden')){
$('.switchtext').text('Turn off the lights');
$('.navbar').css({ "z-index": "105" });
} else {
$('.switchtext').text('Turn on the lights');
$('.navbar').css({ "z-index": "99" });
}
});
});Night Version
2 comments:
Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+
Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered
Again a great post Myriam !!
ReplyDeleteThanks :)
Delete