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.
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
}
}
My company is running Wagtail as a headless API, using it more as a way to store bits of content rather than entire pages. As such there's the occasional feature that doesn't make sense for us. In this case it's the "internal link" feature. Since we don't manage "pages" per se I'd like to remove this option from the chooser found on the rich text field, as seen below.
I've identified several admin templates which could be overridden to remove this functionality, but I wanted to first see if there's something which can simply disable this "internal link" option so that it just doesn't even show up.
The _link_types.html template would allow me to remove Internal Link as a choice, but it appears Wagtail defaults to Internal Link which means that even if the option is gone, the Internal Link chooser still shows up. Barring a simple option that can be toggled off, where should I be looking to default selection to External Link?
Below is an approach, it kind of feels a bit hacky and it would be great if there was a more natural way to do this but hopefully this helps.
See the documentation for an explanation of the Wagtail Hooks.
Step 1 - hide the internal link option
Use the hook insert_editor_css to inject some css to 'hide' the first link.
This achieves the same goal as the _link_types template override you have attempted but 'scopes' this to the editor modal only.
This is important as you want to avoid breaking the 'move page' and scenarios where the page chooser will be shown. The css feels a bit hacky but hopefully gets the job done.
Step 2 - override the internal link option to external link for modals
Use the hook insert_editor_js to override the window.chooserUrls.pageChooser value, this will again be on the editor page only & for the modals only.
Set this value to the new 'default' you want, in the code below we have set this to the external link option.
You can see how these values are set globally in the editor_js.html template.
Code
# file: wagtail_hooks.py
from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html
from django.urls import reverse
from wagtail.core import hooks
#hooks.register('insert_editor_css')
def editor_css():
"""Add /static/css/admin.css to the admin."""
return format_html(
'<link rel="stylesheet" href="{}">',
static("css/admin.css")
)
#hooks.register('insert_editor_js')
def editor_js():
return format_html(
"""
<script>
window.chooserUrls.pageChooser = '{}';
</script>
""",
reverse('wagtailadmin_choose_page_external_link')
)
/* file: static/css/admin.css */
.modal-content .link-types :first-child {
/* hide the 'internal' link option from the page chooser */
display: none;
}
.modal-content .link-types {
/* ensure the 'before' element can be positioned absolute */
position: relative;
}
.modal-content .link-types::before {
/* hide the left '|' bar */
background: white;
bottom: 0;
content: '';
left: 0;
position: absolute;
top: 0;
width: 5px;
}
I have an Angular JS single-page application used for reporting. I would like to print the report as rendered client-side to PDF format, taking into consideration certain elements users may have dynamically shown or hidden.
Is there anyway to achieve this?
Add class to div no-print
and css,
#media print {
.no-print{
display:none;
}
}
and print using,
javascript:window.print()
I'm wondering how to render responsive pages using PhantomJS in pdf format.
I have tried so many responsive pages and found that it is printing the pdf using the print css.
So, if the page includes the print css OR screen only css it will render the pdf same as we found via print command preview (Ctrl + p).
Is there any way OR script by which i can get the pdf as I'm seeing them on web browser?
Attaching the file when i tried to get the pdf from http://getbootstrap.com/examples/jumbotron/.
Also the main issue is not responsive designes, the issue is print css applied over them.
example pdf
jorupp came up with a javascript solution in this gist. It essentially let's you "lock" all the media queries in the document's stylesheets to whatever applies presently, before changing to print mode.
In case the link ever disappears, here's the code:
function process(rule) {
if(rule.cssRules) {
for(var i=rule.cssRules.length-1; i>=0; i--) {
process(rule.cssRules[i]);
}
}
if(rule.type == CSSRule.MEDIA_RULE) {
if(window.matchMedia(rule.media.mediaText).matches) {
rule.media.mediaText = "all";
} else {
rule.media.mediaText = "not all";
}
}
return rule;
}
for(var i=0; i<document.styleSheets.length; i++) {
process(document.styleSheets[i]);
}
This is quite tricky since there is no option to tell PhantomJS to use the screen when rendering as PDF.
You would need to
load all the linked stylesheets that contain a print block with __utils__.sendAJAX,
remove #media print block (this is quite hard with regex because you need to look out for balanced braces, but relatively easy with plain JS),
maybe you even need to rename #media screen to #media print,
remove the linked stylesheet from the document and
add a style element which has the manipulated stylesheet inside (preferable in the same place as the previous stylesheet) to the DOM.
Your page won't look good, because you usually have page breaks and the like with pdf. Also, page width and viewport width are quite hard to get right. Changing the page width doesn't change the viewport, so it won't be the proper responsive that would have with a pixel perfect png. But that is only a solution if you don't need selectable text.
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