I've got a strange problem with displaying elements on page in a good order. I want to show at the begining document.write with welcome, then ask for a name with prompt and at the end show the result on the page. Somehow before anything shows a prompt is displaying. Why is this happening? This is for a school purpose :)
document.write(`Hello `);
const text = prompt(`what's your name?`);
document.write(`${text}, nice to meet you :)`);
If something is unclear, feel free to ask :)
As discussed in the comments, this works differently in different browsers and I suspect that is due to how browsers go about their rendering cycles.
It goes beyond document.write, if you try to append an element to the document you will observe the exact same behavior.
I tried to force chrome to render in-between the write/append calls but it sturdily refused to. I'm guessing this is some kind of supposed optimization on their side, not sure, but if you really insist on doing that you'll have to employ an additional context, and that will not work with document.write as it will overwrite whatever is already in the document.
Related
I have built a browser-based HTML/Markdown code editor, that seems to be working great for the most part. I have live rendering previews as the user updates code, etc. I already sanitize any <script> tags, but other elements such as <div> or <style> are allowed.
The problem is if the user saves the document with invalid HTML (i.e., unclosed <style> tags, etc.), upon reloading the document, the whole site will be inoperable due to my HTML elements being "eaten" by the unclosed tag in the user code.
Question: Is there a solid strategy to render user code in an isolated container such that errors inside that container do not bleed out into the rest of the page?
I am using Javascript with React. This seems like a use case for iFrames, but I have had it beaten into me that iFrames are never a good idea, and there is always a better way to do what you want to do.
Iframes are the perfect solution for problems like this. Over using them can be a problem on a page, but in this case it is the right tool for the job.
Also not sure why that was beaten into you, the frame tag is always bad, but iframes used sparingly are useful.
EDITED: New information: When I inspect the field, and the code is highligted (in the inspector), then the statements all work as they should, but when the field isn't highlighted anymore, the statements do not appear to work. Hopefully this helps diagnose the issue.
I have a wufoo form (a hosted form that you can embedd, send to spefic email on submit etc). I have a field on that form that I am trying to populate with a certain piece of data once I click a button. I believe I have the correct code to make this happen, and it should work:
$('#my-button').click(function() {
$('#Field3').val("something");
});
I have tried many different ways:
$('input[id="Field3"]').val("something");
$('input[name="Field3"]').val("something");
and a few reaches which I didn't really think would work..
$('#Field3').append("something");
$('#Field3').text("something");
There are a few things that confuse me here, and I will post screens below showing what I mean. I can type all of these commands in the console once the page is loaded and nothing will happen to the field (with the id of Field3)...most of the time. But on several occasions, I would reload the page, try a few statements again, yes the same ones, and then it would work. No idea why or how, but it is sort of an intermittent thing. Obviously that's probably not the case, but I am pretty confused as to why this is happening;
Below are three screens of my console. For the first two, the field finally populated after about 10 or more tries in the console, and then continued to work while using commands that didn't work before. The last screen is an attempt that did not work at all:
[![Eventually Works After Last Command][1]][1]
[![Eventually Works After Last Command][2]][2]
[![Did Not Work][3]][3]
[1]: http://i.stack.imgur.com/JKVxY.jpg
[2]: http://i.stack.imgur.com/MLca8.jpg
[3]: http://i.stack.imgur.com/0viRA.jpg
(Apologies for the way I had to post these images, I keep getting formatting errors that will not let me continue to save the post unless I cmd+k them)
I try everything in the console first, but I can not find any patterns here. Any ideas or input would be greatly appreciated, and thank you for your time.
At this point I'm pretty sure the problem has to do with the form-code switching or adding certain classes under certain conditions, so I downloaded the code from my Wufoo account rather than embedding it. Then I only added the code for the view (not css or JS), and it works now.
My original statements (not the reachers) all work fine now when I try them. Thanks for the time everyone.
I know you solved your issue, but figured I'd chime in in case you or others have this issue again in the future. It sounds like your issue was related to execution order. Wufoo's embed scripts are asynchronous, so it's very likely that the input fields in question didn't yet exist on your page at the time your jQuery click handler was evaluated. Changing your original code to jQuery's "on" method instead of "click" would likely have solved your problem, as "on" provides a delegated event listener. At any rate, glad you got everything sorted out!
In the console I assume there is no jQuery loaded.
I usually write:
document.getElementById('Field3').value = "something";
Updated your Jsfiddle. The only thing I changes, I added the reference of the
Jquery. Might be that's the problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I often want to change some releatively minor detail about how JS changes the DOM, but I can never figure out which function in what script changes a given tag. How does one do this?
For example, on this page, I want whatever JS is adding the "selected" class to various a tags to also add it to the enclosing li tags. However, I have no idea how to figure out where this is taking place.
Clarification: As much as I'd like an answer to my current, specific conundrum, I'd much rather be taught how to figure it out myself.
CLARIFICATION:Is there a way to point at a certain object in the DOM and find out what script(s) are/were accessing/modifying that object? In other words "watch" that object for JS access/modification.
What you need is DOM breakpoints in WebKit's Developer Tools.
They're designed for tracking DOM mutation events - such as change of an attribute of an element (which is your case), element removal, or addition of subelement. You can refer to tutorial in DevTools documentation.
In basic cases you might want to use grep for searching the strings such as "selected" in your code.
I’m not aware of any debugging tools that’ll tell you when a DOM element is being acted upon by a script.
(If anyone knows of any, dear lord please tell me about them — I’m a freelancer, so I spend most of my working days trying to figure out old, knotty DOM-manipulating JavaScript that someone else wrote.)
You basically have to search through every bit of JavaScript file included in the page, and identify lines that might be taking the action you’re seeing.
In the case of a class name being added to an element, an obvious search is for the class name itself, although that’s not guaranteed to work. E.g.
el.className = el.className + 'sel' + 'elected'
If jQuery is in use, I’d definitely search for addClass.
Once you think you’ve found the right line, then if you have access to the JavaScript code, you can change it and see if your change takes effect.
(And, because view source is still a part of the web, you can get access to the code by saving it all to your computer.)
A site I am working on displays an intermittent runtime error but only in IE7 and 8. This error will appear almost randomly (like, it may pop up on initial page load one time or it may not pop up until the nth page load). The error says it occurred at line:0 and the error is "Object required". I'm using jQuery throughout the site but disabling that in pieces (i.e. the various plugins and whatnot) has not solved the problem. I'm still cranking on it but want to get this "Help!" out on stackoverflow in case someone has dealt with something like this before.
The intermittency of it is what is really chapping my ass.
From your answer, I'd guess that the element with an id of 'header-section' is at the top of the page and, occasionally, the css rule is being applied before the rest of the page loads. This means that the expression tries to evaluate the offsetHeight of 'content-section' before that element exists.
I've a couple of suggestions about how to deal with this, but you would have to try them in order to evaluate their usefulness.
1/ Instead of making the rule based on the id of the 'header-section', make it based upon the class 'header-section. Don't add this class to the markup, but add it upon completion of document loading, via jquery - leave the id of the element as it is...
$(document).ready(function(){
$("#header-section").addClass("header-section");
});
2/ Make the rule more tolerant of the 'content-section' not being found - not sure how often the expression is evaluated, as I've never felt the need to use expression in css rules, so this may not work.
#header-section {margin-top: expression((0 - (this.offsetHeight + (document.getElementById("content-section") ? document.getElementById("content-section").offsetHeight : 0))) + "px");}
Let me know how you get on.
P.S. I've no idea what the rule is trying to achieve - I mocked up a page with what I assume is the same layout, and all it does is move a lot of the content off the top of the page, in a way that prevents it from ever being seen.
It seems like your script might be trying to access an object before the DOM has been fully created. Did you make sure you're function is inside the jQuery ready function?
$(document).ready(function() {
// put all your jQuery goodness in here.
});
I figured it out. There are two expressions being used in an IE only css file. Here is one for example:
#header-section {margin-top: expression((0 - (this.offsetHeight + document.getElementById("content-section").offsetHeight)) + "px");}
Commenting out both instances that use these expressions solves the problem. Not sure why this happens exactly (and I didn't write the CSS that is doing this so I had no idea to even look in that CSS file).
It can't be a conflict with other JS because there were at least 2 places this was being used where no other JS was being loaded at all yet the error still occurred. Perhaps the IDs (content-section or header-section) could not be found for some reason? Not really sure... especially as the behavior was so inconsistent. Hmmm...
Thanks for the solution belugabob
I experienced the same error with Object required on line 0.
Your fix with the expression ...?...:0 in the css for the ie stylesheet did the job.
The reason this kind of code is used, moving the navigation/headers up, is SEO related. You want your content on the top, and the less important SE wise navigation below it.
I have been using a noscript tag to show a warning when users have JavaScript disabled or are using script blocking plugins like Noscript. The website will not function properly if JavaScript is disabled and users may not figure out why it is not working without the warning.
After the latest Google algorithm shuffle, I have seen the daily traffic drop to about 1/3 of what it was in the previous months. I have also seen pages that were ranking #1 or #2 in the SERPS drop out of the results. After doing some investigating in webmaster tools, I noticed that "JavaScript" is listed as #16 in the keywords section. This makes no sense because the site has nothing to do with JavaScript and the only place that word appears is in the text between the noscript tags.
It seems that Google is now including and indexing the content between the noscript tags. I don't believe that this was happening before. The warning is three sentences. I'd imagine that having the same three sentences appearing at the top of every single page on the site could have a damaging effect on the SEO.
Do you think this could be causing a problem with SEO? And, is there any other method to provide a warning to users who have JavaScript disabled in a way that won't be indexed or read by search engines?
Put the <noscript> content at the end of your HTML, and then use CSS to position it at the top of the browser window. Google will no longer consider it important.
Stack Overflow itself uses this technique - do a View Source on this page and you'll see a "works best with JavaScript" warning near the end of the HTML, which appears at the top of the page when you switch off JavaScript.
<noscript> is not meant for meaningless warnings like:
<noscript>
Oh, no! You don't have JavaScript enabled! If you don't enable JS, you're doomed. [Long explanation about how to enable JS in every browser ever made]
</noscript>
It's meant for you to provide as much content as you can, along with a polite mention that enabling JS will provide access to certain extra features. You'll find that basically every popular site follows this guideline.
I don't think using <noscript> is a good idea. I've heard that it is ineffective when the client is behind a JavaScript-blocking firewall - if the client's browser has JavaScript enabled the <noscript> tag won't activate, because, as far as the browser's concerned, JavaScript is fully operable within the document...
A better method IMO, is to have all would-be 'noscript' content hidden by JavaScript.
Here's a very basic example:
...
<body>
<script>
document.body.className += ' js-enabled';
</script>
<div id="noscript">
Welcome... here's some content...
</div>
And within your StyleSheet:
body.js-enabled #noscript { display: none; }
More info:
Replacing <noscript> with accessible, unobtrusive DOM/JavaScript
Reasons to avoid NOSCRIPT
Somebody on another forum mentioned using an image for the warning. The way I see it, this would have three benefits:
There wouldn't be any irrelevant text for search engines to index.
The code to display a single image is less bulky than a text warning (which gets loaded on every page).
Tracking could be implemented to determine how many times the image is called, to give an idea of how many visitors have JavaScript disabled or blocked.
If you combine this with something like the non-noscript technique mentioned by J-P, it seems to be the best possible solution.
Just wanted to post an interesting tidbit related to this. For a site of mine I have ended up doing something similar to what stack overflow uses, but with the addition of a "find out more" link as my users are not as technical as this site.
The interesting part is that following advice of people aboce, my solution ditched the noscript tag, instead opting to hide the message divs with javascript. But I found that if firefox is waiting for its master password, this hiding of the message is interupted, so I think I will go back to noscript.
If you choose a solution based on replacing the div content (if js is enabled, then the div content gets updated) rather than using a noscript tag, be careful about how google views this practice:
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353
I'm not sure google will consider it deceptive, but it's something to consider and research further. Here's another stackoverflow post about this: noscript google snapshot, the safe way