Is there a script i can use to disable my entire website (in joomla) ,from being viewed on mobile devices? I haven't used any code yet. but I do use a script to disable right clicking but it's not for the mobile version. I don't want mobile viewing at all.
But of an odd one but you could do it using a CSS3 media query like so:
#media only screen (max-device-width : 768px) {
html,body { display: none; }
}
This will result in a completely blank screen for devices that are 768px and below. You would simply need to apply to above code to your template css file.
You could maybe also use Javascript like so:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
getElementById('body').style.display = 'none';
}
I haven't tested this on every mobile device out there but it will work on most
Related
I am trying to find a way how i could get information from browser what is users selected color theme in google account (or maybe any other social network that user is connected to) and set the same theme for my website.
Or at least get browser appearance theme and set color theme of my website accordingly.
Unfortunately no one gave any suggestions,
But thanks to Steve Griffith - Prof3ssorSt3v3 i have found some solution:
Prof3ssorSt3v3 have YouTube channel and posts there great videos so i recommend that channel to everyone who is learning JavaScript or PHP.
And the answer is...
According browser color-scheme it is possible to select dark or light color scheme for your webpage.
In CSS file set supported color schemes as below:
:root {
color-scheme: light dark;
}
or in HTML head set:
<meta name="color-scheme" content="light dark" />
next create different CSS for both color schemes separated like this:
#media screen and (prefers-color-scheme: dark) {
.someClass {
// some CSS
}
}
#media screen and (prefers-color-scheme: light) {
.someClass {
// some CSS
}
}
I have implemented a popup that automatically comes up on home page.
This works fine on desktop.
But it doesn't come up on mobile browser.
Is there any specific technique of doing this?
Thanks
How do you detect that the homepage window is active? I'm assuming your are using something like:
if (window.location.href.match('homepage.html') != null){
your code;
}
The answer to this question should be helpful to you:
Popup to display if viewed on mobile
You should implement the logic in css / JavaScript and reference your div (popupWindow element):
/* hidden on default */
div#popup { display: none; }
/* use a media query to filter small devices */
#media only screen and (max-device-width:480px) {
/* show the popup */
div#popup { display: block; }
}
If you're talking about a pop-up window, the browser on your mobile device may block those by default. In that case, it won't work on the desktop either unless the browser is configured to allow pop-ups.
I have a phone number on a website. It looks good on a laptop, but on a mobile device half of the number jumps to the next line. It doesn't look good.
So how can I create a line break that will only work on a mobile device sized screen?
I am not very experienced in coding, so please be specific :) Thanks a lot for any help!
Why not just do a line break as a class in the tag?
<br class="mobile-break">
and in CSS
#media screen and (min-width: 600px) {
.mobile-break { display: none; }
}
If you use Bootstrap 4 just use the break like this:
<br class="d-md-none">
You could look into the CSS word-break property to prevent words/strings being cut in half. If it is specifically line breaks you want to use then appending a class to the element such as <br class="br-on-mobile"> and setting it to display: none in the CSS should prevent it from doing anything normally.
You can then use a media query to display the line break at specific mobile screen sizes, for example:
.br-on-mobile {
display: none;
}
#media screen and (<Your conditions here>) {
.br-on-mobile {
display: static;
}
}
EDIT: static is invalid value for display. Using inherit should fix the issue. See this Fiddle
EDIT: The header of your page must also have <meta name="viewport" content="width=device-width, initial-scale=1"> to allow for correct scaling/application of media queries.
You could also achieve this by wrapping the number in a span element and setting this to display: block when on mobile devices, although your issue with the media queries below will also apply to this.
If you're looking into this in the future for something that works in Tailwind CSS, I found this to mirror the Bootstrap and BULMA style implementations (choose your breakpoint between sm/md/etc):
<br class="md:hidden">
Instead of space between the number, add this is non-breaking space which will prevent a new line being added.
This should work on BULMA: <br class="is-hidden-desktop" />
I want to display entire content of my database table on html page.I am trying to fetch record from database first and store in ArrayList. What is the best way to do it in java using PostgreSql database ??????
You are using iframes to embed those “previews”, I assume?
In that case, you could achieve this by making the iframe element itself larger, and then use transform: scale() to scale it down again to the target size.
Check the following example – I used example.com for the iframe content, that site is not responsive, as you can see in the first 200px*200px iframe.
The second iframe is 500px*500px – and scaled down by a factor of .4, which is effectively 200px again. Since scaling an element down this way still leaves the space it would have taken originally reserved, it is placed inside a div element that cuts of that overflow.
iframe, #i2 { width: 200px; height: 200px; }
#i2 { overflow: hidden; display: inline-block; }
#i2 iframe { width: 500px; height: 500px; transform:scale(.4); transform-origin: top left; }
<iframe src="https://example.com/">
</iframe>
<div id="i2">
<iframe src="https://example.com/">
</iframe>
</div>
https://jsfiddle.net/5hk9m446/
One thing you should be aware of, is that this will not work for just any website. Via the X-Frame-Options header websites can tell the browser, that they don’t want to be displayed in (i)frames on a different domain. In that case, you can’t do it client-side with iframes; you probably have to render a preview as an image server-side or something like that.
CSS Transforms can help you to downscale iframes.
See this example
http://jsbin.com/wiperebifa/edit?html,css,output
Please also notice with iframes your mouse events are targeted to those pages.
You can use glass pane(s) over the iframes to capture these events or alternatively you can hide iframes and display their content with canvas.
help me to find correct css code that make Responsive media query work after 1400 resolution browser?
Now i try :
#media only screen and(min-width: 1400px) {
.div {.......;}
}
but this is not working..