Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

 

HTML
<style>
.activeWindow {
	display: block;
}
.hiddenWindow {
	display: none;
}
.switchButton {
	margin: 10px;
	height: 25px;
	border: 1px solid #034f7c;
	color:   #ffffff !important;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#33a7e3", endColorstr="#49b8f2");
    background: linear-gradient(top, #33a7e3, #49b8f2) !important;
    background: -ms-linear-gradient(top left, #33a7e3, #49b8f2) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#33a7e3), to(#49b8f2)) !important;
    background: -moz-linear-gradient(top, #33a7e3, #49b8f2) !important;
    margin-bottom: 1px;
    margin-top:0px;
}
.switchButton:hover {
	margin: 10px;
	height: 25px;
	border: 1px solid #149dd6;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#49b8f2", endColorstr="#33a7e3");
    background: linear-gradient(top, #49b8f2, #33a7e3) !important;
    background: -ms-linear-gradient(top left, #49b8f2, #33a7e3) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#49b8f2), to(#33a7e3)) !important;
    background: -moz-linear-gradient(top, #49b8f2, #33a7e3) !important;
	color:   #ffffff !important;
    margin-top: 1px;
    margin-bottom: 0px;
    text-decoration: none;
}
#mobileContainer {
	max-width: 350px !important;
	
}
.mobileContainerTwo {
	background: url("../../download/attachments/14650850/cellPhoneBackground.jpg");
	height: 100%;
}
.hiddenIframe {
	display: none;
}
.shownIframe {
	display: block;
}	
</style>
<script type="text/javascript">
	function switchScreenSetDiv() {
		if (document.getElementById('desktopContainer').style.display=='block') {
			document.getElementById('desktopContainer').style.display='none';
			document.getElementById('mobileContainerMain').style.display='block';
			//document.getElementById('mobileContainerMain').class='activeWindow';
			//document.getElementById('desktopContainer').class='hiddenWindow';
		}
		else if (document.getElementById('mobileContainerMain').style.display=='block') {
			document.getElementById('desktopContainer').style.display='block';
			//document.getElementById('desktopContainer').class='activeWindow';
			document.getElementById('mobileContainerMain').style.display='none';
			//document.getElementById('mobileContainerMain').class='hiddenWindow';
		}
	}
	function showLoginScreen() {
		document.getElementById('phoneEmulator').className='hiddenIframe';
		document.getElementById('regIframe').className='hiddenIframe';
		document.getElementById('updateIframe').className='hiddenIframe';
		document.getElementById('loginIframe').className='shownIframe';
		
	}
	function showRegScreen() {
		document.getElementById('phoneEmulator').className='hiddenIframe';
		document.getElementById('regIframe').className='shownIframe';
		document.getElementById('updateIframe').className='hiddenIframe';
		document.getElementById('loginIframe').className='hiddenIframe';
	}
	function showUpdateScreen() {
		document.getElementById('phoneEmulator').className='hiddenIframe';
		document.getElementById('regIframe').className='hiddenIframe';
		document.getElementById('updateIframe').className='shownIframe';
		document.getElementById('loginIframe').className='hiddenIframe';
	}
</script>

<div id="mainSwitchingContainer">
 
<!-- START DESKTOP BLOCK -->
<input type="button" class="switchButton" value="Toggle Desktop/Mobile" onclick="javascript:switchScreenSetDiv();" />
<div id="desktopContainer" style="display: block;">
<br />
<h2>Desktop Screen-set</h2>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 300px;">
		<a href="#mainSwitchingContainer" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-RegistrationLogin'});">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="#mainSwitchingContainer" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-RegistrationLogin', startScreen:'gigya-register-screen'});">Register</a>
		</br></br></br>
		<a href="#mainSwitchingContainer" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-ProfileUpdate'});">Edit Your Profile</a>
		</br></br></br>
		<a href="#mainSwitchingContainer" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>
<script>
	function onLogout(response) {   
		if ( response.errorCode == 0 ) {                
			alert('You are now logged out'); 
		} 
		else { 
			alert('Error :' + response.errorMessage); 
		} 
	}
</script>
</div>
<h3>Check Out the Desktop Code</h3>
Code Block
<html>
<head>
    <title></title>
    <SCRIPT type="text/javascript" lang="javascript" src="https://cdns.gigya.com/js/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W"></SCRIPT>
</head>
<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 300px;">
<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-RegistrationLogin'});">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-RegistrationLogin', startScreen:'gigya-register-screen'});">Register</a>
        </br></br></br>
        <a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-ProfileUpdate'});">Edit Your Profile</a>
        </br></br></br>
        <a href="#" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>
<script>
    function onLogout(response) {  
        if ( response.errorCode == 0 ) {               
            alert('You are now logged out');
        }
        else {
            alert('Error :' + response.errorMessage);
        }
    }
</script></div>
</body></html>
HTML
</div>
<!-- END DESKTOP BLOCK -->
 
<!-- *********************************************** -->
 
<!-- START MOBILE BLOCK -->
<div id="mobileContainerMain" style="display: none;">
<br />
<h2>Mobile Screen-set</h2>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 660px; height: 715; background-color: #EFF4FC">
	<div id="mobileContainer" style="margin-left: 300px; width: 330px !important; height: 710px; border: 4px solid transparent; overflow: hidden;">
		<div class="mobileContainerTwo" id="mobileContainerTwo" style="text-align: center; margin: 0px auto;">
			<span id="phoneEmulator" style="color: lightgrey; text-align: center !important; font-weight: bold; font-size: 300%;"></span>
HTML
<div class="hiddenIframe" id="loginIframe">
	<iframe height="650" width="330" src="https://demogigyadmeo.gigya.com/bin/resources/misc/58LoginScreenAutoload.html"></iframe>
HTML
</div>
<div class="hiddenIframe" id="regIframe">
	<iframe height="710" width="330" src="https://demogigyadmeo.gigya.com/bin/resources/misc/58RegScreenAutoload.html"></iframe>
HTML
</div>
<div class="hiddenIframe" id="updateIframe">
	<iframe height="650" width="330" src="https://demogigyadmeo.gigya.com/bin/resources/misc/58UpdateScreenAutoload.html"></iframe>
HTML
</div> <!-- end of iframe data -->
HTML
		</div>
	</div>

	<div id="buttonsContainer" style="width: 300px; height: 715px; margin-top: -718px;">
	<a href="#mainSwitchingContainer" onclick="showLoginScreen();">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
		<a href="#mainSwitchingContainer" onclick="showRegScreen();">Register</a>&nbsp;&nbsp;&nbsp;&nbsp;
		</br></br></br>
		<a href="#mainSwitchingContainer" onclick="showUpdateScreen();">Edit Your Profile</a>&nbsp;&nbsp;&nbsp;&nbsp;
		</br></br></br>
		<a href="#mainSwitchingContainer" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<script>

gigya.socialize.addEventHandlers({
        onLogin: onLoginHandler     } );	
 
function onLoginHandler(eventObj) {
		if (eventObj) {
			gigya.accounts.hideScreenSet({containerID: 'mobileContainerTwo', screenSet:'NewRaas4nov15-RegistrationLogin'});
			gigya.accounts.hideScreenSet({containerID: 'mobileContainerTwo', screenSet:'NewRaas4nov15-ProfileUpdate'});
		}
	}
 onLoginHandler();
		function onLogout(response) {   
			if ( response.errorCode == 0 ) {                
				alert('You are now logged out'); 
			} 
			else { 
				alert('Error :' + response.errorMessage); 
			} 
		}

		</script>
	</div>
</div>
<h3>Check Out the Mobile Code</h3>
Code Block
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no"> <!-- *NOTE: It is important that this is the first item within the <head> tag! -->
    <title></title>
    <SCRIPT type="text/javascript" lang="javascript" src="httphttps://cdncdns.gigya.com/js/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W"></SCRIPT>
</head>
<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 300px;">
<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'DefaultMobile-RegistrationLogin', deviceType: 'mobile', mobileScreenSet:'DefaultMobile-RegistrationLogin'});">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'DefaultMobile-RegistrationLogin', startScreen:'gigya-register-screen',  deviceType: 'mobile', mobileScreenSet:'DefaultMobile-RegistrationLogin'});">Register</a>&nbsp;&nbsp;&nbsp;&nbsp;
        </br></br></br>
        <a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'DefaultMobile-ProfileUpdate', deviceType: 'mobile', mobileScreenSet:'DefaultMobile-ProfileUpdate'});">Edit Your Profile</a>&nbsp;&nbsp;&nbsp;&nbsp;
        </br></br></br>
        <a href="#" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <script>
        function onLogout(response) {  
            if ( response.errorCode == 0 ) {               
                alert('You are now logged out');
            }
            else {
                alert('Error :' + response.errorMessage);
            }
        }
        </script></div>
</body></html>
HTML
</div>
<!-- END MOBILE BLOCK -->
</div> <!-- /mainSwitchingContainer -->

Include Page
Template_gs working example footer
Template_gs working example footer

 

...