React to CSS Media Queries to invoke Dynamic Server Side Content and Logic


<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
                
    <xe:singlePageApp id="singlePageApp1" selectedPageName="page1">
    	<xe:appPage id="appPage1" pageName="page1">
            <xp:scriptBlock id="scriptBlock1" defer="true"
                type="text/javascript">
                <xp:this.value>
                    <![CDATA[
                        function mediaQueryListener(mediaQuery){
                            if(mediaQuery.matches){
                                XSP.showContent( "#{id:dynamicContent}", "content_0", {orientation: "P"} );
                            }else{
                                XSP.showContent( "#{id:dynamicContent}", "content_0", {orientation: "L"} );
                            }
                        }
                        XSP.addOnLoad(
                            function(){
                                var mediaQuery = window.matchMedia("screen and (orientation: portrait)");
                                mediaQuery.addListener(mediaQueryListener);
                                mediaQueryListener(mediaQuery);
                            }
                        );
                  ]]>
                </xp:this.value>
            </xp:scriptBlock>
		    <xe:dynamicContent id="dynamicContent" useHash="false"
		        defaultFacet="content_0">
		        <xp:this.facets>
		            <xp:panel id="container"
		                xp:key="content_0">
		                <xp:panel id="leftColumn">
		                    Left Column
		                </xp:panel>
		                <xp:panel id="rightColumn" loaded="${param.orientation == 'L'}">
		                    Right Column
		                </xp:panel>
		            </xp:panel>
		        </xp:this.facets>
		    </xe:dynamicContent>
    	</xe:appPage>
    </xe:singlePageApp>

</xp:view>
All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.
No comments yetLogin first to comment...