add watermark to all input elements that have a class of watermark - javascript

Alright, I have this code:
jquery
//add watermark effect to the specified input box
//get the
var wm = $("input.watermark").attr("title");
$("input.watermark").watermark(wm);
//end
the code above, should add a watermark base from the title into those input element that has a class of watermark. Now what i was thinking is to make the code easier and simple and implement an effective way to do that but i just dont know how. In my ideas, jquery's 'each' function should able to do that, but i dont know how to make it so please help and if there is other way to do that please suggest nor recommend. Anyway, Im open in ideas, recommendation and suggestion. Thank you.

You can use the placeholder attribute instead fairly dependently now. It's far superior for a lot of reasons. IE 8- will still need JS handling, though.
$("input.watermark").each(function () {
$(this).watermark(this.title);
});

Related

Taking a div element with JQuery and a regular expression

We are working in a Rails application with Prototype and jQuery (we want to remove Protoype at all, but is a migration and we have to do it progressively), and we have a form that can add many fields with jQuery. This fields have a very weird ID:viaje_contratos_attributes_0_cargas_attributes_1385986834726_punto_attributes_municipio
In this field, we need to work with autocomplete jquery, and our problem is take this ID. We've tried the following code:
$('input[id$="_punto_attributes_municipio"]').autocomplete({
source: $('input[id$="_punto_attributes_municipio"]').data('autocomplete-source')
});
What's the problem? What we have to modify?
Thanks in advance!!
Updated [12/02/2013 - 15:35]:
Thanks Jacob Bundgaard for your replies, but still not working :(. But you have made me to think and maybe, because this form is created after load the view with append function, your answer maybe not work for that? Could be?
Anyway, I hardcoded the ui class ui-autocomplete-input and autocomplete="off" but still not working :S.
A temporal solution, obviously, have been coding inline, after the div appended, the jQuery script
What about using a class instead of using id's for something for which they were not intended? That'll make your jQuery significantly simpler, and will probably only take a minor change in your Rails-code.

jQuery FancyBox/Lightbox problem

i write some html with JS into a div.
like this
$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");
it is just an example.
So, i have in $(document).ready Funcktion this code.
$('a[rel=lightbox]').fancybox();
but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?
This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.
A quick fix might be to be modify the code as follows:
$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());
Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.
solution
$('.picture_display').find('a[rel=lightbox]').fancybox();

jQuery: Need to "refresh" a widget

I am adapting the Coverflow technique to work with a div. The coverflow function (included as a js file in the head section) is here. When I dynamically add a DIV, it doesn't show up in the coverflow. I am wondering if there is a way to add a destroy function to this js file so that whenever a new div add is added, I can call the destroy method and then reinstantiate. Any suggestions on how I should go about doing this?
I wasted a lot of hours trying to come up with a good technique but finally this seems to work. If you're passing a div to the function like this:
$("div.divname").coverflow({});
Then, do this when you add a new DIV:
addDiv();
divBackup = $("div.divname")
$("div.divname").remove()
$("parentdiv").append(divBackup)
$("div.divname").coverflow({});
If anyone has a good suggestion, please feel free to add it. Until then, figured this would help someone facing the same problem.
Why this works?
When you remove and add the div, all the eventhandlers are destroyed as well. So, the next time you call the coverflow function, it reattaches to everything that is present. Beware though! If you attached other handlers, they will be lost as well. I know this is not the optimal solution but use it if you have no other option.

jQuery iFrame manipulation

I'm facing a problem while working with iFrames. What I need to do is, get the contents of a division 'contents' , display it in an iframe, and then remove all forms/form elements ONLY in that iframe. When i use $("#form").remove(), it removes the form both in iframe and in the window. Can someone help?
Thank You.
You can wrap the iframe in a DIV with an ID and remove forms only inside of that. Can you post some code? Would be easier to work off that. Or just grab the iframe (although I'm not sure it will work, haven't tested it).
$("iframe").find("#form").remove();
Do both the forms have the same id (#form)?
Give them separate ids (eg: <form id="inner"> and <form id="outer">) and you should be able to target them individually: $(#inner).remove()
I don't know it in jQuery but I think that this in strait javascript might help you.
var forms = document.getElementById('iframe_id').getElementsByTag('form')
for (var form in forms) {
forms[form].parent.removeChild(forms[form])
}
Disclaimer: I havn't tested this code, but with some debugging it should work... eventually. I just put it here so you maybe can guess to what you need to to do.
Perhaps the jQuery (now I'm just guessing) that you need is something like:
$('iframe_id').('#form').remove()
Or maybe dlabaeb's code already posted.

Search and replace

I'm working on a new project and i want to do something similar (somehow) to intellitext ads (without popup though). In fact, i want to add links on certain words. The problem is that i don't know how to handle this.
I mean, ok, i get document.innerHTML then what? I can find any word, but some may be inside of tags. I don't want to replace words from textarea or text inside of a link. Same for input, select, and so on.
Also, the way i've managed things, i replace even the html tags (if the word is select for example, the script will replace <select> tag. And i really don't want this :P
So, any idea? Where to start ? What to do? Anything?
I wish a solution that works without any library, or, if is mandatory, to work with jquery (this is what i know).
I think that some regexp may help. The problem is... I never understand them :s
Any help will be appreciated. Thanks a lot!
jQuery does this already!
Just use .text() to get all the text underneath. Documentation and examples are here.

Categories

Resources