How to convert Image to text box in HTML page? - javascript

I have a small image in an HTML page. If I click on the image it should be converted into a textbox and two links have to appear besides that text box. Can anyone help me with a Javascript function which I can call on onClick?
Please find the attached image for better understanding.

HTML
<div class="resim">
<img class="image" src="image.png"/>
</div>
<div class="txt">
<input type="text"/>
</div>
CSS
.txt{
display:none;
}
.resim{
width:100px;
height:100px;
cursor:pointer;
}
JS
$(document).ready(function(){
$(".resim").click(function(){
$(".txt").show(function(){
$(".resim").hide();
});
});
});
Demo
http://jsfiddle.net/6W8nd/1/

try this
<span id="my"><img src="image.png" onClick="z()"></span>
<span id="dis" style="display:none">
<input type="text" id="text">submit
cancel</span>
<script>
function z()
{
document.getElementById("my").style.display="none";
document.getElementById("dis").style.display="";
}
</script>

Here is a jquery implementation:
HTML:
<div id="content">
<img id="image" src="image.png" onclick="transition()"/>
<div id="input">
<input type="text"/>
Submit
Clear
</div>
JS:
$(document).ready(function(){
$("#input").hide();
$("#image").click(function(){transition()});
});
function transition(){
$("#image").fadeOut();
$("#input").fadeIn();
}
Working fiddle : http://jsfiddle.net/6W8nd/

Try following code.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click on Image change it into text input.</p>
<script type="text/javascript">
function showStuff() {
// show text input
document.getElementById('mytextbox').style.display = 'block';
// hide image
document.getElementById('myimage').style.display = 'none';
}
</script>
<td class="post">
<img id="myimage" src="mypic.png" name="pic" onclick="showStuff()"/>
<span id="mytextbox" style="display: none;">
<input type="text" name="mytextinput">
</span>
</td>
</body>
</html>

Please go through following jsfiddle for desired output link:
Demo
For your information you need to add jQuery code like:
$( ".img-class" ).click(function() {
$(this).hide();
$(".text-class").show();
});
Html code like:
<p class="img-class">
<img src="http://s7.postimg.org/a5m750wnr/Screen_Shot_2014_05_29_at_5_06_07_PM.png" />
<p>
<p class="text-class" style="display:none;">
<input type="text" name="textbox"> Submit Cancel
<p>

ty this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.container{position: relative;}
.Myimg{height: 50px; width: 50px; position: absolute; top:0; left: 0}
.myform{display: none;position: absolute; top:5px; left: 0}
</style>
<script>
$(document).ready(function() {
$( ".Myimg" ).click(function() {
$( ".myform" ).fadeIn( "slow", function() {
$( ".Myimg" ).fadeOut( "slow");
});
});
$( ".cancel" ).click(function() {
$( ".Myimg" ).fadeIn( "slow", function() {
$( ".myform" ).fadeOut( "slow");
});
});
})
</script>
</head>
<body>
<div class="container">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png" class="Myimg" alt="myImg" />
<div class="myform">
<form action="index.html" >
<input type="text" id="myInput" />
submit
cancel
</form>
</div>
</div>
</body>
</html>

Here is a bit more of a generic solution to work on.
Here is a demo, click on the image: http://jsfiddle.net/upGPg/
function InlineEditor(){
var fieldName;
var toggleElement;
var editorTemplate = '<input type="text" name="%name%" /><input type="submit" value="Submit" /><input type="reset" value="Reset" />';
var editorElement;
this.renderEditor = function (){
var node = document.createElement("div");
node.style.display = 'none';
node.innerHTML = editorTemplate.replace("%name%", this.fieldName);
return node;
}
this.setFieldName = function (fieldName){
this.fieldName = fieldName;
}
this.isEditorVisible = function(){
return (this.editorElement.style['display'] != 'none');
}
this.onToggleEditor = function(){
if(this.isEditorVisible())
this.editorElement.style.display = 'none';
else
this.editorElement.style.display = 'block';
}
this.setToggleElement = function(element){
this.toggleElement = element;
var self = this;
element.addEventListener("click", function(){
self.onToggleEditor();
});
this.editorElement = this.toggleElement.parentNode.appendChild(this.renderEditor());
}
}
testEditor = new InlineEditor();
testEditor.setFieldName("test");
testEditor.setToggleElement(document.getElementById("test"));

