{"id":557,"date":"2012-08-17T13:57:27","date_gmt":"2012-08-17T12:57:27","guid":{"rendered":"https:\/\/www.kolja-engelmann.de\/blog\/?p=557"},"modified":"2012-08-17T14:30:31","modified_gmt":"2012-08-17T13:30:31","slug":"jquery-ein-div-container-und-das-blur-event","status":"publish","type":"post","link":"https:\/\/www.kolja-engelmann.de\/blog\/2012\/08\/jquery-ein-div-container-und-das-blur-event\/","title":{"rendered":"JQuery ein div-Container und das Blur-Event"},"content":{"rendered":"<p>Ich wollte doch nur ein <code>&lt;div&gt;<\/code> auf Kommando einblenden lassen und es ebenso wieder verschwinden lassen, wenn der User den Fokus auf ein anderes Element legt, also z.B. au\u00dferhalb des <code>&lt;div&gt;<\/code> auf den Hintergrund klickt. Dazu nutzte ich folgenden Code:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;p id=\"languageSelectorContainerText\"&gt;Click to open&lt;\/p&gt;\r\n&lt;div id=\"languageSelectorContainerPopup\"&gt;&lt;\/div&gt;<\/pre>\n<p>Und das hier ist mein JQuery Javascript<\/p>\n<pre class=\"lang:js decode:true\">$(document).ready(function(){\r\n\r\n\t$(\"#languageSelectorContainerText\").click(function(){\r\n\t\t$(\"#languageSelectorContainerPopup\").fadeIn(2000);\r\n\t\t$(\"#languageSelectorContainerPopup\").focus();\r\n\t});\r\n\r\n\t$(\"#languageSelectorContainerPopup\").blur(function(){\r\n\t\t$(\"#languageSelectorContainerPopup\").fadeOut(1000);\r\n\t});\r\n});<\/pre>\n<p>Klappte nur nicht, denn eigentlich k\u00f6nnen <code>&lt;div&gt;<\/code> Elemente keinen Fokus erlangen, es sei denn man gibt ihnen einen &#8222;Tabindex&#8220;. Also rasch den HTML Quellcode angepasst und Tadaa, pl\u00f6tzlich klappt auch das Ausblenden einwandfrei.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;p id=\"languageSelectorContainerText\"&gt;Click to open&lt;\/p&gt;\r\n&lt;div id=\"languageSelectorContainerPopup\" tabindex=\"1\"&gt;&lt;\/div&gt;<\/pre>\n<p>Wer das Ganze noch einmal live sehen m\u00f6chte, kann sich das Geschribbsel bei <a href=\"http:\/\/jsfiddle.net\/EJSDE\/1\/\" target=\"_blank\">JSFiddle<\/a> ansehen.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ich wollte doch nur ein &lt;div&gt; auf Kommando einblenden lassen und es ebenso wieder verschwinden lassen, wenn der User den Fokus auf ein anderes Element legt, also z.B. au\u00dferhalb des &lt;div&gt; auf den Hintergrund klickt.&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[38],"tags":[51,60,59],"class_list":["post-557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeschnippsel","tag-html","tag-javascript","tag-jquery"],"jetpack_featured_media_url":"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/stock_html.jpg","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/comments?post=557"}],"version-history":[{"count":0,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/557\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media\/558"}],"wp:attachment":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media?parent=557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/categories?post=557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/tags?post=557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}