Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Say I have an HTML page where a few elements have some JQuery functions.
One of those functions calls another HTML file if an image is clicked. The called HTML file echoes some HTML to the screen. Some of this HTML has JQuery functions.
If I want those JQuery functions to work, do I have to include them on the called page, or do I only need them on the original HTML page?
If you still don't understand, hopefully this will help:
Page 1 has a function that calls Page 2.
Page 2 echoes HTML back and some elements within the HTML have JQuery functions which are already programmed on Page 1.
Do I have to include the actual JQuery on Page 2 as well or will it work if I just have the JQuery on Page 1?
Please help.
You have to use delegated event handlers for your elements when loading dynamically, i.e.
$(document).on("click", ".your-element-class", function(){ // or id(#)
// code
});
This way, you can keep all of your javascript code (event handlers) in the main page and all elements loaded dynamically into the DOM will work.
Check jQuery on.
If I understand you correctly. I believe you load some HTML using AJAX and you want to trigger some JQuery functions on AJAX load content. If my assumption is correct you could use something like
$(".my-ajax-loaded-content").on("click", function(){
//do something
});
Important thing is using on (jQuery 1.7+) which bind to AJAX loaded content
Related
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(...)...
}
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
I've been told loading jQuery at the end of a page increases performance for mobile.
I don't believe this, however open for an explanation.
Regardless, is there any way to get jQuery calls at the beginning of the page to load only after jQuery has been loaded? I know of timeout work around but they seem inconsistent.
The reason why you get "better" performance is that the page will be parsed before it reaches JavaScript at the end of the document, and once a section is parsed, rendering can begin. By loading JavaScript at the end of the document, you let the basic hard-coded layout in your HTML and CSS appear before you add functionality with JavaScript. This gives the user the illusion of "faster loading time" for your page.
The caveat here is any JavaScript you want to use that will call on external libraries must occur after the libraries' script tags. This is not an issue if you have packed all of your code together into its own file, but it will cause trouble for inline scripts you have strewn about the page.
This is part of why such behavior is discouraged in production applications, the rest having to do with the ability to maximize compression of the script content with gzip and so on.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to do a pre-loading for a website:
I want to create a loading page/image/etc. to show before the actual
page is loaded.
Nice would be something like a spinner/loading-bar
The pre-loader shell vanish when the actual page is fully loaded
How can i achieve this?
You should check if all elements of webpage are loaded.
You can use JQuery, for example:
$(document).ready( function() {
// something here
})
From jQuery documentation:
The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready()
or use jQuery's .load() method to attach load event handlers to the
window or to more specific items, like images.
I don't know your programming skills, but if you are aware of javascript and jQuery you could easily try this tutorial:
http://avexdesigns.com/create-a-jquery-preloader/
The Plugin you will find here: http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/
and all about jquery is found here: http://jquery.com
You can have a progressbar in ur webpage before loading ur actual content.
Refer the link below.
http://tutorialzine.com/2013/09/quick-tip-progress-bar/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working on a small HTML/JavaScript application where a user can browse through different content without refreshing the page. I use divs as 'pages' by showing and hiding the divs as the user navigates through the application. Between two pages occurs a small animation (like fading or sliding). When the animation is finished and the 'page' is visible a trigger is fired.
Each page executes his own behavior when triggered (e.g. playing a video/animation/show some text). Each page(div) has his own JavaScript class linked to it. The Class name of the JavaScript class is stored in a data attribute called data-pageClass:
<div id="page1" class="pn-page intro" data-pageClass="IntroPage">
Page 1: introduction text
</div>
<div id="page2" class="pn-page page2" data-pageClass="VideoPage">
Page 2: playing a video here
</div>
The class handling the navigation creates the classes of the pages by looping through the html structure and using the data attribute to identify which class to create. I use the 'stringToFunction' function described in this question on StackOverflow
Looping code:
$("#pages .pn-page").each(function (i, el) {
var PageClass = stringToFunction(el.getAttribute("data-pageClass"));
var newPage = new PageClass(el);
_this.pages.push(newPage)
});
For simplicity's sake I left out all the other code. please let me know when it's unclear.
So my question is if it is bad practice to 'dynamically' create objects in this way. I thought it very useful to link divs to custom javascript classes (a bit like DOM does).
I believe that what you are doing is good practice. The data attribute is meant to be used to embed custom data on a page, which is exactly what you are doing. You should obviously take care that potential attackers will not be able to inject custom HTML into your page in order to affect your JavaScript code in malicious ways, but that is nothing new.
An alternative approach I have used in the past is use view classes that run on on both the server (NodeJS) and client side. The server and client side are both able to generate the HTML, and the client side is able to attach the generated objects to the HTML if it was already generated by the server. This saves you the littering of your HTML by inserting data attributes, but otherwise it is not that much different, and it might not be applicable in all situations.
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.