I have a page, reading a text file and showing it on the site on runtime. I use jQuery to parse the file and append to the page with the following code:
resultArray.forEach(function (val) {
$('#OutputArea').append(appendText(val.content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ol id="OutputArea">
<li class="someClass"> some content...</li>
<li class="someClass"> some content...</li>
<li class="someClass"> some content...</li>
<li class="someClass"> some content...</li>
<li class="someClass"> some content...</li>
<!-- New content will add below -->
</ol>
</div>
It was okay when there are only thousands of line, however as more content appended to the page, the site will become less responsive, i.e. Took long time to render and laggy when scroll.
I understand the browser will become slower as the page do take a lot of resources, however is there a way to optimize the performance of it? Thanks.
26/7/2018 Update
I've done a couple things to speed up the process:
1.Make use of DocumentFragment instead of appending html strings like <li class="someClass"> some content...</li>
2.Instead of jQuery forEach loop, the following loop did make things sightly faster
var fragment = document.createDocumentFragment();
for(var i =0 ;i<resultArray.length;i++)
{
var val = resultArray[i];
fragment.appendChild(appendText(val.content, val.id));
}
document.getElementById("LogArea").appendChild(fragment);
Adding will-change:transform; CSS property to the div, the scrolling is MUCH more faster than before.
I also found that removing the counter-increment will make the render a lot faster, almost 70%. I use the following CSS to create my own <li> number style.
My guessing is that the li:before content calculation did a lot of work load to the rendering? I had no idea on how to get over it.
ol {
counter-reset: item;
list-style-type: none;
padding-left: 10px
}
li {
display: -webkit-box;
}
li:before {
content: counter(item) " ";
counter-increment: item ;
color: gray;
display: block;
text-align: right;
font-size:14px;
}
li:last-child:before {
content: "";
}
A few thoughts
Only append once. So build a var of all your list items
var text = '';
resultArray.forEach(function (val) {
text += appendText(val.content);
});
$('#OutputArea').append(text);
Chunk your text file. So the most important file is loaded / parsed first.
Build an API with pagination
Related
I've tried a few JQuery and CSS implementations of this, but can't seem to get it quite right. I'm utilizing FontAwesome icons in the navbar for Bootstrap, and I would like to have a single location where, when the icons are hovered, a text description of them is shown/hidden.
This implementation has gotten me the farthest, with the different captions showing up. However, I need them all to appear in one location (preferably to the front of the ul navbar-nav grouping, as they will be right aligned).
CSS:
div#navbar a span {display: none;}
div#navbar a:hover span {display: block; position: absolute; top: 40px; left:-50px; width: 125px; padding: 5px; margin: 10px; z-index: 100;color: #AAA; background: black;font: 10px Verdana, sans-serif; text-align: center;}
HTML:
<ul class="nav navbar-nav">
<li><div class="nav-button"><i class="fa fa-user"></i></div><span>Text Goes Here</span></li>
<li><div class="nav-button"><i class="fa fa-umbrella"></i></div><span>Text Goes Here 2</span></li>
<li><div class="nav-button"><i class="fa fa-star"></i></div><span>Text Goes Here 3</span></li>
</ul>
The implementation above is based off MeyerWeb's CSS Popup Demo
I have tried JQuery Fiddles that worked for simple classes/links such as this: http://jsfiddle.net/AstroCB/42gV5/ , but I'm uncertain if the depth of Bootstrap classes is causing some sort of override, as I cannot seem to get JQuery show/hide functions based on the examples I've seen to work.
I have also tried ~ relations such as: http://jsfiddle.net/YsHA4/ but am again hitting a wall.
It's highly likely I am just approaching this the wrong way, but I've been attempting to solve this problem for a few days now and just can't seem to find a solution. A fresh set of eyes and any and all help would be absolutely appreciated. If there's any way I can clarify, please let me know. Thank you!!
EDITED TO ADD: I do not need the final result to be spans inside the links in any regard, they can be hidden external divs, etc. The example I gave is the farthest I have managed to get the functionality to what I want (separate information showing up for each hover), but if a different approach using JS/etc removes the spans or hard codes the text into a JS string in some way, so be it. I am just looking to get this functionality to work as anticipated with Bootstrap, whatever implementation best gets it there!
Also, see my comment for an image representation of what I am trying to achieve.
I made a Fiddle based on your image.
It uses bootstraps right section for the menu.
I have applied a loop to each link:
$.each($('a'), function() {
$(this).hover(function() {
$('.placeholder').html($(this).html());
});
});
It simply takes the HTML inside a tag and places in the menu item with the class placeholder.
Update:
In your case your links are bit more complex so the selector for the loop would look like this:
$.each($('a > span'), function() {
// do stuff here
});
This fetches all links in your document and then the span element inside that.
Aaand finally a Fiddle for the HTML you have provided here.
Code below edited since loops are unecessary:
$('a').hover(function() {
$('.placeholder').html($(this).html());
});
$('a > span').hover(function() {
// do stuff here
});
HTML
<ul class="nav navbar-nav">
<li class="hover"><div class="nav-button"><i class="fa fa-user"></i><span class="text hidden"> Text Goes Here</span></div>
</li>
<li class="hover"><div class="nav-button"><i class="fa fa-umbrella"></i><span class="text hidden"> Text Goes Here 2</span></div>
</li>
<li class="hover"><i class="fa fa-star"></i> <span class="text hidden">Text Goes Here 2</span>
</li>
</ul>
JS
$(document).ready(function () {
$('.hover').each(function (index, el) {
var thiz = $(this);
var text = thiz.find('.text');
thiz.on('mouseover', function (e) {
text.removeClass('hidden');
});
thiz.on('mouseleave', function(e){
text.addClass('hidden')
});
});
});
jsFiddle
A while ago you guys helped me with a page jump issue on this page in this forum post. I will be referring to the styled checkboxes under "Clients." Well a while back I just set the min-height on the changing container and it then prevented the page jump, but no longer does (for an unknown reason). Well, I went ahead and put window.scrollTo(0,1400) in my function, but it doesn't center the styled checkboxes correctly on IE so now I'm back to trying to figure out why the page jumps.
The weirdest thing though.. the page jumps when clicking one of the styled checkboxes even if you disable javascript (in chrome developer tool settings and then refresh). Why would a checkbox with javascript turned off cause a page jump?
I had a quick look on your source code I couldn't figure out why do you pull data using json on each click? does the clients change LIVE?
What i mean is you can list all your clients without Using Get Json or any kind of live query and then add a class for their related respective verticals.
For example for Services and healthcare,
css
#verticals li{
float:left;
list-style:none;
background-color: #97ceff;
color: black;
border-radius:2px;
margin-right:10px;
padding:5px 10px;
cursor:pointer;
}
#verticals li.activevertical{
background-color: #2f7fc7;
color: #fff;
}
html output
<!-- list verticals options !-->
<ul id="verticals">
<li id="service">Services</li>
<li id="healthcare">Healthcare</li>
</ul>
<div style="clear:both"></div>
<ul id="customers" class="">
<!-- Add filter class here in the <li> add filter_ before vertical kind !-->
<li class="filter_service">Ecova</li>
<li class="filter_service">HP</li>
<li class="filter_service">Gartner</li>
<li class="filter_healthcare">Henry Schein</li>
<li class="filter_healthcare">GE Healthcare</li>
<li class="filter_healthcare">BerylHealth</li>
<!-- and if a vertical can be in two categories add both vertical classes !-->
<li class="filter_healthcare filter_service">BerylHealth Show in Service and Healthcare</li>
</ul>
jQuery : very short version
jQuery(document).ready(function($){
$("#verticals li").on('click', function(){
var filterli = ".filter_"+$(this).attr("id");
$("#customers li").hide();
$("#verticals li").removeClass('activevertical');
$(this).addClass('activevertical');
$(filterli).show();
});
});
check it out at JSFiddle
I'm doing a pretty typical JSON request and populating a JRendere template. It works great, but when I wrap the li in a href it loses all formatting.
HTML Code:
<script id="recipeTemplate" type="text/x-jquery-tmpl">
{{for Content}}
<a href='searchResults.html' data-transition='slide'>
<li class="ui-li ui-li-static ui-body-c" style='height: 150px; border: 0px; margin-left: 20px; margin-right: 20px;'>
<img src="{{:ImageURL}}" style='max-height: 125px; max-width: 125px; position: absolute;'/>
<div style='margin-left: 50px;'>
<h3 style="white-space : normal;">{{:Title}}</h3>
<h3 style="white-space : normal;">Ratings:</h3>
<p style="white-space : normal;">{{:Description}}</p>
</div>
</li>
</a>
{{/for}}
</script>
The JS is as follows:
$("#search").focusout(function()
{
var searchTerm = $("#search").val();
$.getJSON("http://website?searchterm=" + searchTerm + "&callback=?",
function (data)
{
var htmlString = $("#recipeTemplate").render( data );
$('#results').html(htmlString).listview('refresh');
});
});
It looks as above. Why does it lose the CSS?
Thanks, Graeme.
It works great, but when I wrap the li in a href it loses all
formatting.
First of all, having an <li> within an <a> tag is invalid HTML.
Your CSS is most likely relying on a specific order, targeting an element then maybe another element which has to have a specific class inside that element, and so on.
By adding the <a> around the <li> element you have now changed the expected order and you CSS is not able any more to match the selectors.
Placing your <a> tag inside the <li> instead could keep the CSS intact and at the same time be valid HTML, well, assuming you have ul or ol around the set of li's in the final HTML.
Check your CSS and make sure you are not messing with the expected order of nested elements or classes. Then either ass the <a> so it doesn't break the CSS or update the CSS to match your new hierarchy.
Edit: This HTML is output from a Flash application & its badly formed because it contains li elements NOT inside a ul or ol element. Is there a way to get the desired indentation with this HTML(using CSS)? Hopefully I wont have to parse the HTML & insert my ol tags where I need to, hopefully :(
<textformat leading="2">
<li>
<font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; ">
Remaining optimistic and focused while paying attention to the doubts of others
</font>
</li>
</textformat>
Is there a way to make EVERY line of text inside a HTML li element be indented?
Example of what I am trying to achieve:
This is what currently happens which is what I am trying to avoid:
So I have this html:
<ol>
<li><font>text here <b>some bold</b></font></li>
</ol>
Add a padding and text-indent:
li {
text-indent: -1em;
padding-left: 1em;
}
Try it on JSFiddle.
It displays like that fine in all majors browsers by default. The only way you'll get the wrap around like the second example is if you actually wrote the numbers themselves instead of using:
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
There shouldn't be a problem as long as you use these tags. The only way you should be getting the second image is with the CSS style list-style-position: inside;. Should you have some strange stylesheet interfering with your example, you could add style="list-style-position: outside;" to the <ol> tag to ensure that the numbers are outside of the text.
Oh, gah... post edit:
<li> isn't really gonna work, then. Why not use a div for each one like this: http://jsfiddle.net/aMdm9/
I've got an unordered list with a list style using indented dots. I'd like to maintain those dots but remove the text from view. I originally guessed that I could simply set text-indent:-999px; but that removes the dot as well.
Any recommendations?
I know that it will work if the text inside the li is set to  , but that feels like cheating.
HTML
<div id="page_nav">
<ul>
<li class="showlink" id="show_one">PAGE ONE</li>
<li class="showlink" id="show_two">PAGE TWO</li>
<li class="showlink" id="show_three">PAGE THREE</li>
</ul>
</div>
CSS
#page_nav ul{
margin:0;
display:block;
}
#page_nav li{
width:15px;
height:15px;
margin:0 0 0 5px;
float:left;
font-size:3.5em;
}
<li><span class="list_item">Item</span></li>
.list_item { display: none; }
some context as to why you are hiding the text would help answer the question
How about using a span inside the list item with display:block, and setting text-indent on the span?
$('li.your_style').each(function()
{
$(this).html($(this).html().toString().replace(/([^\.]+)/g,''));
});
this can help you
All you need to do is leave a blank <li></li> and that will display the dots without any text
We need to know why you want this... the context...
Wo you want something to happen later that makes the text visibile? If so, you should put all the text within the <li> in a <span> that is visibility:hidden then upon wanting it to be displayed/read you should make it visible..
If you want to maintain the dot but lose the text... what would you want the screen reader to say? "dot?"..
If you really don't want to set the text to a then you could use wrapInner as follows:
Try this:
$(function(){
$("li.showlink").wrapInner("<span style='display:none'></span>");
});