First load the whole page, then display it - javascript

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 :)

Related

How to load html from clicking a div class button without page refresh

I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.
There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.
You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}
You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/

One div and its content on website loading last

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

Where should I place jQuery Mobile pages generated dynamically

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.

Load a html page in a div by clicking an image

I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.
I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.
Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.
Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).

HTML tabs not preloading

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.

Categories