Related

combine jquery and kendo example

I found a this post and reduce the working example to an input field where a number is displayed and two buttons where you can in- and decrease the value of integer by click as you can see here.
...
<input type="text" name="quantity" size="2" value="1" />
...
<div class="quantity-wrapper pull-left">
<span class="add-up add-action fa fa-plus"></span>
<span class="add-down add-action fa fa-minus"></span>
</div>
...
$(document).ready(function () {
$(".quantity-adder .add-action").click(function () {
if ($(this).hasClass('add-up')) {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
text.val(parseInt(text.val()) + 1);
} else {
var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
if (parseInt(text.val()) > 1) {
text.val(parseInt(text.val()) - 1);
}
}
});
});
I want to add a kendo dropdownlist as I tried in this link. But the +/- buttons are missing. Can someone pls tell me how to fix that?
I believe you are looking for something like this. Try this in the Telerik DOJO. I'll leave the CSS stuff to you. If you are going to reuse this functionality then I'd suggest creating this into a custom Widget. See Kendo documentation for extending the Widget class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<input id="dropdownlist" />
<input type="text" name="quantity" size="2" value="1" />
<div class="quantity-wrapper">
<button class="up">+</button>
<button class="down">-</button>
</div>
<script>
$(document).ready(function() {
var $quantity = $("[name=quantity]");
$("#dropdownlist").kendoDropDownList({
dataSource: {
data: ["Banana", "Lemon"]
}
});
$(".quantity-wrapper").on("click", "button", function () {
var quantity = parseInt($quantity.val());
if ($(this).hasClass("up")) {
$quantity.val(quantity + 1);
} else {
if (quantity > 1) {
$quantity.val(quantity - 1);
}
}
});
});
</script>
<style>
.quantity-wrapper {
display: inline-grid;
}
</style>
</body>
</html>
Just add buttons instead of span
<div class="quantity-wrapper pull-left">
<button class="add-up add-action fa fa-plus">+</button>
<button class="add-down add-action fa fa-minus">-</button>
</div>

Onclick displaying div as block is not working?

