Not able to render the .obj and .mtl file on web using A-Frame
I've gone through the Docs and tried what's mentioned. When I inspected, the HTML was loading but it didn't render on screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #ECECEC">
<a-assets>
<!-- <a-asset-item id="tree-obj" src="assets/BisonPlains.obj"></a-asset-item> -->
<!-- <a-asset-item id="tree-mtl" src="assets/BisonPlains.mtl"></a-asset-item> -->
</a-assets>
<a-obj-model src="assets/BisonPlains.obj" mtl="assets/BisonPlain.mtl"></a-obj-model>
</a-scene>
</body>
</html>
Two issues after first look:
URLs are incorrect. Go to the glitch assets panel to get the proper URLs. Corrected glitch:
https://glitch.com/edit/#!/sunny-ceramic?path=index.html:15:101
The texture images is missing BisonPlains_BaseColor.png
First thing I recommend is checking at the browser network panel and look for 404 errors. Make sure that all files load as expected before investigating further.
Related
I am trying to use summernote in my web app, after i followed the steps provided here http://summernote.org/getting-started/#installation
When i test in browser, it only shows the resize handle at the bottom of the editor, toolbars are not loaded at all. I dont know if there is anything outside the steps provided by the sunnernote instructions. Pls help me out cos am stock here, i dont want to use another editor. Thanks for stopping by..
Thanks for reporting. Could you try below link again?
http://summernote.org/getting-started/#installation
Actually I'm creator of summernote. I updated library path with protocol.
If It's still not working, save below contents with index.html and open it with browser again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- include libraries(jQuery, bootstrap, fontawesome) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.js"></script>
</head>
<body>
<div id="summernote">Hello Summernote</div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
PROBLEM SOLVED
I had the bootstrap.js refrenced before jquery.min.js,
all i did was to reference jquery before any other .js file
enter link description here
It helped me but it will help you too
<div class="container pt-2">
<div id="makeMeSummernote">
</div>
<div class="mt-2 text-center">
<button id="btnToggleStyle" class="btn btn-primary">Toggle Corrected Styles</button></div>
I've been looking around for a solution to the problem I'm having, but it seems that none of the solutions on SO address my issue.
I was having the dreaded issue where the a href tag in my HTML does not actually take me to the link. At first, I tried removing the JavaScript includes, wondering if something in the JavaScript portion was messing up the page.
Then I removed the CSS portion as well, and ultimately removed everything until the page consisted of simply the header information for the HTML page and only the a href tag. I also changed the link to a non-existent page (to force a 404 error).
When clicking on the link, it keeps me on the current page and doesn't take me to the referenced page (or even give me a 404 error). Following is the stripped out code (everything but the commented out portion):
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<a href="test.html">Support</a/>
</html>
Thanks for the help.
I made the changes based on the answers given but still see the same behavior. As seen in the screenshot (sorry SO doesn't let me insert images), the URL shows /test.html but the page is still the main page. I changed the text of the link to ensure that the changes were applied.
I'm using rackup to quickly view the changes locally.
Screenshot
Updated code:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support2
</body>
</html>
Working and tested:
NOTE: Both files [ current one and test.html ] are in same directory.
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support
</body>
</html>
Also test code is working fine using target="_blank" in anchor tag , which open link in new page if working fine, like below:
<a href="test.html" target="_blank" > support </a>
You have an extra slash in your closing a tag.
Should be
</a>.
I would also make sure they are in the same directory.
Apparently the answer was here:
How to setup URLs for static site with Ruby Rack on Heroku
Individual pages were being routed to "/" all the time. Needed to modify "config.ru" to get routing to work properly.
Next step is to look into "sinatra".
I'm trying to embed a Vimeo video using fancyBox 2. I'm able to make the lightbox pop up, but all I get is a spinning loading icon that lasts forever.
I did a bunch of searching on similar Vimeo questions here on StackExchange, but implementing things others suggested has not solved the issue.
I've now even created a fresh test site (plain HTML doc with linked files in local directory), and then used the code listed in the fancyBox documentation section on using Media Helpers (Extended Functionality) line-for-line, but that's not working either. Same loading spinner, stuck forever.
Does anyone have any ideas why this is not working? Testing in both Safari 7 and Chrome. In Safari I get the stuck loading spinner. In Chrome I get an error page within the lightbox that says "The file or directory could not be found."
Here's my code:
<!DOCTYPE HTML>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Add fancyBox media helpers -->
<script type="text/javascript" src="js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="https://vimeo.com/78112273">Video</a>
</body>
All I get with that is a stuck spinner and an error page.
Any help and suggestions are greatly appreciated! Thank you!
Ensure your page has a valid DOCTYPE and most importantly, note that the case seems to impact on whether the video actually gets loaded when the popup is displayed. (You need lowercase 'html' in the doctype declaration)
ie. Using:
<!DOCTYPE html>
<html>
<head>
fixed it for me... This is probably why your example works in jsfiddle.
I am writing a html page using bootstrap3 template and including the respond.js in that, but when I run it on IE8, it gives me error "Access is denied" in console.
I am using this to make IE8 support media queries. I have tried a lot of things as given on forums, but no luck. Does respond.js works locally or we need to run on a localhost/web server?
Respond.js link - https://github.com/scottjehl/Respond
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="main-cont">
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS - main.css
.main-cont {background:#2d3a42; height:100px;}
Per the Respond.js Docs...
"Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server."
Specifically, "Respond.js re-requests the CSS files using Ajax and parses the text response," which is where IE's local security policy is blocking you. Another user elsewhere suggested changing the security settings in IE, but I can't confirm that solution since my copy of IE8 doesn't permit me to change those settings.
Oh, and to save you the trouble, I already tested and confirmed that using ajaxSetup() method in jQuery to set "isLocal" property to "true" won't overcome the local restriction in IE.
I just managed to make respond.js run on IE8 for media queries support , by running on localhost. If simply the html file opened, it does not help.
I have an Umbraco 5 MVC3 project where i discovered that there where white spaces here and there. When investigating i discovered that my HTML looked really bad when "viewing generated source" in firefox web developer tool. For example it removes my doctype declaration and moves my meta-tags and stuff out of the head. Simplified code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="#Url.Content("~/Content/Styles/style.css")"/>
</head>
<body id="" class="default">
<div id="wrapper">
<header id="banner" class="body">
<a class="ir logo" href="/"><h1>Christian </h1></a>
<ul class="share">
<li id="facebook"><a class="ir" href="http://www.facebook.com/sharer.php?u=#Request.Url.AbsoluteUri">Facebook</a></li>
<li id="twitter"><a class="ir" href="http://twitter.com/share?text=Christian">Twitter</a></li>
</ul>
#Html.Partial("nav")
</header>
<section id="content" class="body">
#RenderBody()
</section>
</div>
<script src="#Url.Content("~/Scripts/plugins.js")"></script>
<script src="#Url.Content("~/Scripts/script.js")"></script>
</body>
</html>
And the output begins like this
<html class="no-js" lang="en"><head></head><body id="" class="default">
If you want to check on the HTML generated by your server, you should use View source (CTRL + U).
Generated source is more like a reconstruction of the HTML based on the DOM and includes for example nodes created on the client side with javascript, once the page is loaded.
Alright, i solved it. Took me a while. After Marapet suggested not to use "generated source" i tried normal "view source" in a bunch of browsers and got different results in all of them. When i tried to validate my source i got some weird complaints:
Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
Element head is missing a required instance of child element title.
And my personal favourite
Cannot recover after last error. Any further errors will be ignored.
Looked like there was something up with the doctype. Opened up notepad and pasted in there to "wash" the code from metadata, the way i do sometimes when pasting stuff in to tinyMCE. The text got formatted weird even in notepad. The doctype declaration had a smaller font size then the rest of the html.
So i opened it in notepad++ too and there i got a bunch of questionmarks in front of the declaration. I removed them and copied it back in to Visual Studio, saved and now everything works.
I think the reason i got this problem was that i copied snippets directly from the HTML5 Boilerplate on github.
// Sherlock