well i've done the space shooter tutorial and run the compiled webgl app in a html file, but I noticed that the top screen area is cut off I can scroll down and see the rest of the game app, the bottom shows as expected and if I press the fullscreen button, obviously the game shows off entirely on the screen but I want to show the entire screen in the browser not in the fullscreen mode, another thing I noticed is that if i zoom out the page to 75%, the screen in the browser shows as expected but if I zoom in to 100%, for example, that's when the top screen area gets cut off, I was thinking of giving a default zoom via js or css, but someone recommended not to depend on that, so what can i do??? please help...
with 100% zoom
with 75% zoom
here is the code for the html file:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | SpaceShooter</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 600px; height: 900px;"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">SpaceShooter</div>
</div>
</div>
</body>
</html>
I am trying to load a local (not served from a server) HTML file that has an embedded SVG in it. The HTML looks like this:
<!DOCTYPE html>
<html style="overflow: hidden">
<head>
<meta charset="UTF-8">
<title>icon_people_search</title>
</head>
<body style="overflow: hidden; ">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 72" xml:space="preserve">
<path class="st0" d="M46.1,51c-4.9,0-9.5-1.9-12.9-5.4c-3.5-3.5-5.4-8-5.4-12.9s1.9-9.5,5.4-12.9c0.7-0.7,1.5-1.3,2.3-1.9
c-2.5-3.4-6.6-5.6-11.2-5.6c-7.6,0-13.7,6-13.7,13.4c0,5,2.8,9.5,7,11.8C7.5,40.5,0.2,50,0.2,60h48.1c0-3-0.7-6.1-1.9-8.8
C46.3,51.2,46.2,51,46.1,51z"/>
<path class="st0" d="M71.8,52.3L59.5,40c3.2-5.8,2.4-13.3-2.6-18.3c-6-6-15.7-6-21.7,0s-6,15.7,0,21.7c4.9,4.9,12.4,5.8,18.3,2.6
l12.3,12.3L71.8,52.3z M40.3,38.4c-3.2-3.2-3.2-8.4,0-11.7c3.2-3.2,8.4-3.2,11.7,0c3.2,3.2,3.2,8.4,0,11.7
C48.8,41.7,43.5,41.7,40.3,38.4z"/>
</svg>
</body>
</html>
The HTML displays correctly in Firefox, Chrome, and Safari on Mac OS X. It also displays correctly on Android 4 and above's WebView.
However, it does not display on iOS 8 using a WKWebView and Swift. There don't seem to be any errors. The WKWebView just displays as a blank, white box.
Any idea why it's not working, and how I can make it work? I've seen some examples for iOS where the SVG as embedded using an <embed> or <object> tag, but I need the SVG to be inline as shown above so that it can be manipulated with JavaScript/jQuery to change fill colors of elements in the SVG.
Any thoughts, ideas, or examples?
Working fine for my in a WKWebView targeting the iOS 9 SDK. Maybe something is wrong with your string HTML formatting? Make sure you escape all double quote characters and set your baseUrl.
let webview = WKWebView(frame: self.view.frame)
self.view.addSubview(webview)
self.view.bringSubviewToFront(webview)
let html = "<!DOCTYPE html><html style=\"overflow: hidden\"><head><meta charset=\"UTF-8\"><title>icon_people_search</title></head><body style=\"overflow: hidden; \"><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 72 72\" xml:space=\"preserve\"><path class=\"st0\" d=\"M46.1,51c-4.9,0-9.5-1.9-12.9-5.4c-3.5-3.5-5.4-8-5.4-12.9s1.9-9.5,5.4-12.9c0.7-0.7,1.5-1.3,2.3-1.9c-2.5-3.4-6.6-5.6-11.2-5.6c-7.6,0-13.7,6-13.7,13.4c0,5,2.8,9.5,7,11.8C7.5,40.5,0.2,50,0.2,60h48.1c0-3-0.7-6.1-1.9-8.8C46.3,51.2,46.2,51,46.1,51z\"/><path class=\"st0\" d=\"M71.8,52.3L59.5,40c3.2-5.8,2.4-13.3-2.6-18.3c-6-6-15.7-6-21.7,0s-6,15.7,0,21.7c4.9,4.9,12.4,5.8,18.3,2.6l12.3,12.3L71.8,52.3z M40.3,38.4c-3.2-3.2-3.2-8.4,0-11.7c3.2-3.2,8.4-3.2,11.7,0c3.2,3.2,3.2,8.4,0,11.7C48.8,41.7,43.5,41.7,40.3,38.4z\"/></svg></body></html>"
webview.loadHTMLString(html, baseURL: NSBundle.mainBundle().bundleURL)
I am new to coding and playing around with the Bakery template in WebMatrix. I have implemented LightBox, and it seems to be working, however, it doesn't seem to be pulling the correct image. On my page, I have thumbnails displayed on the screen. When you click, I am trying to open the 'non-Thumbnail' sized pictures to you can see more detail. However, it still looks like the Thumbnail size. I have a File Directory structure for my pictures of ~\Images\Products This is where the large images reside. Then I have ~\Images\Products\Thumbnails for the small images. Here is my code where I am displaying the LightBox.
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/#p.ImageName" />
</a>
Thanks in advance for your help
The correct code for the Bakery template, that I have suggested to you in the previous question deleted by you was
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" />
</a>
</li>
}
It works fine for me.
In future don't erase your question with an answer, but add a comment.
Edited
Try this:
download from the Lightbox 2 site Lightbox v2.6
in Webmatrix 3 create a new site from the Bakery template
copy lightbox-2.6.min.js from the js folder of your Lightbox download into the Scripts folder of your new site
copy lightbox.css from the css folder of your Lightbox download into the Content folder of your new site
create a new img folder in the root of your new site and copy into it close.png, loading.gif, prev.png, and next.png from the img folder of your Lightbox download
modify as follows the head section of the _SiteLayout.cshtml of your new site
<head>
<meta charset="utf-8" />
<title>Fourth Coffee - #Page.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/lightbox.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/lightbox-2.6.min.js"></script>
#RenderSection("Scripts", required: false)
</head>
replace the Default.cshtml content of your new site with
#{
Page.Title = "Home";
var db = Database.Open("bakery");
var products = db.Query("SELECT * FROM PRODUCTS").ToList();
}
<h1>Welcome to Fourth Coffee!</h1>
<div id="productsWrapper">
<ul id="products" data-role="listview" data-inset="true">
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" alt="Image of #p.Name" />
</a>
</li>
}
</ul>
</div>
Now, if you run your new site you should see something like this:
Here is iframe code. This is working properly in all browsers but not in iPhone 5. I am using custom play button on YouTube player screen.
I have already tried class="youtube-player" type="text/html" tricks.
<!DOCTYPE html>
<html>
<head>
<title>YouTube</title>
</head>
<body >
<iframe width="940" height="529" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/yS2PQwPqsCs?controls=0&showinfo=0&hd=0&enablejsapi=1"></iframe>
</body>
</html>
If you are trying in simulator, this wont work. You can play YouTube videos in device only.
I cannot for the life of me figure out why there are scroll bars appearing on my iframe Page tab. The width is set at 500px, after knocking it down 5px at a time from 515px. There are no margins, and the height setting is on "fluid." When I view the html page that the iframe is showing directly, there is no extra white space, so it looks like Facebook is adding white space (a margin or pad?) on the left side of the iframe. The odd thing is that the scroll distance has remained the same as I've narrowed the page down from 515px to 500px. Further, the "fluid" option for the height does not seem to be applying to the iframe, so I can't use the hidden tag in my CSS or half of my content is chopped off.
Is this an issue for anyone else, or am I just doing something wrong? I'll post the code for the page below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index_loc3</title>
<link rel="stylesheet" type="text/css" href="loc_styles.css" />
<script language="javascript" src="facebox/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
<script language="javascript" src="facebox/facebox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header">
<img src="images/logo_slice.jpg" alt="" width="199" height="152" hspace="8" vspace="40" align="left" />
<img src="head_images/ymca1.jpg" align="right">
</div>
<div id="name"><img src="images/text_slice.jpg" alt="YMCA of Greater Fort Wayne" width="485" height="37" hspace="12" />
</div>
<br />
<div id="content1"><img src="images/cent_loc3.jpg" vspace="5">
<img src="images/park_loc3.jpg" alt="Parkview Family Y" vspace="10">
<img src="images/wells_loc2.jpg" alt="Wells County Y" vspace="6">
</div>
<div id="content2"><img src="images/jorg_loc3.jpg" vspace="5">
<img src="images/ren_loc3.jpg" width="240" height="216" vspace="10">
<img src="images/whit_loc3.jpg" vspace="5">
<img src="images/camp_loc3.jpg" vspace="5">
</div>
</div>
</body>
</html>
UPDATE: I found a bit of code that got the iframe to resize properly and get rid of the scroll bars. However, this seems to have caused my Facebox implementation to get messed up. It doesn't appear Facebox recognizes the change in screen position to change the center for Facebox, so it is popping up at the top of the page instead of the current center of the screen.
I had a similar problem where I had vertical and horizontal scrollbars being shown even when they were inactive (in Opera and Firefox, while in IE and Chrome the page was shown without the scrollbars). I had "fluid" height and width selected in the application settings. The problem finally disappeared when I reverted the height setting to "settable" and used the FB.Canvas.setSize function again.
To me it seems that Facebook's "fluid" setting for the height isn't working correctly for all browsers at the moment, maybe try setting it back to settable and going from there.
go to https://developers.facebook.com/apps/YOUR_APP_ID/advanced then
scroll to Canvas Settings then set Canvas Width and Canvas Height as you wish