I have been working to create a totaly new upload control with custom UI. I have done the UI part but I cannot get the background job which is getting the full pathname of file to upload. Please help me do the real uploading part.
** TO BE HONEST, I FOUND THIS CODE ONLINE **
here is the link - http://jsfiddle.net/c3kyX/
and here is the code below
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
#doit, #hid {
position: absolute;
cursor: default;
}
#doit {
top: 0;
left: 0;
border: 1px solid #000;
}
#hid {
opacity: 0.001;
font-size: 300%;
top: -5px;
right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#hid {
display: none;
}
</style>
<![endif]-->
</head>
<body>
<div id="container" title="Choose File">
<div id="doit">
<img src="upload.png" width="100" width="100" />
</div>
<input id="hid" type="file" size=1>
</div>
<script type="text/javascript">
doit.onclick = function(){hid.click();};
</script>
</body>
</html>
The problem is that you are not doing anything with the file. You need to post it somewhere to process it and the form needs to have the proper enctype. For example:
<form action="upload.php" ENCTYPE="multipart/form-data" method="post">
Obviously, you'll need to write the script that handles the actual file processing (and of course it needn't be a php file).
Related
The blue block collapses and unfolds, and I need it to appear and perform an animation where it slides down
It's all about slideToggle(300) - this is the very animation of folding and unfolding. I don't want to change the code too much, what can I do about it?
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="javat.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
css
body {
background-color: gray;
}
.content_toggles {
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
z-index: 2;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
jquery
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
document.getElementById("content_blocks").style.display = "block";
return false;
});
});
I'm not really sure what you're asking here - you should clarify by writing what the issue you're facing is, and what the expected result should be. However, I did notice that you're including your JS file before you load the jQuery library. Simply swap the order of these two lines, or else your javascript code won't work. This is because your javascript code uses jQuery, but you are loading your code before you initialize the jQuery library. Change your HTML to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="jquery-3.6.0.min.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
I also noticed you are trying to access the content_blocks element by its ID, but you define it by class. Instead of document.getElementById("content_blocks").style.display = "block"; do
// vanilla JS
document.querySelector(".content_blocks").style.display = "block";
// jQuery
$('.content_blocks').style.display = "block";
Or you can do
<input type="button" id="content_toggles"\>
<input type="button" id="content_blocks"\>
Do you mean something like this?
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
});
});
body {
background-color: gray;
}
.content_toggles {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
Any tips on how I can make it possible to drag the div .handle across the div .slider and get a value when doing so? Thanks in advance.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Drag to see price</title>
<meta name="description" content="En interaktiv genomgång av Brackets.">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="slider"></div>
<div class="handle"></div>
</body>
</html>
CSS
.slider{
background-color: black;
width: 500px;
height: 15px;
}
.handle{
background-color: red;
position:absolute;
left: 12px;
top: -0px;
width: 56px;
margin-left: -10px;
height: 32px;
z-index: 3;
cursor: pointer;
}
If you're only catering to IE9 and earlier, consider simply using the HTML5 input:
$("#test").on("input change",function(){
$("#bleh").text($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="range"/>
<p id="bleh"></p>
Else, you probably have to implement your own solution or use something like Modernizr
I started using jsPlumb and JQuery, I want to connect draggable elements but if I add the
draggable behavior before the connection then the connection does not refresh position.
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.window {
background-color: white;
border: 3px solid #346789;
color: black;
font-family: helvetica;
font-size: 0.8em;
height: 12em;
opacity: 0.8;
padding: 0.5em;
position: absolute;
width: 14em;
z-index: 20;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
</head>
<body>
<div>
<div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
<div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".window").draggable();
var a = $("#a");
var b = $("#b");
jsPlumb.connect({
source:a,
target:b,
connector:["Bezier",68],
endpoints:[
["Dot",{radius:12}],
["Rectangle",{width:20,height:30}]
]
});
});
</script>
</body>
</html>
i wrote jsPlumb.
the reason it doesn't refresh is that it has no way of knowing something is being dragged. instead of calling $(".window").draggable(), you either need to let jsPlumb do that for you when a connection is made, or through this method:
jsPlumb.draggable($(".window"));
the first option will not initialise the dragging for any window that doesn't have a connection. the second one will.
There are few ways to do so - refer to the jsPlumb documentation
,but generally you can use:
Id of the element
Array of elements
Or selector (for example class selector that was mentioned previously: jsPlumb.draggable($(".window"));
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="/include/jquery.jsPlumb-1.3.16-all-min.js"></script>
<style>
.window {
background-color: #EEEEEF;
border: 1px solid #346789;
border-radius: 0.5em;
box-shadow: 2px 2px 19px #AAAAAA;
color: black;
height: 5em;
position: absolute;
width: 5em;
cursor: pointer;
}
</style>
<script>
jsPlumb.ready(function () {
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("container0");
//jsPlumb.draggable(["container0", "container1"]);
jsPlumb.draggable($(".window"));
//perform operation only after DOM is loaded
var e0 = jsPlumb.addEndpoint("container0"),
e1 = jsPlumb.addEndpoint("container1");
jsPlumb.connect({ source: e0, target: e1 });
});
</script>
</head>
<body >
<div class="window" style="left: 20px" id="container0">
</div>
<div class="window" style="left: 200px" id="container1">
</div>
</body>
</html>
Can someone point me in the right direction? I don't see why I can't get the achtergrond_homepage.png as background in rounded corners.
Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?
This is the css:
#charset "utf-8";
/* CSS Document */
html, body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;}
.justyParagraph {
text-align: justify;}
a img {
border: 0;}
.clearer {
clear: both;}
.rounded_corners{
background: url(../images/achtergrond_homepage.png) no-repeat left bottom;
color:#FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
This is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="bookmark" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script src="js/jQuery.min.js" type="text/javascript"></script>
<script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
$('.rounded_corners').bg(['20px', '20px', '20', '20']);
});
</script>
</head>
<body>
<div id="blockdark">
<div class="rounded_corners">
<div> <h1> Title </h1> </div>
<div> Content </div>
</div>
</div>
</body>
</html>
This is a example, maybe it has something to do with the javascript for rounded corners?
http://www.coldcharlie.nl/test/
Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners
Is this the right way to make 2 divs fadeIn together? (contact_close should be infront of contact_box to serve as a close button for contact_box.
EDIT: fixed some divnames.
Javascript
$(document).ready(function(){
$(".button_contact").click(function() {
$("#contact_box").fadeIn("slow");
$(".contact_close").fadeIn("slow");
});
$(".contact_close").click(function() {
$(this).fadeOut("slow");
$("#contact_box").fadeOut("slow");
});
});
CSS
body{
margin: 0;
padding: 0;
text-align: center;
background-color:#f0f2df;
}
#container{
border: solid 1px #f0f2df;
background-color:#f0f2df;
text-align: left;
margin: auto;
width: 939px;
height: 570px;
top:41px;
position:relative;
}
#contact_box{
display: none;
background-image:url(../images/bg.png);
width: 703px;
height: 379px;
position:absolute;
left:236px;
bottom:34px;
}
.contact_close{
display:none;
background-image:url(../images/close.png);
width:17px;
height:17px;
position:absolute;
right:5px;
top:135px;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>test</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/click.js'></script>
</head>
<body>
<div id="container">
<div class="button_contact"></div>
<div id="contact_box">
<div class="contact_close"></div></div>
</div>
</body>
</html>
Yes, that's fine.
There are various ways to do many things, but something as simple as this doesn't really require a very technical approach.
I didn't analyze your code thoroughly, but it seems more logical to place the close box inside the div, not beside it.
You can fade them both in the same statement with
$('#contact_box, .contact_close').fadeIn('slow')
This is more efficient because jQuery only starts one fade operation.