This question already has answers here:
Custom attributes - Yea or nay?
(15 answers)
Closed 9 years ago.
I am working on a website using HTML5. I have a jQuery script that shows a custom tooltip on all elements that have the title attribute. I also have a script that makes an alert message appear when the user clicks a picture. The alert message will say what the title attribute equals. Unfortunately the tooltip script and the alert script interfere with each other.
My question is:
Can I make up an attribute?
Not exactly, but HTML 5 provides data-*.
In html5 , use data-XX to produce extra attributes.
see : http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
You can make an aditional attribute, just by naming it.
<img src="abc.jpg" data-opens="abc" data-test="abc" id="image" />
And access it in jQuery by typing
$("#image").attr("data-opens")..
Like:
alert($("#image").attr("data-opens") + " " + $("#image").attr("data-test"));
Edited, thanks to GCyrillus.
Specifically answering you question: you can make up attributes.
But your HTML will no longer be valid and since you are adding them just to store information, you should use de data-* form to add you own data storage for an element, plus it will still be a valid HTML
Related
This question already has answers here:
How to get CSS to select ID that begins with a string (not in Javascript)?
(5 answers)
Find all elements whose id begins with a common string
(5 answers)
Closed 8 months ago.
On my website I have an AJAX search form. The HTML code displays this ID:
id="edit-field-geolocation-proximity-center-geocoder--Bq5Bx8zXA1A"
I want to apply a style to it. My problem is that the code at the end of Bq5Bx8zXA1A changes with each search.
How to style all ID starting with :
id="edit-field-geolocation-proximity-center-geocoder--"
UPDATE
Here is my current CSS code, it works on non-AJAX forms. But for those who have AJAX enabled, it doesn't work because there is a random code added to the background of the ID :
#edit-field-geolocation-proximity-center-geocoder .form-item {
margin-top: 0rem;
}
enter image description here
Welcome to Stack Overflow! I can help with that. One way to achieve what you are looking for in pure CSS is with an attribute prefix selector (which uses a form of regular expressions). In your case the following would likely do the trick:
[id^="edit-field-geolocation-proximity-center-geocoder"] .form-item {
/* your styles here :) */
}
This thread offers a lot of additional excellent methods on how to use regex in CSS if you would like to do some additional reading.
This question already has answers here:
Insert HTML into view from AngularJS controller
(17 answers)
Closed 3 years ago.
I have this validations which I am trying to do every time user enters a wrong email. And I am handling it via variable in my html like this:
<p class="error" ng-show="!!user.errorText || form.$submitted">
{{user.errorText}}
</p>
So far everything is fine as I am replacing the errorText with text values from my controller like this:
$scope.user.errorText = "Email is incorrect"
Now, I actually wanted to insert a html tag like <a> . For example:
$scope.user.errorText = "Email is incorrect . <a href='#'>View Examples</a>"
But the vaiable {{user.errorText}} is always redering it as text. Any help on how can I render both tags and text would be helpful. Also, I can't replace {{user.errorText}} in html as it has already been in use for n number of validations and the scenario of using a html tag is rare.
You can use ng-bind-html directive to bind html text (it will work also for simple text):
<p ng-bind-html="user.errorText"></p>
https://docs.angularjs.org/api/ng/directive/ngBindHtml
If angular-sanitize.js is not included in the application, then the following error will show up:
angular.min.js:1 Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
In that case, $sce service needs to be used like this:
$scope.user.errorText = $sce.trustAsHtml("Email is incorrect . <a href='#'>View Examples</a>");
This question already has answers here:
How to scroll an HTML page to a given anchor
(17 answers)
Closed 8 years ago.
I want browse directly to my site div by this way:
www.xyz.com/#divname
some sites I saw , I know there is a way to do it ,can anyone tell me the code
I have tried
window.location.href=#divname
but not scrolling.
Try
window.location.hash = '#divname';
Where #divname is the id of your div
Can you try this,
<body onload="window.location.hash = '#divname';">
That is called bookmark links, see here http://www.hyperlinkcode.com/bookmark.php.
To navigate to an anchor via javascript you can use this code:
window.location.hash = "#divname";
This topic is also a duplicate of the following:
How to scroll HTML page to given anchor using jQuery or Javascript?
Regards.
If you want to browse directly using a URL (as per your question), then there is absolutely no need for any javascript.
All you need to do is set an id for your div elements, that match the anchor tag you want to use. In the case of your example:
www.xyz.com/#divname
Then you would need an element like so:
<div id="divname">
</div>
Here is a working example
This question already has answers here:
Get selected element's outer HTML
(30 answers)
jQuery: outer html() [duplicate]
(4 answers)
Closed 9 years ago.
I use this JQuery to create some elements:
var form = $(document.createElement("form"));
form.prop({"action":"/DoSomething", "method": "POST"});
var input = $(document.createElement("input"));
input.prop({"type": "image", "src": "someUrl.png"});
form.append(input);
I now want to get the entire html string that is generated by all that so:
<form action="/DoSomething" method="POST"><input type="image" src="someUrl.Png" /></form>
So that I can pass it through some other Javascript functions!
However, doing form.html() obviously only shows this:
<input type="image" src="someUrl.Png" />
So how do you get all the html?
EDIT
Yeah I can see that this is a duplicate, when I first wrote it, I had no idea what I was trying to achieve or the atleast the name given to what I was trying to achieve.
You can use:
form.wrap('<div />').parent().html()
to work across all browsers or
form[0].outerHTML
if you don't really care about older Firefox versions (< 11)
One solution:
Create a temporary element, then clone() and append():
$('<div>').append($('#xxx').clone()).html();
See more answers here: https://stackoverflow.com/questions/5744207/jquery-outer-html
check out this
form[0]
you need the element it self not wrapped version so just use the index 0
var outer_html = $('selector').clone().wrap('<p>').parent().html();
You can simply use the DOM element, rather than a jQuery object, and get outerHTML...
In your code it would be...
form[0].outerHTML;
http://jsfiddle.net/6ugyS/1/
Just use the containg element of form
form.parent().html()
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Changing a CSS rule-set from Javascript
Dear experts,
Is there a way to dynamically generate a CSS stylesheets using Javascript according to what the users fill in on a form (user interface)?
If this isn't possible with Javascript, could someone point me to the right direction. Ruby on rails would also be fine.
Thanks
Sure you can. But you have to validate the user input. And write some kind of a css-processor to search the input text for the elements themselves and the according css-rules.
Finding css-rules is easy - they are all inside the braces {...} and the elements to which you apply the rules are outside the braces {...} .an .element {...}
You'll end up with something like this css playground
Yes you can do that.. Lets say you have a input fields.. and whenever user changes value in the input field, then you want to add some special css..
$('#form input').change(function(){
$('#someElement').css({
'background-color': 'green';
});
});