I have a custom pre-loader on my index.php as
<div id="page-mask">
<div class="mask-spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
and jQuery as:
$(function() {
$(window).load(function() {
$("#page-mask .mask-spinner").delay(1000).fadeOut('slow');
$("#page-mask").delay(1500).slideUp(600);
});
});
which is working perfectly when users enter the site like www.domain.com but the pre-loader also is running when user get back to Home through the navigation a well. for example if user is in Portfolio page or Contact page and what to back to home through navigation the pre-loader runs again! which is not required now.
Can you please let me know how I can run the jquery only if users coming to home page through external links?
Thanks
Similar question is answere here by me where user wanted to run a script once per visit.
You can also check document.referrer if it is of the same domain or not before running a specific script
if ( document.referrer != location.hostname )
{
//run the script here
}
you can also check if the one contains the another like
if ( document.referrer.indexOf( location.hostname ) == -1 || location.hostname.indexOf( document.referrer) == -1 )
{
//run the script here
}
this way you will be able to make out whether you are navigating within the same site or coming from outside.
Related
I have searched the forum and the internet for an example on how to move around in a dialog box using hyperlinks. Maybe this is an old and answered problem but here goes:
I am loading the html content from either a database or a file. This content contains a lot of internal hyperlinks to various divs etc. in the html code. None of them are working, not even links to move to the top of the page within the dialog.
My question is simply if this, at all, is possible to do? And if it is what am I doing wrong?
Simple html file example (htmlfile.html):
function showFile(file){
$.get(file), function(result) {
if (result != undefined) {
//Open the dialog here
$(result).dialog({
.
.
});
}else{
alert("Could not load content");
}
});
}
<div id="top">
METAR
<div>
<div>
--some html content --
</div>
<div id="metar-tag">
--some html content --
</div>
</div>
Go to top
--more content--
</div>
The dlg box is open with:
showFile("htmlfile.html");
This file is loaded ok in the dlg box but the link is not working.
Any suggestions is very much appreciated.
Cheers!
Can any one help me to shout out my problem in scripting page. I'm developing website which displays property. I wanted to know how to block a div from loading when page loads and the content should display and load only on click of a button. Let me explain it below.
<button id="loader" onclick="loaddiv(#items)" value="View Content">
This loads data from external server using API. It has lots of data and images.
Please help.
The DIV itself should not have any content when the page loads, so simply a empty div with an ID tag..
Where you have "loaddiv(#items)" ... this is invalid, well the # part anyway... try "loaddiv('#items')" to make it a string in which jquery can then handle.
Once the page has loaded, then you would use jquery with something like get/post.
<div id='items'><!-- i'm empty for now --></div>
<button id="loader" onclick="loaddiv('#items')" value="View Content">
<script>
function loaddiv(sID) {
$.get( "ajax/test.html", function( data ) {
$(sID).html( data );
});
}
</script>
I have this code.
If a user press on lets say burger and add it into session basket. The reload of page doesn't open the current Window View(Toggle)
How can I make it open the current again on reload...
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
This is how to show/hide the text.
<div id="sandwich" class="hidden">
Here you go 1 </div>
<div id="burger" class="hidden">
Here you go 2 </div>
Things like this are not persistent across page reload / refresh.
There are two basic approaches to it:
Session cookie and session on server, communication via AJAX
Store all in a cookie
Both require some extra work, but it's unavoidable.
For the cookie part, there's a nice jQuery plugin called jquery.cookie.
this is my html page content (a part of it)
<body onLoad="javascript:introJs().start();">
<div id="page">
<div id="header">
Link
Headline
</div>
I have implemented introjs with my html page as shown above. but i need to automatically execute the function given on html onLoad.. but only on first visit with cookies. I have no idea about cookies. can anyone please change or create a cookie which execute the introjs automatically on first visit.
You can use localstorage like,
SCRIPT
window.onload=function(){
if(!localstorage.getItem('intorjsInit') && localstorage.getItem('intorjsInit')!=1)
{
javascript:introJs().start();
}
else
{
localstorage.setItem('intorjsInit',1);
}
};
HTML
<body><div id="page">.....
I'm using $.mobile.navigate("#test-page", {id:123}) to navigate to a secondary page.
The navigation from page to page works fine.... but the state is empty!
The docs clearly show that the state should contain all information I need when the navigation is performed.
This is the code I'm using:
$(window).on('navigate', function(event, data) {
console.log("navigated", data);
console.log(data.state.info);
console.log(data.state.direction);
console.log(data.state.url);
console.log(data.state.hash);
if (data.state.hash === "test-page") {
console.log("Test page", data.state.id);
}
});
Unfortunately data is passed as empty:
{
state:{}
}
The HTML is the following:
<div id="test-home" data-role="page">
<div data-role="header">
<h1>Test Home</h1>
</div>
<div data-role="content">
<div id="test-btn">
Click DIV for TEST page
</div>
</div>
<div data-role="footer">
</div>
</div>
<div id="test-page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
Test page
</div>
</div>
Hope that someone can help. Thanks!
$.mobile.navigate and navigate event, are used to track URL history and pass/fetch data from URL. They work with browser's navigation (back / forward).
To pass data between pages dynamically within a webapp using internal navigation, use $.mobile.changePage.
Resources:
$.mobile.navigate()
Navigate
$.mobile.changePage()
Use the below code to pass data from page to another.
$.mobile.changePage('store.html', {
dataUrl: "store.html?id=123",
data: {
'id': '123'
},
reloadPage: true // force page to reload
});
To retrieve data
$('.selector').on('pagebeforeshow', function () {
var values = $(this).data("url").split("?")[1];
id = values.replace("id=", "");
console.log(id);
});
I know it is an old question, but #Omar's answer can be improved.
In fact, it is possible to use pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition and pagecontainerchange (they are fired in this order) and inside the handler you can read the property history.state, that at that point is updated with the new state.
So, for example, you can write (to initialize things that need the page already formatted, e.g. Google Maps):
$(document).on("pagecontainershow", function(e, data) {
console.log("pagecontainershow: " + JSON.stringify(history.state));
});
This works in all cases: if you click on a link (with a hash, e.g. #user), if you navigate with the back and forward buttons, if you use $.mobile.navigate and also for window.history.back().
Moreover, you can pass complex data, not limited to the query string constraints.
Resources:
Pagecontainer
History