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();
Related
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.
I'm trying to remove an entire div on page load. Currently I'm trying to use:
$(document).ready(function(){
$("#removeme").remove();
});
with the HTML
<div id="removeme">If JS enabled remove this!</div>
I've been searching for hours, using many variations including getElementById. No luck.
Javascript/jQuery aren't languages I use often.
All help is appreciated. Thanks!
Edit: Fixed, page I was adding it to was having some issues (another dev built it). I put the code into an existing JS file instead and it works. Thank you all.
$('#remove').html('');
or
$('#remove').empty();
That will remove that text if JS is enabled.
The code you are showing in your question works, as proven by #barmar :
"http://jsfiddle.net/barmar/epsZe/"
If it doesn't work for you, it is most likely because you have an error in your Javascript before you reach the code displayed here. Also, ensure that you have included Jquery before-hand.
To find where previous errors could have happened, you can look inside your Javascript console. Here is a question where it is described where to find your console on most browsers :
What is console.log and how do I use it?
If you don't want to use the console, you can put alerts in your Javascript code until you find where they stop displaying.
try this
$("#removeme").replaceWith("");
Seems like to me there should be an option for that but i can't seem to find it.
This question was asked many times but only workarounds were answered and that's not what i'm looking for.
I am changing my css incode and i want to load the original css back instead of coding it myself, how can that be achived?
I don't wanna reload the entire file, just load some div or class css.
See this post for a solution.
Based on that you can do something like this:
$("#fix").click(function(e) {
e.preventDefault();
$("div").removeAttr("style");
});
Note: This assumes you are using JQuery to change the styles in the first place
Here is a working example
if you're using jQuery apply
$(selector).removeAttr('style')
to your elements
I want to load the original css back instead of coding it myself
This is not necessary. You are trying to reload a resource that should just continue to exist. Once it's loaded, you don't need to load it again. If you need to override a style, apply a class to it. To revert to original, remove the class. That's how cascading style sheets work.
If there is a particular reason the css needs to be dynamic, you can try loading css into the Document via the DOM (document.createElement("style") etc.), but support for this is a bit sketchy I believe.
if you want to reset the WHOLE style and not only divs' you'd better use the all selector
$('*').removeAttr('style');
I'm writing a userscript. What I'm trying to do is really simple. I need to block the UI while the script does some background tasks. I saw this method in another SO question and I changed it a bit to suit me.
Check this fiddle. When you click on the button, it covers up the UI.
Now since this is gonna be used on a webpage, I need to inject the following HTML part to the webpage through the script.
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>
I did it like this.
var blockUI = document.createElement("div");
blockUI.setAttribute("id", "blocker");
blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
document.head.appendChild(blockUI);
Check this fiddle for a clear idea.
But it does not work. I tried several ways to tackle the problem but to no avail .Can anyone please point out what I'm doing wrong here?
Thank you.
P.S - I need to do this without using jQuery or the library blockUI.
You are trying to append stuff to head; append it to body instead.
http://jsfiddle.net/dAKQX/
Don't put the block div in the head section of your document. Use document.body.appendChild(blockUI); instead.
you need to append your div to the body of the document. See: http://jsfiddle.net/zkzQy/1/
or like this in your code:
document.body.appendChild(blockUI);
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.