I am having a problem with tabbed content. I downloaded a very nicely styled content tabber done in HTML/CSS/Javascript.
The problem is that while the page is loading it shows all the content at once. Only once it has finished loading will it put it in the tabs.
Does anyone know why it would do this? I am thinking something to do with the JS and unfortunately I don't know anything about JS.
I can post the JS code if need be.
Thanks!
The reason for this is that your HTML (document) is loaded first prior to the JS being applied. So you are going to initially see all of the HTML content.
One solution to resolve this is to hide the content via CSS initially and then show it once the JS has converted the content into tabbed content.
A basic example of this can be found here http://jsfiddle.net/86pzN/
$(function(){
setTimeout(function(){
$( "#tabs" ).tabs();
$('#tabs-2,#tabs-3').show();
}, 3000);
});
The some of the tabs can be hidden via css and then shown after the Tab functionality has been applied.
p.s. I have added the setTimeout code here to mimic a page loading the HTML slowly before running the JS code.
Related
I am using jQuery to a simple task. Task is to simply show a loading animation from none progress until page is completely loaded.
The thing i am experiencing is that the animation shows up after 50-75% time and then goes hidden after the page is completely loaded (I am referring it as delay in next parts of question).
Points to note:
-> If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).
-> If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.
I want to know the reason why my page is doing this behavior, what is the best approach of doing this task. (I know my approach is not the best one since its misbehaving)
Note: My main page includes both header.php and footer.php files.
My Question ends here.
This is bootstrap loading animation. (Working Fine. No problem with it. Just to show)
Animation Code
<div id="Loading">
<div class="spinner-border m-5" role="status" >
<span class="sr-only" >Loading...</span>
</div>
</div>
And this is what i function i am using for for hiding the animation on page is completely loaded. (Also Working Fine. No problem with it. Just to show)
Script
<script>
$(document).ready(function($) {
$('#Loading').fadeOut("slow");
});
</script>
document.ready() means your DOM is ready to run if your page have bulky contents and added js at the bottom to load dom its taking time so loading animation comes in delay. And at header make sure jquery is above the custom CSS. If you have not satisfied with the answer edit the question and add complete HTML markup.
I have found the mistake. The thing that was making the animation to load after some time was that, before animation's code I linked bootstrap CDN and then animation's code. That why it took longer than expected.
The thing I learned is that, it was a bad approach to use bootstrap for loading animation(the animation that shows the page is loading). Instead, CSS and HTML for animation should be used. Mainly using any library at your website affects the speed of the website that is not good for SEO.
You experienced two different scenarios. Let me clarify them one by one:
1. If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).
You said you're inserting Bootstrap before the Animation Code, so it may take time to load. I will re-iterate your words: yes, it's best practice to avoid any framework or library (like Bootstrap or jQuery) for adding page-loading animation. It's because progress bar should be the first to load and show, and it will delay if browser need to load heavy files like third-party libraries. Well, there's a solution as well:
You can also load a script asynchronously using the HTML5's async attribute for <script> tag. But then, you can't use Bootstrap in Animation code. The reason being, Bootstrap may be loaded later than your Animation code being rendered. Read: https://www.w3schools.com/tags/att_script_async.asp
<script async src="myScript.js"></script>
2. If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.
You said you're adding jQuery file at the end of <body> in footer.php, so your script when placed in header.php doesn't run since jQuery is still not loaded. Check console log; there will be an error.
You must first load jQuery, then use it. Read: https://forum.jquery.com/topic/and-jquery-not-defined-problems
Also, if you seek to hide the progress bar after all the resources (like images and iFrames) are loaded, then use $(document).load() in place of $(document).ready(). $(document).ready() is fired when the DOM is ready, but $(document).load() is fired when the page is loaded.
UPDATE : With help from #TrueBlueAussie,
Yes, since I am not hiding the div, the code below is useless. So ignoring it (The script I used below) , is there a proper solution to my problem.
I have a website, http://frankvinyl.com/
It is a wordpress website. The featured image at the top, it loads after all the website is loaded.
I tried for different solutions for loading the DIV first, but its not working.
$(document).ready(function() {
$("#main1").show();
});
The problem is, the content of #main1 loads after all the website and content is loaded. I just want to load the div with the flow as the rest of the content.
Have been tweaking around but cannot find a appropriate solution.
You are waiting for the document to be ready in your jquery.
Try putting $("#main1").show(); before the document ready.
Don't know if it will work, it has been a long time :p
Does anyone know the best place to add the HTML code for jQuery Mobile pages that have been dynamically generated?
I have been adding them to the end of the <body>, however, this is causing problems with other jQuery mobile pages.
I have tried adding the jQuery Mobile pages into a div at the end of the page, however, their ids are no longer accessible via hrefs.
Link to Code: http://jakeserver.com/Apps/BostonLandmarks/B11/index.html
Any ideas?
I recommend you move all script within the individual page divs to a global script tag and then run that code within a pagecreate event of the page e.g.:
$(document).on('pagecreate','#landmarks', function(){
function setNewActiveTab(newTab){
$(".LandmarksTab").removeClass("ui-btn-active");
$(".LandmarksTab").removeClass("ui-btn-active");
$(".MoreTab").removeClass("ui-btn-active");
$(newTab).addClass("ui-btn-active");
}
assembleRows(landmarksArray);
assembleLandmarkPages(landmarksArray);
determineMapScreen();
});
Here is a working jsFiddle based on your code.
This will ensure that the code runs at the correct time with respect to jQM's page creation/enhancement.
Okey guys, so as the title says, i need some help about how i can create a Javascript and/or jQuery script which will 1st load all the html page elements (like divs etc.) and then display the page,once it is 100% loaded. I need this because right now, during the loading, one of my divs is moved up, and then when the page is loaded it goes into correct position. Cheers!
You could do this by initially setting body's css display to none and show it on document.ready().
E.g.
HTML:
<body style="display:none">
</body>
Script:
$(document).ready(function(){
$("body").show();
});
You could use clientside templates to build your page, for example the excelent jQuery.template plugin.
Simply don't build the page on the server, but do it on the client instead :)
I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/
ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).
instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.