Hello I'm trying to make the following:
<div id="myid" class="myclass" myownattributehere="somevalue">hellooooo</div>
Is it possible to create a hidden attribute in a div like such, "myownattributehere" or is there another way to do this?
I've heard of putting anchors in to do this? Simple or can it be done via div only?
You can use HTML5's data attribute.
<div id="myid" class="myclass" data-myownattributehere="somevalue">hellooooo</div>
Use data-my-own-attribute-here="...".
Make sure to have HTML5 DOCTYPE: <!DOCTYPE HTML>
In JavaScript, you can access it like this: document.getElementById('myid').getAttribute('data-my-own-attribute-here').
Or in jQuery, access it like: $('myid').data('myOwnAttributeHere').
See also HTML5 data attributes.
Use html5 data attributes:
<div data-your_attribute_name="value"></data>
You can do this on almost any DOM element.
Yes, If "SEO" is not important for you, you can use like this. But it wil not be a valid usage in w3c validatain process. Also after using like this you can "get" or "set" this attribute via jQuery
...
$("#myid").attr("myownattributehere");// get
...
$("#myid").attr({"myownattributehere": "somevalue"});// set
Related
I've been contributing to a WYSIWYG text editor that was made using HTML5 and jQuery. While doing some of my research I've been seeing a lot of people use the placeholder attribute in a div. However, this does not follow the specification and I end up with the following error when I try to validate my HTML.
Attribute “placeholder” not allowed on element “div” at this point.
Is there a better way to do this so that my HTML will validate and I still end up with a placeholder?
Thanks to Juantxo Cruz's link I was able to fix my issue by using CSS as shown below:
HTML
<div contentEditable=true data-placeholder="Sample text"></div>
CSS
[contentEditable=true]:empty:not(:focus):before {
content:attr(data-placeholder)
}
I have a HTML file in the below format :-
<div class="container">
<div class="hello"><p>1</p></div>
<div class="goodbye">2</div>
<div class="hello"><p>3</p></div>
<div class="goodbye">4</div>
</div>
Please recommend me a program which could remove a particular div tag by its class name and save the output file as below :-
<div class="container">
<div class="goodbye">2</div>
<div class="goodbye">4</div>
</div>
The whole division along with its internal tags should be removed. I have used jQuery, but it does not affect the source code.
Thanks in advance.
You can use .remove():
Remove the set of matched elements from the DOM.
$('.container .hello').remove();
Side note: You can use .find() to speed up above selector:
$('.container').find('.hello').remove();
You can get the element having class hello within container and call .remove()
Live Demo
$('.container .hello').remove();
Similar to .empty(), the .remove() method takes elements out of the
DOM. Use .remove() when you want to remove the element itself, as well
as everything inside it. In addition to the elements themselves, all
bound events and jQuery data associated with the elements are removed.
To remove the elements without removing data and events, use .detach(), jQuery docs
So, nobody actually seemed to read what OP asked for.
Here's an answer for a JavaScript Regular Expression, very dirty and unflexible, but matching your needs.
<div class=.(\w*)?.><(.*)</div>
Still you may run into problems, because I don't know any editor actually using JavaScript RegEx.
Basically, everything about problems you might run into has been already said in this famous thread: RegEx match open tags except XHTML self-contained tags
How can I update the text fields with HTML? I have a page with some textfields, and I need to update these fields at a specific time. I used the value property to display the default values, but how can I change the values later?
Thank you
I am forcing a JavaScript answer, since there is no way it can be done with only HTML.
Snippet:
<input type="text" id="textboxid" />
<script type="text/javascript">
var txtBox = document.getElementById("textboxid");
txtBox.value = "new value";
</script>
You need to use javascript in order to achieve this. I recommend jQuery, as it prevents most cross-browser "quirks" and "gotchas". Specifically, you're looking for http://api.jquery.com/html/ or http://api.jquery.com/val/.
JSFiddle: http://jsfiddle.net/dEUH5/
First of all, at the very least, HTML is used for Mark-Up, CSS is for styling, and JavaScript is for functionality. I suggest that if you want to add functionality and interactivity to your website, you look up how to use JavaScript. This will allow you to add the functionality you wish for your textbox, as you wished.
You can't do this with HTML, you could with PHP.
I'm sure someone will type out the code, but go to: http://uk.php.net/.
This question is way to broad too.
for internal reasons I need to attach some information to some html tag. Example:
<img src="mypic" mycustomvalue="abc">
Can I add safely like that or there is another way?
Thanks
I am currently using HTML 5
<!DOCTYPE html><html lang="en">
Yes, you can do that.
Note that the HTML5 standard is to prefix custom attributes with data-:
<img src="mypic" data-mycustomvalue="abc">
Yes, you can set it like that, and retrieve it with :
document.getElementById("txtBox").getAttribute("mycustomvalue");
Use getAttribute(), this should allow you to retrieve the value of any attribute.
I need to open a page inside another page without the horizontal scroll bar in the inner page.
I don't want to use <iframe> tags on my page. Is there any substitute to the <iframe> tag??
If this is about the scrollbars (you mentioned that in your comment), you can hide/show them using stylesheets - try the following:
<body style="overflow-y:hidden; overflow-x:hidden">
...
</body>
You can use the styles on other tags (textareas etc.) as well.
PS: If you clarify your question, it's a good idea to edit the original post instead of commenting - this will make it easier to understand your question.
Best way to avoid IFRAME is to use AJAX. If you would use jQuery it is as simple as that:
$('#yourDIV').load('http://someurl.com/example.html');
Where #yourDIV is ID of any element you want, DIV for example.
Maybe <object> or <embed> or something like that. I think you can put an html there. But that would be sort of the same, i guess...
If you want to validate against strict, <object> should be the way to go.
<object data="example.html" type="text/html" width="500" height="300"></object>
Please note that MSIE 6 doesn't support html object tags.