HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<section>
<h1>Hello, world! (index.html)</h1>
<input id="userName" type="text" name="" placeholder="Enter Name">
<button id="clickMe" type="button" name="button">Click Me</button>
<h2 id="personName"></h2>
<h2 id="personStatus"></h2>
<h2 id="personOccupation"></h2>
<script type="text/javascript" src="/js/main.js"></script>
</section>
</body>
</html>
CSS
h1{
color: red;
}
section {
background-image: url("../coinflip.jpg");
background-size: cover;
}
Here is the folder structure:
I have tried the above code and:
background-image: url(../coinflip.jpg);
background-image: url(/coinflip.jpg);
background-image: url("/coinflip.jpg");
I don't understand why it's not working.
The only thing I can think of is that it has something to do with Node.js
It is my first time trying to learn it, so maybe my server.js file is causing problems?
In the server.js file I have
switch (page) {
case '/css/style.css':
fs.readFile('css/style.css', function(err, data) {
res.write(data);
res.end();
});
break;
But the switch case is working for all the other pathnames, so I'm really not sure
If the file is in the same folder, you have to use:
“./coinflip.jpg”
If the file is outside of the current folder (go back folders), you have to use:
“../coinflip.jpg”
I would try the first option, and also would fix it on your node.js.
Related
I have a HTML file that has a drop zone for someone to drop a file into and a javascript to process that file. dragenter, dragover, and other events work fine but the drop event does not detect that a file was dropped into the area. Any ideas?
drag.js
let dropArea=document.getElementById("dropZone");
dropArea.addEventListener("drop",function() {
console.log("File entered");
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>sample/title>
<link rel="stylesheet" type="text/css" href="./style.css" media="screen" />
</head>
<body>
<h1>sample1 </h1>
<h2>Enter target file name</h2>
<input id="testForm"></input>
<button id="myButton">scan</button>
<div id="dropZone" class="dropZone" >
<p>Drag your files here</p>
</div>
</body>
</html>
<script src="index.js"></script>
<script src="drag.js"></script>
I will include the css file as well for continuity sake.
style.css
#dropZone{
background-color: rgb(150, 150, 252);
color:black;
text-align: center;
width:300px;
height:300px;
}
There are 2 ways to register event listeners in JavaScript:
element.oneventname = function(e) { ... }
element.addEventListener("eventname", function(e) { ... });
You're using option 2, so don't include "on":
dropArea.addEventListener("drop", function() {
console.log("File entered");
});
Another problem:
Your script tags belong inside the body tag, right before the closing:
...
<script src="index.js"></script>
<script src="drag.js"></script>
</body>
</html>
I have a finished JQuery for moving a 360° object (picture) with mouse actions.
The code is working:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;">
<img src="v/1.png" />
<img src="v/2.png" />
<img src="v/3.png" />
<img src="v/4.png" />
<img src="v/5.png" />
</div>
</center>
</body>
</html>
The needed pictures are received on demand from a server, so I have to create this code on demand after receiving the pictures. I use therefore document.write commands - I know they are not best practice, but usually it works ... Anyway this is the code I use - basically the same (even when I'm debugging I can't find a difference in the created HTML to the "original" HTML)
So basically it's like that:
<button id="click1" onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write(' jQuery(document).ready(func');
document.writeln('tion() {');
document.write(" jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln(' });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">');
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>
The created HTML shows the picture but the jQuery plugin is not working. The JS are the same.
Thank for your help!
document.write overwrites any code you have.
Example:
function overwrite() {
document.write("Oops, I've overwritten the code!");
}
<!doctype html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="overwrite()">Click me!</button>
</body>
</html>
I made a simple html file with this syntax
<!doctype html>
<html>
<head>
<title>html_using_div</title>
<!-- <link href="border.css"rel="stylesheet"/> -->
<style>
.c1{
background-image:url("i/table2.jpg ");
background-repeat:no-repeat;
background-attachment:local;
font: italic bold 20px/1.2 arial,sans-serif;
}
<!-- .c2{
background-size:1000px 1000px;
background-image:url("i/DSC05441.jpg");
background-repeat:no-repeat;
background-attachment:scroll;
} -->
</style>
</head>
<body style="background: linear-gradient(-45deg, red , blue , indigo, white );">
<div style=" width=500px ;height:400px; margin:auto ; " >
here was my content
</div>
</body>
</html>
After execution in browser console I got another div and a javascript file name:
<script type="text/javascript" src="http://127.0.0.1:10029/public/linkverifierhelper2.js"></script>
Can anyone help me in finding the reason for this issue?
After googling the linkverifier2.js file I think you have the SpeedBit Download Accelerator Plus adware/malware.
You could remove it with any antivirus or antimalware tool.
I have a code that allows my website users to upload to a central Google Drive account. So far it works great, I am simply trying to add in a progress bar.
Here, is the form HTML I have, I have been able to add a progress bar, it just does not move from 0%.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS File Upload</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
.progress_outer {
border: 1px solid #000;
}
.progress {
width: 20%;
background: #DEDEDE;
height: 20px;
}
</style>
<form id="myForm">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
Besides that, I did some more research and have found a template example, I am just not sure how to implement it correctly into my existing code. Here is what I found from Caja Playground.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
<div class="demo">
<div id="progressbar"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->
</body>
</html>
Hm, You only put the html file , where is the gs file ? also Its not possible unless you use chunk to upload ^^
You can use external libraries like MediaUploader js file. See the following tutorial. It includes every functions such as Create folder, upload file, view images, view content image text, show share files only etc.
Demo of using Google Drive API
Ok, I saw this tutorial http://css-tricks.com/dynamic-page-replacing-content/, pretty cool actually!
My problem is as flows, I have a page that not only has contents but also specific javascript content, and css. Is there a way to load those files dynamically, would It be correct? What if I have a hard coded on the page, how would I load that css/js script?
Thanks in advance.
[Edit]
Some code:
<html>
<head>
<script type="text/javascript" src="..."></script>
<script type="text/javascript">
$(document).ready(
alert('the document has finished loading!!');
// do form validation and send
)
</script>
</head>
<body>
Please Full the necesary (*) Fields
<form method="post" action="testing.php" id="test" name="test">
(*)<input type="text" name="fullname" />
<input type="submit" value="Send" />
</form>
</body>
</html>
Let's say I wanna load that page dynamicaly and load the validation and related javascript placed on header. Should load files readeing the headers? how can I know which one had been already loaded?
Thanks for the answers!
"I guess he means hard-coded, static. – Utkanos" - Edited
You can change the CSS stylesheet dynamicly by changing the href attribute.
Javascript can also be loaded dynamicly by loading the script self into the div or by writing the script src to it.
Here an simple example:
CSS 1:
body {
background: black;
color: #333;
}
CSS 2:
body {
background: red;
color: white;
}
HTML:
<html>
<head>
<title>Test page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="/includes/css/test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>TEST!!!!!</h1>
<div id="code"></div>
<input type="button" id="but" value="click!" />
<script>
var css = 1;
$('#but').click(function() {
if(css == 1) {
css = 2;
} else {
css = 1;
}
$('link').attr('href', '/includes/css/test' + css + '.css');
//test();
test2();
});
function test2() {
$('#code').html("<script>alert(\"It works!!!\");<\/script>");
//Or parse the src
//$('#code').html("<script src=\"js/your_js_file.js"><\/script>")
}
</script>
</body>
</html>
So it's posible to load CSS and Js into your page after the page is loaded.
Hope this helps!