In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
Related
(I have extensively searched for a solution but nothing that has happened to someone seems to be the problem)
I am a beginner working on a very simple project. I uploaded it to github but github pages won't show the CSS. It works just fine when I run it locally.
It's supposed to look like this:
snapshot of the project
This is the repo: https://github.com/padnama/odin-recipes/
This is the pages link: https://padnama.github.io/odin-recipes/
Your wrongly refered your CSS in HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>receitas</title>
<link rel="stylesheet" href="./style.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
<img src="recipes/images/main.png" alt="the best cook">
<div class="writings">
<h1 id="title">receitas</h1>
<ul id="recipes">
<li>risotto</li>
<li>strogonoff de cogumelos</li>
<li>macarrão com amendoim apimentado</li>
</ul>
</div>
</div>
</body>
</html>
That should work better
Add the link of CSS file to your HTML page, see the attached picture below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="bg-green-400 h-screen">
test
</body>
</html>
Doesn't work. What can be the reason for this?
Any of the utility classes added to the body tag won't work
Your sample HTML doesn't include a stylesheet, so the bg-green-400 and h-screen classes aren't defined.
In production you should use a proper purged CSS file, but for testing you can load Tailwind from a CDN using this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Here's a fiddle of your HTML with this stylesheet included, and both of the classes you've used are working: https://jsfiddle.net/vrung30L/
I need to use something which is compatible with IE10 and not with IE9.
My HTA was made for IE9 and worked fine : visible icon and maximized windows.
By changing <meta http-equiv="x-ua-compatible" content="ie=9"/> to <meta http-equiv="x-ua-compatible" content="ie=10"/>, there is no icon and the windows is not maximized.
Any idea please ?
NOT working :
<html>
<head>
<title>test</title>
<HTA:APPLICATION ID = "1"
APPLICATIONNAME="1"
BORDER="thin"
BORDERSTYLE="normal"
ICON="icon.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="maximize">
<meta http-equiv="x-ua-compatible" content="ie=10"/>
</head>
<!---->
<body style="overflow:hidden;">
No icon and not maximized, with ie=10
</body>
</html>
Working : but I need IE10 now.
<html>
<head>
<title>Test</title>
<HTA:APPLICATION ID = "1"
APPLICATIONNAME="1"
BORDER="thin"
BORDERSTYLE="normal"
ICON="icon.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="maximize">
<meta http-equiv="x-ua-compatible" content="ie=9"/>
</head>
<!---->
<body style="overflow:hidden;">
Icon showing correctly with ie=9
</body>
</html>
What usually works for me, is to have an HTA with NAVIGABLE set to yes, and changing the window.location to an HTML file using standard HTML. This allows the use of the HTA properties on the one hand, and the use of IE=edge (or another targeted IE version) on the other:
myHTA.hta
<html>
<head>
<title>test</title>
<HTA:APPLICATION ID = "1"
APPLICATIONNAME="1"
BORDER="thin"
BORDERSTYLE="normal"
ICON="icon.ico"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
NAVIGABLE="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="maximize">
<script>
window.location = 'htaContent.html';
</script>
</head>
</html>
htaContent.html
<html>
<head>
<title>test</title>
<meta http-equiv="x-ua-compatible" content="ie=10"/>
</head>
<body style="overflow:hidden;">
Put your HTML content here
</body>
</html>
See here.
This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.
I have written a website using HTML and CSS and, basically, I'm trying to get it to display now. The code is just a page of text and a few images. Currently when I go to the domain, the source code from start to finish is displayed instead of the actual content.
I just got cPanel hosting with godaddy (who naturally weren't of any help). I downloaded cyberduck. Uploaded the file containing the HTML text and called it index.html.
A CSS file was uploaded, and saved as index.css This might be the issue if something was incorrect.
On cyberduck it says there is a file called layout-style.css, perhaps I should edit that and add my CSS code to it?
Possibly the top few lines of the HTML code are missing some important command? [updated]:
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class = enterprise> <br>
<p>text<p>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Also, does Bootstrap have to be installed anywhere?
I appreciate your responses.
The content must be in the body tag
The structure of an HTML document is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- CONTENT HERE -->
<div >
<h1>Site name</h1>
</div>
</body>
</html>
You should not have in the part.
This is a html5 structure :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Then you should put inside the part like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class= top>
</div>
<div class = enterprise>
<p> text goes here </p>
</div>
</body>
</html>