here is my code. i have a text. and a button for editing the text.i want to click the edit button then that time display a btn as name save . for saving the change that i have. what should i do? help me friends
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../../Editable/css/minified-std-acount.css">
<title>Untitled Document</title>
<script src="../../../eanjoman/js/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
})
});
</script>
<style>
.editable{ background:#EAEAEA}
</style>
</head>
<body>
<div>Some text</div><br><br><button>Toggle editable</button>
</body>
</html>
Well you can just add one line code here:
DEMO
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
$(this).text('Save'); //Add this
})
UPDATE
UPDATED DEMO
To toggle it back just check for its text as below:
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
if($(this).text()!="Save") //Add this condition
$(this).text('Save');
else
$(this).text('Toggle editable');
})
Related
I started to mess around with JS yesterday but I'm like the biggest noob ^^,
I'm trying to make a button, that can show and hide a text input box with one click.
I have used createElement("input") to create the box but can anyone help me how to use removeChild properly? =D Cause I can't get it to hide. I want to use just html and js for this
Thanks!
/gruffmeister # scotland
Here's a pure javascript example for you:
var elem = document.createElement("input");
var btn = document.createElement("button");
var txt = document.createTextNode("Hide Input");
elem.id = "hideme";
btn.appendChild(txt);
document.body.appendChild(elem);
document.body.appendChild(btn);
btn.addEventListener( 'click', function(){
var input = document.getElementById("hideme");
document.body.removeChild(input);
} );
Why not use a simple jQuery approach:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('button').click(function() {
$('p').toggle;
$("#myTextField").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<input id="myTextField" type="text" name="myTextField" value="">
</body>
</html>
I would like to change the colour of an element (in this example a 100px x 100px square called "block" from transparent to black when the variable trigger= 1. The code listed below works with a button. I have other javascript (that this code will be incorporated into that does work with trigger.
Any help would be appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/colourswap.css">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="_js/jquery.color.js"></script>
</head>
<body>
<div id="block">Hello!</div>
<!--button id="go">Simple</button-->
<script>
var trigger = 1;
(function(){
if (trigger == 1) {
jQuery("#block").animate({
backgroundColor: "#000"
}, 1500 );
};
});
</script>
</body>
</html>
You can actually just use .show() or .toggle() if the block is transparent otherwise, e.g.
//say if you wanted the block to show when button is clicked
$("#go").click(function(){
$("#block").toggle();
});
And then set the block's colour to black by default.
I have read all the other articles and none seem to have helped.
The page in question is www.projectwhisper.net78.net
When the button is clicked, a row is added.
But if you look carefully, there is a flicker near the bottom of the table.
Here is the HTML of the page:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<p>Hi There!</p><button id="the_button">Click to add row</button>
<table id="content"><tbody></tbody>
</table>
<script type="text/javascript">
$("#the_button").click(function()
{
var row=$("<tr><td>This is a row</td></tr>");
row.hide()
row.prependTo('table > tbody');
row.slideDown(500);
});
</script>
</body>
</html>
DEMO
Try this
$("#the_button").click(function () {
var row = $("<tr><td>This is a row</td></tr>");
row.prependTo('table > tbody').hide();
row.show(500);
});
Each time the row is added to the top of the table tbody as a stack, since each element is prepended to the table tbody
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>
In a htmlpage using jQuery or JavaScript how can the following be achieved?
User types in a question in a textarea and press on enter button, then the same question should be displayed dynamically in the page below the textarea and the user can enter as many questions.
And when the user is done the page is submitted through a submit button.
Can you give a small hint of how this can be done?
Try this to get started :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#textareabutton').click(function(){
var q = $('#textarea').val(),
$p = $('<p>').html( q );
$('#questions').append( $p );
});
$('#submit').click(function(){
var tab;
tab = $('#questions p').serializeArray();
// now do something with $.ajax to submit the questions
$.post("myphp.php",tab,function(resp){
// what do I do with the server's reply ???
});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<textarea id='textarea'></textarea>
<button type='button' id='textareabutton'>Add question</button>
<div id='questions'></div>
<button type='button' id='submit'>Submit questions</button>
</body>
</html>
Use the innerHTML property of a div to add the questions to.