Develop Reference

Javascript: are some things too simple to link externally? [duplicate]

This question already has answers here:
When to use onclick in HTML?
(3 answers)
Closed 4 years ago.
I'm really new to JavaScript. So this might be a basic question? I would just like some explanation, if possible.
I'm working on some web development that has JS. However, I have the requirement that all files (JS and CSS) have to be linked through external sheets, and with complex functions that makes sense, but with some of the simple JS I'm a little confused as to what that means.
With CSS, you can do inline styling, or in the header in style tags, or in an external sheet. There are some JS interactions where I can't tell if it has to be where it is, or if there is a way to move it to an external sheet.
For Example, this basic "bulb on/off"
The js here is onclick=document.getElementById(...) (Changing an image by clicking on it/on a button)
Is this kind of code stuff that can even go in an external sheet? is my internal analogy of inline/tags/external CSS fitting to apply to Javascript, too, or does JS work differently? I just don't want to get counted off for not having stuff in the right place.

What you need to understand is that the "scope" of what you are working with when you use JavaScript, is the user's viewport. Internally represented as a tree of objects which we call the DOM (document object model). The browser fetches these external sheets, JavaScript files, html etc. and then loads them into the DOM.
JavaScript is all about just one thing: manipulating the DOM.
Depending on when your JavaScript is executed, it will manipulate the DOM in the state it is in at that exact moment.
The usual moment that programmers choose to execute their code is right after DOM-ready. This is a moment in time after which all external pieces of code/styling etc. have been fetched and initialized into the DOM, therefore allowing you to be sure, that your code is working against the full scope of content that you'd also see while browsing the page right after it loads.
Zooming in on your question about placing code in an external file: sure, its possible. As at one point this file would be imported and loaded into the DOM. The code inside would be executed at the point where this file is loaded, or when you hook into the DOM-ready event to start up the code inside this file.

You have a legitimate question here (apologies for the opinion - but good on you for giving it a go!).
This is from the Mozilla developer page (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
Next, in your index.html file enter the following element on a new
line just before the closing tag:
<script src="scripts/main.js"></script>
This is basically doing the same job as the element for CSS — it applies the JavaScript to the page,
so it can have an effect on the HTML (along with the CSS, and anything else on the page).
In your sample code you wrote onclick=document.getElementById(...).
This should actually be written as
onclick=function() {
document.getElementById(...)...
}

How do I create a link in HTML and CSS which will populate a div or other element with an html file?

It's been a long time since I last had to do any html, but one of the features that will apparently still work, but is not good practice, was to divide a page into frames and the you could use some sort of nav bar with all the page links to populate a targeted frame. eg.
clicky
I tried using the <iframe> tag, and although it's almost exactly what I want, I found it to be very frustrating to get it to autosize to the correct height depending on the content being loaded into it.
Obviously, I could just make an almost identical page but change the content on the new one and link from one to the other, but I have a rather nice css slideshow as my background for the site and I don't want it to reload every time a link is clicked!
Now, I'm loving stylesheets and divs, so is there any way to do the above without resorting to HTML 4? I'll take a javascript answer if there really is no way to do this in CSS and HTML 5.
Thanks in advance, you lovely people!

So, you just want to update the actual content, that differs? You could do it with iFrames, but this is not recommended at all.
The "new" way to use is called "AJAX"
It is a technique to download data from the server, without reloading the current page. This is done via JavaScript (and serverside PHP). That way you can update the page content only.
There are many tutorials on the web, also many common questions are answered on stackoverflow alreay. Feel free to check them out :)

