HTML5 Drag file from one box to another. not working properly - javascript

Having a problem. Once I drop the image into the left box, it doesnt display.
This is what happens:
Before i drag the image.
http://i.imgur.com/xIWDD.png
After I drag the image. it doesnt display.
http://i.imgur.com/vOOIm.png
the error on chrome says:
GET file:///C:/%22test Dropped
angelo.js:42
leftbox.innerHTML=e.dataTransfer.getData('text');
Here is my HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>angelos site</title>
<link rel="stylesheet" href="main.css">
<script src="angelo.js"></script>
</head>
<body>
<section id="leftbox">
i dare you to drop an image inme.
</section>
<section id="rightbox">
<img id="facepic" src="C:\test\face.png">
</section>
</body>
</html>
Here is my JS.
function doFirst(){
mypic=document.getElementById('facepic');//tell js to recognize facepic.
mypic.addEventListener("dragstart",startDrag,false);//when you start dragging facepic run startDrag function. "dragstart" is keyword in java that recognizes when you start dragging an object.
leftbox=document.getElementById('leftbox'); //tell js to recognize leftbox.
leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("drop",dropped,false);//call function dropped.
}
function startDrag(e){
var code='<img src="C:\test\face.png">';
e.dataTransfer.setData('Text',code);
}
Here is my CSS
#leftbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid blue;
}
#rightbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid green;
}

Seems to work fine for me, though, I'm just guessing what your dropped method looks like in this jsfiddle: http://jsfiddle.net/rgthree/aVrB4/
From above you can see your JS is probabl OK. I'm guessing that your browser isn't liking the local links. Try file:///c:/test/face.png for those img's src attributes, or just use relative paths.

Related

JS | Div will not fade in onscroll

Trying to add a "scroll to top" button to fade in when I scroll down the webpage. Doesn't want to know, I've applied this exactly another webpage and works fine, on this web page, it just doesn't want to know. What am I doing wrong?
The script & style sheets are separate & attached in the head section, they do not make up the document body of the webpage.
Long time,
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="../styles/alternate-styling-sheet.css" rel="stylesheet" type="text/css">
<head>
<body>
<div id="scroll-to-top-button">
Top<i class="fa fa-caret-up" aria-hidden="true"></i>
</div>
</body>
<html/>
/----------------------------------/
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}
});
</script>
/---------------------------------------/
<style>
#scroll-to-top-button{
right:20px;
bottom:20px;
display:none;
background-color:#3A83F3;
position:fixed;
border-style:none;
border-radius:5px;
width:100px;
z-index:99999999999;
}
#scroll-to-top-button a{
padding:10px;
display:block;
color:white;
font-size:17px;
text-decoration:none;
}
#scroll-to-top-button a:hover{
background-color:#81AFED;
border-radius:5px;
}
#scroll-to-top-button a i{
padding-left:10px;
float:right;
}
</style>
If the script is part of the js you are calling first, that may be your problem. You have to load jquery first. If you run developer tools, you will probably see in the console that it fails at "$(window)".
First of all move jquery libs to the top of custom scripts
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
And for fade in using js you can follow this links.
It is well explained -
Fade In on Scroll Down, Fade Out on Scroll Up
Since I answered first, I will reply to your comment to the other answer that is similar to mine:
It isn't stupid, as javascript - unless dynamically loaded - loads in the order listed. Since jquery is just a javascript library, it has to load before you can call any jquery functions.
It is possible that your other code had inherited jquery some other way. It would be hard to tell without context.
Load your jQuery library script above your personal script by putting it on the line above it
Try using this:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}});
});
</script>
But it does appear that DaniP's fiddle is working correctly: https://jsfiddle.net/by49ph5s/

Automatically-adjusted font size in liquid container Play Framework

