JQuery :: Adding Custom Attribute Tags To HTML Elements
Apr 14, 2010
Here's what I'm trying to do:
1) I get reference to a div that's on my page:
var theDiv = $("#" + divID);
2) Now I want to add a custom attribute tag to it, so for instance I want to add "winWidth" so that the div object now contains "winWidth=" for instance.
3) I want to set winWidth now since it's part of theDiv to a value
I'm not sure how to really do 1 + 2. I need to do this on the fly because some javascript logic later will add these attributes dynamically to the div... outside of what the original div had...I don't care what it had, I know I have it now in a JS variable and now I want to both add some new attributes to the div, and then set them on the fly. I don't need these attributes to be on my page, I just need them added to my div variable reference.
I would like to include extra "hidden" information in a generated HTML page that can be used by javascript functions.
I realise that most browsers seem to ignore any tags and attributes they don't understand, but from what I can tell the standards do not allow me to make up my own tags or attributes as they will fail validation.
is there any standard element name that can be used for such a purpose i.e. passes validation but never produces any output (and ideally allows nested elements to be rendered normally too)...
I am trying to find how to use custom tags in html and render data based on their use.
A good example is the joomla <jm:whatever> tag.
I found the following article: [url]
I think it might be outdated though because the behavior:url element does not seem to work. Plus, when I check the style sheet on a joomla site, it doesnt seem to use this method. I think these tags might be xml but I do not know how to render them based on the tag.
For example: <customAbbrv:display src="test.html" label="Test" />
I would want this tag to fire test.html and pass the attribute label which is set to Test.
I'm trying to find a way to add an attribute inside an anchor. I want to do this is because that attribute is required by a script I have running on the page, but it is not valid.Just so it makes more sense the code looks pretty much like this:<a id="previous" control="-6" href="#"></a> and I would like to add control="-6" inside <a> via jQuery, only I don't know how.
I am putting the finishing touches to a custom written (pHp) article editor to allow users to publish content on a website.I have basically finished the project, and I am putting the finishing touches in with jquery widgets, such as a word counter. I would also like people to be able to highlight a section of text, then have some custom tags wrap the text (much like on this forum when you highlight a word in the message box and hit the wrap button).I would like my own custom tags to be used, such as <span class='someclass'>some entered text</span> rather than predefined ones.
I sometime find it useful to add my own attribute to a HTML tag so that my javascript can access those elements. For instance, new_attribute in the following anchor tag:
When trying to validate this page, however, it doesn't pass. Some of the below questions likely do not make sense, but I hope you get the idea what I am looking for:Is what I am doing bad practice?Is there another way to allow javascript to specifically select just some elements and not others? Should I instead apply multiple classes to the element, and use some of the classes not to modify appearance, but to allow just them to be selected?If using custom attributes, should they somehow be defined so they pass validation?
I've been programming in jQuery for some time now, and for the first time, I came across an issue where I am writing out the location of a TD with an ID="step" to get the innerHTML with html(). I receive a null value, but when I use td:first within the chain of elements, it works.Has anyone experienced this issue or have any idea why this is not working? I've tried other TDs with diffirent IDs within the same row, and the same null result happens.Is there a possible limitation to the numbe of IDs used within the chaining of the $() call?
I'm learning jQuery with XML. I'm familiar with other query languages such as XPath. I'm having a little bit of difficulty wrapping my brain around how jQuery works but I think I can make the leap if I see a solution to a problem I know how to solve with other methods Given the following XML, please share a jQuery solution to finding the value of attribute B in elements named bar where attribute A has the value 30:
I'm using the jquery in place editor, and I need to get the value of a custom attribute in order to send it with the form. The jquery I have is as folder... (the bit I'm having trouble with is highlighted) $(".edit").editInPlace({ url: "./server.php", params: "folder=" + $(this).attr('folder') //show_buttons: true //$('.edit').attr('folder') });
And the html is as follows: <span class="edit" folder="folderName">text to edit</span> As you can see, I need to get jquery to get the attribute 'folder' value, in this case the value returned would be 'folderName'.
Years ago I created HTML that employs checkboxes and textboxes. I am now writing JS with the intention of adding flexibility and limiting redundancy. I am not sure I truly understand how to correctly interact the two though. For example, one of my scripts have arrays that contain the names of the checkboxes and textboxes, with a 'for' loop to document.write() them to references within the HTML code.This does not seem to be working for me though. Here is what I have thus far (in short):
<script language="javascript"> var teamNames = new Array(3); teamNames[0]="South Africa"; teamNames[1]="Mexico"; teamNames[2]="Uruguay";
[Code]...
I've left out a lot of the code (to include the teamAbbr array, but you get the points. I've tried moving the JS within the HTML body and playing with the reference syntax, but nothing so far.
I have been learning jQuery and have been loving it so far. But can't figure out how to do the following... 1) Find the <a> inside a <ul> that has an active class. 2) Grab the value from the parent <li> and put it into a variable to be used elsewhere.
Here is the example markup... <ul id="carousel"> <li class="carousel-item" carouselindex="1"> <a href="/someurl"><img src="/someimg" alt="" /></a> </li> <li class="carousel-item" carouselindex="2"> <a class="active" href="/someurl"><img src="/someimg" alt="" /> </a></li> </ul> So, in this example, I'd like to return a variable that = 2.
I am creating a small CMS module for a client. I created a little form and when they click Submit, it goes straight out into an include (.inc) file, which is connected to the web page to be displayed.
The trouble I am having is that I'd like to create an additional button that will insert some text (certain html tags to make their life easier, etc) - I got it to work, actually. The script executes and the text is inserted - but once the script runs and the page refreshes (or whatever it does), the text then disappears. The only way I can seem to get it to stay put is when I use "onmouseup" instead of "onclick" - which means that every time the user accidentally mouses over the thing, it inserts the text.
Does anyone know of a way to wrap custom tags around selected text using execCommand or otherwise?
I am developing a rich text editor for use in a web site and while there are a few decent ones already floating around I need to implement a few extra bits of functionality. Specifically tool tips. Idealy I'd like to wrap custom tags around selected text using execCommand. Ie "Selected Text" becomes:
I need to replace custom tags to spans. I have: Code: <block style="color:blue" class="block01" limit="100">This is a block</block> I need to fetch the attributes and add them to a span, like: Code: <span style="color:blue" class="block01" limit="100">This is a block</span> There's a few on the page so I need to change all of them some may have many attributes.
I am developing a mobile web app which communicates with a wcf service that returns data in json format. The way security is handled is the user logins and recieves a token which is added to the http header. The login ajax request which passes the url strings to the service is using https protocol. This works fine. The other 2 ajax requests are also supposed to use https but when I do this the custom header isn't added. If I use http which is the old url, the custom header is added to http header. I have tested this using fiddler2 and firebug and for some reason it doesn't like https in the ajax request url.
function login_service() { //$.mobile.pageLoading(); var stringUsername = $('#txtUsername').val(); var stringPassword = $('#txtPassword').val();
I am working with customised form validator..I've this html structure <div id="tab-perfil"><fieldset> <legend>Dados Pessoais</legend> <div class="columns"> <div class="colx3-left-double required"> <label for="nome">Nome</label> <span class="relative"> <input type="text" name="nome" id="nome" value="" class="full-width"> </span></div>
What I want to do is after the input add a span, I know how to do that, just use insertAfter('#nome'); but I have a class for the ERROR and a class for the OK. This is what I have so far this.find("#formulario_criar-cliente").submit(function(){ var $inputs = $('#formulario_criar-cliente div .required :input'); $inputs.each(function() { if ($(this).val() == "") { $(this).addClass("error"); } else { $(this).removeClass("error"); }}); return false; });
When I add the class error I want to show a span with a class="check-error" and when I remove the class I want to show a span with a class="check-ok" but remove the error one. This is for multiple inputs... and I don't know how to achieve that =x
Im using the jquery validation plugin: [URL] The forms are generated dynamically using php, with the standard class 'required' the plugin looks for, however when it comes to adding my custom rules i want them to be dynamic, as the name/id attributes are generated based on what the id of the form is: i.e. the form ID is #comp so an input would have a name attribute of comp_forename, comp_surname so basically the validator is initiated by looking in the body for a form: var form_id = $('body form').attr('id'); Then how can icancatante the strings to created the name attributes dynamically in the rules here:
I have wrote some jQuery thats adds a class to any <a> tag that contains an external link. That way an icon can be applied to the <a> using CSS!
Code JavaScript: $("#contentPg > p > a[href^='http://']").addClass('icon').addClass('wwwDoc').attr('rel','external');
However, I want to try and modify this script so that it only adds the class if the <a> tag is directly after a <p>, however I am not sure how to achieve this? The reason I wish to achieve this is so that Icons are not applied when the link is in the middle of a line of text, but only when the link is on a line of its own!
How can I use jQuery to add a css class to the first level of <li> tags under a <ul> tag? I have this so far: $("ul.menu li:first").addClass("myClass"); But this only adds the "myClass" to the first <li>, I'd like the set of <li> tags directly underneath to have the same css class. I have a menu structure and it's only the first set of <li> tags I'm interested in.
I have a jquery menu from which i want to post certain information when a particular element is clicked to my php script which searches a db based on the variables input and presents the information back on the page.
So jquery drop down menu has 4 sections all with drop downs. I want to return results based on the section and then the drop down clicked
So clearly i can get this working fine using html and a form but i just want to use the information in the <li> elements instead..
Can i in jquery do this: upon clicking said element post the class attribute and txt as two things to my php scripts?