Dynamically loading content on local HTML page [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Context:
Basically I'm attaching a little HTML help doc to go with my program (not meant to be on a server, viewed locally). HTML just because I'm most comfortable in making docs in it but I also want it to have some interactivity/dynamic content which I can't do in a PDF or whatever.
I'm dynamically replacing the content when you click on a link instead of making every page need it's own HTML page, which is just something I'm used to doing so I can change the menu and banner and whatever else on a single 'main' html file without having to adjust every single other html file for one tiny change in the shared stuff.
Current Method:
Right now it's all done through javascript and jQuery. When a user clicks a link, I use jQuery's load() function to load the appropriate content (an html file) and replace the content div with what's in the loaded html file. Currently just using relative links. E.g. the core function is something like below:
$("#ContentBox").load("content/faq.html");
This actually worked a few weeks ago when I first wrote it. It's not like I built the whole thing and didn't test its core concept until just now. But now it seems all the browsers are blocking it. Chrome says:
XMLHttpRequest cannot load file:///C:/[....]/content/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. `
Question:
So I understand why it's happening as it's a potential security risk to allow that, I just want to figure a good way around it that still does what I want (if it's possible). I mean I could just preload all the content as huge string variables in the javascript file or as hidden divs that get turned on and off, but I was hoping for something a little more elegant.
And I can't expect all users of my program to setup a local web server just to view to help doc.
I've considered the File and FileReader classes but they require a user input for a lot of functions. There's also iFrames but that introduces all sorts of weirdness that needs to be accounted for and I hate iFrames.

If this is all local content then you should not be loading it via ajax. One option you have at your disposal is to set up your help files as local Javascript templates. You can then refer to them using a template library like mustache or underscore and link to them in your application like so:
<script type="text/template" src="local/helpfile.js" />
If you don't want to use a templating library then you can set up helpfile.js as JSON data, but you'll need to escape quote characters first.

If your help docs are to be viewed on a Windows machine only, you should look into using HTML Applications to get rid of the cross-origin issues. Or you can work around it by combining all of the source code files in hidden textareas. I've done it lol

To anyone still interested this is the solution I settled on as of now. At the end of the body are all the divs with the different page content styled like so:
<div id='PageName' class='content-div'>
<!-- content goes here -->
</div>
<div id='AnotherPage' class='content-div'>
<!-- content goes here -->
</div>
The id is important as that becomes the name of the page and the class type, which you can name whatever, I used to hide them with visibility:hidden; as well as gave it absolute positioning at 0,0 - just in case - so that they don't interact with other elements and screw up the layout.
On the page loading, along with a bunch of other functions, I store the elements into a javascript associative object by page name.
var content = {};
function onLoadThisGetsCalledSomewhere() {
// loop through all of those divs
$(".div-content").each(
function() {
// using $(this) to grab the div in the scope of the function here
var element = $(this).element;
var name = $(this).attr('id');
// remove it from the html (now it exists only in the content object)
element.detach();
// remove that style class that makes it invisible
element.removeClass('content-div');
// put it into memory
content[name] = element;
}
);
}
So when a link to another page is clicked, the onclick does something like switchPage(pageName) let's say.
function switchPage(requestedPage) :
// somewhat simplified, real version has case and null checks that take you to 404 page
var contentElement = content[requestedPage];
// replace content in some container div where you want content to go
$("#TheContentContainer").empty().append( contentElement );
// have to adjust size (width possibly too but I had a fixed width)
$("#TheContentContainer").height( contentElement.height() );
}
I'm not at the same computer so I'm writing all this up anew, not copy/pasting so there may be some bugs/typos (Caveat emptor - I'll fix it tomorrow). The version I used is somewhat more complicated as well since I have subpages as well as dynamically handled menu bar changes. Also features so that you can open the "links" correctly in new windows/tabs if such an action is made. But that's not important here now.
It's not too different I suppose with hidden divs (the benefit here is the detach() function to remove it from the html) or just storing long strings of html code in java vars (much more readable than that though), but I think it's advantage is is much cleaner (IMHO) and so far I like it. The one downside is with lots of pages you get one huge HTML doc that can be a pain to go through to edit one specific page but any decent editor should have a bookmark feature to make it a little easier to get to the line you're looking for. Also cause of that a bad idea if not local, but then again if it's online just use the jQuery load() function.

Add just a </div> using JavaScript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm going crazy! :)
I need a way to add a closing </div> before another element. But everything I try the </div> gets filtered out. The problem is, that this might be the only solution for me.
So please, please have a look to this and maybe you're able to give me a hint:
I'm building a bootstrap based template for LimeSurvey, a online survey tool. Their templates are completely done with tables and I try to find another way and to get it mobile friendly.
The template is separated into different files. For my issue this is:
-> Startpage
-> Navigator
-> Endpage
Normally it loads always a "Surveypage" between Startpage and Navigator. But there is an option which automatically puts all question directly under the startpage and therefore into my header. So in this case I need another '' or another way to close the header first.
So there's a
<div class="jumbotron">
and I have to close it before the element
<table id="ls-table" ... >
I already tried many JavaScript examples I've been able to find around the web. But none makes the job.
Thanks a lot!
Philipp

There are only two ways to manipulate a web page using JavaScript.
The DOM, or document object model.
Via string-manipulation of the HTML.
Most web browsers will NOT allow you to do #2 directly on an already-loaded or loading document. At best, you could find a situation wherein you read the HTML of a <body> and then re-parse it. But doing so is an amazing amount of work for very little effort.
Look into the insertBefore method on the DOM, which will let you grab that <table id="ls_table" > element and move it from within that <div> to being a child of said <div>'s parent, immediately after the offending element.

Make images load when they enter visible section of browser? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I was browsing around the web and I saw something I've never seen before.
on this site:
http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/
When you navigate down the page, the images only load when they are in the visible portion of the browser.
I have never seen this before and was wondering if anyone else has and how exactly one would do it.
I'm guessing this is some sort of Wordpress plugin (that's what he's using) but I'm not sure.
Is it javascript? Are they actually loading on page load but just become visible later for a "snazzy" effect or is this actually useful for quicker page load times?

"wp-content/plugins/jquery-image-lazy-loading"
Lazy loader is a jQuery plugin written
in JavaScript. It delays loading of
images in (long) web pages. Images
outside of viewport (visible part of
web page) wont be loaded before user
scrolls to them. This is opposite of
image preloading.
Using lazy load on long web pages
containing many large images makes the
page load faster. Browser will be in
ready state after loading visible
images. In some cases it can also help
to reduce server load.
http://www.appelsiini.net/projects/lazyload
So it seems it goes through every image specified or inside of the context of an element and replaces the src with a placeholder gif before the images fully load, saves the original URI and when the image is "visible" it replaces the placeholder with the real image.

LazyLoad is no longer available according to the website. Apparently the code no longer works on new browsers and the author doesn't have time to update it.
The "appear" plug in is working well for me.
http://plugins.jquery.com/appear/
It allows you to specify a callback function for an element. The callback function is called when the element appears into view. From the site:
$('#foo').appear(function() {
$(this).text('Hello world');
});

If you look at the source of the page you referenced, it contains this bit of code:
jQuery(document).ready(function($){
jQuery(".SC img").lazyload({
effect:"fadeIn",
placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
});
});
I suspect that's how they're accomplishing the effect. It uses the jQuery LazyLoad plugin, which can be found here:
http://www.appelsiini.net/projects/lazyload

As Sanjay pointed out, the jQuery LazyLoad plugin from Applesiini no longer works. Here is another jQuery plugin that I found. Just another option in addition to jQuery Appear.
http://plugins.jquery.com/project/LazyLoadOnScroll
http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/