I am trying to show picture after choosing it from html form following this code:
http://jsfiddle.net/LvsYc/
and my code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="bootstrap/favicon.ico">
<title>Image Test</title>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/jquery.min.js"></script>
<link href="bootstrap/signin.css" rel="stylesheet">
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
</script>
</head>
<body>
<div class="container">
<form id="form12" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
But the chosen image is not shown. What am I doing wrong? It looks almost like the example above.
Related
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
I'm trying to change a picture in a webpage using the tag button and the onclick attribute that call a function that I did in a js document, but it isn't working, this is what a did:
in Javascript:
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.jpg";
}else{
pic = "images_weddings/rose1.jpg";
}
document.getElementById('change1').src = pic;
}
and in html:
MATRIMONIOS
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
I change links to images and code works - strange in your code is that in html you have PNG file "desing_logo-01.png" but in js you have JPG file "desing_logo-01.jpg"
function store (a,z) {
var pic;
if (a>z) {
pic = "https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg";
}else{
pic = "https://thechive.files.wordpress.com/2018/03/girls-whose-hotness-just-trumped-cute-89-photos-257.jpg?quality=85&strip=info&w=600";
}
document.getElementById('change1').src = pic;
}
<div>
<button type="button" onclick="store(2,3)">change the image</button>
<img src="https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg" id="change1" >
</div>
Try this code in your lapy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> </title>
</head>
<body>
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
<script type="text/javascript">
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.png";
}else{
pic = "images_weddings/rose1.png";
}
document.getElementById('change1').src = pic;
}
</script>
</body>
I get this error with a Parse.com JS App:
ReferenceError: Parse is not defined.
I really don't know why. Everything looks good to me. The files are linked correctly; I've checked this a few times. Is it not true, that I have to put my own JS right below Parse and it should work? This is what I've read here: Github Project
I use Chrome with the ripple extension. I serve the app via cordova serve
Any help much appreciated!
Here is index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
<title>Zone</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<img src="../img/site-logo.png" rel="external" class="logo">
<!-- <div class="site-menu">
<i class="fa fa-angle-double-left"></i><p class="title"></p><i></i>
</div> -->
<img src="img/suche.jpg" class="icon">
<img src="img/essentrinken.jpg" class="icon">
<img src="img/einkaufen.jpg" class="icon">
<img src="img/kultur.jpg" class="icon">
<img src="img/dienstleistungen.jpg" class="icon">
<img src="img/nuetzlich.jpg" class="icon">
<img src="img/nummern.jpg" class="icon">
<img src="img/sport.jpg" class="icon">
<img src="img/verwaltung.jpg" class="icon">
<img src="img/hotel.jpg" class="icon">
<img src="img/neuzuzuger.jpg" class="icon">
<div class="adad"></div>
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And here the JS file.
$(document).ready(function () {
Parse.initialize("", "");
var Ad = Parse.Object.extend("Ads");
function getPosts() {
var query = new Parse.Query(Ad);
query.find({
success: function (results) {
console.log("hello");
var output = "";
for (var i in results) {
var name = results[i].get("location");
if (name == 10) {
output += "<img src = '" + imageurl + "' class='media-object' height='60' width='100'>"
}
}
$("#adad").html(output);
console.log(output);
},
error: function (error) {
console.log("Query error:" + error.message);
}
});
}
getPosts();
});
I'm sorry, I have no experience with Cordova, but in general I've seen problems like these being caused by live reloading of files or by asynchronous loading, which could be caused by cordova/gulp/nodejs.
Maybe you should use a require statement as shown on the Parse quick start guide: var Parse = require('parse');
When I try your html and javascript in jsfiddle it just works, so it should have something to do with the order of loading js files in your local "webserver".
The problem could be that the parse CDN was not found i.e . download the SDK and host it yourself instead
Just run into the same issue. You are most likely missing the reference to parse.min.js.
The reference is typically in your index.html file, inside the header:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Security-Policy"/>
<script type="text/javascript" src="cordova.js"></script>
<! ---- LOOK HERE --------->
<script src="js/parse.min.js"></script>
<! ---- LOOK HERE --------->
<link rel="stylesheet" type="text/css" href="css/one.css" />
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
I was wondering if you guys could help me with my Slidedown menu. It starts with the content showing and I want to make it start hidden so when you click the button it will show and it wont start showing the content.
Heres my code:
var test = $('#test'),
toggle = $('#toggle');
toggle.click(function() {
test.slideToggle(1000, function() {
});
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PASSWORD PROTECTION</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type='text/javascript' src='main.js'></script>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="style.css">
</head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Down Menu Click</title>
</head>
<body></body>
<button id="toggle">Login</button></p>
<div id="test">
<div class="slideTogglebox">
<h2>Login</h2>
<form id="form" onsubmit="return false;">
<input type="password" id="values" />
<input type="submit" onclick="lg();" />
<input type="reset" onclick="location.reload();" />
</div>
<nil></nil>
</body>
</html>
</script>
</body>
Try adding
display:none;
to #test in your style.css.
Alternatively, you could add it in the tag as well with:
<div id="test" style="display:none">
see below:
var test = $('#test'),
toggle = $('#toggle');
toggle.click(function() {
test.slideToggle(1000, function() {
});
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PASSWORD PROTECTION</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type='text/javascript' src='main.js'></script>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="style.css">
</head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Down Menu Click</title>
</head>
<body></body>
<button id="toggle">Login</button></p>
<div id="test" style="display:none">
<div class="slideTogglebox" >
<h2>Login</h2>
<form id="form" onsubmit="return false;">
<input type="password" id="values" />
<input type="submit" onclick="lg();" />
<input type="reset" onclick="location.reload();" />
</div>
<nil></nil>
</body>
</html>
</script>
</body>