For some reason my code is not working. I don't get an error with badfile.jpg and regardless of the file, when I drop an image it just displays the image in the browser regardless of where it is dropped. I have not defined the button action yet. Any idea on why it's not working?
HomeController.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace MVCDropZone.Controllers
{
public class HomeController : Controller
{
public IActionResult Index() {
return View();
}
private IHostingEnvironment _hostingEnvironment;
public HomeController(IHostingEnvironment environment)
{
_hostingEnvironment = environment;
}
[HttpPost]
public async Task<IActionResult> UploadFiles(IFormFile file)
{
var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
if (file.Length > 0)
{
using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
return RedirectToAction("Index");
}
}
}
Index.cshtml
#{
ViewData["Title"] = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Dropzone simple example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/dropzone.js"></script>
</head>
<body>
<style>
.dropzone-container {
width: 100%;
}
.dropzone-drop-area {
background-color: lightcyan;
border: dashed 3px grey;
width: 450px;
min-height: 150px;
box-sizing: border-box;
padding: 6px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
cursor: pointer;
position: relative;
}
.dropzone-drop-area:hover {
background-color: darkorange;
border: dashed 3px black;
}
</style>
<script>
$(document).ready(function () {
Dropzone.options.uploader = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
maxFiles: 1,
clickable: true,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
uploadMultiple: false,
createImageThumbnails: true,
accept: function (file, done) {
if (file.name == "badfile.jpg") {
done("This is a bad file!");
}
else {
//Show a confirm alert and display the image on the page.
}
}
};
});
</script>
<div class="col-md-9">
<h2>File Drag & Drop Upload</h2>
<div class="dropzone-container" id="dropzone">
<form action="/Home/UploadFiles" id="uploader">
<div id="dropzone-drop-area" class="dropzone-drop-area">
</div>
</form>
</div>
<br />
<button type="button" class="btn btn-primary">Upload Files</button>
</div>
</body>
</html>
Your code looks fine, except the missing class dropzone in your form.
Dropzone.js attaches itself to all elements with the dropzone class.
See: https://www.dropzonejs.com/#usage
So try to change your Form-Code to:
<form action="/Home/UploadFiles" id="uploader" class="dropzone">
<div id="dropzone-drop-area" class="dropzone-drop-area">
</div>
</form>
Related
For the Discord bot, I need to send a GET request to a specific service to shorten a specific link.
I am using the https module from NPM to send a GET request, namely:
var https= require('https');
let opts = {
host: 'clicksfly.com',
path: '/api?api=SECRETCODEd&format=text&url=www.google.com',
method: 'GET'
};
const req = https.request(opts, res => {
res.on('data', d => {
console.log(d.toString());
});
});
req.end();
This code works completely on my computer, and it returns a shortcut link. However, on the server where my bot is located, this code does not work, namely, it sends a long code of an incomprehensible HTML page:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA
-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Just a moment...</title>
<style type="text/css">
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
body {background-color: #ffffff; color: #000000; font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue",Arial, sans-serif; font-size: 16px; line-height: 1.7em;-webkit-font-smoothing: antialiased;}
h1 { text-align: center; font-weight:700; margin: 16px 0; font-size: 32px; color:#000000; line-height: 1.25;}
p {font-size: 20px; font-weight: 400; margin: 8px 0;}
p, .attribution, {text-align: center;}
#spinner {margin: 0 auto 30px auto; display: block;}
.attribution {margin-top: 32px;}
#keyframes fader { 0% {opacity: 0.2;} 50% {opacity: 1.0;} 100% {opacity: 0.2;} }
#-webkit-keyframes fader { 0% {opacity: 0.2;} 50% {opacity: 1.0;} 100% {opacity: 0.2;} }
#cf-bubbles > .bubbles { animation: fader 1.6s infinite;}
#cf-bubbles > .bubbles:nth-child(2) { animation-delay: .2s;}
#cf-bubbles > .bubbles:nth-child(3) { animation-delay: .4s;}
.bubbles { background-color: #f58220; width:20px; height: 20px; margin:2px; border-radius:100%; display:inline-block; }
a { co
lor: #2c7cb0; text-decoration: none; -moz-transition: color 0.15s ease; -o-transition: color 0.15s ease; -webkit-transition: color 0.15s ease; transition: color 0.15s ease; }
a:hover{color: #f4a15d}
.attribution{font-size: 16px; line-height: 1.5;}
.ray_id{display: block; margin-top: 8px;}
#cf-wrapper #challenge-form { padding-top:25px; padding-bottom:25px; }
#cf-hcaptcha-container { text-align:center;}
#cf-hcaptcha-container iframe { display: inline-block;}
</style>
<meta http-equiv="refresh" content="35">
<script type="text/javascript">
//<![CDATA[
(function(){
window._cf_chl_opt={
cvId: "2",
cType: "non-interactive",
cNounce: "24390",
cRay: "6c53b849cf342c52",
cHash: "d48c5950487c1fc",
cPMDTk: "TGRJIKcYNeQaUi4qjEFvtSSBAfHY03rt_7_2xESZg24-1640788159-0-gaNycGzNBuU",
cFPWv: "g",
cTTimeMs: "1000",
cRq: {
ru: "aHR0cHM6Ly9jbGlja3NmbHkuY29tL2FwaT9hcGk9Yjg4YjhjZDg5MjBmNzZjYTBhMDcwYmM1ZDQ2MmI5MWQ4NmNmMGI1ZCZmb3JtYXQ9dGV4dCZ1cmw9d3d3Lmdvb2dsZS5jb20=",
ra: "",
rm: "R0VU",
d: "47w2TkCdqOr0Tck9v6/aqzyT2lSjPuS81Akssy/HzRxaWwidLLHW74f1FOQUFn/lAWOf/De/txE6ePHyUXrUmXM3ltJ8BE5ZvBPCPF8n2muZ2XR33mqdLzTVcErGWEq0YeyjdXkgvNvZTVfkM70rOAHAYJb2suMmaUae91VBgKpIVnkw26Wwr7P9mFqluxpQREHJ+QAxC4CpNsMdQOYJD7GNYns
Pr+wFSJihZBiPymo8rx4Uegxcnf9sJhvItS7WDNrr5Eja/zEf4hnTasqLHeOknNIJ9np06y0fspnkEF6/qDgp4NSQdLEYV5pkbwXCqbEOfuBX3fGRuX0+qajK1exUUGPxLrzqL37mdD/fNA0wYhiDSZS2BHHlyler2S88M7vXBvLBNM78BQmVEan/CTnzck3sGqUgs40Ckhy4HEncspT7Lu87RPsqQ8kf/qiC8IDxLRDOGnJF5AThherCErcAv7zUi6gVr5bB5/qEW74Rp8c1Q1vwAImtYNC0SxPJ5LbgnUdOUeUhHUe0s5Rw4Dx7zIbHA9VpMpyAhemSaHA=",
t: "MTY0MDc4ODE1OS4wMTEwMDA=",
m: "f24BKfHcLktTTQE1Q1/kNNARn0oM+B4CwSSsUmvRs6g=",
i1: "+c9VZZ25U4G4BasL/L05rg==",
i2: "Kz28rQ4qA6UO6XV/AQmYsA==",
zh: "va4hCvZPZYx/dl/GK/fh92PoHUPArv8s552Q7x2/qYo=",
uh: "DV4j3Tmrbi5Rs1q3ahwVS6SgbPbI7np5884QO1u1Cgg=",
hh: "pl7IslarvVZvfg0YHKRLaukHlDa0TtpfuYJctN/tpqM=",
}
}
window._cf_chl_enter = function(){window._cf_chl_opt.p=1};
})();
//]]>
</script>
</head>
<body>
<table width="100%" height="100%" cellpadding="20">
<tr>
<td align="center" valign="middle">
<div class="cf-browser-verification cf-im-under-attack">
<noscript>
<h1 data-translate="turn_on_js" style="color:#bd2426;">Please turn JavaScript on and reload the page.</h1>
</noscript>
<div id="cf-content" style="display:none">
<div id="cf-bubbles">
<div class="bubbles"></div>
<div class="bubbles"></div>
<div class="bubbles"></div>
</div>
<h1><span dat
a-translate="checking_browser">Checking your browser before accessing</span> clicksfly.com.</h1>
<div id="no-cookie-warning" class="cookie-warning" data-translate="turn_on_cookies" style="display:none">
<p data-translate="turn_on_cookies" style="color:#bd2426;">Please enable Cookies and reload the page.</p>
</div>
<p data-translate="process_is_automatic">This process is automatic. Your browser will redirect to your requested content shortly.</p>
<p data-translate="allow_5_secs" id="cf-spinner-allow-5-secs" >Please allow up to 5 seconds…</p>
<p data-translate="redirecting" id="cf-spinner-redirecting" style="display:none">Redirecting…</p>
</div>
<form class="challenge-form" id="challenge-form" action="/api?api=b88b8cd8920f76ca0a070bc5d462b91d86cf0b5d&format=text&url=www.google.com&__cf_chl_f_tk=TGRJIKcYNeQaUi4qjEFvtSSBAfHY03rt_7_2xESZg24-1640788159-0-gaNycGzNBuU" method="POST" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="md" value="xkEcrpi8t1.QjXZlqCsIjpdEGmDY_IdcgbTeOQYnWyM-1640788159-0-AVJqqT9Tvcgthj9NRbMs79IOh1RWvyCKlp7aD5F_0fTulpLPDbF-RLTYMcO9QsWjbBGbgh_Wc6nalQ5OfQ5AfETkxDG89DCtXBs8eS12TTViPp2xtMEUwLQfccIK6xA-lcZ4eYMUD7iGkWMVnLq0WPsKybj52VXST_RhKTB-_CYc8HLABUkmygvc7bzMkoratKKK7jNCM_kV2ROIF-sxykIOseW9Qzg7-8xGIN55DCtQdF-AGg6P5EZPgZ--6fgAXmpDOt6HdnUfRXOy
sjKKD1m0LEswX3mcqY2AQnh1ocfg4rXbBy7FwTX2SHRb0qWbQ96DC5Jw6uq4NuqzYdbTiRNx_jq2Kujxhu5F74LpJQfxBR13hujaoqODdBxhbl3m-X9EzNNloGdNgK5ahkTD9BtUPMaYL_bsygKJXLtlkq7sUsGB3OxPsKFFb87UfgaSWXTc0HrXoRXoa1f91kRM02RyBnbOzu6eV4BA0-hfaW0n3oO7LkKoSbXuibYYst4Y1I21_-BxrFE5r23okOcM698KGlACH9TzAbBmEx0H_k1P1J99RPV4od1oBfQrDCbfE6Hwehaj77g63-NwfMUtweEEG_Iegj-7gJIsmTdpGqENcIgZzBkVWJoQyJtmkvkQSRqBGrauqvLZuUpT4J2JcwRwPs-ybpK7WKKzRyOA2vK2UrrjRpQrhIhqj7ay7Cz1eWiyJXnwPvzu3wRfE5t3CHMU0od5eKuEdh0Ruq1y6Tj7n22ho9sn92vPwWkVdk9CeT101bJ83LRrJk3XPvIOi1E" />
<input type="hidden" name="r" value="EfcTylAJ6D0BDns4eSFtNCPUpLdh4A7kjPglrCzMQeo-1640788159-0-AanhkUrahNV4ONtYb+sTo+uauUtmeERPrcNryzlJIFlv4alUyU7Lhm1SHiFYP9lTDLGxy6PM9+uYgtQ3AXWBqoUr39qaO6Kto/d9EArJN8X52JJkzrLUVcoj//vu++QxzuTIsT0NhOLdCTIYZzGxDsCSzhYEIQ8iGpN8u+eBdcBgQkvZUNlETgynelJUNpjv5x3CX9nfBo0C/WlEjYWhC++TP68liuZatG0bIA2uxXOfopNCMch5xtiulF9GYMafWhIwxVM1+LHYAscRN+PUhZluA1+6tpkLyMneVRry2+3LA0I3zRET0Vq/5Z+MYRrwLU7XdpAWqDyFQPN/YsG4V5qWdwX2NKsLRzP6dxwbvrX14NFpP6Xrsj8Dr9PAs1zPce2gETT3Wv5LpDeUbX9k/Tlf1IkLhLse2Kx0giwa9dI5vEZb1SavlGYkGKUXPJmc80gocm+WvZVUcNiXbkLnlXixbbCcKQzLMK1e9rZIrLJv7kuzlIar/hd9A7otR5+I5iUIUnnnyWLJjuYcnN3+c9W9r0clCPtT+GpMAPkjz5boWU1PgJbUEH8JpFicCDy9cJcui+VXNe1b6GQgSwPZl0ABjzTqfWxVWjgxYnA1Jz+euFT2BSlEIvGg2Mhj4bJNa2RcbwmnBT3stMObWg3JS9IivnBZmkUsprWiPr07qr/FAWSRpjYpykmCp7CEgssEKbGwk7fUc43RlJclVKyW8R00JN7BpQH/44TwKPrKN9G
i4XW39lPLJP0SjoVu73QAqssV/D2bHtEJ2DDJ5mmt62lp8ukiMw9XBqmm6slygREwvx8gmaAm1vt3FV7TXD5goI17r1yPWGqww0s46+py2bhaWq4fcVmzZ6nDoTdPmF49A47zBcOXCRPKRiX33eL+nYZnQ1LH7IFfgqtu8YWaDjkVGzCyTHnGVOYTr2XVhNAAjLmi/nW4kJgVzrufS+Is26NxpbjMXWtBjkFTrYE+r+E7tqhSOmlLPIQxVpX0dfoXd3XOiBTV2GO5pGgHJCEVcDGufUQvguiogLwkV1zBlu29lfsrSjfhKvJjH28nFL3v+HPBhXOrPelN2xtrSlHXmoRtTCA9e075lZUOFMBpjBPGCw2uZD2i/pHVtFwa+0p63AgqnGF/IrDnVuaFs165kMpGnHumggU5ZK5XqAIYwKmr106mK6QjmOx5WDd6oc0WsRYVfpVwQB4P+8jWf9VAl6PfFBhQKzqwj5G0mQDcrhUfx8rknzjr78Nh6Bv51ZXUtNL1y76XMwhsN+6Cu2T1Ms1r+eSdRgo6LpueBF0pr6mA/xUIQXgP4P6j0C9dRPH/MhsdJmKiDv925ju7+xcFRsDILdZ7vsae69tDN04q0d4sBzKvOmMsIxWiikr9P4D7XvB5RTnwGQ9a7XILf0q8jZmEtLeMV9qfY3AzYFvvi/m3zGMZmNbFNkyg1PvJfIRGch7vUfFXqT5YYgJZ7M9gBN4yLxC+WtP1UKmoOHd+cQg9xzeTNxuvQDM/yjMynW0uxZlxtdL4Ucp4PtHhKWvjNg7LIJB6niNAqeDMsBLov6F1P+QLs4GVdS1fRtpgnmxHN/+y3/V6g/9/Eb/trYmWC+3e2pD1DIAYw7BUjhyo+KRPjDKXUR2CqC0nQjp8Q7uOOfT+JK9uuONsiXfcE0SucL4K6r1UvDmT/qXxPNwtt5hIzTmbuaJ63HV+Urh49m07"/>
<input type="hidden" value="133b40e5940ea08e8901277e08bc72e4" id="jschl-vc" name="jschl_vc"/>
<!-- <input type="hidden" value="" id="jschl-vc" name="jschl_vc"/> -->
<input type="hidden" name="pass" value="1640788160.011-Z8znjbzNhw"/>
<input type="hidden" id="jschl-answer" name="jschl_answer"/>
</form>
<script type="text/javascript">
//<![CDATA[
(function(){
var a = document.getElementById('cf-content');
a.style.display = 'block';
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
var trkjs = isIE ? new Image() : document.createElement('img');
trkjs.setAttribute("src", "/cdn-cgi/images/trace/jschal/js/transparent.gif?ray=6c53b849cf342c52");
trkjs.id = "trk_jschal_js";
trkjs.setAttribute("alt", "");
document.body.appendChild(trkjs);
var cpo=document.createElement('script');
cpo.type='text/javascript';
cpo.src="/cdn-cgi/challenge-platform/h/g/orchestrate/jsch/v1?ray=6c53b849cf342c52";
if (window._cf_chl_opt.cPMDTk && window.history && window.history.replaceState && window.URLSearchParams) {
var ogU = location.pathname + location.search + location.hash;
var p = new URLSearchParams(location.search);
p.set('__cf_chl_rt_tk', window._cf_chl_opt.cPMDTk);
history.replaceState(null, null, location.pathname + '?' + p.toString() + location.hash);
cpo.onload = function() {
history.replaceState(null, null, ogU);
};
}
document.getElementsByTagName('head')[0].appendChild(cpo);
}());
//]]>
</script>
<div id="trk_jschal_nojs" style=
"background-image:url('/cdn-cgi/images/trace/jschal/nojs/transparent.gif?ray=6c53b849cf342c52')"> </div>
</div>
<div style="display: none;">table</div>
<div class="attribution">
DDoS protection by <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing/" target="_blank">Cloudflare</a>
<br />
<span class="ray_id">Ray ID: <code>6c53b849cf342c52</code></span>
</div>
</td>
</tr>
</table>
</body>
</html>
I tried to use CURL instead of modules, however the same problem occurred with it, but that did not lead me to a possible solution, and also tried to use other modules to send the request, however with them the same problem.
Also, I found out that this HTML code is associated specifically with the site of the link shortening service, but, as you understand, I want to refer to the service API.
Hi I'm new to nodejs so I using the npm library instagram-node-lib... I was using this for long time and tested it works correctly before but I receive an error from the terminal.
in _request
SyntaxError: Unexpected token < occurred: <!DOCTYPE html>
<html lang="en" id="facebook">
<head>
<title>Facebook | Error</title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="expires" content="-1">
<meta http-equiv="pragma" content="no-cache">
<meta name="robots" content="noindex,nofollow">
<style>
html, body {
color: #141823;
background-color: #e9eaed;
font-family: Helvetica, Lucida Grande, Arial,
Tahoma, Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #3b5998
url('//static.xx.fbcdn.net/images/logo-fb-trans-92x20.png')
center 11px no-repeat;
border-bottom: 1px solid #133783;
display: block;
height: 38px;
position: relative;
}
h1 {
font-size: 18px;
}
p {
font-size: 13px;
}
#footer {
border-top: 1px solid #ddd;
color: #9197a3;
font-size: 12px;
padding: 5px 8px 6px 0;
}
</style>
</head>
<body>
<div>
<a id="header" href="//www.facebook.com/"></a>
</div>
<div id="core">
<h1 id="sorry">Sorry, something went wrong.</h1>
<p id="promise">
We're working on it and we'll get it fixed as soon as we can.
</p>
<p id="back-link">
<a id="back" href="//www.facebook.com/">Go Back</a>
</p>
<div id="footer">
Facebook
<span id="copyright">
© 2014
</span>
<span id="help-link">
·
<a id="help" href="//www.facebook.com/help/">Help Center</a>
</span>
</div>
</div>
<script>
document.getElementById('back').onclick = function() {
if (history.length > 1) {
history.back();
return false;
}
};
// Adjust the display based on the window size
if (window.innerHeight < 80 || window.innerWidth < 80) {
// Blank if window is too small
document.body.style.display = 'none';
};
if (window.innerWidth < 200 || window.innerHeight < 150) {
document.getElementById('header').style.background = '#3b5998';
document.getElementById('header').style.height = '8px';
document.getElementById('back-link').style.display = 'none';
document.getElementById('help-link').style.display = 'none';
};
if (window.innerWidth < 200) {
document.getElementById('sorry').style.fontSize = '16px';
};
if (window.innerWidth < 150) {
document.getElementById('promise').style.display = 'none';
};
if (window.innerHeight < 150) {
document.getElementById('sorry').style.margin = '4px 0 0 0';
document.getElementById('sorry').style.fontSize = '14px';
document.getElementById('promise').style.display = 'none';
};
</script>
</body>
</html>
is there a way to rectify this error shown from the terminal?
Whenever i try to load the google maps html code i never get anything to display and i get the following error:
ReferenceError: google is not defined
I can create a hyperlink to google maps but this isn't what i want. I also went ahead and got my own API key and put it into my code. Why isn't google defined? This seems too common of a problem to not have a solution.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>My first Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDX71YSt1efYJH3MdIsH3SF3kyJNjN-Z78&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(54.124634, -3.237029)
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "A place on Earth",
draggable: true,
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" />
</body>
</html>
I am having some issues with z-index that I can't seem to be able to iron out. I've made sure that the relavant position atributes are set to relative, but my elements just won't play nicely.
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>Untitled Document</title>
</head>
<body>
<div class="container" id="top">
<h1>Top</h1>
<div class="slideshow">
<ul class="nav">
<li class="prev">Previous</li>
<li class="next">Next</li>
</ul>
<ul class="slides" id="slides">
<li><img src="images/top_blue.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_brown.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_vanilla.gif" alt="Harley Davidson Sportster" /></li>
</ul>
</div>
</div>
</body>
</html>
And here my CSS:
body, h1, ul, li {
margin: 0; padding: 0; border: 0;
}
.container {
width: 800px; margin: auto;
position: relative;
}
.slideshow {
width: 800px; height: 50px;
position: relative;
}
.slideshow ul.nav {
list-style: none;
position: relative;
z-index: 100;
}
.slideshow ul.nav li.prev {
float: left;
}
.slideshow ul.nav li.next {
float: right;
}
.slideshow ul.nav li a {
display: block; width: 32px; height: 48px; text-indent: -9999px;
}
.slideshow ul.nav li.prev a {
background: url(images/arrow_prev.gif);
}
.slideshow ul.nav li.next a {
background: url(images/arrow_next.gif);
}
.slideshow ul.slides {
list-style: none;
position: relative;
top:0px;
height:50px;
}
Here my JSFiddle: http://jsfiddle.net/XPsn7/1/
Basically, the main images under have z-index of 5, and the arrow image should position in front of the slides, with z-index of 15. However, the navigation arrows cause the slides images to move right to make room for them.
What's going on?
The problem is your relative positioning. If you create a relative container with child elements that are absolutely positioned, you should be able to float the images as intended.
i'm using this node.js code:
var server = require("socket.io").listen(6666);
server.sockets.on("connection", function(message)
{
message.on("newMessage", function(data)
{
server.sockets.emit("sendEvent", data);
});
});
and this html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online chat</title>
<style>
body
{
color: #333;
background: #333;
font-family: "Helvetica", Arial;
font-size: 14px;
text-align: center;
}
.container
{
background: #ccc;
border-radius: 1em;
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
margin: 1em auto;
padding: 1em;
width: 90%;
}
input
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
}
span
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
text-align: left;
}
</style>
<script src="/resources/js/socket.io.js"></script>
<script type="text/javascript">
<!--
var websocket = io.connect("http://localhost:6666");
window.onload = function()
{
websocket.on("sendEvent", function(data)
{
var chat = document.getElementById('zchat');
var span = document.createElement('span');
var txt = document.createTextNode(data);
span.appendChild(txt);
if(chat.hasChildNodes())
chat.insertBefore(span, chat.firstChild);
else
chat.appendChild(span);
});
var form = document.getElementById('zform');
var message = document.getElementById('zmessage');
form.onsubmit = function(e)
{
websocket.emit("newMessage", message.value);
return false;
};
};
//-->
</script>
</head>
<body>
<div class="container">
<form id="zform">
<label>Message: </label>
<input type="text" name="zmessage" id="zmessage" placeholder="Please insert message" required />
<input type="submit" />
</form>
</div>
<div id="zchat" class="container">
</div>
</body>
</html>
works fine with normal browsers but with i probe with samsung's bada's "dolfin" browser based on webkit and it doesn't work, can someone probe it with another mobile browser? thanks :)
server.js
//...
var server = require("socket.io").listen(6969);
//...
index.html
//...
var websocket = io.connect("http://192.168.100.103:6969");
//...
i think the SATAN's port is evil for this, jajajaja and NEVER use localhost, always the PC's public IP