Cisco Certified Network Associate Exam,640-802 CCNA All Answers ~100/100. Daily update
Popular posts from this blog
I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?
The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex
- Get link
- Other Apps
You can use jQuery to asynchronously load contents to your page very easy.
ReplyDeletehttp://api.jquery.com/load/
But you will not win performance on that, unless you have very big blocks of content you want to load in portions.
I don't think that is the purpose of PHP... nor does it work like that.
ReplyDeleteI wouldn't intentionally delay load time, so using jquery .load() just for the sake of a visual effect is bad practice. If you just want the visual effect of loading the parts at different times you can do the following:
In the head, add the following script. I would add it right after or before your style sheets.
var thehtml = document.getElementsByTagName('html')[0];
thehtml.className = 'loading';
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
window.onload = function() {removeClass(thehtml, "loading")}
Style the .loading class:
.loading #header,
.loading #sidebar {opacity: 0}
#header,
#sidebar {opacity: 1; transition: all 3s ease-in-out;}
This will cause the header and sidebar to fade in once the loading class is removed. If your middle content consists of all images, you can use a "lazy loader" like lazy karl. http://www.karlsteltenpohl.com/blog/,56,
In general I think all lazy load plugins are bad for performance as you have to rely on a scroll event, which means javascript runs a function every time the user scrolls the page.
Additionally if you want to have more control over the timing and order of "loading" you can use setTimeout() inside of the window.load function to have the elements load at different times.
If you choose this solution there will be alot more CSS involved and that will depend on your individual layout and how you've coded it.