the user of my application should be able to change the email and the phone number by clicking in a button "Change", this is my code:
<div class="field-group">
...............
....................
<div class="field field-omschrijving">
<label class="label">E-mailadres</label><div>#client.email</div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label><div>#client.phoneNumber</div>
</div>
<input type="submit" class="form-submit" value="Change" name="op">
</div><!-- /.field-group -->
I've been looking for a solution but no success, any idea about how can I do it? Thanks!
Thanks so much for the fast response! But.. my mistake, what I wanted to say is that the fields should appear in a "normal way" and when the user clicks the button change it should change to an "editable way", right now the field email looks like this:!
I want it looks like this:
And after clicking in the "Change" button it has to look like the first image. Thanks again!
Using this code after click you can change your label to input, as in you pictures.
It will help you now, hope
$( ".button_class" ).click(function() {
$('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
});
Here is an example:
<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
$( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}
Result is:
<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
Hope, it will help
Give id to button and input fields for email and ph no.
On click of button, hide the lebel and show input fields.
<div class="field-group">
<div class="field field-omschrijving">
<label class="label">E-mailadres</label>
<div id="divemail">#client.email</div>
<div id="divemailinput"><input type="text" id="emailId"/></div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label>
<div id="divno">#client.phoneNumber</div>
<div id="divnoinput"><input type="text" id="emailId"/></div>
</div>
<input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->
JS
$("#btnchange").click(function(){
$("#divemail").hide();
$("#divemailinput").hide();
$("#divno").hide();
$("#divnoinput").hide();
});
For the first you need is put your
#client.emailand #client.phoneNumber into inputs and set them inactive.
Then, and after clicking change them to active by using javascript.
<input type="text" class="emailand_clas" readonly="readonly" >#client.emailand </input>
and using jquery:
$( ".button_class" ).click(function() {
$('.emailand_clas').attr('readonly','')
});
Some thing like this
Look at this JSFiddle or my blog for a great example.
http://jsfiddle.net/biniama/YDcFF/
<!DOCTYPE html>
<head>
<title>jQuery enable/disable button</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
$('#submitBtn').click(function(){
$('.enableOnInput').prop('disabled', false);
$('#submitBtn').val('Update');
});
});
</script>
<style type='text/css'>
/* Lets use a Google Web Font :) */
#import url(http://fonts.googleapis.com/css?family=Finger+Paint);
/* Basic CSS for positioning etc */
body {
font-family: 'Finger Paint', cursive;
background-image: url('bg.jpg');
}
#frame {
width: 700px;
margin: auto;
margin-top: 125px;
border: solid 1px #CCC;
/* SOME CSS3 DIV SHADOW */
-webkit-box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow: 0px 0px 10px #CCC;
box-shadow: 0px 0px 10px #CCC;
/* CSS3 ROUNDED CORNERS */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-color: #FFF;
}
#searchInput {
height: 30px;
line-height: 30px;
padding: 3px;
width: 300px;
}
#submitBtn {
height: 40px;
line-height: 40px;
width: 120px;
text-align: center;
}
#frame h1 {
text-align: center;
}
#frame div {
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id='frame'>
<div class='search'>
<h1>jQuery Enable and Disable button</h1>
<input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/>
<input type='submit' name='submit' id='submitBtn' value='Edit'/>
</div>
</div>
</body>
</html>
Now HTML5 is available so .
We can use attribute
contenteditable
More help and details
http://html5doctor.com/the-contenteditable-attribute/
<label class="label">E-mailadres</label>
<input type="text" class='email' value='#client.email' />
document.getElementsByClassName('form-submit').onclick=function(){
document.getElementsByClassName('email').disabled=false;
};
Related
I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
/*Html & body theme*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-family:"lato",Arial,sans-serif;
}
body {
width: 100%;
height: 100vh;
color:black;
background: linear-gradient(-45deg, rgba(8,19,114,1) 6%, rgba(0,212,255,1) 42%, rgba(231,246,246,1) 82%);
}
/*container properties*/
.grid-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
}
.grid-container:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
border-radius:5px;
}
#box{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.grid-item-1{
height: 150px;
width:1880px;
position:fixed;
left:10px;
top:20px;
font-size:100px;
text-align:center;
}
.grid-item-2{
height: 600px;
width:500px;
position:fixed;
left:10px;
top:350px;
}
.grid-item-3{
height: 300px;
width:1370px;
position:fixed;
left:520px;
top:180px;
}
.grid-item-4{
height:450px;
width:1370px;
position:fixed;
left:520px;
top:500px;
}
.grid-item-5{
height: 150px;
width:500px;
position:fixed;
left:10px;
top:180px;
font-size: 30px;
}
/*Search Bar Properties*/
form.searchInput input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.searchInput button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.searchInput button:hover {
background: #0b7dda;
}
form.searchInput::after {
content: "";
clear: both;
display: table;
}
form.searchInput {
top:30px;
bottom:40px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" href="WeatherDashboardStylesheet.css" type=text/CSS>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<title>WeatherDashboard</title>
</head>
<body>
<div class ="grid-container">
<div id="box" class="grid-item-1">
WeatherDashboard ⛅
</div>
<div id="box" class="grid-item-2">
Item 2
</div>
<div id="box" class="grid-item-3">
Item 3
</div>
<div id="box" class="grid-item-4">
<div id="display" class="display-box">
<p class="city"></p>
<img class="icon">
<p class="date"></p>
<p class="weather"></p>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
</div>
</div>
<div id="box" class="grid-item-5">
Search for a City:
<form class="searchInput" style="margin:auto;max-width:300px">
<input id=input class="input1" type="text" placeholder="Search..." name="search" value="">
<button onclick="myfunction()" id="button" class="button1" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<script rel="Script" src="WeatherDashboardScript.js" type=text/javascript></script>
<script src="https://api.openweathermap.org/data/2.5/forecast?q=chicago&appid=dc171ae0b3b507207c6605cbab0a5f98"></script>
</body>
</html>
Hello, I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
You've got a few problems with your html and your js.
First with your js. In your file, all the code is in 'the main' and is being executed as soon as the file loads. You dont want that, you want to create a function so you can use it to link it with the 'onclick' event. You that simply by wrapping your code in a function like this:
function myfunction() {
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
}
After that, I see you've got a variable called City inside your request which has no value. Your code has to know what is that and be able to retrieve its value. For that we call the 'document' object which contains the input and take its value. Like this:
var City = document.getElementById('input').value;
console.log(City) // Print it for good meassure
With that inside your function, every time you click the button, the value is going to be updated and do the request.
Now, in your html you need to change your button's type property. If its of type submit, the form is submited and the page reloaded (The whole form is unnecesary really but I'll leave it in as to not change your code too much). In this case you want your button to be of type 'button' so it only acts as a button when pressed. Like this:
...
<form class="searchInput" style="margin:auto;max-width:300px" >
<input id="input" class="input1" type="text" placeholder="Search..." name="search">
<button onclick="myfunction()" id="button" class="button1" type="button"><i class="fa fa-search"></i></button>
</form>
...
With all that your code should work, retrieve your json and display the information you want on screen.
I hope all of this helps!
document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")
{
$('#button1').on('click', function () {
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
});
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 300px;
position: relative;
top: -70px;
}
.existing1-username-input-textbox,
.existing2-password-input-textbox
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 390px;
position: relative;
top: -50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
position: relative;
top: -70px;
margin-left: 20px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="username-part1">Username</label>
<input class="existing1-username-input-textbox" type="text" value="" />
<br/><br/>
<label class="password-label" for="password-part2">Password</label>
<input class="existing2-password-input-textbox" type="password" value="" />
<br/>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="new-user-name-part-1">Username</label>
<input class="username-new-input-textbox" type="text" value="" />
<br/><br/>
<label class="Password-label2" for="password-new-part2">Password</label>
<input class="password-new-input-textbox" type="password" value="" />
<br/><br/>
<label class="Email-label3" for="email-new">Email Address</label>
<input class="email-new-input-textbox" type="text" value=""/>
<br/><br/>
<label class="Repeat-Email-label4" for="repeat-new-email">Repeat Email Address</label>
<input class="reenter-new-input-textbox" type="text" value="" />
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>
How can I get my current content to slide to the left and bring in new content from the right (after clicking on button 1) when an existing student's username and password are correct, and if it's not correct display error messages that either the username or password isn't correct below each respective textbox .I am thinking about using an if/else condition. Also, how would I load the student's existing account information upon sliding it from the right, if I haven't created the content yet? If I already created the content to be slide in from the right, where do I hold that information until it's time to display that new content. Here is my code so far.
Below piece of code will execute when page get loaded and at that time username and password fields will be blank, so no event will get associated with login button :
if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")
{
$('#button1').on('click', function () {
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
});
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
You should change this to below :
$('#button1').on('click', function () {
if($(".existing1-username-input-textbox").get(0).value== "Micheal22" && $(".existing2-password-input-textbox").get(0).value== "honor7thG")
{
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
});
Now this will associate click event with login button on page load, so when you click login, it will first check the username and password, if matched then the animation part will take effect otherwise else part will execute.
one quick way to do it is via JQuery's .animate function.
Here is a little fiddle with the example:
http://jsfiddle.net/f7VdQ/135/
$(function () {
$('a').on('click', function () {
$('.left').animate({'left': '-105%'});
$('.right').animate({'left': '0px'});
});
$('p').on('click', function () {
$('.left').animate({'left': '10'});
$('.right').animate({'left': '105%'});
});
})
PS.: If you dont want to the current content to be overlayed (that's an additional funcionallity of the fiddle) just dont use z-indexes on the CSS and also use relative positioning.
I am trying to make all my JavaScript external including the onclick for the submit button, I have a commented out window.onload function that I can't get to work. When I remove the onclick="checkInput();" from the submit input and uncomment the window.onload event in the script , my form doesn't work.
Can someone explain what I am doing wrong besides being new to JavaScript.I have included a working snippet, just not external, thanks for any guidance.
/*----------------------------------------------
css settings for HTML div exactCenter
------------------------------------------------*/
#import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:50px auto;
font-family:raleway;
}
span{
color:black;
font-weight:bold;
}
h2{
background-color: white;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 30px;
}
hr{
border:0;
border-bottom:1px solid blue;
margin: 10px -40px;
margin-bottom: 30px;
}
#form_layout{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: -2px;
}
input[type=text],input[type=password]{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 100%;
background-color:#0467fc;
color: white;
border: 2px solid #0467fc;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 15px;
}
a{
text-decoration:none;
color: cornflowerblue;
}
i{
color: cornflowerblue;
}
p{
font-size:16px;
font-weight:bold;
color:red;
}
<!DOCTYPE html>
<html>
<head>
<script>
//window.on onload functionload = function() {
//document.getElementById('submit').onclick = function(evt) {
//checkInput();
//}//end onload onclick
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>isPalindrome</title>
<script>
//window.on onload functionload = function() {
//document.getElementById('submit').onclick = function(evt) {
//checkInput();
//}//end window.onload
Palindrome(str);
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" onclick="checkInput();"/><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>
You have to wait for the DOM to finish loading before you can query it to find DOM elements and atach events.
The simplest fix would be placing your <script> at the end of body.
Another fix is to attach handlers in window onload event ( that's how it works in code snippet below)
In code snippet provided in question the the way window.onload was attached was unclear. Also at the end of script expression Palindrome(str); raised error as var str is undefined, so i've fixed it.
See working snippet below:
document.getElementById('submit').onclick = function(evt) {
checkInput();
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('submit').onclick = function(evt) {
checkInput();
};};
function checkInput() {
alert('Check input fired');
}//end check input
</script>
</head>
<body>
<div id="main">
<div id="form_layout">
<h2>Palindrome Test</h2>
<br>Enter a 10 character Palindrome.
<!-- Form starts here-->
<form name="pForm" id="pForm" method="post" >
<label>Palindrome:</label>:
<input type="text" name="uput" id="uput"/><br>
<!-- ... all the other stuff ... -->
</form><br>
<input type='submit' id="submit" value="Check Palindrome" /><br>
<p><span id="eMsg" class="error"></span><p/><br>
</div>
</div>
</body>
</html>
I have an input[type=text] element and another div for selected elements in my form.
I need to create my own custom tag plugin container and my problem is in css style and layout for the tag container and appearance for it.
This is my actual stage (very poor): http://jsfiddle.net/db8upk61/1/
I want something like it:
challenges
how to simulate an input border between these elements?
how to remove border from input element like the example above?
how to mantain tags in the same line as input?
There are a lot of plugins that makes that, but, as you need to do.
You can create a container simulating an input and inside this container you can put the real input with border white, I made an example, take a look:
http://jsfiddle.net/93n2af0e/
CSS code:
.input-select-tag{
background-color: #FFFFFF;
boder: 1px solid #F1F1F1;
height: 36px;
width: 450px;
}
.selected-tags{
padding: 2px;
}
.button{
float: left;
padding: 5px;
margin-left: 2px;
}
.input{
float: left;
border: #FFFFFF;
margin-left: 2px;
padding: 5px;
}
.clear{
clear: both;
}
HTML:
<form class='form-horizontal well'>
<div class='control-group'>
<div class='input-select-tag'>
<div class='selected-tags'>
<span class='alert button alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span>
<span class='alert button alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<input type='text' name='selectTags' class='input' size="40"/>
<div class='clear'></div>
</div>
</div>
</form>
Hope it helps.
var i = 7;
$("input").focus(function(e) {
// set cursor position
if (!this.value.length) {
this.value = $.map(Array(i * $(".alert").length), function() {
return " "
}).join(" ")
}
}).change(function(e) {
// append new "tag"
$(".alert").first().clone().text(function(i, text) {
return text.replace(/tag1/, e.target.value)
}).appendTo($(".alert").parent());
$(this).val("").focus()
}).closest("form").submit(function(e) {
e.preventDefault()
})
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<form class='form-horizontal well'>
<div class='control-group'>
<div class='selected-tags'> <span class='alert alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> <span class='alert alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<label>Tags</label>
<br>
<input type='text' name='selectTags' />
</div>
</form>
<style>
.control-group {
position: relative;
}
.alert {
position: relative;
top: 47px;
font-size: 12px;
padding: 2px;
margin: 2px;
}
input {
white-space: pre;
width: 100%;
}
</style>
jsfiddle http://jsfiddle.net/db8upk61/2/
I am trying to insert an image instead of a check on the check box. The code that am using is:
<html>
<head>
<style>
.bl {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3));
width: 90%;
height:30px;
border-radius: 5px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
margin-bottom:10px;
}
p
{
font-family:"Times New Roman";
font-size:10px;
}
checkbox
{
width: 75px;
height: 75px;
padding: 0 5px 0 0;
background: url(images/Green_tick.png) no-repeat;
display: block;
clear: left;
float: left;
}
.checked {
position: absolute;
width: 200px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(images/Green_tick.png) no-repeat;
overflow: hidden;
}
</style>
</head>
<body>
<script>
function Checked(id)
{
if(id.checked==1)
{
alert("Checked");
}
else
{
alert("You didn't check it! Let me check it for you.")
id.checked = 1;
}
}
</script>
<div class="main_menu">
<a id='menu' href="javascript:" onclick="loadMenuPage();"></a>
</div>
<p>
All verifications required for QR7 can be uploaded here. Any item which still requires verification is
marked in red until picture has been attached.
</p>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Income </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Property </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Court Order Child Support </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Future Medical Child Support </input>
</div>
</body>
</html>
Any suggestions on how do i achieve it. As of now i get a normal tick in the checkbox.
Thanks in advance.
This post is old but this is what i suggest:
Associate labels to your checkboxes like this:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
Hide by css your checkboxes:
.checkboxes input[type=checkbox]{
display:none
}
Style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes. I use backgrond-color in this example, but you could easily use your background image instead.
Here is the jsfiddle
Styling checkboxes using CSS is a nightmare and you'll never achieve the look you want. Try using a jQuery plugin, most of them 'hide' the checkbox by positioning the input off the visible screen and use a span replacement with a background image that you can edit to suit your needs.
Something like:
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Also check this thread:
Pure CSS Checkbox Image replacement