Javascript function subtract from div not working. - javascript

I want to subtract 50px from a div with a javascript function when it is called. Why isnt this working?
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id)
{
obj.style.height = ( parseFloat( obj.style.height ) - 50 ) + 'px';
}
</script>
<style type="text/css">
#divId{
background:blue;
width:300px;
height:100px;
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>

You do not define obj or a style property for height, and missed a bracket in the css:
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id){
var obj=document.getElementById(id);
if(obj){
obj.style.height= (obj.offsetHeight- 50)+ 'px';
}
}
</script>
<style type= "text/css">
#divId{
background:blue;
width:300px;
height:100px;
}
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>

Related

Can not access JavaScript function inside HTML (main is not defined)

I am trying to access "main" javascript function inside HTML, and getting reference error says "main" is not defined. Can't see what is missing.
<html>
<head>
<title>dataset</title>
<script>
function main(){
....
}
</script>
</head>
<body onload="main()">
<h1>dataset</h1>
</body>
</html>
Your code works fine, just remove the '...' from your function and add alert('test) OR console.log('test) for testing
<html>
<head>
<title>websites dataset</title>
<style>
img{
height:100px;
}
</style>
<script>
function main(){
alert('test');
}
</script>
</head>
<body onload="main()">
<h1>websites dataset</h1>
</body>
</html>
The script has to be defined within the body of the HTML for it to be referenced.
So just rearrange your code to accommodate:
<html>
<head>
<title>websites dataset</title>
<style>
img{
height:100px;
}
</style>
</head>
<body onload="main()">
<h1>websites dataset</h1>
<script>
function main(){
...
}
</script>
</body>
</html>

How do I change the background-color CSS with Javascript?

I was wanting to change the background-color in my CSS code by using a button with JavaScript. I have tried things such as
document.getElementByID("").style.background = colour. This didn't work, presumably because I was selecting the HTML element rather than the ID, where the CSS information is stored. I also tried jQuery.
I tried $("#traffic_light").css("background-color", "green").
This also didn't work, but it may have been because I didn't use the correct selector at the start. If anyone does know the selector to select the CSS style for an ID then please tell me. Anyway here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Traffic Lights</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
#traffic_light {
width:200px;
height:200px;
padding:10px 11px;
margin:0 auto;
border:2px solid #a1a1a1;
border-radius:150px;
background-color:green;
}
</style>
<div id="traffic_light"></div>
<button type="button" onclick="colour_change()">Change Lights</button>
<script>
var colour = ["green", "orange", "red"];
var i = 0;
document.getElementByID("traffic_light").style.background = colour[i];
function colour_change() {
i++;
document.getElementByID("traffic_light").style.background = colour[i];
};
</script>
</body>
</html>
document.getElementById("traffic_light").style.backgroundColor = colour[i];
Check this link hope it will work for you: http://www.java2s.com/Tutorial/JavaScript/0440__Style/divstylebackgroundColor00f.htm
In jquery
<!DOCTYPE html>
<html>
<head>
<title>Traffic Lights</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
#traffic_light {
width:200px;
height:200px;
padding:10px 11px;
margin:0 auto;
border:2px solid #a1a1a1;
border-radius:150px;
background-color:green;
}
</style>
<div id="traffic_light"></div>
<button type="button" id="change">Change Lights</button>
<script>
var colour = ["green", "orange", "red"];
var i = 0;
$('#change').click(function() {
if(i==colour.length-1)
i=0;
else
i++;
$('#traffic_light').css('background-color', colour[i]);
});
</script>
</body>
</html>
Oops. I always thought it was .getElementByID. Apparently not. Thanks everyone :)
This will work
<!DOCTYPE html>
<html>
<head>
<title>Traffic Lights</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
#traffic_light {
width:200px;
height:200px;
padding:10px 11px;
margin:0 auto;
border:2px solid #a1a1a1;
border-radius:150px;
background-color:green;
}
</style>
<div id="traffic_light"></div>
<button type="button" onclick="colour_change()">Change Lights</button>
<script>
var i = 0;
var colour_change = function(){
var colour = ["green", "orange", "red"];
if(i==colour.length)
{
i=0;
}
document.getElementById("traffic_light").style.backgroundColor = colour[i];
i= i+1;
}
</script>
</body>
</html>
<script>
function colour_change() {
document.getElementById("traffic_light").style.backgroundColor = colour[i];
}
</script>
<button type="button" onclick="colour_change()">Change Lights</button>
Great it was typo answered by demo brk and angnima
There is a typo in your code. Instead of document.getElementByID(), use document.getElementById().
Other than that, you can change the background color with each click by using this condition-
var colour = ["green", "orange", "red"];
var i = 0;
document.getElementById("traffic_light").style.background = colour[i];
function colour_change() {
i++;
i = i<colour.length ? i : 0;
document.getElementById("traffic_light").style.background = colour[i];
};
And in the HTML-
<div id="traffic_light"></div>
<button type="button" onclick="colour_change()">Change Lights</button>

JavaScript TouchEvent did not work

Recently I started play with TouchEvent.
I would like to ask why this code does not work.
Why DIV "coords" does not display any result.
I used the code from:https://mobiforge.com/design-development/html5-mobile-web-touch-events
<!DOCTYPE html>
<html lang ="pl-PL">
<head>
<meta charset="utf-8"/>
<style>
#touchzone{
width:300px;
height:300px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="coords"></div>
<div id="touchzone"></div>
<script type="text/javascript">
window.onload=function(){
function init() {
var touchzone = document.getElementById("touchzone");
touchzone.addEventListener("touchstart", touchHandler, false);
}
}
function touchHandler(event) {
var coords = document.getElementById("coords");
coords.innerHTML = 'x: ' + event.touches[0].pageX + ', y: ' + event.touches[0].pageY;
}
</script>
</body>
</html>

show div on click with Jquery

I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>

change alert message text color using javascript

Am using the below script to change the color of the script but showing 'font color="red">Hello world /font> like this.Is any possible way to change the alert text color..
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<body>
<script type="text/javascript">
var str = new String("Hello world");
alert(str.fontcolor( "red" ));
</script>
</body>
</html>
No. alert() accepts a string and renders it using a native widget. There is no provision to style it.
The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().
You can use JQuery to resolve your Problem
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}});
});
</script>
</head>
<body>
<div id="dialog-message" title="My Dialog Alternative">
<p style='color:red'> Hello world </p>
</div>
</body>
</html>
Hope this help :
<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;}
#alertbox{display: none;
position: fixed;
background: #000;
border:7px dotted #12f200;
border-radius:10px;
font-size:20px;}
#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; }
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->
<script>
function CustomAlert(){
this.on = function(alert){
var winW = window.innerWidth;
var winH = window.innerHeight;
alertoverlay.style.display = "block";
alertoverlay.style.height = window.innerHeight+"px";
alertbox.style.left = (window.innerWidth/3.5)+"pt";
alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
alertbox.style.top = (window.innerHeight/10)+"pt";
alertbox.style.display = "block";
document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
document.getElementById('alertboxbody').innerHTML = alert;
document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
}
this.off = function(){
document.getElementById('alertbox').style.display = "none";
document.getElementById('alertoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
<div>
<div id="alertboxhead"></div>
<div id="alertboxbody"></div>
<div id="alertboxfoot"></div>
</div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>
The concept is taken from this : http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial

Categories