{"id":12,"date":"2007-10-02T00:42:31","date_gmt":"2007-10-02T06:42:31","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/index.php\/2007\/10\/02\/ajax-style-elements-and-safari\/"},"modified":"2008-08-05T20:06:35","modified_gmt":"2008-08-06T02:06:35","slug":"ajax-style-elements-and-safari","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2007\/10\/02\/ajax-style-elements-and-safari\/","title":{"rendered":"Ajax, Style elements and Safari"},"content":{"rendered":"As I mentioned before<\/a>, I don't have access to a modern version of Safari and when I pass an Apple store, I try to play with it and the site. Something<\/em> always pops up to bite me.\r\nThis time it was an improved version of my Hebrew keyboard, that I made into a popup, absolutely-positioned <div><\/code> instead of a separate page, using sprites<\/a> for the keyboard button rollovers. Nice and elegant, but it means loading the <style><\/code> element with all those a:hover {background: 0 -150px}<\/code>'s via Ajax as well. Just putting a <style><\/code> element in the loaded <div><\/code> worked fine in IE and Firefox, but today Safari wouldn't show any styles. Turns out Safari is technically right; <style><\/code>'s go in the <head><\/code>, not the middle of the <body><\/code>. That's a rule that doesn't make any sense, any more than requiring <script><\/code> elements to be limited to the <head><\/code> would. But such are the rules.\r\n\r\nI looked up a few<\/a> ways<\/a> to include a <style><\/code> element, but realized there's an easier way; I split the style into its own stylesheet and added a line to Javascript:\r\n$('head').append('<link type=\"text\/css\" href=\"\/css\/kb.css\" rel=\"stylesheet\" >');<\/code>\r\nbefore the\r\n$('<div id=\"keyboard-holder\">').insertAfter('#q').load('\/inc\/keyboard.html'); \/\/ load via Ajax<\/code>\r\nand now the style loads dynamically and easily.\r\nLuckily, jQuery handles identifying and executing <script><\/code> elements in Ajax'ed code, so I don't have to pull that out.","protected":false},"excerpt":{"rendered":"As I mentioned before, I don't have access to a modern version of Safari and when I pass an Apple store, I try to play with it and the site. Something always pops up to bite me. This time it was an improved version of my Hebrew keyboard, that I made into a popup, absolutely-positioned […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/12"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":1,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":41,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions\/41"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}