Open an HTML file in Adobe Brackets - adobe-brackets

I'm a very unexperienced programmer. I've been doing codeacademy javascript track but I found out that you need to put javascript in an HTML file? I want to make sure that I can write basic javascript before continuing on code academy so I downloaded brackets and when I tried to test my program with the live preview feature it said, "Open an HTML file or make sure there is an index.html file in your project in order to launch live preview. I typed this up very quickly so there are probably plenty errors but here is the code if that helps answer my question.
<!DOCTYPE html>
<html>
<body>
<h1> Daily Programmer Challenge 12/15/14 </h1>
<script type = "text/javascript">
var volume = prompt ("Enter the volume of the container that you wish to make");
var cube = math.pow(volume, 1/3);
window.document.write("The size of the container is '+cube+' width, '+cube+' high, and '+cube+' tall");
</script>
</body>
</html>

save this code that you pasted as a file called index.html and then try Bracket's live preview.

For everyone, this problem can be resolved by following steps:-
On menu bar, go to File --> Open Folder (folder which have your html file for live preview)
Select Folder
Select your html file from left side bar for live preview
Click on bolt icon on right (preview button)
All it melts down to the fact, that you need that folder(which have your file) selected to view your output in live preview.
Let me know, if it helps someone. :)

Related

Demandware external CSS file

I have very little demandaware knowledge as my boss who was supposed to train me this year ended up quitting so now I am in the dark. I am attending workshops later this year but until then Google and stackover is my teacher. I am editing a content asset and at the top of the code there is a link to an external CSS sheet. All of the work I have done in the content asset pages, the CSS and html have all been on one page and I have no idea how to get to that external CSS sheet. Any help would be greatly appreciated. This is what the link looks like
<link href="test/fitting/css/test-fitting.css?$staticlink$" rel="stylesheet" type="text/css" />
That is referencing a file in the content library. You can browse those files by going to the Import/Export module within the Content section of Business Manager. Within the Import/Export Mosule is a link to manage content images. Click that. This should open a window that allows you to browse, upload, and delete the files. You can simply upload a file with the same name in the same location to replace the existing file.

UI Grid CSS not working

I tried to create a grid using UI grid (Recent version of ngGrid) which is unstable version and integrated in my current project.
It is Not correctly displaying the (icon angle down and row selected icon) as needed While including the CSS file in project (by downloading the file and uploading) its giving me display errors as shown below.
But, if i directly give the web url for CSS file in my project...it is displaying correctly.
//web url:
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
//my url
<link href="~/Scripts/ui-grid-unstable.css" rel="stylesheet" />
I don't want to depend on web URL to display...is there any solution that I can implement on my side.
Please refer the image for before and after using web link.
link for Images: http://postimg.org/image/omhlfs8nd/
The top one is how it's supposed to and the bottom one explains my display error.
ThankQ for your time.
This is a simple error. Make sure you have the ttf,woff and svg files from the ui-grid download in your css folder. From you code, you should have it under ~/Scripts/ folder.
Adding to previous comments to download tff, svg and woff files:
You need to download ui-grid.eot as well to get it perfect.

CSS file not linking to HTML

