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);
Related
is it possible to hide every content after a certrain element (e.g. after a certain class of div)?
The problem is: I'm using a 1&1 webpage builder with a layout-template (annoying like hell) because of my boss. I'd like to remove the footer, but nothing has worked yet as it seems that the template prevents me from hiding the footer with simple CSS (I'm happy for any suggestions here as well).
But maybe it's possible to hide anything that comes after a certain element like a div or image (or whatever) so that I can put the element right before the footer?
Thanks in advance.
You should be able to use JS if it is possible on 1&1.
As you probably have JQuery you can do it like this:
$('.footer-class').remove();
or
$('.footer-class').css('display', 'none');
I don't think that 1&1 would have different classes or ids for footers each time someone refreshes it, so I think it should work.
Please provide a working example or your website address. This will help us.
Can you give us the footer's classes, id and all attributes? The simplest solutions is style="display:none" added to the footer
In a legacy application I'm working, somehow the jQuery scripts between
<script type="text/javascript"></script>
are being rendered as plain text instead of being executed.
Does someone have a suggestion of what can cause this behavior?
If you are using something like style : {display:block} it will behave like that.
Since we can not see all your code I will give you a few possible causes.
1.you could have forgot a closing tag for an element above it.
2.You could have forgot a pair of parenthesis on an element above.
3.You might have put the tag in a wrong spot so it might print depending on it's position.
Try to disable css. If it works fine after it, then you've styled tag 'script'.
Remember to read how to ask a question here on StackOverflow
But based on the little information given i'll make a longshot and think it might be something with parsing, read about CDATA
And check for unclosed html tags.
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();
There's one thing I want to do with javascript, but don't know how. In a perfect world it would look like this:
<p>My very cool page!</p>
<script type="text/javascript">
document.write('<div>some content</div>');
</script>
And this script would insert <div>some content</div> right before (or after, or instead of) script tag. But in the real world, document.write starts writing html anew, removing any static content in the page (<p> tag, in this case).
This is simplified example, but should give you the idea. I know that I can statically put <div id="some_id"></div> before script tag and insert html in it from js, but I wanna be able to use multiple instances of this snippet without changing it (generating random id manually) each time.
I'm ok to use jquery or any other existing library as well. Is there any way to achieve this? Thanks!
We are actually in that perfect world...
and your example would work as it is ..
http://www.jsfiddle.net/BtKGV/
Yes, but you always add or write it in relation to something else.
If you wanted to write something AFTER the first p tag, in jQuery, you could do something liek this
$('p:first').after( '<div>some content</div>' );
If you look at jQuery's API you will see they have many functions for this, such as before, after, append, etc.
You also might want to read about adding and removing elements to/from the DOM, such as in this article:
http://www.dustindiaz.com/add-remove-elements-reprise/
look up appendChild()
To close the question, here's how it has worked out in the end.
The trick was to store each widget's data in html tag, not in javascript. User inserts content like this
<div class="my_widget" feed_id="123"></div>
...
<div class="my_widget" feed_id="456"></div>
User also links script from our server. When page's loaded, script does $('div.my_widget').each and populates contents of each widget depending on its feed_id and other attributes.
Thanks to everyone (and +1 to Gaby and Kerry for attempts to help with such vague problem)
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.