i am trying to get my Online Help to redirect to a phone version. However, i am generating the phone and desktop versions from a single source so I want to have a piece of code that does it each way (phone <-769-> desktop). I got the redirection due to size happening using:
if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
but when I was on the phone page it kept trying to load the page (i can see why). I had a go myself but I am new to this, here is my (failed) attempt:
windowWidth = window.innerWidth;
<!--
if (location.pathname = "/desktop/Selecting_a_School_Register.htm";)
{
} else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
}
</script><script>
if (location.pathname = "/phone/Selecting_a_School_Register.htm";)
{
} else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";
}
Any type of conditional statement needs a double '==' as opposed to a single '=' like your code example suggests. Also, you don't need a semi-colon after your string in your if statements.
Even better than a double equals is a triple equals which is a strict comparison operator
Try this:
windowWidth = window.innerWidth;
if (location.pathname === "/desktop/Selecting_a_School_Register.htm") {
}
else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
}
if (location.pathname === "/phone/Selecting_a_School_Register.htm") {
}
else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";
}
EDIT:
This code does exactly what you need:
var pathname = window.location.pathname
, width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
if (width <= 769 && pathname !== '/mobile.html') {
window.location = '/mobile.html';
}
if (width > 769 && pathname !== '/desktop.html') {
window.location = '/desktop.html';
}
Hi,
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
Example :
To check to see if the user is on any of the supported mobile devices:
if( isMobile.any() ) alert('Mobile');
To check to see if the user is on a specific mobile device:
if( isMobile.iOS() ) alert('iOS');
Thank you,
Vishal Patel
Related
I'm making a webpage that has two different navbars... Lets say I named them navbar1 and navbar2.. soo the navbar1 is being used on the home page of the web site and navbar2 on all other sub pages... I have written a pure Javascript function that checks if the navbar1 exists in DOM and if it does then it does something... if navbar1 doesent exist in DOM it should ignore that part of code and move forward with the rest...
so now I have this issue that I spent several hours now trying to resolve... and I just can figure it out... When I go to the home page the code works... everything that should happen to navbar1 happens... but if I go to a subpage that doesn't use navbar1 I get this error in the console: "Cannot read properties of null (reading 'getBoundingClientRect')"
I would apreciate some help... and if it matters I don't have much experience with javascript so :)
So here's my JS code...
function docReady(fn) {
if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function() {
var className = "scroll";
var scrollTrigger = 60;
var navTogler = document.getElementById('navbar-toggler');
var navbar1 = document.getElementById('navbar1');
var isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
if (isInViewport(navbar1)) {
navTogler.addEventListener('click', classToggle);
function classToggle() {
navbar1.classList.toggle('has-bg');
if (navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
if (navbar1.classList.contains('scroll') && navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
if (!navbar1.classList.contains('scroll') && !navbar1.classList.contains('has-bg')) {
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
}
else {
// console.log("something");
}
}
window.onscroll = function() {
if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
document.getElementById("navbar1").classList.add(className);
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
}
else {
document.getElementById("navbar1").classList.remove(className);
document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
}
};
}
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
grid: {
rows: 2,
},
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
console.log("hello swiper");
});
isInViewport() should return false if the element doesn't exist.
var isInViewport = function (elem) {
if (!elem) {
return false;
}
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
I need help ... I have a javascript code that was written for IE10 / IE11 now I have to implement some function in Google Chrome but in code I have the function windows.showModalDialog which as I know does not work on chrome currently, I need to migrate this code so that it works on window .open, could anyone help?
function ShowContactSearch() {
var windowWidth = 800, windowHeight = 600, centerWidth = (screen.availWidth - windowWidth) / 2, centerHeight = (screen.availHeight - windowHeight) / 2 - 20;
var result = window.open('/Contact.aspx', null, 'dialogWidth:1300px; dialogHeight:720px; center:1; resizable:1; status=1');
if (result != null) {
ContactChosen(result, '1');
}
function ContactChosen(contactId, cType) {
var ct = document.getElementById("<%=hfChosenContactId.ClientID %>");
if (contactId == null || contactId == "" || ct.value == "" || contactId.toLowerCase().indexOf(ct.value.toLowerCase()) < 0) {
ct.value = contactId;
document.getElementById("<%=hfCType.ClientID %>").value = cType;
document.getElementById("<%=bChosenContactId.ClientID %>").click();
}
return false;
}
Anywhy can i detect when user push up when scroll top less than 0 ? (Like facebook app reload)
This is my code idea so far :
window.onscroll = function (e) {
scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
detect_pushUp(scrollTop);
};
var push_up_check = true;
function detect_pushUp(scrollPosition) {
if(scrollPosition === 0 && !push_up_check) {
push_up_check = true;
} else if(scrollPosition === 0 && push_up_check) {
location.reload(true);
} else {
push_up_check = false;
}
}
This is working ok, But any better idea? to detect something like this?
I'm writing the same code three times for the different pages of my WordPress site. I feel that it could be written more elegantly but unfortunately I'm not at the skill level yet to achieve this. Is there any way to combine all of this into something more concise? It would also probably help me learn more about what can and can't be done with JavaScript.
if (jQuery(document.body).hasClass("home")) {
jQuery(window).scroll(function () {
var threshold = 654;
if (jQuery(window).scrollTop() >= 654)
jQuery('#sidebar').addClass('fixed');
else
jQuery('#sidebar').removeClass('fixed');
});
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
jQuery(window).scroll(function () {
var threshold = 20;
if (jQuery(window).scrollTop() >= 20)
jQuery('#sidebar').addClass('fixed');
else
jQuery('#sidebar').removeClass('fixed');
});
} else {
jQuery(window).scroll(function () {
var threshold = 236;
if (jQuery(window).scrollTop() >= 236)
jQuery('#sidebar').addClass('fixed');
else
jQuery('#sidebar').removeClass('fixed');
});
}
var threshold = 236;
if (jQuery(document.body).hasClass("home")) {
threshold = 654;
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
threshold = 20;
}
var scrolled = false;
jQuery(window).scroll(function () {
if (!scrolled && jQuery(window).scrollTop() >= threshold){
jQuery('#sidebar').addClass('fixed');
scrolled = true;
} else if (scrolled && jQuery(window).scrollTop() < threshold) {
jQuery('#sidebar').removeClass('fixed');
scrolled = false;
}
});
UPDATE: I was created a simple demo to show how to implement sidebar scrolls within his parent.
Demo on CodePen
Damn.. I got beat. Well, I'm still posting this anyway.
var scrollTopFn = function(amount){
$(window).scroll(function(){
// this is a ternary statement, basically a shorthand for writing if else statements
$(window).scrollTop() >= amount
? $('#sidebar').addClass('fixed')
: $('#sidebar').removeClass('fixed');
});
}
if ($(document.body).hasClass('home')) {
scrollTopFn(654);
} else if ($(document.body).hasClass('single')){
scrollTopFn(20);
} else {
scrollTopFn(236);
}
Could be:
var threshold = 236;
switch (jQuery(document.body).attr("class")) {
case "home":
threshold = 654
break;
case "single":
case "page":
threshold = 20
break;
}
$(window).scroll(function () {
if (jQuery(window).scrollTop() >= threshold )
jQuery('#sidebar').addClass('fixed');
else
jQuery('#sidebar').removeClass('fixed');
});
Your code could be simplified to:
var $body = jQuery(document.body),
threshold = $body.hasClass("home") ? 654
: $body.hasClass("single") || $body.hasClass("page") ? 20
: 236;
jQuery(window).on('scroll', function() {
jQuery('#sidebar').toggleClass('fixed', state);
});
But this one should have better performance:
var $body = jQuery(document.body),
state = false,
threshold = $body.hasClass("home") ? 654
: $body.hasClass("single") || $body.hasClass("page") ? 20
: 236;
jQuery(window).on('scroll', function() {
if(state != (state = jQuery(window).scrollTop() >= threshold))
jQuery('#sidebar').toggleClass('fixed', state);
});
A current jQuery project of mine requires browser resize (width AND height) functionality, some of the supported resolutions are funky when compared to each other. Any suggestions to improve this comparative statement are welcome. I tried to close any holes, but I've a feeling there are a few left. Please note I'm also checking for a variable of 'isIos'.
Here's the script:
function getBrowserWidth() {
$(window).load(function () {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
});
$(window).resize(function () {
if (window.innerWidth) {
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
}
else if (document.body) { return document.body.clientWidth; }
return 0;
});
}
function getBrowserHeight() {
$(window).load(function () {
if (window.innerHeight) {
return window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight != 0) {
return document.documentElement.clientHeight;
}
else if (document.body) { return document.body.clientHeight; }
return 0;
});
$(window).resize(function () {
if (window.innerHeight) {
return window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight != 0) {
return document.documentElement.clientHeight;
}
else if (document.body) { return document.body.clientHeight; }
return 0;
});
}
var browserWidth = getBrowserWidth(),
browserHeight = getBrowserHeight(),
isIphone = navigator.userAgent.match(/iPhone/i) != null,
isIpod = navigator.userAgent.match(/iPod/i) != null,
isIpad = navigator.userAgent.match(/iPad/i) != null,
isIos = isIphone || isIpod || isIpad;
if (browserWidth <= 1024 && isIos) {
} else if (browserWidth > 800 && browserWidth <= 1024 && !isIos) {
} else if (browserWidth <= 1024 && browserHeight <= 768 && !isIos) {
} else if (browserWidth > 1024 && browserWidth <= 1280) {
} else if (browserWidth > 1024 && browserWidth <= 1280 && browserHeight <= 720) {
} else if (browserWidth > 1280 && browserWidth <= 1600) {
} else if (browserWidth > 1280 && browserWidth <= 1600 && browserHeight > 768 && browserHeight <= 900) {
} else if (browserWidth > 1920 && browserWidth <= 4000) {
} else if (browserWidth > 1920 && browserWidth <= 4000 && browserHeight > 1080 && browserHeight <= 4000) {
} else {
}
if you really want to do this method, then i suggest a cascade comparison from highest to lowest (sort of switch statement). that way, you don't need ranges:
var w = $.Window.width();
if(w>4000){
//greater than 4000
} else if(w>1920){
//assumed less than 4000 greater than 1920
} else if (w>1280){
//assumed less than 1920 but greater than 1280
} else if (w>1024){
//assumed less than 1280 but greater than 1024
} else if (w>800){
//assumed less than 1024 but greater than 800
} else {
//small sized
}