Created
September 29, 2014 09:58
-
-
Save szabcsee/1e4a101ed474dd3fd572 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/bimoqa/22
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div data-closetext="Schließen" class="eb_colorbox_content eb_lightbox_form"><div class="eb_lightbox_title">Weltzeituhr - Einstellungen ändern</div><form action="https://ebase.dlh.de/ebase/home/de/_jcr_content/rightColumn1/worldclockgadget.ebase_userprefs_dialog.htx" method="POST"><div class="eb_worldclock_form_field"> | |
| <h4>Städte wählen</h4> | |
| <label class="eb_label_select" for="eb_first_clock">Uhr 1, oben</label> | |
| <div class="eb_selector" style="width: 230px;"><span style="width: 205px; -moz-user-select: none;">Frankfurt</span><select name="./first" id="eb_first_clock" class="eb_select eb_world_clock"> | |
| <option value="AMS">Amsterdam</option> | |
| <option value="BCN">Barcelona</option> | |
| <option value="TXL">Berlin</option> | |
| <option value="BRU">Brüssel</option> | |
| <option value="BUD">Budapest</option> | |
| <option value="AEP">Buenos Aires</option> | |
| <option value="ORD">Chicago</option> | |
| <option value="DEN">Denver</option> | |
| <option value="DXB">Dubai</option> | |
| <option selected="selected" value="FRA">Frankfurt</option> | |
| <option value="HAM">Hamburg</option> | |
| <option value="HKG">Hong Kong</option> | |
| <option value="JNB">Johannesburg</option> | |
| <option value="CGN">Köln</option> | |
| <option value="LGW">London</option> | |
| <option value="LAX">Los Angeles</option> | |
| <option value="SVO">Moskau</option> | |
| <option value="BOM">Mumbai</option> | |
| <option value="MUC">München</option> | |
| <option value="JFK">New York</option> | |
| <option value="CDG">Paris</option> | |
| <option value="GIG">Rio de Janeiro</option> | |
| <option value="FCO">Rom</option> | |
| <option value="SEA">Seattle</option> | |
| <option value="PVG">Shanghai</option> | |
| <option value="SZX">Shenzhen</option> | |
| <option value="SIN">Singapur</option> | |
| <option value="HND">Tokio</option> | |
| <option value="YYZ">Toronto</option> | |
| <option value="WAW">Warschau</option> | |
| <option value="VIE">Wien</option> | |
| <option value="ZRH">Zürich</option> | |
| </select></div> | |
| <label class="eb_label_select" for="eb_first_clock">Uhr 2, mitte</label> | |
| <div class="eb_selector" style="width: 230px;"><span style="width: 205px; -moz-user-select: none;">New York</span><select name="./second" id="eb_first_clock" class="eb_select eb_world_clock"> | |
| <option value="AMS">Amsterdam</option> | |
| <option value="BCN">Barcelona</option> | |
| <option value="TXL">Berlin</option> | |
| <option value="BRU">Brüssel</option> | |
| <option value="BUD">Budapest</option> | |
| <option value="AEP">Buenos Aires</option> | |
| <option value="ORD">Chicago</option> | |
| <option value="DEN">Denver</option> | |
| <option value="DXB">Dubai</option> | |
| <option value="FRA">Frankfurt</option> | |
| <option value="HAM">Hamburg</option> | |
| <option value="HKG">Hong Kong</option> | |
| <option value="JNB">Johannesburg</option> | |
| <option value="CGN">Köln</option> | |
| <option value="LGW">London</option> | |
| <option value="LAX">Los Angeles</option> | |
| <option value="SVO">Moskau</option> | |
| <option value="BOM">Mumbai</option> | |
| <option value="MUC">München</option> | |
| <option selected="selected" value="JFK">New York</option> | |
| <option value="CDG">Paris</option> | |
| <option value="GIG">Rio de Janeiro</option> | |
| <option value="FCO">Rom</option> | |
| <option value="SEA">Seattle</option> | |
| <option value="PVG">Shanghai</option> | |
| <option value="SZX">Shenzhen</option> | |
| <option value="SIN">Singapur</option> | |
| <option value="HND">Tokio</option> | |
| <option value="YYZ">Toronto</option> | |
| <option value="WAW">Warschau</option> | |
| <option value="VIE">Wien</option> | |
| <option value="ZRH">Zürich</option> | |
| </select></div> | |
| <label class="eb_label_select" for="eb_first_clock">Uhr 3, unten</label> | |
| <div class="eb_selector" style="width: 230px;"><span style="width: 205px; -moz-user-select: none;">Tokio</span><select name="./third" id="eb_first_clock" class="eb_select eb_world_clock"> | |
| <option value="AMS">Amsterdam</option> | |
| <option value="BCN">Barcelona</option> | |
| <option value="TXL">Berlin</option> | |
| <option value="BRU">Brüssel</option> | |
| <option value="BUD">Budapest</option> | |
| <option value="AEP">Buenos Aires</option> | |
| <option value="ORD">Chicago</option> | |
| <option value="DEN">Denver</option> | |
| <option value="DXB">Dubai</option> | |
| <option value="FRA">Frankfurt</option> | |
| <option value="HAM">Hamburg</option> | |
| <option value="HKG">Hong Kong</option> | |
| <option value="JNB">Johannesburg</option> | |
| <option value="CGN">Köln</option> | |
| <option value="LGW">London</option> | |
| <option value="LAX">Los Angeles</option> | |
| <option value="SVO">Moskau</option> | |
| <option value="BOM">Mumbai</option> | |
| <option value="MUC">München</option> | |
| <option value="JFK">New York</option> | |
| <option value="CDG">Paris</option> | |
| <option value="GIG">Rio de Janeiro</option> | |
| <option value="FCO">Rom</option> | |
| <option value="SEA">Seattle</option> | |
| <option value="PVG">Shanghai</option> | |
| <option value="SZX">Shenzhen</option> | |
| <option value="SIN">Singapur</option> | |
| <option selected="selected" value="HND">Tokio</option> | |
| <option value="YYZ">Toronto</option> | |
| <option value="WAW">Warschau</option> | |
| <option value="VIE">Wien</option> | |
| <option value="ZRH">Zürich</option> | |
| </select></div> | |
| <div class="eb_radio_row"> | |
| <h4>Zeitformat</h4> | |
| <div class="eb_radio_group"> | |
| <label class="eb_label_radio" for="eb_format_12h"><div class="eb_radio"> | |
| <span><div class="eb_radio"><span><input type="radio" style="opacity: 0;" value="12h" name="./format" id="eb_format_12h" class="eb_radio"></span></div></span> | |
| </div>12h</label><label class="eb_label_radio" for="eb_format_24h"><div class="eb_radio"> | |
| <span class="eb_checked"><div class="eb_radio"><span class="eb_checked"><input type="radio" style="opacity: 0;" checked="checked" value="24h" name="./format" id="eb_format_24h" class="eb_radio"></span></div></span> | |
| </div>24h</label> | |
| </div> | |
| </div> | |
| </div></form><div class="eb_button_container button_submit_container"><a class="eb_btn_small eb_btn_send" href="#"><span class="eb_icon-ok"></span><span>Speichern & Schließen</span></a></div></div> | |
| <script id="jsbin-javascript"> | |
| // Get city which is not present | |
| var getDefaultCity = function(cities) { | |
| var defaultCity; | |
| for(var i = 0; i < 3; i++){ | |
| if (cities[i].status === false){ | |
| cities[i].status = true; | |
| defaultCity = cities[i].name; | |
| break; | |
| } | |
| } | |
| return defaultCity; | |
| }; | |
| //Not Used, only for sorting | |
| var getFirstCity = function(cities) { | |
| console.log(cities[0].status + '-' + cities[1].status + '-' + cities[2].status); | |
| var defaultCity; | |
| for(var i = 0; i < 3; i++){ | |
| if (cities[i].status === true){ | |
| cities[i].status = false; | |
| defaultCity = cities[i].name; | |
| break; | |
| } | |
| } | |
| return defaultCity; | |
| }; | |
| var matchingSort = function(cities, switchedCities, i) { | |
| console.log(i); | |
| for(var j = 0; j < 3; j++) { | |
| console.log($(".eb_world_clock").eq(i).val() + '--' + cities[j].name); | |
| if (($(".eb_world_clock").eq(i).val() === cities[j].name) && (cities[j].status === true)){ | |
| var def = getFirstCity(switchedCities); | |
| console.log(def); | |
| $(".eb_world_clock").eq(i).val(def); | |
| console.log('sorting' + i + ',' + j); | |
| return; | |
| } | |
| } | |
| }; | |
| // Sort cities according to priority | |
| var sortCities = function(cities) { | |
| var switchedCities = [{name: "FRA", status: cities[0].status},{name: "JFK", status: cities[1].status},{name: "HND", status: cities[2].status}]; | |
| for(var i = 0; i < 3; i++){ | |
| matchingSort(cities, switchedCities, i); | |
| } | |
| }; | |
| // Main method on click | |
| $(".eb_world_clock").on("change", function () { | |
| console.log('changed'); | |
| // Cities | |
| var citiesOrder = [{name: "FRA", status: false},{name: "JFK", status: false},{name: "HND", status: false}]; | |
| // Set citiesOrder, what is present | |
| $.each($(".eb_world_clock"), function(i, obj){ | |
| $.each(citiesOrder, function(j, city){ | |
| if(city.name === $(obj).val()){ | |
| city.status = true; | |
| } | |
| }); | |
| }); | |
| //compare first field value to second and third | |
| if ( $(".eb_world_clock").eq(0).val() == $(".eb_world_clock").eq(1).val() || $(".eb_world_clock").eq(0).val() == $(".eb_world_clock").eq(2).val() ){ | |
| var def = getDefaultCity(citiesOrder); | |
| $(".eb_world_clock").eq(0).val(def); | |
| } | |
| //compare second field value to third | |
| if ( $(".eb_world_clock").eq(1).val() == $(".eb_world_clock").eq(2).val()){ | |
| var defc = getDefaultCity(citiesOrder); | |
| $(".eb_world_clock").eq(1).val(defc); | |
| } | |
| sortCities(citiesOrder); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div data-closetext="Schließen" class="eb_colorbox_content eb_lightbox_form"><div class="eb_lightbox_title">Weltzeituhr - Einstellungen ändern</div><form action="https://ebase.dlh.de/ebase/home/de/_jcr_content/rightColumn1/worldclockgadget.ebase_userprefs_dialog.htx" method="POST"><div class="eb_worldclock_form_field"> | |
| <h4>Städte wählen</h4> | |
| <label class="eb_label_select" for="eb_first_clock">Uhr 1, oben</label> | |
| <div class="eb_selector" style="width: 230px;"><span style="width: 205px; -moz-user-select: none;">Frankfurt</span><select name="./first" id="eb_first_clock" class="eb_select eb_world_clock"> | |
| <option value="AMS">Amsterdam</option> | |
| <option value="BCN">Barcelona</option> | |
| <option value="TXL">Berlin</option> | |
| <option value="BRU">Brüssel</option> | |
| <option value="BUD">Budapest</option> | |
| <option value="AEP">Buenos Aires</option> | |
| <option value="ORD">Chicago</option> | |
| <option value="DEN">Denver</option> | |
| <option value="DXB">Dubai</option> | |
| <option selected="selected" value="FRA">Frankfurt</option> | |
| <option value="HAM">Hamburg</option> | |
| <option value="HKG">Hong Kong</option> | |
| <option value="JNB">Johannesburg</option> | |
| <option value="CGN">Köln</option> | |
| <option value="LGW">London</option> | |
| <option value="LAX">Los Angeles</option> | |
| <option value="SVO">Moskau</option> | |
| <option value="BOM">Mumbai</option> | |
| <option value="MUC">München</option> | |
| <option value="JFK">New York</option> | |
| <option value="CDG">Paris</option> | |
| <option value="GIG">Rio de Janeiro</option> | |
| <option value="FCO">Rom</option> | |
| <option value="SEA">Seattle</option> | |
| <option value="PVG">Shanghai</option> | |
| <option value="SZX">Shenzhen</option> | |
| <option value="SIN">Singapur</option> | |
| <option value="HND">Tokio</option> | |
| <option value="YYZ">Toronto</option> | |
| <option value="WAW">Warschau</option> | |
| <option value="VIE">Wien</option> | |
| <option value="ZRH">Zürich</option> | |
| </select></div> | |
| <label class="eb_label_select" for="eb_first_clock">Uhr 2, mitte</label> | |
| <div class="eb_selector" style="width: 230px;"><span style="width: 205px; -moz-user-select: none;">New York</span><select name="./second" id="eb_first_clock" class="eb_select eb_world_clock"> | |
| <option value="AMS">Amsterdam</option> | |
| <option value="BCN">Barcelona</option> | |
| <option value="TXL">Berlin</option> | |
| <option value="BRU">Brüssel</option> | |
| <option value="BUD">Budapest</option> | |
| <option value="AEP">Buenos Aires</option> | |
| <option value="ORD">Chicago</option> | |
| <option value="DEN">Denver</option> | |
| <option value="DXB">Dubai</option> | |
| <option value="FRA">Frankfurt</option> | |
| <option value="HAM">Hamburg</option> | |
| <option value="HKG">Hong Kong</option> | |
| <option value="JNB">Johannesburg</option> | |
| <option value="CGN">Köln</option> | |
| <option value="LGW">London</option> | |
| <option value="LAX">Los Angeles</option> | |
| <option value="SVO">Moskau</option> | |
| <option value="BOM">Mumbai</option> | |
| <option value="MUC">München</option> | |
| <option selected="selected" value="JFK">New York</option> | |
| <option value="CDG">Paris</option> | |
| <option value="GIG">Rio de Janeiro</option> | |
| <option value="FCO">Rom</option> | |
| <option value="SEA">Seattle</option> | |
| <option value="PVG">Shanghai</option> | |
| <option value="SZX">Shenzhen</option> | |
| <option value="SIN">Singapur</option> | |
| <option value="HND">Tokio</option> | |
| <option value="YYZ">Toronto</option> | |
| <option value="WAW">Warschau</option> | |
| <option value="VIE">Wien</option> | |
| <option value="ZRH">Zürich</option> | |
| </select></div> | |
| <label class="eb_label_select" for="eb_first_clock">Uhr 3, unten</label> | |
| <div class="eb_selector" style="width: 230px;"><span style="width: 205px; -moz-user-select: none;">Tokio</span><select name="./third" id="eb_first_clock" class="eb_select eb_world_clock"> | |
| <option value="AMS">Amsterdam</option> | |
| <option value="BCN">Barcelona</option> | |
| <option value="TXL">Berlin</option> | |
| <option value="BRU">Brüssel</option> | |
| <option value="BUD">Budapest</option> | |
| <option value="AEP">Buenos Aires</option> | |
| <option value="ORD">Chicago</option> | |
| <option value="DEN">Denver</option> | |
| <option value="DXB">Dubai</option> | |
| <option value="FRA">Frankfurt</option> | |
| <option value="HAM">Hamburg</option> | |
| <option value="HKG">Hong Kong</option> | |
| <option value="JNB">Johannesburg</option> | |
| <option value="CGN">Köln</option> | |
| <option value="LGW">London</option> | |
| <option value="LAX">Los Angeles</option> | |
| <option value="SVO">Moskau</option> | |
| <option value="BOM">Mumbai</option> | |
| <option value="MUC">München</option> | |
| <option value="JFK">New York</option> | |
| <option value="CDG">Paris</option> | |
| <option value="GIG">Rio de Janeiro</option> | |
| <option value="FCO">Rom</option> | |
| <option value="SEA">Seattle</option> | |
| <option value="PVG">Shanghai</option> | |
| <option value="SZX">Shenzhen</option> | |
| <option value="SIN">Singapur</option> | |
| <option selected="selected" value="HND">Tokio</option> | |
| <option value="YYZ">Toronto</option> | |
| <option value="WAW">Warschau</option> | |
| <option value="VIE">Wien</option> | |
| <option value="ZRH">Zürich</option> | |
| </select></div> | |
| <div class="eb_radio_row"> | |
| <h4>Zeitformat</h4> | |
| <div class="eb_radio_group"> | |
| <label class="eb_label_radio" for="eb_format_12h"><div class="eb_radio"> | |
| <span><div class="eb_radio"><span><input type="radio" style="opacity: 0;" value="12h" name="./format" id="eb_format_12h" class="eb_radio"></span></div></span> | |
| </div>12h</label><label class="eb_label_radio" for="eb_format_24h"><div class="eb_radio"> | |
| <span class="eb_checked"><div class="eb_radio"><span class="eb_checked"><input type="radio" style="opacity: 0;" checked="checked" value="24h" name="./format" id="eb_format_24h" class="eb_radio"></span></div></span> | |
| </div>24h</label> | |
| </div> | |
| </div> | |
| </div></form><div class="eb_button_container button_submit_container"><a class="eb_btn_small eb_btn_send" href="#"><span class="eb_icon-ok"></span><span>Speichern & Schließen</span></a></div></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-javascript" type="text/javascript">// Get city which is not present | |
| var getDefaultCity = function(cities) { | |
| var defaultCity; | |
| for(var i = 0; i < 3; i++){ | |
| if (cities[i].status === false){ | |
| cities[i].status = true; | |
| defaultCity = cities[i].name; | |
| break; | |
| } | |
| } | |
| return defaultCity; | |
| }; | |
| //Not Used, only for sorting | |
| var getFirstCity = function(cities) { | |
| console.log(cities[0].status + '-' + cities[1].status + '-' + cities[2].status); | |
| var defaultCity; | |
| for(var i = 0; i < 3; i++){ | |
| if (cities[i].status === true){ | |
| cities[i].status = false; | |
| defaultCity = cities[i].name; | |
| break; | |
| } | |
| } | |
| return defaultCity; | |
| }; | |
| var matchingSort = function(cities, switchedCities, i) { | |
| console.log(i); | |
| for(var j = 0; j < 3; j++) { | |
| console.log($(".eb_world_clock").eq(i).val() + '--' + cities[j].name); | |
| if (($(".eb_world_clock").eq(i).val() === cities[j].name) && (cities[j].status === true)){ | |
| var def = getFirstCity(switchedCities); | |
| console.log(def); | |
| $(".eb_world_clock").eq(i).val(def); | |
| console.log('sorting' + i + ',' + j); | |
| return; | |
| } | |
| } | |
| }; | |
| // Sort cities according to priority | |
| var sortCities = function(cities) { | |
| var switchedCities = [{name: "FRA", status: cities[0].status},{name: "JFK", status: cities[1].status},{name: "HND", status: cities[2].status}]; | |
| for(var i = 0; i < 3; i++){ | |
| matchingSort(cities, switchedCities, i); | |
| } | |
| }; | |
| // Main method on click | |
| $(".eb_world_clock").on("change", function () { | |
| console.log('changed'); | |
| // Cities | |
| var citiesOrder = [{name: "FRA", status: false},{name: "JFK", status: false},{name: "HND", status: false}]; | |
| // Set citiesOrder, what is present | |
| $.each($(".eb_world_clock"), function(i, obj){ | |
| $.each(citiesOrder, function(j, city){ | |
| if(city.name === $(obj).val()){ | |
| city.status = true; | |
| } | |
| }); | |
| }); | |
| //compare first field value to second and third | |
| if ( $(".eb_world_clock").eq(0).val() == $(".eb_world_clock").eq(1).val() || $(".eb_world_clock").eq(0).val() == $(".eb_world_clock").eq(2).val() ){ | |
| var def = getDefaultCity(citiesOrder); | |
| $(".eb_world_clock").eq(0).val(def); | |
| } | |
| //compare second field value to third | |
| if ( $(".eb_world_clock").eq(1).val() == $(".eb_world_clock").eq(2).val()){ | |
| var defc = getDefaultCity(citiesOrder); | |
| $(".eb_world_clock").eq(1).val(defc); | |
| } | |
| sortCities(citiesOrder); | |
| }); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Get city which is not present | |
| var getDefaultCity = function(cities) { | |
| var defaultCity; | |
| for(var i = 0; i < 3; i++){ | |
| if (cities[i].status === false){ | |
| cities[i].status = true; | |
| defaultCity = cities[i].name; | |
| break; | |
| } | |
| } | |
| return defaultCity; | |
| }; | |
| //Not Used, only for sorting | |
| var getFirstCity = function(cities) { | |
| console.log(cities[0].status + '-' + cities[1].status + '-' + cities[2].status); | |
| var defaultCity; | |
| for(var i = 0; i < 3; i++){ | |
| if (cities[i].status === true){ | |
| cities[i].status = false; | |
| defaultCity = cities[i].name; | |
| break; | |
| } | |
| } | |
| return defaultCity; | |
| }; | |
| var matchingSort = function(cities, switchedCities, i) { | |
| console.log(i); | |
| for(var j = 0; j < 3; j++) { | |
| console.log($(".eb_world_clock").eq(i).val() + '--' + cities[j].name); | |
| if (($(".eb_world_clock").eq(i).val() === cities[j].name) && (cities[j].status === true)){ | |
| var def = getFirstCity(switchedCities); | |
| console.log(def); | |
| $(".eb_world_clock").eq(i).val(def); | |
| console.log('sorting' + i + ',' + j); | |
| return; | |
| } | |
| } | |
| }; | |
| // Sort cities according to priority | |
| var sortCities = function(cities) { | |
| var switchedCities = [{name: "FRA", status: cities[0].status},{name: "JFK", status: cities[1].status},{name: "HND", status: cities[2].status}]; | |
| for(var i = 0; i < 3; i++){ | |
| matchingSort(cities, switchedCities, i); | |
| } | |
| }; | |
| // Main method on click | |
| $(".eb_world_clock").on("change", function () { | |
| console.log('changed'); | |
| // Cities | |
| var citiesOrder = [{name: "FRA", status: false},{name: "JFK", status: false},{name: "HND", status: false}]; | |
| // Set citiesOrder, what is present | |
| $.each($(".eb_world_clock"), function(i, obj){ | |
| $.each(citiesOrder, function(j, city){ | |
| if(city.name === $(obj).val()){ | |
| city.status = true; | |
| } | |
| }); | |
| }); | |
| //compare first field value to second and third | |
| if ( $(".eb_world_clock").eq(0).val() == $(".eb_world_clock").eq(1).val() || $(".eb_world_clock").eq(0).val() == $(".eb_world_clock").eq(2).val() ){ | |
| var def = getDefaultCity(citiesOrder); | |
| $(".eb_world_clock").eq(0).val(def); | |
| } | |
| //compare second field value to third | |
| if ( $(".eb_world_clock").eq(1).val() == $(".eb_world_clock").eq(2).val()){ | |
| var defc = getDefaultCity(citiesOrder); | |
| $(".eb_world_clock").eq(1).val(defc); | |
| } | |
| sortCities(citiesOrder); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment