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.
Related
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 last year.
Improve this question
For context: My application has a scheduler and I want to display multiple appointment blocks (say a div as childs an image, text and a button), but this question can also be applicable for let's say product catalogs. What is the best practice for building the HTML content for those blocks?
In my search I found multiple options, for example (with pseudo code)
Build line by line in jQuery
$('<div />').append($('<img />')).append($('<p />').append($('<button />'));
Personally I found this option to become quite ugly once the block contains more than 3-5 elements, because the code started to span more than a full page of scrolling and became unreadable (but this could also be because of my poor coding skills).
Retrieve HTML page via Ajax/Load
<div>
<img><p></p><button></button>
</div>
$("target").load("page.php");
or
$.ajax({
url: "page.php",
success: function (response) {
$("target").append(response);
});
On the plus side this separates the content which reduces initial page loading time and the content can be built server side right before it is required, on the downside my server shows a delay of ~0.1s (on average, reproducable) for AJAX calls to return (with practically no data sent back and forth). Although this might seem insignificant in the end all small delays add up and can impact user experience.
Clone templates
<template>
<div>
<img><p></p><button></button>
</div>
</template>
const template = document.querySelector("template");
var tgt = document.getElementById("target");
node = document.importNode(template.content, true);
tgt.appendChild(node);
On the plus side this option is about 10-20x faster than the 1st option (build via jQuery), but that will only become noticable after ~1000 blocks which far exceeds my use case. On the down side this 'pollutes' the page HTML code and processing of the content into the object is required through JS anyways.
Which other viable options are out there? And what is the best practice for this use case?
Since you're not using SPA approach (an example explaining that: with angular). The best (cleanest/fastest) option (in my opinion) is to fully render the blocks from the server side (you're using PHP apparently). Meaning that you'll have a file defining a single block structure of an appointment 'appointment.php' which holds the template + rendering logic, this 'appointment.php' result (after rendering) then you'll be calling (loop) in the page you need it in, as many times as you wish and with the parameters you wish, for each instance of the appointments list you have
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've created a website with a simple non-controlable carousel with the following code before the /head tag
script src="jquery-1.8.2.min.js" type="text/javascript">/script
script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript">/script
I have the jquery-1.8.2.min.js and jquery.carouFredSel-6.0.4-packed.js files downloaded in my folder.
It works perfectly, but when I add a second carousel, this second one works but the first one doesn't.
I've created the second carousel downloading the files: jquery-2.1.0.min.js and application.js.
Instead the case of the first carousel, in the second one I put the following instructions inside the tag, in the div element which defines the carousel-
script src="jquery-2.1.0.min.js">/script
script src="application.js">/script
It is due to having two different js files?
Many thanks for taking the time of reading my question and sorry for my english and my lack of knowledge
I think mostly thats because of html-tag conflicts. Make sure, they have different ID's and dont overwrite each other.
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.
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 3 years ago.
Improve this question
I want to simulate such clicks without controlling web browsers to do the job. I don't know much about javascript and actually don't know where to start.
Any ideas?
Althoug I have no use it, I think that maybe twill is what you need:
twill: a simple scripting language for Web browsing
Have a look at this too:
Testing Web Applications with Python and Twill
You can use iMacros in combination with Python...
This isn't the most direct solution as it requires you to write an iMacros script to do that actual clicking, and then load the page and call the script from Python.
Refereces:
iMacros CLICK command
iMacros wiki
I recommend you take a look at Selenium.
If you had control over the link (like adding an ID attribute) you could use javascript to simulate the click
var link = document.getElementById['yourLinksIdAttrbuteValue'];
link.click();
or you could use jQuery selectors as an easy way to better target the link without altering it...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){ $("a[href^='javascript']:contains('text')").click() });
</script>
With that code it'll load the JQuery library from google's server, wait for the dom to load, then execute the click.
for more info on jQuery selectors check out http://api.jquery.com/category/selectors/