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("");
Related
I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
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'm trying to have a div appearing in a dialog using the jQuery-UI function. It will be a contact form in my blogspot site. However I keep getting the notorious 'Undefined is not a function' error. I searched a lot without eventually being able to address the issue and I have no idea about what's going on.
Below is a fiddle EXACTLY as in the blogspot code (even same id names). You can see that in the fiddle the code functions perfectly.
HTML:
<a id='emailform' href='#'>Click here!</a>
<div id='contform' style='background-color:red;width:200px; height:200px;display:none;'>Blablabla</div>
JS:
$(document).ready(function () {
$("#emailform").click(
function () {
$("#contform").dialog();
})
});
http://jsfiddle.net/mukL3hq8/2/
Any help will be greatly appreciated.
UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library.
I don't know why but I have found that jQuery sometimes has some trouble working with Blogger, what mostly solved the issue was wrapping it like this:
<script>
//<![CDATA[
jquery here
//]]>
</script>
I find that blogger will sometimes encode some elements within my script and this will prevent blogger from doing so, thus the script is executed properly.
Maybe it'll solve your problem as well.
Ok, issue tracked down. It seems that the problem caused by a duplicate 'include' of the jquery-ui library. The template I've used was making a second reference to a jquery-ui library (which was also an older one from what I've used) and caused a conflict. Removing the second reference just solved the problem.
I have a few questions that need answering. I am trying to create a Google Chrome extension and I need every page to be monitored for a keyboard action. I have added a content script that runs on the page load and when you click the keyboard shortcut an alert is shown.
What I want to do is instead of an alert have something like fancybox, thickbox, etc... however all of those are jquery plugins which adds a dependency to my js file. I tried launching the plugin before my js file but it still does not work.
I run the content script from the manifest.json file with
"content_scripts": [
{
"matches":["http://*/*", "https://*/*"],
"run_at":"document_start",
"js":["jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]
}
],
I cannot execute an HTML page where the js is located I have to use a js file.
so what I want to know is if either there is a way to include the plugin without physically adding it to my file or if there is a way to call the js file which then just executes an HTML file or if there is another way of creating a popup screen like fancybox that is already included in js.
Another question I have is if there was a way to embed HTML into an alert box (this is a backup if I cannot figure out the above question)
and finally does anyone know of an execution command for x-webkit-speech? I want the command to start recording and somehow some people have used some commands (none of which answer my question) so someone somewhere knows a little more about this function then me. I would really appreciate help with this I am really close to finishing my program and these are my last holdups with these questions answered I will be able to release my extension. Please help where you can I have researched and researched everywhere all different ways of trying these things and none have worked.
edit:
You were correct (JHurrah) including the jquery actually solved the problem I really appreciate that. simple yet successful I just assumed the jquery provided was enough but I guess everyone knows what happens when you assume especially when programming.
NewTang I have already looked at that website however I will relook at it and see if I missed anything thanks for the help
yeah see I don't have that I have link edit and flag I looked all over and did not see an add comment button at all... :[
since simplemodal is a plugin it depends on jquery, try including jquery in your manifest before the other scripts.
"js":["jquery-1.5.2.min.js", "jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]
I"m a little confused by your question, but I'll give it my best shot.
1) I think you're trying to ask: Can I use a content_script to inject HTML. The answer is yes, but only through Javascript. So, you could have something like:
//using jquery
$("body").append("Hi, I'm on the bottom of the page");
Your javascript would have to create or load the HTML that would get inserted into the page.
2) No, no HTML in an alert box. You're on the right track with using lightbox, thickbox, etc.
3) There's not many resources on x-webkit-speech, but maybe this can help you get going: http://nooshu.com/experimenting-with-webkit-form-speech-input
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();