cecilemuller/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    First:


You need a webserver to host the 3D contents, index.html, styles.css and script.js files. You could use a local server (such as WampServer) or rent an online web host (such as MediaTemple).


Edit index.html to change the list of links. Note that you must link directly to the .wrl file, you can't view a scene embedded in an HTML page with BS Contact iOS.


On iOS:


install BS Contact iOS on your iPad/iPhone


using Safari Mobile, go the index.html page


clicking any of the links should open the viewer


## index.html
<!DOCTYPE>
<html>
<head>
	<title>3D Demos</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
	<link rel="apple-touch-icon" href="icon.png" />
	<link href="styles.css" rel="stylesheet" />
</head>
<body>


	<h1>3D demos</h1>
	<ul>
		<!-- Example links to scenes -->
		<li><a href="example/example.wrl">Example Scene (relative path)</a></li>
		<li><a href="/myfolder/example/example.x3d">Example Scene (relative path from the root)</a></li>
		<li><a href="//1.2.3.4/myfolder/example/example.wrl">Example Scene (absolute path regardless of protocol)</a></li>
		<li><a href="http://1.2.3.4/myfolder/example/example.wrl">Example Scene (absolute path)</a></li>
	</ul>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="script.js"></script>


</body>
</html>

## script.js
/**
 * Adds "bscontact:" for all VRML links if the page is viewed on iOS.
 */
var ios = navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/);
if (ios) {
	var host = 'bscontact:' + location.protocol + '//' + location.hostname;
	var path = location.pathname.substring(0, location.pathname.lastIndexOf('/'));
	$('a[href$=".wrl"], a[href$=".wrz"], a[href$=".x3d"], a[href$=".x3dv"]').each(function(){
		var link = $(this);
		var href = link.attr("href");
		if (href.substring(0, 1) == '/') link.attr("href", host + href);
		else if ((href.substring(0, 7) == 'http://') || (href.substring(0, 8) == 'https://')) link.attr("href", 'bscontact:' + href);
		else link.attr("href", host + path + '/' + href);
	});
}

## styles.css
body {
	font-family: sans-serif;
	background: #FAFAFA;
	padding: 20px
}

ul {
	padding: 0;
	margin: 0 0 40px
}

li {
	color: #9FC1DD;
}

a {
	display: block;
	border: 1px solid #CCCCCC;
	border-radius: 8px 8px 8px 8px;
	box-shadow: 0 0 6px #CCCCCC;
	margin: 15px 0;
	padding: 10px;

	color: #3399FF;
	background-color: #FFFFFF;

	text-decoration: none;
	font-weight: bold;

	-webkit-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	-ms-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

a:hover {
	color: #FFFFFF;;
	background-color: #3399FF;
}
	<!DOCTYPE>
	<html>
	<head>
	<title>3D Demos</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
	<link rel="apple-touch-icon" href="icon.png" />
	<link href="styles.css" rel="stylesheet" />
	</head>
	<body>


	<h1>3D demos</h1>
	<ul>
	<!-- Example links to scenes -->
	<li><a href="example/example.wrl">Example Scene (relative path)</a></li>
	<li><a href="/myfolder/example/example.x3d">Example Scene (relative path from the root)</a></li>
	<li><a href="//1.2.3.4/myfolder/example/example.wrl">Example Scene (absolute path regardless of protocol)</a></li>
	<li><a href="http://1.2.3.4/myfolder/example/example.wrl">Example Scene (absolute path)</a></li>
	</ul>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="script.js"></script>


	</body>
	</html>
	/**
	* Adds "bscontact:" for all VRML links if the page is viewed on iOS.
	*/
	var ios = navigator.userAgent.toLowerCase().match(/(iphone\|ipod\|ipad)/);
	if (ios) {
	var host = 'bscontact:' + location.protocol + '//' + location.hostname;
	var path = location.pathname.substring(0, location.pathname.lastIndexOf('/'));
	$('a[href$=".wrl"], a[href$=".wrz"], a[href$=".x3d"], a[href$=".x3dv"]').each(function(){
	var link = $(this);
	var href = link.attr("href");
	if (href.substring(0, 1) == '/') link.attr("href", host + href);
	else if ((href.substring(0, 7) == 'http://') \|\| (href.substring(0, 8) == 'https://')) link.attr("href", 'bscontact:' + href);
	else link.attr("href", host + path + '/' + href);
	});
	}
	body {
	font-family: sans-serif;
	background: #FAFAFA;
	padding: 20px
	}

	ul {
	padding: 0;
	margin: 0 0 40px
	}

	li {
	color: #9FC1DD;
	}

	a {
	display: block;
	border: 1px solid #CCCCCC;
	border-radius: 8px 8px 8px 8px;
	box-shadow: 0 0 6px #CCCCCC;
	margin: 15px 0;
	padding: 10px;

	color: #3399FF;
	background-color: #FFFFFF;

	text-decoration: none;
	font-weight: bold;

	-webkit-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	-ms-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	}

	a:hover {
	color: #FFFFFF;;
	background-color: #3399FF;
	}