{"id":5356,"date":"2010-01-21T17:54:51","date_gmt":"2010-01-22T00:54:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=5356"},"modified":"2010-01-21T17:55:39","modified_gmt":"2010-01-22T00:55:39","slug":"fallback-content","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/javascript\/fallback-content\/","title":{"rendered":"JavaScript Required Content with Fallback Content"},"content":{"rendered":"

JavaScript-required area is hidden with inline CSS, and then shown after it loads with a small snippet of JavaScript. Below that, noscript tags are used for fallback content. So only one or the other of these bits of content will be required depending on if JavaScript is enabled or not.<\/p>\n

<!-- JavaScript-Required Content -->\r\n<div id=\"photoslider\" style=\"display:none\">Javascript photoslider<\/div>\r\n<script>document.getElementById('photoslider').style.display='';<\/script>\r\n<!-- END JavaScript-Required Content -->\r\n\r\n<!-- Fallback Content -->\r\n<noscript><div id=\"photo\">Alternative static photo as content when javascript is turned off<\/div><\/noscript>\r\n<!-- END Fallback Content --><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"

JavaScript-required area is hidden with inline CSS, and then shown after it loads with a small snippet of JavaScript. Below that, noscript tags are used for fallback content. So only one or the other of these bits of content will be required depending on if JavaScript is enabled or not. <!– JavaScript-Required Content –> <div […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3357,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":4374,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/strip-html-tags-in-javascript\/","url_meta":{"origin":5356,"position":0},"title":"Strip HTML Tags in JavaScript","date":"October 9, 2009","format":false,"excerpt":"let strippedString = originalString.replace(\/(<([^>]+)>)\/gi, \"\"); CodePen Embed Fallback","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":301276,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/required-parameters-for-functions-in-javascript\/","url_meta":{"origin":5356,"position":1},"title":"Required Parameters for Functions in JavaScript","date":"January 2, 2020","format":false,"excerpt":"Ooo this is clever! I'm snagging this from David's blog. const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; \/\/ These will throw errors hello(); hello(undefined); \/\/ These will not hello(null); hello('David'); The idea here is\u2026","rel":"","context":"In \"error handling\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6855,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/test-if-element-supports-attribute\/","url_meta":{"origin":5356,"position":2},"title":"Test if Element Supports Attribute","date":"July 16, 2010","format":false,"excerpt":"Not all browsers support all attributes on all elements. There are a number of new attributes in HTML5, so the idea of testing to see what kind of browser environment you are in becomes every increasingly important. function elementSupportsAttribute(element, attribute) { var test = document.createElement(element); if (attribute in test) {\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":187264,"url":"https:\/\/css-tricks.com\/lodge\/svg\/27-animating-svg-javascript\/","url_meta":{"origin":5356,"position":3},"title":"27: Animating SVG with JavaScript","date":"November 1, 2014","format":false,"excerpt":"JavaScript is the last of the ways we'll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can't do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330211,"url":"https:\/\/css-tricks.com\/video-screencasts\/199-messing-with-jsx\/","url_meta":{"origin":5356,"position":4},"title":"#199: Messing with JSX","date":"December 9, 2020","format":false,"excerpt":"I probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets in JavaScript into a function call. So, if you write\u2026","rel":"","context":"In \"jsx\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305227,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/getting-first-and-last-items-in-array-and-splitting-all-the-rest\/","url_meta":{"origin":5356,"position":5},"title":"Getting First and Last Items in Array (and splitting all the rest)","date":"October 30, 2018","format":false,"excerpt":"I\u00a0needed\u00a0to get the first item from an array lately in JavaScript.\u00a0Hmmmm \u2026 lemme think here.\u00a0I remember that\u00a0.pop()\u00a0is for snagging the\u00a0last\u00a0item from the array, like this: const arr = [\"This\", \"Little\", \"Piggy\"]; const first = arr.pop(); console.log(first); \/\/ \"Piggy\" So what\u2019s the opposite of .pop()?\u00a0(Please pause for light web searching\u2026)\u00a0Ah ha!\u2026","rel":"","context":"In \"JavaScript\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5356"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5356"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5356\/revisions"}],"predecessor-version":[{"id":5359,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/5356\/revisions\/5359"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3357"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5356"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}