i added this to the head of my page:
<script type="text/javascript">
if (screen.width <= 800) {
window.location = "http://m.domain.com";
}
</script>
i have a button on my mobile version called "Main Site".
I want the button to go to my main site, but not redirect back to my mobile site. How do i do this?
also, i only want them to go there once. So, the next time they enter my website name, i want it to take them to mobile site
If you already have a button to go your main site. Just link the main site to that button. What you can do extra is, use an url parameter to check and force the main layout. Something like
Main site
Check for this parameter, when you want to force the main layout. Or else, the script currently using will automatically do what you want to do.
Use the following function to read the query string. [Source]
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)')
.exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Next you can use it in your logic, like this:
if (screen.width <= 800 && getParameterByName('forceLayout') != 'main') {
window.location = "http://m.domain.com";
}
You could inspect document.referrer
<script type="text/javascript">
if (screen.width <= 800 && document.referrer.indexOf('http://m.domain.com') != 0) {
window.location = "http://m.domain.com";
}
</script>
When someone clicks on your "Main site" button, before you redirect to your main site, create a "MobilOptOut" cookie and then test for the presence of that cookie in your screen.width if statement.
The client needs to manage the state of the current view the user wants to see. Since HTTP is a stateless protocol, you can use a cookie to persist the user's selection across HTTP requests.
When the user clicks the button to display the main version, delete the cookie as part of the click event. Likewise, set the cookie to your desired value when the user wants to view the mobile version. Since there are many ways to manipulate cookies with JavaScript that may be library dependent, below is pseudocode of what your page should do.
// Pseudocode:
// Sets a cookie named "view" with the value "mobile"
function setMobileView() {
Cookie.set("view", "mobile");
}
mobileViewButton.onclick = setMobileView;
// Deletes the cookie named "view"
function setMainView() {
Cookie.delete("view");
}
mainViewButton.onclick = setMainView;
Here is pseudocode for what your redirection logic would look like:
// Pseudocode for deciding the view to display
if (view === "mobile") {
location.href = "http://m.domain.com";
}
Related
I'm working a wordpress website that needs a mobile redirect to the mobile home page in case the user is using a cell. I'm trying to utilize this Javascript code but I'm having major difficulties getting it to work properly.
I need help removing the conformation section that asks the user if they want to continue to mobile site.
I also need help figuring out how to restructure the code so it doesn't keep forwarding mobile user to home page. For example, I load the page on mobile, the code runs and it forwards me to mobile page. From there I click on another link in the top navigation and it takes me back to the home page no matter what I do.
Keep in mind I am very new to this so any Input and Help from you experienced folks out there would be much appreciated.
Thank You
P.
<script type="text/javascript">
if (screen.width < 1081) {
var ref = document.referrer;
var urls = new Array("http://www.mymainsite.com","http://m.mymobilesite.com");
var n = ref.match(urls[0]);
var m = ref.match(urls[1]);
if ((m!==null) || (n!==null)) {
stop;
}
else if (ref=='') {
var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
if (r==true) {
window.location = "http://m.mymobilesite.com";
}
else {
stop ;
}
}
else
{
window.location = "http://m.mymobilesite.com";
}
}
</script>
We only activate this code on your main site. Then we check whether or not your screen width is small enough and look into localStorage to see whether or not the user has made a decision before. Then we put up the confirmation box. If the user clicks okay, we go to the mobile site, if not we set the localStorage variable to true. Keep in mind that localStorage is only available IE8+
if(location.hostname === 'mymainsite'){
if (screen.width < 1081 && !localStorage.isMainSite) {
if(confirm('Small Display is Detected.\nClick \"OK\" for MOBILE SITE.')){
window.location = "http://m.mymobilesite.com";
} else {
localStorage.isMainSite = true;
}
}
}
Alright, so in my SharePoint (2013) site, I made a simple JavaScript Web Part to refresh the page every five minutes. I went to adjust the time, backspaced out where I'd entered the time to wait before a refresh, and without thinking exited the edit page. This left me in an infinite loop of refresh, and since I do not have admin access to the laptop I am working on, I cannot manually disable JavaScript. My hope now is to find a way to edit, or just delete, the Web Part causing this from elsewhere. Can this be done?
Here's the code I used:
<script type="text/javascript" language="javascript">
var reloadTimer = null;
var sURL = unescape(window.location.pathname);
function setReloadTime(secs)
{ if (arguments.length == 1)
{ if (reloadTimer) clearTimeout(reloadTimer);
reloadTimer = setTimeout("setReloadTime()", Math.ceil(parseFloat (secs)*1000));
}
else
{ reloadTimer = null;
location.reload(true);
window.location.replace( sURL );
}
}
setReloadTime(); //Here was where I had 300
</script>
You can add parameter Contents=1 to URL of the webpart page. It displays page in setup mode allowing you to remove webpart from the page. The final URL will look like this http://portal.contoso.com/page.aspx?Contents=1
I want to put cookie to my page.
Here's the logic :
When I load the page, I want it to load a popup or bootstrap modal. But the modal only load once when the browser is active. And only will load again when the browser tab is closed or exits the browser application. I have used session to do this, but I prefer to use cookie for personal preferences.
Is there a way to do this with javascript?
I've tried with $(window).load(), and $(window).on('beforeunload',function());
Javascript :
<script type="text/javascript">
$(window).load(function () {
if( $.cookie('firstLoad') == 'unloaded' || $.cookie('firstLoad') == 'null' || $.cookie('firstLoad') == null ) {
$('#openLoading').modal('show');
var time_exp = 1;
$.cookie('firstLoad','loaded',{ expires: time_exp });
}
});
$(window).on('beforeunload', function (){
alert($.cookie('firstLoad'));
$.cookie('firstLoad','unloaded');
});
</script>
The problem is sometimes the app browser will execute location.reload() and will reset the cookie in some way and make the popup appear again.
Please provide solution, thanks.
PS : the var time_exp and expires : time_exp is a last resort if the unload doesn't work
The beforeunload event doesn't just fire when the tab is closed. It will fire whenever the user goes to a new page in the same tab, including a page on your site. So you are resetting your cookie every time the user navigates between pages.
There is no event you can use to tell you the user is leaving your site specifically. The closest you can do is not set an expires, so that the cookie will automatically be deleted when the browser exits.
You could put a close button in the modal, and set a cookie when it is clicked so you know the user has viewed the modal and you don't need to show it again for however long you decide.
I have page the has some data in tabs, Im trying to write a function so that when links are click from another page can load the page with the tabs on and show the correct tab. This is working with the code below, minus the actual changing tabs function. But for some reason using the window.location..... as a variable still scroll the page down to the matching id. Is there another way to get the string in the url after the #. Or can i do it this way but not have to jump to the id? thanks
function loadTab(){
var linkToTab = window.location.hash.substr(1);
var linkClass = '.'+linkToTab
if(window.location.hash != '') {
changeTabs(linkClass);
}else{
$('.companyLink:first').addClass('active');
$('.companyBio:first').addClass('active');
$('.companyBio:first').fadeIn();
};
}
The hash character is for anchors.
Use a question mark instead of a hash.
<a href="index.html?tabname">
and
var linkToTab = window.location.search.substr(1);
var linkClass = '.'+linkToTab
if(window.location.search != '') {
The # part of the URL is traditionally used for anchors. The 'jumping' you see is the original feature.
Modern websites and web-applications use it build a history as HTML5's history feature isn't widely supported yet.
To avoid the jumping add event.preventDefault to your links, like:
Tab1
<script type="text/javascript">
document.getElementById("tab1handle").onclick = function (event) {
event.preventDefault();
}
</script>
You can also make sure the anchor is not defined. In this case the browser will jump to the top of the page. It's up to you whether this is undesirable or not.
I have a link on my site that opens a new window to a page that plays a very long audio file. My current script works fine to open the page and not refresh if the link is clicked multiple times. However, when I have moved to a seperate page on my site and click this link again, it reloads. I am aware that when the parent element changes, I will lose my variable and thus I will need to open the window, overiding the existing content. I am trying to find a solution around that. I would prefer not to use a cookie to achieve this, but I will if required.
My script is as follows:
function OpenWindow(){
if(typeof(winRef) == 'undefined' || winRef.closed){
//create new
winRef = window.open('http://samplesite/page','winPop','sampleListOfOptions');
} else {
//give it focus (in case it got burried)
winRef.focus();
}
}
You should first to call winRef = window.open("", "winPopup") without URL - this will return a window, if it exists, without reloading. And only if winRef is null or empty window, then create new window.
Here is my test code:
var winRef;
function OpenWindow()
{
if(typeof(winRef) == 'undefined' || winRef.closed)
{
//create new
var url = 'http://someurl';
winRef = window.open('', 'winPop', 'sampleListOfOptions');
if(winRef == null || winRef.document.location.href != url)
{
winRef = window.open(url, 'winPop');
}
}
else
{
//give it focus (in case it got burried)
winRef.focus();
}
}
It works.
Thanks to Stan and http://ektaraval.blogspot.ca/2011/05/how-to-set-focus-to-child-window.html
My solution creates a breakout pop-up mp3 player that remains active site wide and only refreshes if the window is not open prior to clicking the link button
function OpenWindow(){
var targetWin = window.open('','winPop', 'sample-options');
if(targetWin.location == 'about:blank'){
//create new
targetWin.location.href = 'http://site/megaplayer';
targetWin.focus();
} else {
//give it focus (in case it got burried)
targetWin.focus();
}
}
Like you said, after navigating away from original page you're losing track of what windows you may have opened.
As far as I can tell, there's no way to "regain" reference to that particular window. You may (using cookies, server side session or whatever) know that window was opened already, but you won't ever have a direct access to it from different page (even on the same domain). This kind of communication between already opened windows may be simulated with help of ajax and server side code, that would serve as agent when sharing some information between two windows. It's not an easy nor clean solution however.