<html>
<head>
<script type="text/javascript" src="js/ng_all.js"></script>
<script type="text/javascript" src="js/ng_ui.js"></script>
<script type="text/javascript" src="js/components/timepicker.js"></script>
<script type="text/javascript">
ng.ready(function() {
var my_timepicker = new ng.TimePicker({
input: 'my_timepicker'
});
});
</script>
<style>
#my_timepicker {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
Time : <br><input id="my_timepicker" name="my_timepicker_input" style="width:10px" type="text" autocomplete="off" required><br><br>
</body>
</html>
This is my html to use Nogray time picker. I can't adjust the width of input. And i have tried to understand source code but it is too difficult for me. Can anyone say another way of doing it?
Actually, nogray timepicker doesn't use the input given in the body. It will create a new input element above it and the input my_timepicker will be hidden. So when we get element by id, it actually points to the my_timepicker input. But when we add a class to my_timepicker input, it will add the same class to the nogray created input also. Therefore when we get element by class, it actually points to the nogray created input.
Nogray timepicker use the input "my_timepicker" only for get the position where they want to create actuall inputs.
input show on the browser is not the input given by you.
You can observe it by clicking inspect element on the input.
However any class added to the user defined input will also added to nogray created input. That's why css worked when you select it by class and not when you select it by id.
Instead of identifying element by id, i have used class attribute to set the width in css. Hence its working well!.
Related
Lets say I have a form field and I want to append a span tag to it. Is it possible to do this with jQuery?
I tried this code:
$("input").append("<span>My HTML to append</span>");
Or would I have to use something else to append HTML.
So it would be something like this:
<input><span>My HTML to append</span></input>
But that wouldn't work.
Something like when you add tags to the question on StackOverflow each tag is a block.
Edit: How did StackOverflow do it when adding tags to the question.
input elements cannot have any child elements, so you can't use append on them.
You can set their value by using jQuery's val method.
They won't render HTML in any case, if you set the value to <span>My HTML to append</span>, that's exactly what you'll see in the input.
Re your edit:
So it would be something like this:
<input><span>My HTML to append</span></input>
That's invalid HTML. Again input elements cannot have content, they're "void" elements. This is why you can't use append on them.
Re your comment below:
How did StackOverflow do it when adding tags to the question.
They don't. Instead, there's an input and when you complete a tag in the input, they remove it and put it in a span in front of the input, so you end up with:
<span>
<span class="post-tag">tag</span>
<span class="post-tag">another-tag</span>
</span>
<input type="text">
In any modern browser, right-click the tags input field and choose "Inspect element" to see this live.
Here's an very quick-and-dirty example of doing this (but there are lots of plugins out there for doing it — tagit, select2 [which one of my clients uses and loves], ...): Live Copy
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Tags-Like Input</title>
<style>
.input-wrapper {
border: 1px solid #aaa;
}
.post-tag {
border: 1px solid #00a;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" id="theInput">
</div>
<script>
(function() {
$("#theInput").on("keypress", function(e) {
if (e.which === 32) {
e.preventDefault();
addTag($.trim(this.value));
this.value = "";
}
});
function addTag(tag) {
$('<span class="post-tag"></span>')
.text(tag)
.insertBefore("#theInput");
}
})();
</script>
</body>
</html>
An input element cannot have any child nodes, so no, you can't.
You could set the value (using the .val() method) to a string of HTML if you like.
You could concatenate that string with the existing value.
var $in = $("input");
$in.val(
$in.val() + "<span>My HTML to append</span>"
);
As other's have pointed out input element cannot have a child element.
So in a tagging system the common approach is to use a input element to select a tag once you do that add it to a container element which is placed next to the input element and style it such a way that they look like a single control.
In a very crude way you can use .after()/.before() to do it like
$("input").after("<span>My HTML to append</span>");
But there are already many plugins available to do it, so I would recommend using one of them like select2
Here is my code:
<html>
<head>
<script type="text/javascript">
var x= document.getElementById("2").value;
document.getElementById("1").innerHtml = x;
</script>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
</body>
</html>
in this code i have a hidden tag as you can see. I want that the javascript code read text value of the p tag with an id 2 and then print the same value to other <p> tag wiht id="1". But this is not working. Earlier i even tried to use nodeValue but also this is not working and when i checked out in google developer tool then it was showing an error as following:
Cannot read property 'value/nodeValue' of null
please note:
after a quick experiment i noted that after adding a event handler <body onload="y();>" there was no error but there was no expected result!
please help!
hidden is an input element type, not a p attribute:
<input type="hidden" id="2" value="This input should be hidden." />
There are three problems:
there is no innerHtml, innerHTML is the correct syntax.
the hidden "p" does not have a value, it is not an input field. use innerHTML for accessing it.
your javascript code runs before the browser knows about paragraps, so they don't exist when you want them to be accessed. put javascript after the paragraphs or run the code after the page is loaded.
this should work:
<html>
<head>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
<script type="text/javascript">
var x= document.getElementById("2").innerHTML;
document.getElementById("1").innerHTML = x;
</script>
</body>
</html>
Don't use numbers for ID.
Try something like <p id="hello"></p>
I think you need to change your tag to then you can set a CSS class with .hidden { display:none; }.
Wrap your Javascript in a function and call it when you need to or go back to your
Also as Maaz said, try not to use numbers in your ID's.
var hiddenValue = document.getElementById('2').innerHTML;
document.getElementById('1').innerHTML = hiddenValue;
The problem with this (and if you try and style it also) is that classes and ID's should not start with (or include) numbers.
Rename your ID's to one and two and then update your javascript accordingly.
e.g
<p id="one">Some stuff</p>
Also hidden cannot be used with a p element as it's for inputs only.
You're better off using display:none; in CSS.
If you NEED to access it via css as a number, you can use
[id='1']{
/*code*/
}
but your javascript still wont work.
As James has pointed out, using numbers for ID's is perfectly valid in HTML5.
Please take a look at the following html.
EDIT: UPDATED THE HTML PART
<div id="html_editor">
<head>
<style type="text/css" >
.blog
{
border:2px solid grey;
width:auto;
}
<style>{customcss}</style>
</style>
</head>
</html>
</div>
Please take a look at the Css Class 'blog',i want to add some other values to that class through js/jQuery.
Actually it is a HTML editor ,on the body tag user selecting a the 'blog' element,so that time i want to give the user to set CSS for the blog,user changing the CSS on a text area,after that i want to append/rewrite the data to that 'blog' class.
Ex : user setting the class like the following
width:250px;
background:red;
key:value..etc..
so after that i want to change that 'blog' css class to
.blog
{
width:250px;
background:red;
key:value..etc..
}
How can i achieve this ? is there any way by using jQuery ??
UPDATE : Please check this image.
Thank you.
For an HTML like this:
<style id="mycss" type="text/css" >
.blog
{
border:2px solid grey;
color:black;
}
</style>
<div class="blog">This is a blog</div>
Try this js:
var style = document.getElementById("mycss");
newrule = document.createTextNode('.blog { color:red;}');
style.appendChild(newrule);
This isn't very efficient as it overrides the previous rule, but you can get the general method.
JSFiddle here
I went ahead and did the following test because I haven't done JavaScript in a while and I wanted to give it a go. The first method uses String.split to parse the textarea input and the second some basic regex. The regex will fail if there's more than one statement per line. They both put a syntax burden on the user greater than native CSS, so:
I think you should do what nikan suggested.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", '1.6.4');
console.debug('loading');
google.setOnLoadCallback(function() {
var input = $('#userinput').val();
var statements = input.split(';');
for (var statement in statements){
var style = statements[statement].split(':');
var name = $.trim(style[0]);
var value = $.trim(style[1]);
$('#target').css(name, value);
}
var very_basic_css_matching = /^ *([^:]+): *([^;]+);/gm;
while (matches = very_basic_css_matching.exec(input)){
$('#target').css(matches[1], matches[2]);
}
});
</script>
</head>
<body>
<textarea id="userinput">
width:250px;
height:10px;
background:red;
</textarea>
<div id="target">
</div>
</body>
</html>
With jquery is easy to access the current style and modify it:
http://jsfiddle.net/jedSP/7/
Try writing "color:white" or "background:green" in the text area, works in all browsers. When the user is done just use $("#style").html() to get the current CSS.
EDITED: Updated link... like this?
if you want this to happen in real time, its as easy as taking the value of the textarea and parsing it in javascript, and then applying the values with jquery like so
$('.blog').css({'property1':'value1','property2':'value2'});
now if you want to save these changes permanently, you will need to send the new css values to your server and store them in a database or something.
EDIT: to save it on the database...
You can get the value from the textfield like so.
var cssVal = $('#textfieldid').val();
And then use the jQuery ajax function to send the new value to your server.
http://api.jquery.com/jQuery.ajax/
I'm not going to go into all of the details of this, you can find database tutorials everywhere online, but then you want to take the value of that textfield that you sent to your server using jQuery, and save it in your database table that stores the css rule properties.
Then when you regenerate the page, you will just retrieve the new css value from your database.
Take the following page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.
2 things.
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example:
http://jsfiddle.net/Hhptn/
Use the val() function :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"></textarea>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
$("#text-box").val($("#text-box").val() + txt);
});
});
</script>
</body>
</html>
Does that help?
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
You can reference by value of textarea.
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();
here's an easy one (that I'm struggling with)! I have a textarea, a button, and an empty div. All I want to do is insert the updated contents of the textarea into the div onClick of the button. Here's what I've got so far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get_text() {
$("#preview").replaceWith( $("#editor").val() );
}
</script>
</head>
<body>
<form>
<textarea name="editor" id="editor">GrumbleCakes</textarea>
<input type="button" value="Preview" onclick="get_text();" />
</form>
<div id="preview"></div>
</body>
</html>
It works the first time you click the button... with the value that was in the textarea on page load ("GrumbleCakes"), but that's it. It won't work with any updated text.
You can set the innerHTML or text content of the preview div by using the html or text functions:
$("#preview").html($("#editor").val());
.replaceWith actually replaces the DOM element. So the div is removed and replaced with the text. Subsequent calls to the function will no longer find the div, since it's been removed.
I think you want to use
.html($("#editor").val()).
Both
$('#preview").html($("#editor").val())
and
$("#preview").text( $("#editor").val())
should work.
However, .html will allow anyone to inject html or javascript into your site leaving it wide open for cross-site scripting attacks...
jikes!!
man you are replacing div with the contents of the textarea. use this function instead:
function get_text(){
var t=$("editor").val();
$("#preview").text(t);
}