I'm trying to make a Tumblr theme that will show one div if the user is on iOS (with an app store link) and one if they are on anything else (with another link). However, because of the way Tumblr works, I can't figure out why it won't work. I tried to use https://www.mattcromwell.com/detecting-mobile-devices-javascript/, which was written with Wordpress in mind, and I don't quite understand what I'm missing from tumblr.
<script type="text/javascript">
var isMobile = {
iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
any: function() { return (isMobile.iOS();} };
</script>
is what I have in the head tag. Then, I need the actual detection to happen in the footer, where I have
<p id="is-mobile" class="hide">This is a Mobile Device</p>
<p id="is-desktop" class="hide">This is NOT a Mobile Device</p>
<script type="text/javascript">
jQuery(function($) {
if (!isMobile.iOS())
$('#is-mobile').addClass('show');
if (isMobile.iOS())
$('#is-desktop').addClass('show');
});
</script>
Maybe I have the other jQuery in the wrong place? I have also imported the jQuery library too. Hopefully someone can help me! When I do this, it never shows any div regardless of device (obviously since I have them hidden - and I do have a thing in css that does not show .hide classes).
Any ideas?
As #Shikkediel pointed out, there seems to be an issue with the iOS function.
I've made this fiddle. I also think maybe the condition needed to be inverted (at least now in the fiddle the div for desktop is showing on desktop, and the one for mobile only on mobile).
https://jsfiddle.net/lharby/fvau9vnz/
This is the code:
var isMobile = {
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i)
},
any: function() {
return (isMobile.iOS())
}
};
jQuery(function($) {
if (isMobile.iOS()){ // we should only need an if/else here now. Changed from !isMobile.iOS();
$('#is-mobile').addClass('show');
}else{
$('#is-desktop').addClass('show');
}
});
Tumblr allows custom CSS, no?
You can go by device screen size, so you won't have to rely on user agent (which can be spoofed and/or not work at times).
Something like this (CSS):
#is-mobile{ /* Hide it by default */
display:none;
}
#media screen and (max-width: 500px){
#is-mobile{ /* If the screen is <= 500px, display it */
display:block;
}
}
I'm not that familiar with how Tumblr works, but this is how I'd detect mobile devices in normal web design.
For media queries based on each device, check this out.
More info on the css #media rule
Related
I have a number listed on the website that I'd like to be a callable link when the user is on a mobile phone, but not be displayed as a link when on desktop. I can do this as: a href="tel:5550005555">555-000-5555 /a for the mobile view but how can I get rid of that a tag when on desktop? Thanks for any help.
I would definitely recommend leaving phone numbers available for call on desktop as well because a lot of people actually do use those with certain apps like RingCentral or WhatsApp.
If you still want to do it and don't want to display:none on desktop, what you can do is (this is not best practice) have 2 phone numbers, one with tel: and one without and use a media query to show either. Like this:
<span class="phone-desktop">123-123-1234</span>
<a class="phone-mobile" href="tel:1231231234">123-123-1234</a>
//styles
.phone-mobile{display:none};
#media (max-width: 1440px){ //this will only show desktop
.phone-desktop{display:none}
.phone-mobile{display:block}
}
Again, to reiterate, it's better to just use tel: for both and not have to do any of this, because it's not best practice to duplicate code also its not user-friendly to click something you think is a link, but it does nothing. But besides that, this should probably get it done. Let me know if you need any help with it still.
I have found this over the internet, with this you can check whether the user viewed your page on Mobile devices or in desktop.
<html>
<head>
<title>Mobile Test</title>
</head>
<body>
<p id="text"></p>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var element = document.getElementById('text');
if (isMobile) {
element.innerHTML = "You are using Mobile";
} else {
element.innerHTML = "You are using Desktop";
}
</script>
</body>
</html>
you can use the CSS3 #media feature in order to specify the size of the screen and give this former that satifies the condition a specific CSS style (e.g. you could hide the element)
this is a usage example from W3SCHOOLS:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
for further information, please take a look at this content:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
i have a responsive website. I would like to disable my header ad banner when the user is browsing from mobile and would like to display under the menu.
my theme has an option to place the header code which i added. But i would like to disable it if the user is from mobile and would like to display it under the menu bar.
is that something achieve able. If yes. Your guidance is required.
Regards,
Naaz
I always use the below code , when i HAVE TO :
var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
var orientationSupport = !!window.DeviceOrientationEvent;
if(desktop && !orientationSupport) {
// your code for desktop pc's
}
But think of using feature detection instead Modenizer is a good place to start and even the source is pritty straightforward to understand.
EDIT:
Found another answer HERE, that gives insights for a similar question.
Try this:
When I google I get this for detecting mobile site. This may help you.
<script>
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());
}
};
if( isMobile.any() ){
//Load mobile site
}else{
// Desktop Site
}
For a couple of years now that a different philosophy have emerged.
There are just too many machines and operating systems.
Nowadays a lot of designers believe that the only difference between
mobile machines and desktop machines (and later also tables) is the width
of the screen.
HTML pages that have a viewport with "width=device-width" retain the relation between pixel and a physical measure like an inch. This means that a pixel SHOULD be measured almost the same when using a mobile machine or a desktop one. This means that a 300px over 300px div in a mobile machine should look almost the same as it would on a desktop machine.
This also means that the window width in pixel gets lower as the screen is smaller physically.
Making a long story short, you can use a window width cutoff of 768px to distinguish between mobile and desktop apps.
CSS is obviously preferred in terms of performance over javascript code that
shows and hides stuff according to the window width.
// desktop css
.ad {
display: block;
}
#media screen and (max-width: 768px) {
// mobile css
.ad {
display:none;
}
}
need an idea, I am stuck in quite the conundrum. I am building a responsive future proof webdesign.
On desktop and similar devices: I have a menu which on hover does a css animation to desplay a description of what hides behind the link and on click navigates to a new page.
On mobile devices: I wish to have a touch-event that triggers the hover (thus desplaying the description) and on touch number 2 it should then navigate to the new page.
the above is doable, but how to do it without checking user-agents, this is my situation. How does one go about future proofing the above.
Any great ideas are more then welcome. :)
Use Javascript to add a class on the touchstart/touchend events. Browsers won't issue these events:
Javascript:
document.querySelector("#myMenu").addEventListener("touchstart", function() {
this.classList.add("mobileHovered ");
});
document.querySelector("#myMenu").addEventListener("touchend", function() {
this.classList.remove("mobileHovered");
});
CSS:
#myMenu:hover,
#myMenu.mobileHovered {
/* CSS styles */
}
So, I bought the Roker theme from themeforest.net and created my website. It works fine and looks great but when I try to open my website on a Windows touch device - Surface Pro (IE and Firefox) or Windows Phone, I cannot scroll with my finger i.e. touch is not working.
When I look at the HTML code, the rendered page’s tag is adding this style
-ms-overflow-x: hidden; -ms-overflow-y: hidden; -ms-touch-action: auto !important;
And the overflow is set as an inline style.
This seems to get set automatically when I include the Google's JSAPI, because when I comment the <script type="text/javascript" src="http://www.google.com/jsapi"></script>, then everything works fine.
Any suggestions on how can I overcome this? I can share the link of my website if you want to see what is happening yourself.
Ideally you would want to track down the js file and find out why it is adding those inline styles.
I have a feeling it may have to do with the 'no-touch' class. You may want to use something like the following JS:
$(document).ready(function(){
detectMsTouch();
function detectMsTouch() {
var touchPoints = window.navigator.msMaxTouchPoints;
if (touchPoints) {
$('html').removeClass('no-touch').addClass('touch');
}
else {
return;
}
}
});
Another thing that may work is forcing the style with a CSS override.
ms-overflow-y: visible !important;
Hope it works for you.
My jQuery is not very good - I'm trying to learn by piecing together bits of existing scripts but not having very much luck. I'm trying to get a menu on a Wordpress website to act as a normal horizontal navigation bar on large screen sizes and to become a jQuery dropdown on widths below 980px - I've got the dropdown working but can't figure out how to get it to work only on small screen sizes.
The code that works is:
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#mmenu").hide();
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
});
});
</script>
But obviously it hides the horizontal navigation on large screen sizes too.
I've tried
<script type="text/javascript">
jQuery(document).ready(function($) {
if($(window).width() < 979) {
$("#mmenu").hide();
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
}
});
});
</script>
but it seems to break the code completely and make it entirely non-functional and I can't figure out why.
The website in question is http://host26.qnop.net/~fpsl/ if seeing the menu in context would be helpful.
Any advice would be very much appreciated - thank you!
if you reindent the code you can see the problem... the if closes before the click handler function
here the corrected code:
<script type="text/javascript">
jQuery(document).ready(function($) {
if($(window).width() < 979) {
$("#mmenu").hide();
$(".mtoggle").click(function() {
$("#mmenu").slideToggle(500);
});
}
});
</script>
i tend to do
body:before{content:".";display:none;} (for desktop)
body:before{content:"..";display:none;} (for tablet)
body:before{content:"...";display:none;} (for mobile)
and then just query that, as CSS and Javascript have slightly different sizes when measuring the window.