{"id":229599,"date":"2022-11-20T20:03:00","date_gmt":"2022-11-20T17:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229599"},"modified":"2022-11-09T08:38:30","modified_gmt":"2022-11-09T05:38:30","slug":"ett-snabbt-tips-foer-att-doelja-webblaesartillaeggsoeverlaegg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/ett-snabbt-tips-foer-att-doelja-webblaesartillaeggsoeverlaegg\/","title":{"rendered":"Ett snabbt tips f\u00f6r att d\u00f6lja webbl\u00e4sartill\u00e4ggs\u00f6verl\u00e4gg"},"content":{"rendered":"\n<p>Enligt min erfarenhet anv\u00e4nder de flesta webbl\u00e4sartill\u00e4ggs\u00f6verlagringar en bakgrund med typen av <strong>data:image\/svg+xml<\/strong>. Dessutom anv\u00e4nder var och en av dessa \u00f6verl\u00e4gg inline-stilar (snarare \u00e4n externa stilmallar) f\u00f6r att rendera sina knappar (eller vilka kontroller de v\u00e4ljer att rendera).<\/p>\n<p>Det betyder att vi kan anv\u00e4nda vissa JavaScript-tekniker f\u00f6r att hitta element som har dessa attribut och sedan v\u00e4xla deras synlighet.<\/p>\n<p>Men f\u00f6rst, varf\u00f6r skulle vi ens bry oss om att g\u00f6mma dem?<\/p>\n<h2>D\u00f6ljer webbl\u00e4sartill\u00e4ggs\u00f6verl\u00e4gg<\/h2>\n<p>Generellt sett, n\u00e4rhelst dessa \u00f6verl\u00e4gg visas, \u00e4r det f\u00f6r att spara till n\u00e5gon bokm\u00e4rkestj\u00e4nst, vare sig det \u00e4r Pinterest, Buffer, Pocket eller n\u00e5got annat.<\/p>\n<h3>Relevanta anv\u00e4ndningsfall<\/h3>\n<p>Dessutom, \u00e5tminstone i det fall jag pratar om, \u00e5terges de n\u00e4rhelst mark\u00f6ren passerar \u00f6ver en bild. Men t\u00e4nk om vi inte vill att det ska h\u00e4nda.<\/p>\n<p>Typexempel:<\/p>\n<ul>\n<li>Kanske arbetar vi p\u00e5 ett plugin som kommer att utl\u00f6sa dess \u00f6verlagring, och vi vill d\u00f6lja andra popup-f\u00f6nster.<\/li>\n<li>Eller s\u00e5 kanske vi utl\u00f6ser ett annat popup-f\u00f6nster som inneh\u00e5ller bilder, och vi vill inte att \u00f6verl\u00e4ggen ska visas p\u00e5 dessa bilder.<\/li>\n<\/ul>\n<p>Hur som helst, h\u00e4r \u00e4r ett s\u00e4tt att d\u00f6lja \u00f6verl\u00e4ggen beroende p\u00e5 dina behov.<\/p>\n<h3>Processen<\/h3>\n<p>Eftersom WordPress inkluderar jQuery som standard, kommer jag att anv\u00e4nda det som valfritt bibliotek. Men detta kan lika g\u00e4rna anv\u00e4ndas genom att hitta alla element med ett specificerat klassnamn och iterera genom dem (om du v\u00e4ljer att anv\u00e4nda vanilla JavaScript).<\/p>\n<p>F\u00f6rst vill vi b\u00f6rja med <strong>kroppselementet<\/strong> och sedan titta p\u00e5, s\u00e4g, alla <strong>sp\u00e4nnelementen<\/strong> (eftersom de tenderar att vara de mest popul\u00e4ra elementen &#8211; \u00e5terigen, bara enligt min erfarenhet &#8211; och <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">f\u00f6rbereda oss p\u00e5 att iterera igenom dem<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>D\u00e4refter vill vi kontrollera f\u00f6rekomsten av <strong>data:image\/svg+xml<\/strong> i inline style-attributet. Och, om det hittas, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e4ndra sedan synligheten f\u00f6r elementet<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n  if ('hidden' !== $(this).css('visibility')) {\n    $(this).css('visibility', 'hidden');\n  }\n}<\/code><\/pre>\n<p>Om du vill \u00e4ndra synligheten f\u00f6r elementet m\u00e5ste du st\u00e4lla in en andra klausul som tar bort det <strong>dolda<\/strong> v\u00e4rdet n\u00e4r det beh\u00f6vs. Om du vill g\u00f6ra det kan du enkelt <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4gga till detta<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n    if ('hidden' !== $(this).css('visibility')) {\n        $(this).css('visibility', 'hidden');\n    }\n} else {\n    $(this).css('visibility', 'visible');\n}<\/code><\/pre>\n<p>Den slutliga funktionen kan se ut ungef\u00e4r <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">s\u00e5 h\u00e4r<\/a> :<\/p>\n<pre><code>var hideExtensions = function() {\n\n  $('body')\n      .children('span')\n      .each(function() {\n          if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n              if ('hidden' !== $(this).css('visibility')) {\n                  $(this).css('visibility', 'hidden');\n              }\n          } else {\n              $(this).css('visibility', 'visible');\n          }\n      });\n};\n<\/code><\/pre>\n<p>D\u00e5 beh\u00f6ver du bara ringa <code>hideExtensions();<\/code>n\u00e4r det beh\u00f6vs.<\/p>\n<h2>Ett ord om prestanda<\/h2>\n<p>Eftersom vi skannar en delm\u00e4ngd av element i DOM, kan detta bli lite av ett prestandaproblem, s\u00e4rskilt om det finns m\u00e5nga element av en enda typ.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e4r \u00e4r ett snabbt tips f\u00f6r att d\u00f6lja webbl\u00e4sartill\u00e4ggs\u00f6verlagringar som Pinterest, Buffer och andra som anv\u00e4nder JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":165108,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[838,848,734,901],"tags":[1173],"class_list":["post-229599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide-foer-nyboerjare","category-handledningar","category-javascript-9","category-koda","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=229599"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229599\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=229599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=229599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=229599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}