So I have this script that I've been using that works nicely for an my purposes but it is built with radio buttons, and I've been asked to do another project with it, but my boss would like the buttons to now be regular, non-radio buttons.
Here is the code I've been using so far. It's a lot harder to change over radio-button code to regular button code than I thought! Any help would be very much appreciated, thanks!
<!DOCTYPE html>
<html>
<head>
<style>
#TFholder{
background-image:url('truefalse.png');
height:84px;
width:576px;
}
button{
height:84px;
width:280px;
color:white;
background-color:black;
margin-top:50px;
text-align:center;
line-height:10px;
border:none;
outline:none;}
button a{
display:block;
color:white;
text-decoration:none;
padding:20px 40px;}
</style>
</head>
<body>
<script type="text/javascript">
function onCheck() {
if (document.getElementById('check1').checked) {
document.getElementById('truebox').style.display = 'block';
}
else document.getElementById('falsebox').style.display = 'block';
}
</script>
<input type="radio" onclick="javascript:onCheck();" name="check" id="check1"><br>
<input type="radio" onclick="javascript:onCheck();" name="check" id="check2"><br>
<div id="TFholder">
<div id="truebox" style="display:none">
<button type="button">CONTINUE!!!</a></div>
</div>
<div id="falsebox" style="display:none">
<button type="button">SECOND BUTTON!!!</a></div>
</div>
</div>
</body>
</html>
change HTML part to:
<input id="Button1" type="button" value="button" onclick="javascript:b1();"/><br />
<br />
<input id="Button2" type="button" value="button" onclick="javascript:b2();"/><br>
change Script part to:
<script type="text/javascript">
function b1() {
document.getElementById('truebox').style.display = 'block';
}
function b2() {
document.getElementById('falsebox').style.display = 'block';
}
</script>
Related
I'm trying to change the colors of a form text field back and forth, using plain javascript. Can somebody help?
I can change the color once but not back
Here is what I have done
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
function color() {
var x = document.getElementById("currID");
if(x.style.color="red") {
x.style.color="blue";
}
}
}
</script>
<input type="button" value="Click Me" id="testButton" onclick="color()" />
<form method="get" action="getresult.php">
<p>Current ID: <input id="currID" class="a" type="text" name="currID" /></p>
<p><input type="submit" value="Request new ID"/></p>
</form>
</body>
</html>
CSS
<style type="text/css">
.main {
color:black;
}
.a {
color:red;
}
</style>
Try this:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
function color() {
var x = document.getElementById("currID");
if(x.className == "main"){
x.className = "a";
} else {
x.className = "main";
}
}
</script>
<input type="button" value="Click Me" id="testButton" onclick="color()" />
<form method="get" action="getresult.php">
<p>Current ID: <input id="currID" class="a" type="text" name="currID" /></p>
<p><input type="submit" value="Request new ID"/></p>
</form>
</body>
</html>
CSS:
<style type="text/css">
.main {
color:black;
}
.a {
color:red;
}
</style>
Demo: https://jsfiddle.net/a5rxoh03/
Specifically to your issue, and why it didn't work, is because when adding a 2nd IF, you just reveresed the result.
Check out this fiddle, it will change the input field of the "currID" as requested from blue to red and vice verca.
https://jsfiddle.net/0rnnqe3y/
This is the JS :
function color() {
var x = document.getElementById("currID");
console.log(x.style.color == "red");
if(x.style.color=="red") {
x.style.color="blue";
return;
};
if(x.style.color=="blue"){
x.style.color="red";
return;
}
}
i am trying to show a div only when the user selects and image by clicking the file upload browse button. can someone please show me where i am going wrong and how to get this to work, i am using this html code:
<input type="file" name="pic" accept="image/*" onClick="showSubmit(this);"/>
my js code:
<script>
function showSubmit(submit) {
document.getElementById("submit").style.display = submit.checked ? "block" : "none";
}
</script>
my div html:
<div id="submit">
<div id="content2">
<input type="submit" value="Submit">
</form>
</div>
</div>
my div css:
#submit{
display:none;
}
Try This :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.submitClass {
display: none;
}
.displaySubmit{
display:block;
height:20px;
text-align:center;
padding:2px;
}
</style>
<script type="text/javascript">
function showSubmit(submit) {
document.getElementById("submit").className = "displaysubmit";
}
</script>
</head>
<body>
<input type="file" name="pic" accept="image/*" onclick="showSubmit(this);" />
<div id="submit" class="submitClass">
<div id="content2">
<input type="submit" value="Submit">
</div>
</div>
</body>
</html>
In case you're using jQuery:
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
});
If you're using pure javascript, just use the onchange event of your input field.
this is my index.php
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script>
$("input").attr("disabled", true);
</script>
</head>
<style>
#click{
background-color:black;
color:white;
width:200px;
}
#content{
background-color:black;
color:white;
width:200px;
}
</style>
<body>
<div id="click" style="cursor:pointer;">
<a onclick="sendRequest('content.php','','content')">click</a>
</div>
<br>
<div id="content">
this is content
</div>
</body>
this is my content.php
<input type="text" />
this is my ajax.js
http://tny.cz/cb20dc87
i want input in the content.php disabled, can someone tell me how to do it ?
Change your content.php to
<input type="text" disabled />
I don't know your sendRequest() function, but here's how you do it with standard jQuery:
$('#content').load('content.php', function() {
$("#content input").attr("disabled", true);
});
The callback function runs after the AJAX call completes. Presumably your ajax.js provides similar functionality.
I am trying to use jquery animate function to animate boxes but this simple code seems to jerk me off. I am not sure what have I mistaken ? Sometimes the similar code would work perfect and sometime it seems very difficult.
<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<style>
#main{
clear:both;
}
#boxes{
position:absolute;
width:75%;
}
#box1, #box2, #box3{
position:relative;
width:200px;
height:200px;
background-color:#FFD600;
margin:10px;
}
#buttons{
float:right;
}
input{
display:block;
width:150px;
}
</style>
<script>
$('document').ready(function(){
$("#left").bind('click', function(){
console.log('Left');
$('#box1').animate({x:"+=20px"});
});
});
</script>
</head>
<body>
<div id="main">
<div id="boxes">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</div>
<div id="buttons">
<input type="button" value="Left" id="left">
<input type="button" value="Right" id="right">
<input type="button" value="Top" id="top">
<input type="button" value="Bottom" id="bottom">
<input type="button" value="Height" id="height">
<input type="button" value="Width" id="width">
</div>
</div>
</body>
</html>
Try it on JSFiddle.
x isn't a CSS property. Try left:
$('#box1').animate({left:"+=20px"});
Try it on JSFiddle.
Try this it works perfectly :
$("#left").click(function(){
console.log('Left');
$('#box1').animate({left: '+=50'});
});
x: "+=20px"
should be:
left: "+=20px"
JSFIDDLE DEMO
Change this line:
$('#box1').animate({x:"+=20px"});
to this:
$('#box1').animate({left:"+=20px"});
The positions in CSS are top and left, not x and y. Works here: http://jsfiddle.net/jfriend00/47vMV/.
I have seen slideUp and slideDown in jQuery. What about functions/ways for sliding to left and right?
You can do this with the additional effects in jQuery UI: See here for details
Quick example:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
If you don't want something bloated like jQuery UI, try my custom animations: https://github.com/yckart/jquery-custom-animations
For you, blindLeftToggle and blindRightToggle is the appropriate choice.
http://jsfiddle.net/ARTsinn/65QsU/
You can always just use jQuery to add a class, .addClass or .toggleClass. Then you can keep all your styles in your CSS and out of your scripts.
http://jsfiddle.net/B8L3x/1/
This code works well :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
var options = {};
$("#c").hide();
$("#d").hide();
$("#a").click(function(){
$("#c").toggle( "slide", options, 500 );
$("#d").hide();
});
$("#b").click(function(){
$("#d").toggle( "slide", options, 500 );
$("#c").hide();
});
});
</script>
<style>
nav{
float:left;
max-width:300px;
width:300px;
margin-top:100px;
}
article{
margin-top:100px;
height:100px;
}
#c,#d{
padding:10px;
border:1px solid olive;
margin-left:100px;
margin-top:100px;
background-color:blue;
}
button{
border:2px solid blue;
background-color:white;
color:black;
padding:10px;
}
</style>
</head>
<body>
<header>
<center>hi</center>
</header>
<nav>
<button id="a">Register 1</button>
<br>
<br>
<br>
<br>
<button id="b">Register 2</button>
</nav>
<article id="c">
<form>
<label>User name:</label>
<input type="text" name="123" value="something"/>
<br>
<br>
<label>Password:</label>
<input type="text" name="456" value="something"/>
</form>
</article>
<article id="d">
<p>Hi</p>
</article>
</body>
</html>
Reference:W3schools.com and jqueryui.com
Note:This is a example code
don't forget to add all the script tags in order to achieve proper functioning of the code.