{"version":"1.0","provider_name":"Vtiger CRM Blog - Latest CRM Topics, Tips, Insights and Updates","provider_url":"https:\/\/two.vtiger.com\/blog","author_name":"Radiant","author_url":"https:\/\/two.vtiger.com\/blog\/author\/radiant\/","title":"Switchy McLayout - The new UI layout technique - Vtiger CRM Blog - Latest CRM Topics, Tips, Insights and Updates","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"cahs4zrShu\"><a href=\"https:\/\/two.vtiger.com\/blog\/archives\/switchy-mclayout-the-new-ui-layout-technique\/\">Switchy McLayout &#8211; The new UI layout technique<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/two.vtiger.com\/blog\/archives\/switchy-mclayout-the-new-ui-layout-technique\/embed\/#?secret=cahs4zrShu\" width=\"600\" height=\"338\" title=\"&#8220;Switchy McLayout &#8211; The new UI layout technique&#8221; &#8212; Vtiger CRM Blog - Latest CRM Topics, Tips, Insights and Updates\" data-secret=\"cahs4zrShu\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/**\n * WordPress inline HTML embed\n *\n * @since 4.4.0\n * @output wp-includes\/js\/wp-embed.js\n *\n * This file cannot have ampersands in it. This is to ensure\n * it can be embedded in older versions of WordPress.\n * See https:\/\/core.trac.wordpress.org\/changeset\/35708.\n *\/\n(function ( window, document ) {\n\t'use strict';\n\n\tvar supportedBrowser = false,\n\t\tloaded = false;\n\n\t\tif ( document.querySelector ) {\n\t\t\tif ( window.addEventListener ) {\n\t\t\t\tsupportedBrowser = true;\n\t\t\t}\n\t\t}\n\n\t\/** @namespace wp *\/\n\twindow.wp = window.wp || {};\n\n\tif ( !! window.wp.receiveEmbedMessage ) {\n\t\treturn;\n\t}\n\n\t\/**\n\t * Receive embed message.\n\t *\n\t * @param {MessageEvent} e\n\t *\/\n\twindow.wp.receiveEmbedMessage = function( e ) {\n\t\tvar data = e.data;\n\n\t\tif ( ! data ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! ( data.secret || data.message || data.value ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( \/[^a-zA-Z0-9]\/.test( data.secret ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tvar iframes = document.querySelectorAll( 'iframe[data-secret=\"' + data.secret + '\"]' ),\n\t\t\tblockquotes = document.querySelectorAll( 'blockquote[data-secret=\"' + data.secret + '\"]' ),\n\t\t\tallowedProtocols = new RegExp( '^https?:$', 'i' ),\n\t\t\ti, source, height, sourceURL, targetURL;\n\n\t\tfor ( i = 0; i < blockquotes.length; i++ ) {\n\t\t\tblockquotes[ i ].style.display = 'none';\n\t\t}\n\n\t\tfor ( i = 0; i < iframes.length; i++ ) {\n\t\t\tsource = iframes[ i ];\n\n\t\t\tif ( e.source !== source.contentWindow ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tsource.removeAttribute( 'style' );\n\n\t\t\t\/* Resize the iframe on request. *\/\n\t\t\tif ( 'height' === data.message ) {\n\t\t\t\theight = parseInt( data.value, 10 );\n\t\t\t\tif ( height > 1000 ) {\n\t\t\t\t\theight = 1000;\n\t\t\t\t} else if ( ~~height < 200 ) {\n\t\t\t\t\theight = 200;\n\t\t\t\t}\n\n\t\t\t\tsource.height = height;\n\t\t\t}\n\n\t\t\t\/* Link to a specific URL on request. *\/\n\t\t\tif ( 'link' === data.message ) {\n\t\t\t\tsourceURL = document.createElement( 'a' );\n\t\t\t\ttargetURL = document.createElement( 'a' );\n\n\t\t\t\tsourceURL.href = source.getAttribute( 'src' );\n\t\t\t\ttargetURL.href = data.value;\n\n\t\t\t\t\/* Only follow link if the protocol is in the allow list. *\/\n\t\t\t\tif ( ! allowedProtocols.test( targetURL.protocol ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t\/* Only continue if link hostname matches iframe's hostname. *\/\n\t\t\t\tif ( targetURL.host === sourceURL.host ) {\n\t\t\t\t\tif ( document.activeElement === source ) {\n\t\t\t\t\t\twindow.top.location.href = data.value;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tfunction onLoad() {\n\t\tif ( loaded ) {\n\t\t\treturn;\n\t\t}\n\n\t\tloaded = true;\n\n\t\tvar isIE10 = -1 !== navigator.appVersion.indexOf( 'MSIE 10' ),\n\t\t\tisIE11 = !!navigator.userAgent.match( \/Trident.*rv:11\\.\/ ),\n\t\t\tiframes = document.querySelectorAll( 'iframe.wp-embedded-content' ),\n\t\t\tiframeClone, i, source, secret;\n\n\t\tfor ( i = 0; i < iframes.length; i++ ) {\n\t\t\t\/** @var {IframeElement} *\/\n\t\t\tsource = iframes[ i ];\n\n\t\t\tsecret = source.getAttribute( 'data-secret' );\n\t\t\tif ( ! secret ) {\n\t\t\t\t\/* Add secret to iframe *\/\n\t\t\t\tsecret = Math.random().toString( 36 ).substr( 2, 10 );\n\t\t\t\tsource.src += '#?secret=' + secret;\n\t\t\t\tsource.setAttribute( 'data-secret', secret );\n\t\t\t}\n\n\t\t\t\/* Remove security attribute from iframes in IE10 and IE11. *\/\n\t\t\tif ( ( isIE10 || isIE11 ) ) {\n\t\t\t\tiframeClone = source.cloneNode( true );\n\t\t\t\tiframeClone.removeAttribute( 'security' );\n\t\t\t\tsource.parentNode.replaceChild( iframeClone, source );\n\t\t\t}\n\n\t\t\t\/*\n\t\t\t * Let post embed window know that the parent is ready for receiving the height message, in case the iframe\n\t\t\t * loaded before wp-embed.js was loaded. When the ready message is received by the post embed window, the\n\t\t\t * window will then (re-)send the height message right away.\n\t\t\t *\/\n\t\t\tsource.contentWindow.postMessage( {\n\t\t\t\tmessage: 'ready',\n\t\t\t\tsecret: secret\n\t\t\t}, '*' );\n\t\t}\n\t}\n\n\tif ( supportedBrowser ) {\n\t\twindow.addEventListener( 'message', window.wp.receiveEmbedMessage, false );\n\t\tdocument.addEventListener( 'DOMContentLoaded', onLoad, false );\n\t\twindow.addEventListener( 'load', onLoad, false );\n\t}\n})( window, document );\n<\/script>\n","description":"Web designers and Web-UI designers are now facing the next evolution.. in the display size. Wide screen monitors are catching up and people are now using more than 1280 pixel width resolution. Marc has posted an article in A List Apart, that introduces you to a layout technique called Switchy McLayout, which uses CSS and&hellip;&nbsp;.","thumbnail_url":"https:\/\/two.vtiger.com\/blog\/wp-content\/uploads\/2023\/02\/vtiger-logo-only.png","thumbnail_width":490,"thumbnail_height":399}