I've recently started learning to code HTML and CSS by hand for the first time since the mid 90s (last time I tried to build a site, Netscape Communicator Gold 3.0 was out--so bear with me here).
I cannot get my CSS to link up with my HTML. I am using HTML5 conventions and following the code examples in the popular book "Learning Web Design," 4th edition, by Jennifer Robbins. Many of the code examples I see use conventions that are no longer required in HTML 5.0, so my code may be a bit sparse.
I have tried to directly embed the styles in the HTML and they work. However, they do not work when in a CSS sheet. I have tried to load the page in both IE11 and the newest version of Chrome and the page displays in white with default browser settings. My HTML file and my CSS file are in the same directory: c:/RogersReviews. There is an images folder in the directory, c:/RogersReviews/Images. I have linked to an image file in that folder and my code works.
However, I cannot change the background color of my page using a linked CSS style sheet. I have tried to make it red to prove that the link is working. Below is my CSS code followed by my HTML code.
I have used Eric Meyer's browser reset code in the CSS to clear out any browser settings that might be messing things up. I have omitted it for your convenience.
It is probably something minor that I have missed. Thank you in advance for your help.
EDIT: The page seems to be linking just fine when I post it here, but not when I run it from my hard drive by opening the HTML file. I would like to be able to see the page as it would look online, but from my hard drive.
body {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Rogers Reviews: Academic Book Reviews </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<img src="Images/Rogers-Reviews-logo-3.gif" alt="Rogers%20Reviews">
<ul id="menu">
<li>Home</li>
<li>Authors</li>
<li>Subjects</li>
</ul>
</header>
<h1> Welcome </h1>
<p> This site is a collection of academic book reviews, mostly in the humanities and the social sciences. </p>
<p> The purpose of this site is to assist high school, undergraduate, and graduate history students with choosing appropriate secondary sources for their research papers. An emphasis is placed on older works written before 1960.</p>
<p> Back to home </p>
<footer>
<p> © 2014 </p>
<p> About </p>
<p> Contact </p>
</footer>
</body>
</html>
I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.
The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:
Check your stylesheet name, and that it is the same in the directory as it is in your HTML code; make sure stylesheet.css exists properly.
Double-check that the file exists in the right place, which is in the same directory as your index that you are opening.
Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS. If it's not loading here, it could be that it tries to load from your cache. You can force Chrome to load sites without the cache by opening the inspector again, clicking on the gear menu, and checking "Disable cache (while DevTools is open)', and reloading your site.
Check your local apache/webhost server to make sure that it doesn't have any settings blocking the loading of certain files or types of files. This is assuming you are running one and not just opening the file in Chrome/IE. If that is the case, you should have no problems with the file loading.
Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
Hello, perhaps it helps to someone:
css files have to be transmitted stating "text/css" as content type (while your html page content is usually "text/html").
It is important to state the right value for transmission, because browsers check it.I had this problem with Delphi, trying to state "DOCTYPE HTML" in a WebBroker application to use HTML5, and the problem has been solved setting it in the variable reponse.contenttype. If you use a web server, I suppose you have to put the file in the right folder for example, or set this attibute in the right place to instruct your server to send the right contenttype.Have a nice day!
Instead of href="stylesheet.css", try href="/stylesheet.css".
I had the same issue and this worked for me.
Simple solution: no changes to you html code.
Procedure:
1) Log into Ubuntu as a root user
2) Go the /var/www directory and right click on the www folder, then click Properties, change the following permission as follow:
view content: anyone
change content: anyone
access content: anyone
3) Restart apache2 server type service apache2 restart
4) Finally, test the webpage
Hope this helps
Just ran into same issue. It was browser cache. Ctrl-F5 helped to fix it.
I assume that you have created your file in NOTEPAD & not used any editor. While saving the css file, the file type has remained as .txt which leads to saving of the file as Text Document type.
Open a new notepad file, copy & paste your CSS code. Save the file in Notepad under "Save As" menu, enter your css file name with.css extension & select "Save as type" as "All Files" documents. After saving, in the explorer the file type should be displayed as Cascading Style Sheet Document.
Hope it solves your problem.
I ran into a similar issue where the css file changes are not reflected in the webpage styling.
Here where the concept of hard-reload helped me. Hard reload can be done by
shift+ctrl+R
This happens when the browser serves a cached CSS file from that of yours.
To invalidate the cache and serve your latest CSS file, you can perform a hard reload on the browser.
Refer this For more info on such problems.

Embed a pdf document into asp webpage

I used the following code to embed and display a pdf document in a .asp webpage not in asp.net,the code displays the frame but not the pdf, can someone tell me where i was wrong.
<!DOCTYPE html>
<html>
<body>
<iframe height="1400" width="1000" src="C:/proof.pdf">If you see this text, your browser cannot display this document. Click this link to view it separately.</iframe>
</body>
</html>
Where you are storing that file is a big problem and something you should likely fix. What you mainly want to fix is this section
src="C:/proof.pdf"
I honestly do not care if your site does give access to the root of your C: drive it is a terrible practice to ever let that happen. Your site should not have access to any files outside your inetpub folder. What you should do immediately is move this file to a resource folder within your website. Assuming you have not changed any of the default settings this pdf would now be stored in
C:/wwwroot/inetpub/resources/proof.pdf
Once you do this though you should also change the src value to a relative path. If you followed my previous advice that path should look like this
src="../resources/proof.pdf"
That should both work fine and be much safer for your hosting computer.

Play swf file on webpage

Hey guys I am trying to play a .swf file on my web page I have already tried to embed it using HTML and it works. But is there anyway of playing a .swf file after button click event in asp.net?
Before you get to carried away with using flash could I urge you to read this http://occupyflash.org/ and then invest a little of your time researching html5 (specifically canvas) :)... http://www.williammalone.com/articles/flash-vs-html5-canvas-drawing/ and this http://webdesign.about.com/od/html5tutorials/a/canvas-vs-svg-vs-flash.htm will give you a good start.
Edit
Without seeing your current code I can't give a precise answer but this should work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video src='insert-route-to.swf' id='insert-id-here' controls>
Your browser does not support HTML5 videos please Upgrade.
</video>
<button onclick="document.getElementById('insert-id-here').play()">Play</button>
<button onclick="document.getElementById('insert-id-here').pause()">Pause</button>
</body>
</html>
on button click
Response.redirect("file path");
something like:
Response.redirect("Video/abc.swf");
where "Video" is folder name which is present in project folder and "abc" is file name.

Resources