I'm trying to display text if you click on a certain div.
But it is not working, I am also not getting errors?
<p class="activiteitInfo">
<a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a>
</p>
<p class="activiteitReserveer">
Reserveren
</p>
<div class="hoi" style="display: none;">
<?php echo $meer_info; ?>
</div>
<script>
$(document).ready(function () {
$(".activiteitenInfo").click(function () {
$(".hoi").css("display", "block");
} );
} );
</script>
It seems that the element you are trying to listen to click events on has the class activiteitInfo not activiteitenInfo to which you are trying to listen in your javascript.
You have a typo, please use:
<script>
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
} );
} );
</script>
Your element class is "activiteitInfo", and your looking for "activiteitenInfo".
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
} );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="activiteitInfo">
<button class="fancybox-inline" style="color: #0003 !important;">Meer info</button>
</p>
<p class="activiteitReserveer">
Reserveren
</p>
<div class="hoi" style="display: none;">
test
</div>
Try this. You are use wrong class name.
$(document).ready(function() {
$(".activiteitInfo").on('click', function() {
$(".hoi").css("display", "block");
});
});
.activiteitInfo > a {
color: blue;
}
.activiteitReserveer {
color: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="activiteitInfo"><a class="fancybox-inline">Meer info Click Me!</a></p>
<p class="activiteitReserveer"><a>Reserveren</a></p>
<div class="hoi" style="display: none;">
Text
</div>
<script>
</script>

How to hover an edit text in CSS?

I am stuck with an issue of hover on edittext when placed near the field.
Required:
When I place in div1 or div2 edittext field should be visible and it should be editable
When I place outside div1 or div2 edit text should not be visible only from and to should be visible.
HTML:
<div class="textboxes">
<ul>
<li><input type="text" id="txt" /></li></ul>
</div>
<div class="edit">
<a href="#" id="edit" runat="server" >edit</a>
</div>
CSS:
.textboxes {margin:0; padding:0; display: none; }
.textboxes ul li {list-style-type:none; padding:5px 0 0;}
jQuery:
$("#edit").click(function() {
if ($('.textboxes').is(':visible')) {
$('.textboxes').hide();
// do save info
//$(this).val('Edit');
}
else {
$('.textboxes').show();
// $(this).val('Edit');
}
$(this).hide().after('<span class="edit">' + $(this).val() + '</span>');
});
Check the below demo .. It might helps you..
Demo
HTML:
<div class="wrap">
<div class="box">
<div>From :</div>
<div class="txt">India</div>
<div class="input"><input type="text" /></div>
</div>
<div class="box">
<div>To :</div>
<div class="txt">America</div>
<div class="input"><input type="text" /></div>
</div>
</div>
Script:
$(".box").mouseenter(function (e1) {
var txt = $(this).children(".txt");
input = $(this).children(".input");
input.children("input").val(txt.html());
txt.css("display", "none");
input.css("display", "inline-block");
}).mouseleave(function (e2) {
var txt = $(this).children(".txt");
var input = $(this).children(".input");
txt.html(input.children("input").val());
input.css("display", "none");
txt.css("display", "inline-block");
});
Output:
Mouse enter function in Jquery will help you( I hope so) to achieve your requirement.
Here is an example
$('.textboxes').hide();
$( "#edit" )
.mouseenter(function() {
$('.textboxes').show();
})
.mouseleave(function() {
$('.textboxes').hide();
});
HTML:
<div id="showTextBox">
<input type="text" id="textBox" style="visibility:hidden"></input>
</div>
JQuery:
$("#showTextBox").mouseover(function() {
$("#textBox").css('visibility','visible');
});
$("#showTextBox").mouseout(function() {
$("#textBox").css('visibility','hidden');
});
Working Demo

Hide Button After Click (With Existing Form on Page)

I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>
Change the button to :
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
FIDDLE
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
and a script
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
FIDDLE
This is my solution. I Hide and then confirm check
onclick="return ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}
Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>
CSS code:
.hide{
display:none;
}
.show{
display:block;
}
Html code:
<button onclick="block_none()">Check Availability</button>
Javascript Code:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
You can use this
Html
<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java script
function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}

how can we increase or decrease the size of div on btn click in asp.net?

how can we increase or decrease the size of div on btn click in asp.net?
stylesheet
<style>
div{
width:50px;
height:70px;
float:left;
margin:5px;
background:rgb(255,140,0);
}
</style>
Javascript:
<script src="_http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").one('click', function () {
$(this).height(30);
});
</script>
Markup:
<body>
<div></div>
</body>
HTML
<div id="div1"></div>
<input type="button" id="aAdd" value="Increase" />
<input type="button" id="aDecrease" value="Decrease" />
Script
var currentHeight;
var measurement=100;
$(function(){
currentHeight=$("#div1").height();
$("#aAdd").click(function(){
currentHeight=parseInt(currentHeight)+measurement
$("#div1").height(currentHeight);
});
$("#aDecrease").click(function(){
currentHeight=parseInt(currentHeight)-measurement
$("#div1").height(currentHeight);
});
});
Here is the working sample http://jsfiddle.net/pJWMh/14/
$("div").click(function() { $(this).height(30); });
See working jsFiddle demo
Fist of all you have give id for div. i have modify some html and place button as below.
<body>
<form id="form1" runat="server">
<div id="dvMain">
</div>
<input id="btn" onclick="javascript:changeDivSize();" type="button" value="Change Size" />
</form>
call javascript functin changeDivSize() as below
function changeDivSize() {
$("#dvMain").height(500);
}
Hope this will help you...

Categories

Resources