I'm trying to debug a chrome extension, but the debugging tutorial doesn't work for me. When I click inspect popup the debug window opens, and instantly closes itself.
I've also tried opening the window for the extension, right clicking it, and selecting "inspect element," but with the same result.
Here is the HTML file. I removed the javascript file, just to make sure that couldn't be causing the issue.
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="popup.js"></script>-->
</head>
<body>
<img id="kitty-pic" src="http://www.tehcute.com/pics/201109/kitten-bouquet-big.jpg" />
<img id="puppy-pic" src="https://c2.staticflickr.com/6/5347/7147821499_52ba051aaa_z.jpg" />
</body>
</html>
I needed to close and reopen chrome for extension development mode to actually be activated.
Related
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
color: #fff;
background-color: #5995DA; /* Blue */
padding: 20px 0;
display: flex;
justify-content: center;
}
.menu {
border: 1px solid #fff;
width: 900px;
display: flex;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='/css/style.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='date'>Aug 19, 2016</div>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</body>
</html>
this is my html it works fine in my browser my biggest issue is my css when i try checking that my code works in my google browser only my html shows up no matter when i do but when i past the code in the stack overflow snippit it works i dont understand it. im still new to coding.
Go the inspect page section and check whether the css file is imported properly.
Right click on the text that is displayed on the web page and click Inspect
Elements Tab
Select the Elements tab as show in the image
On the below Please select the Style Tab. There you can see the CSS style that you used in the css file.(Not the whole will be displayed. Only the HTML used inspect will be displayed.)
Style Tab
Additional note:
style image
If you are seeing like this(check the above image) click that and it will take you the css file. If it's now displaying then check the import of the css file in the tag.
Check the CSS file Name - style.css
and check the page and folder name - **/css/style.css
Please like the answer
You can view the css currently in use by the loaded webpage in the developer tools of your browser by right-click and inspecting the opened page.
You can see what, if any, css file is loaded, experiment with different values, and figure out where to go from there
I'm very new to HTML, CSS, and JS.
I've just watched a youtube lecture for making the "Rock Paper Scissors" game website.
At the very early stage, I'm stuck when I make a CSS file.
Like this.
#import url('https://fonts.googleapis.com/css2?family=Asap:wght#600&display=swap');
*{
margin: 0;
padding : 0;
box-sizing: border-box;
}
header{
background : white;
padding: 20px;
}
header > h1{
color : #25272E;
text-align: center;
font-family: Asap, sans-serif;
}
body{
background-color: #25272E;
}
.score-board{
margin : 20px auto;
border : 3px solid white;
border-radius: 4px;
width : 200px;
text-align: center;
color : white;
font-size: 40px;
padding : 15px 20px; /*top-bottom left-right */
font-family: Asap, sans-serif;
position : relative;
}
.badge{
background : #E2584D;
color: white;
font-size: 14px;
padding : 2px 10px;
font-family: Asap, sans-serif;
}
#user-label{
position : absolute;
top: 0px;
left : 0px;
}
And in my HTML file, I just add it to the header.
Like the way, I've learned.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rock Paper Sissors Game</title>
<link rel="stylesheet" type="text/css" href="css/page_styles.css">
</head>
<body>
<header>
<h1>Rock Paper Sissors</h1>
</header>
<div class="score-board">
<div id = "user-label" class="badge">user</div>
<div id = "computer-label"class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Paper covers Rock. You Win!</p>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="images/hand_rock.png" alt="">
</div>
<div class="choice" id="p">
<img src="images/hand_paper.png" alt="">
</div>
<div class="choice" id="s">
<img src="images/hand_sissors.png" alt="">
</div>
</div>
<p id="action-message">Make your move</p>
</body>
</html>
I've double-checked the file's location and there is no problem at all.
But whenever I launched the HTML file, my page style doesn't change at all.
For the first time, I checked the sources of HTML through the inspecting function in Chrome.
It was like this.
But as soon I reload my page the CSS source file changed to like this.
I really don't know why my CSS file not working in Chrome browser.
Coz in Microsoft's Edge the problem doesn't appear.
My Html CSS image :
My chrome screen :
When I push F4(Reload Page) :
It seems like my CSS file has gone.
Ok first your CSS file is fine and it is not gone at all. To find the CSS file and check it out go to your editor and navigate to the CSS link:
<link rel="stylesheet" href="assets/css/style.css">
hover over the href and alt + click you will find your file, another way to locate your CSS file in the editor and reveal in Explorer.
If you were able to find your CSS file make sure you are adding the accurate path in your link tag.
In case you still can't find the file please use the search in your PC it will show up for sure.
Also based on the images you posted every single change you were making is only restricted to the copy on the browser. Since you were using the page option as I have seen from the images you showed us, try to use a hard reload by clicking ctrl + shift + R maybe that will solve the Chinese letters thing. or close the page and try to reopen it after the hard reload.
Also if you added body { background-color-:red; } at the top of your page it will be overridden by your CSS code Since order matters.
body {
background-color: #25272E;
}
another thing since you are using the developer tools to make changes to your files, here is a tip for you do please use this feature to make the changes apply to your local copy too.
1- navigate to Sources > overrides > selete folder to override (your project folder)
2- make sure the local override is checked.
3- choose the file you want to edit after that save your changes and reload the changes will happen and your local copy has been changed as well.
I'm not sure if this what you are trying to say. But anyway I hope this was helpful.
enter image description hereBelow my code runs fine, but when I preview the html file in browser, none of the styling shows up. When I inspect the element in Chrome dev tools, it shows that it is still trying to just access "style.css" instead of the path I wrote in. I cleared browser cache, I closed and reopened the page, refreshed it, saved the file and closed IDE, etc. What am I doing wrong?
body {
background: -webkit-linear-gradient(-45deg,#FFFED4,#FFEEFF)
}
h1, p, h3{
font-family: Arial;
color: black;
}
h1 {
font-size: 60px;
text-align: center;
}
p {
font-size: 25px;
text-align: center;
}
img {
display: block;
margin-left:auto;
margin-right: auto;
width: 50%;
}
h3 {
font-size: 25px;
font-family: Helvetica;
position: relative;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>We Apologize</title>
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<link rel="icon" type="image/gif/png" href="./resources/img/Brighton-McFarlane13.png">
</head>
<body>
<main>
<h1>We apologize</h1>
<p>The site is under construction right now, but we are doing our best to bring it to life! Check back in a few weeks to see the final product!</p>
<img src="https://i.imgur.com/YjMR0E6.jpg">
</main>
<article>
<p>Soon this site will be a portfolio, shop, and forum for the Brighton McFarlane YouTube Channel!</p>
<img src=./resources/img/Brighton-McFarlane12.png>
<h3>Thanks for stopping by!</h3>
</article>
</body>
<html>
sounds like an issue with your relative path. I cannot see how your file directory is set up but try href="resources/css/style.css"
if it still doesn't work you need to move up a folder.
href="../resources/css/style.css"
hope this helps!
Well turns out I'm an idiot and updated the file path of the html file and Atom didn't automatically update where the file was located, it created some sort of imaginary copy of it. I saved the file to the proper folder and it is working now.
If the resources folder is in the root of your site/folder structure, remove the . before the slash.
<link rel="stylesheet" type="text/css" href="/resources/css/style.css">
What does "./" (dot slash) refer to in terms of an HTML file path location?
/ means the root of the site;
./ means the current directory;
../ means the parent of the current directory.
We are working on a Raspberry Pi project that works to remote launch a model rocket. The detonator is a website that displays a large, read "launch" button, which will prompt the raspberry pi to run a Python script that controls a GPIO pin that is connected to a relay board. The issue that I am having is when input the HTML code, the page turns up blank.
Can someone let me know what I'm doing wrong?
I have Apache downloaded to host the website - have placed the html file in the /var/www/html folder and have also attempted to overwrite the code within the index.html file that was already in the folder. Additionally, I have placed the html file in my "rocket" folder which houses the Python script. None of these options have worked.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Launch Rocket</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
var button = webiopi().createGPIOButton(17, "Launch");
$("#controls").append(button);
webiopi().refreshGPIO(true);
});
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 1280px;
height: 720px;
font-size: 100pt;
font-weight: bold;
color: white;
}
#gpio17.LOW {
background-color: Red;
}
#gpio17.HIGH {
background-color: Black;
}
</style>
</head>
<body>
<div id="controls" align="center"></div>
</body>
</html>
all attempts have resulted in a blank page.
Based on the tutorial provided by #weegee, I realized that my issue was that I had been missing some of the configuration setup.
Tutorial: https://webiopi.trouch.com/Tutorial_Basis.html#testing
I was missing the pathway to the HTML file in my /etc/webiopi/ config, and as a result the Pi was not responding the way it should.
I'm making a website with a very simple menu bar at the top of each page. I would like to make the menu easy to update, so hard-coding the whole menu into each page is not ideal. Modifying and re-uploading every page would be too cumbersome and since the website will be hosted statically, I cannot use PHP create the menu either.
My current solution uses an iframe and a separate html file with my menu.
This is pasted in the body of each new page:
<iframe src="menu.html" width="100%" height="55x" id="menuframe" style="border:none"></iframe>
I get this, which works nicely:
<!-- This is my `theme.css` -->
#menudiv {
width: 100%;
height: 38px;
}
.menu-item {
height: 20px;
width: 120px;
margin: 0;
display: inline-block;
text-align: center;
padding: 4px;
border-radius: 50px;
background: 000000;
border: 2px solid black;
}
<!-- This is `menu.html`: -->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div align="center"><div id="menudiv" align="center">
Home
About
</div></div>
</body>
</html>
This works fairly well for a simple menu with only a few buttons, but it doesn't scale up well. If there are enough buttons, then the iframe overflows and half the buttons will be cut in half. If I eventually move on towards a drop down menu with CSS, the menu items will be eaten by overflow and cut off, etc.
How can I make an easily editable menu for my static website?
The menu must be editable from one file, a la menu.html or similar.
I cannot use PHP.
I have never used JavaScript/jQuery but I am open to solutions that use them.
Dont use an Iframe, If you really dont want to get a hosting plan.
Here is how you can still use a single menu template for each page.
1 You can use JQuery's load function.
$(document).ready(function(){
$('#somecontainer').load('path-to-your-html');
});
2 Create a JavaScript file with your menu on each page.
<script src="path-to-your-js"></script>
3 Or you can create an html page an include it on each page with:
<!--#include virtual="path-to-your-html" -->