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.
Related
<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!.
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
I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});
I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>
you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>
get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()
What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();
You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp
I have a div with id="div_register". I want to set its width dynamically in JavaScript.
I am using this following code:
getElementById('div_register').style.width=500;
but this line of code isn't working.
I also tried using the units px like the following, still no luck:
getElementById('div_register').style.width='500px';
and
getElementById('div_register').style.width='500';
and
getElementById('div_register').style.width=500px;
but none of this code is working for me.
I don't know what's going wrong.
I am using Mozilla Firefox.
EDIT
<html>
<head>
<title>Untitled</title>
<script>
function show_update_profile() {
document.getElementById('black_fade').style.display='block';
//document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= '500px';
//alert('kutta');
document.getElementById('div_register').style.display='block';
document.getElementById('register_flag').value= 1;
document.getElementById('physical_flag').value= 0;
document.getElementById('cultural_flag').value= 0;
document.getElementById('professional_flag').value= 0;
document.getElementById('lifestyle_flag').value= 0;
document.getElementById('hobby_flag').value= 0;
//alert(window.innerWidth);
}
</script>
<style>
.white_content {
display:none;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
</div>
<div id="div_register">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
The properties you're using may not work in Firefox, Chrome, and other non-IE browsers. To make this work in all browsers, I also suggest adding the following:
document.getElementById('div_register').setAttribute("style","width:500px");
For cross-compatibility, you will still need to use the property. Order may also matter. For instance, in my code, when setting style properties with JavaScript, I set the style attribute first, then I set the properties:
document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";
Thus, the most cross-browser compatible example for you would be:
document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';
I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files. Not only will your code be much more maintainable, but you'll actually make friends with your Web designers!
document.getElementById("div_register").setAttribute("class","wide");
.wide {
display:block;
width:500px;
}
.hide {
display:none;
}
.narrow {
display:block;
width:100px;
}
Now, I can easily just add and remove a class attribute, one single property, instead of calling multiple properties. In addition, when your Web designer wants to change the definition of what it means to be wide, he or she does not need to go poking around in your beautifully maintained JavaScript code. Your JavaScript code remains untouched, yet the theme of your application can be easily customized.
This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).
These are several ways to apply style to an element. Try any one of the examples below:
1. document.getElementById('div_register').className = 'wide';
/* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';
Fix the typos in your code (document is spelled wrong on lines 3 & 4 of your function, and change the onclick event handler to read: onclick="show_update_profile()" and you'll be fine. #jmort's advice is good - simply set up 2 css classes that you switch between in javascript - it'll make things easier.
You might also check out element.addEventListener for assigning event handlers to your elements.
The onclick attribute of a button takes a string of JavaScript, not an href like you provided. Just remove the "javascript:" part.
If you remove the javascript: prefix and remove the parts for the unknown ids like 'black_fade' from your javascript code, this should work in firefox
Condensed example:
<html>
<head>
<script type="text/javascript">
function show_update_profile() {
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= "500px";
document.getElementById('div_register').style.display='block';
return true;
}
</script>
<style>
/* just to show dimensions of div */
#div_register
{
background-color: #cfc;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="show_update_profile();" value="show"/>
</div>
<div id="div_register">
<table>
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
Be careful of span!
myspan.styles.width='100px' doesn't want to work.
Change the span to a div.
You have to use document. The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content,
know more
document.getElementById('div_register').style.width='500px';