I'm developing an web-app in the Play Framework and at the moment I would like to make the entire app able to adjust sizes of containers and text according to the browser's size. I have managed to make the containers adjust and it works fine, but I'm stuck on adjusting the font-size to fill up the container's size. Even though I tried several variants already, it doesn't seem to work at all: when the text is too big for the container, it simply passes it to a new line in the #indexPerson container, instead of adjusting the font. I also tried setting "white-space: nowrap", but this causes a scrollbar to show up, and the font still doesn't adjust itself. Adding "overflow:hidden" simply hides part of the text, no font-size adjustment whatsoever. Is there something I'm missing out? Thanks a lot in advance! I'm using the textFit plugin: http://www.jqueryscript.net/text/jQuery-Plugin-For-Fitting-Text-To-Its-Container-textFit.html. My css file looks like this:
div#outer {
width:100%;
height:100%;
}
div#indexPerson {
width:100%;
height:6%;
float:left;
border: 2px #385D8A solid;
background-color:#B9CDE5;
border-radius:20px;
-moz-border-radius:20px;
padding-top:2px;
font-size:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And the index page is:
#(people: List[Client])
<!DOCTYPE html>
<html>
<head>
<title>My app</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/index.css")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/textFit.slow.js")" type="text/javascript"></script>
<script>
$(document).ready(function() {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
$(window).resize(function()) {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
</script>
</head>
<body>
<div id="outer">
#for(person <- people) {
<a href="#{routes.Application.login_form(person.getId())}">
<div id="indexPerson">
#person.getInfo()
</div>
</a>
}
</div>
</body>
</html>
Solved it! Note to self: always make sure the div ids are unique!

Make Divs lined up without floating?

I'm in the process of building a timeline feature for my new web app, but I don't know how to get around this CSS issue. I would like to make "Mauna Key Observatories" in line with "Mauna Key Summit" since that div should not be hitting any of the other trek item divs. I only want them to be listed vertical if the trek_items would cover one another. Do you know of a solution?
You can view my issue at: Timeline Feature
Rather than floating , you can use positioning of the div to place it horizontally .. For example , make the div's position absolute and place it at the position using left,*top*,right and bottom
See below code
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:100px; height:100px; border:1px solid; position:absolute; left:0px;"></div>
<div style="width:100px; height:100px; border:1px solid; position:absolute; left:100px;"></div>
<div style="width:100px; height:100px; border:1px solid; position:absolute; left:200px;"></div>
</body>
</html>
Working JS Fiddle

Can I not use embedded <style> CSS on Android?

I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.

Displaying same image multiple times at different locations in a web page using JavaScript

I have a simple web page with a simple puzzle. There are some images that user is supposed to drag to their designated drop zones. I use solution in JavaScript generated by DreamWeaver.
I want to add a JavaScript function that will show a correct.png or wrong.png image next to the image a user just dropped. The straightforward way to do it is to just have correct and wrong div elements for each of the draggable images. But is there a more elegant way?
Another way to put it would be:Write a JavaScript functions Show(commonImageId, nextToImageId) and Hide(commonImageId, nextToImageId) that would be used like Show('correct', 'draggable1');.
Instead of having multiple divs that you show and hide, you can try this solution as well.
Create two styles, each with a different background image set. Whenever you trap the event that a given image should be marked as correct or wrong, simply swap the style of the div, which will have the affect of switching the background image.
Very quick (and in need of some cleanup) sample code below, you've got the right idea with setting the type with a function...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap</title>
<script language="javascript">
function setImage(id, value){
document.getElementById(id).className=value;
}
</script>
<style>
.blank{
width:80px;
height:80px;
float:left;
}
.correct{
background-image:url('correct.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.wrong{
background-image:url('wrong.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.item{
float:left;
height:80px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="correct1" class"blank"></div><div id="item1" class="item">Item 1</div><div class="clear"></div>
<div id="correct2" class="blank"></div><div id="item2" class="item">Item 2</div><div class="clear"></div>
<script language="javascript">
setImage('correct1','correct');
</script>
</body>
</html>

Categories

Resources