is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried using jquery but loader animations are not happening while page navigates in some mobile browser, is there a solution using ajax to overcome that problem?
The best way to do is is to use AJAX to load new content. What you can do is have a button which when clicked clears the html of the initial page and reloads content for the other html page.
Lets say you have the page's HTML contents in a div called #div and there's a button called #button which when clicked takes you to the new page. What you can do now is that whenever #button is clicked, you can clear the HTML contents of the current div, load the HTML of the new page (and while it loads you can display the GIF image) and then populate the div with the HTML of the new page.
$("#button").click(function() {
//till the time the post function below doesn't return the following image will be displayed
$("#div").html('<img src = "images/ajax-loader.gif" />');
$.post("get_html.php", function (data) {
//get the new HTML content
$("#div").html(data);
});
});
This is just an example, if you are more specific in what you need, maybe I could write code suited to your needs.
Related
I am working with this Template from templatemo.
I wanted to include some references to other parts of the website in the body text (e.g. Please "contact me" for further information). If you click "contact me" the page should navigate to "Contact" in the same manner as if the user clicked on the navigation bar to navigate to the page (with the same animation).
In order to so, i added the following code to trigger a click event:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>
And the function to trigger the click:
function loadPage(pageNo) {
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});
}
So this code is working, if I click on the reference the page changes as if I clicked the navigation bar. BUT:
If I reload the page and click on the reference, the page navigates to the contact page, which then however is not diplayed properly (the contact form and the google maps view are missing).
If I reload the page, first open the contact page via the menu, then switch to the page with the reference and click on it, the contact page is loaded properly.
This behaviour is also shown if I reference another page (e.g. the Gallery). The gallery elements are displayed (the page is not completely empty), but the spacing between the elements is not correct.
It seems like every page has to be loaded at least once via the navigation bar. If this has happened, all pages are displayed properly when opened via a reference in the text.
Thanks for your support.
Your template use Hero slider + some customs JavaScript functions to move between "pages", so you need to use the same functions to get the same behaviour.
Doing that will work:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>
You need to add this JS function:
function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}
The function goToPage() take one parameter, the string name of the section so if you have a section named My Gallery you need to put that, not my-gallery nor an index.
I have a main page with a number of buttons. When a button is pressed the target page is loaded as an object within a div on this main page where target is the page to be displayed within the object.
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
All works and the target page loads fine within the main page div.
Sometimes it can take a while to load the content and so I would make use of a loading gif. I have been using one on whole pages but I would like one just on the content within the div.
In a target page I have the following to display the loader:
<script>
$(".loader").fadeIn("fast");
</script>
and this to hide it once the page is loaded
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
This is not working. The page loads fine but no loading gif. No errors.
If I debug in the browser I see the gif as I step through so it must be loading and hiding, but not when I load the page normally. I suspect it is loading too late or hiding too soon.
Does my javascript show the loader as soon as the page starts to load? I have placed it at the beginning of the body.
Or is something I am doing to hide it before the page is fully loaded? Either way, can anyone see what I am doing wrong?
UPDATE AND ANSWER
Add the onload to the object tag as follows:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>
Then why not leave the .loader element empty and do something like this
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
And this
$('.loader').hide().html('');
Is the trigger for the loading gif showing only within the loaded-in page?
If so, by the time the browser receives the instruction to show the loader, it's already fetched the data.
I imagine the majority of the time is spent waiting for the content so try showing the loader just before this happens:
document.getElementById('content').innerHTML = objectContent;
You could always create a localised loader image, set within the innerHTML, as you said you had a global one already.
Is there a way to open a specific artical via an external link and focus on it when the links open on a one page wepage?
I have a webpage that shows content as you click on links by hiding and showing the divs. What i want is to make an external link to my webpage in the form of mywebpage/(div's name) and have the link open my page but showing the content of that div right away, instead of its usual opening content you would get when clicking on just the ordinary mywebpage link.
Is it possible? And how?
Short answer: yes.
Long answer: You will have to examine the URL's hash on page load and manually translate that into hidden or shown divs (or other positioning).
While you're at it, you could include browser history support when your divs are opened and closed.
Pulling apart what I did for http://www.tipmedia.com (Segment starts on line 322 of the page source)
//on page ready
$(document).ready(function() {
//examine hash
if(window.location.hash == "#thanks") {
//scroll to an anchor tag, slight delay to insure correct page height
setTimeout(function() {
$('html,body').animate({scrollTop:$("#contact").offset().top}, 0);
},500);
//hide and show necessary divs
$("#contactThanks").css({"display":"block"});
$("#contactIndex").css({"display":"none"});
$("#contactGeneral").css({"display":"none"});
$("#contactMeeting").css({"display":"none"});
$("#contactCareers").css({"display":"none"});
//clear the hash (not necessary for your use)
window.location.hash = "";
}
}
The history stuff is easy too, I used Modernizer.js for the best cross browser support, but it looks like this (non-Modernizer use is very similar)
//during the hide/show of new content...
//if history is available
if(Modernizr.history) {
//this data is whatever it is you wish to save
lastPageState = { div:divName, pos:amount, page:lastLoadedPage };
history.pushState(lastPageState, divName.substring(1,divName.length-6), "index.html");
}
//...
//then later, the popsate event handler
window.onpopstate = function(event) {
//examine event.state and do whatever you need to
//example segment starts line 989
//Whatever data you saved would be read here and you would do the appropriate action,
//hiding or showing divs, reloading AJAX content, etc.
}
Yes, you can use an anchor link.
So in your target page name the div with an id,say div id="target".
Then in the referring page use a link in this form
Referring Page:
GO to Target Info...
Target Page:
<div id="target">
...content...
</div>
FYI-"target" is just an example name, it could be anything...
I have a navigation with 2 buttons, when clicking a button it loads a new page (new page load), when clicking the button, a class with classname selected should be added...
It does that partially - It add's the class, but when it loads the new page, the class is removed again? How do I make the class stick to what the user has clicked?
$(document).on("click", ".list-mode button", function () {
$(".list-mode button").removeClass("selected");
$(this).addClass("selected");
});
If you're navigating to a new page, changes you've made using JavaScript to the current page aren't going to appear in the new one. You really have three options:
Add the correct class to the correct element in the HTML of the new page using server-side code.
Add the correct class to the correct element using JavaScript in the new page; you'll need a way to determine which element the class should be added to (possibly part of the URL of the new page).
Use AJAX navigation, and rather than loading a completely new page simply load the new content and replace part of the already loaded page.
You need cookies or DOM storage for this.
Whenever the page is going to be abandoned, you need to store somewhere what the user did last time and initialize the whole buttons with the stored settings.
As you're using jQuery, handle the document.ready event and initialize there the buttons whenever the page is loaded:
$(document).ready(function() {
// Initialize the whole buttons
});
I want a part of another page with Ajax Loading. When you click on a button. I have a page. But, i want load only the .section div in the page. When i click on the button. Than only the .section page in the other page must be load.
But, how can i load with ajax / jquery. Only a div from a other page.
You can do this without ajax using jQuery's load method. With this, you can load the content returned into your #div_id or body. Here is an example to load your content into your page's body;
$("#your_button_id").click(function() {
var myUrl = "yourpage.html #div_id_having_data";
$("body").load(myUrl);
return false;
});
Take a look at the jQuery Ajax/load documentation
If i have understood your question properly, then this would be the solution,
On button click load the whole page (.section should be hidden). Then on click of the other button just toggle the .section div.