Can find plenty of info on how to hide mailchimp on a mobile but looking to do the opposite. Have tried adding the code below to the css but doesn't work.
#media (min-width: 500px) {
#modalContent {
display: none !important;
visibility: hidden !important;
}
}
Suspect I'm using the wrong class?
OK think I've sussed this out, unless anyone want to correct me? The class is as below
#media( min-width: 500px ) { #PopupSignupForm_0 { display: none !important; visibility: hidden !important; } }
Am I right?!
Hello you can try JavaScript for it you will able to detect Mobile, tablet and desktop devices separately.
function detectMob() {
const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
];
return toMatch.some((toMatchItem) => {
return navigator.userAgent.match(toMatchItem);
});
}
function detectTab()
{
var userAgent = navigator.userAgent.toLowerCase();
return isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);
}
if(detectTab() == true)
{
console.log('tab');
}
else if(detectMob() == true)
{
console.log('mob');
}
else
{
console.log('desktop');
}
Related
I am trying to create a app Download Strip in react .When the page renders for the first time it should show app download strip but after the user click cross icon it should not occur again if someone click on any other link that routes to different product. Also if the user closes the tab and again visits the page it should work fine.
i tried to write the code taking local storage in the mind here is the code for every neccessary file and i expected that for the first time app-download strip will be visible and when someone cancels and move to another link in the website. app-strip-download should not be visible again.
Also if the user closes the tab and revists the page app-download strip should be visible again.
Just keep in miund the app-download-strip container is being called from the different locations as well so the code i wrote is focused around showing a app-strip-download only for the first time .
i am stuck at the part where i need to at the last need to clear local storage so that again when the user visits the page my logic could work fine .
Here are the neccessary files i wrote to make it happen .
for styling
const fadeInTop = keyframes`
from {
height: 0;
}
to {
height: auto;
}
`;
export const AppDownloadContainer = styled.div`
animation: ${fadeInTop};
animation-duration: 1s;
animation-fill-mode: both;
background-color: #ffa600;
position: relative;
position: fixed;
top: 0;
width: 100%;
padding: 0 20px;
z-index: 10009;
#media (min-width: 769px) {
justify-content: center;
}
#media (min-width: 379px) {
display: flex;
align-items: center;
min-height: 62px;
}
#media (max-width: 378px) {
text-align: center;
min-height: 87px;
}
`;
Component code
constructor(props){
super(props);
this.state = {
showAppDownload: false
};
}
componentDidMount() {
console.log("inside component did mount line 42");
if (window && Object.keys(window).length > 0) {
let isShown = "isShown";
console.log(window.localStorage.getItem(isShown),"line52");
if (window.localStorage.getItem(isShown) === null) {
console.log("Am i coming inside this ","Line 54");
window.localStorage.setItem(isShown, true);
setTimeout(() => {
window.addEventListener("beforeunload", function (e) {
window.localStorage.removeItem(isShown);
})
this.setState({ showAppDownload: true });
}, 4000);
}
}
}
hideAppDownload = () => {
this.setState({ showAppDownload: false });
};
{showAppDownload ? (
<AppDownloadContainer>
<AppDownloadContent>
Download the GoPaisa App Now and Get Exclusive Bonus Cashback Offers on
Flipkart and Amazon
</AppDownloadContent>
<a
target="_blank"
href="">
<DownloadAppImg
src=""
alt="Download GoPaisa App"
/>
</a>
<CloseDownloadContent onClick={this.hideAppDownload}>
✕
</CloseDownloadContent>
</AppDownloadContainer>
) : (
""
)}
I really appreciate any help regarding this issue .
thanks .
Hi I have a script which works fine for resizing a logo on scroll down and back again, but i dont want it to do it when the screen size is less than 600px how do i alter to achieve this any help greatly appreciated.
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header-logo").style.width = "180px";
}
else {
document.getElementById("header-logo").style.width = "215px";
}
}
You could do something like
if (screen.width > 600px){
//your code
}
You can use media queries to achieve this
#media (max-width: 600px) {
#header-logo {
width: 180px !important;//!important use to override inner html styles
}
}
with a bit of luck and using some of DoomBots code got it to work with the below
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 ||
screen.width < 600) {
document.getElementById("header-logo").style.width = "180px";
}
else {
if (screen.width > 600){
document.getElementById("header-logo").style.width = "215px";
}
}
}
The idea is to add a 'default' value to the list and if one exists, output a class. If the 'default' doesn't exists, the compiler fails. How can this be achieved?
I tried a few variations of Less Guards and couldn't figure out a way to solve the problem.
I also attempted to add a 'default' list for these situations but they aren't merging.
Current Less I'm testing:
// Map / List
#borderRadius: {
//default: .25rem;
none: 0;
small: .3rem;
medium: .5rem;
large: 1rem;
round: 9999px;
}
// Extract
.getKeyFromList(#list, #key, #fallback...) {
.-(length(#list));
.-(#i) when (#i > 0) {.-((#i - 1))}
.-(#i) when (#key = extract(extract(#list, #i), 1)) {
#value: extract(#list, #i);
}
.--() {#value: #fallback} .--;
}
// Generate the CSS
& when not (#borderRadius) {
.getKeyFromList(#borderRadius[default], #borderRadius[default]);
&radius {
border-radius: #value;
}
}
EDIT:
Here is my real-world example.
I'm trying to extract the 'responsive' key from each ##component to generate responsive modifier classes dynamically
for individual components/variants. I was able to get the :hover and :focus variants to work, but can't figure out a
good way to do it for media queries (responsive modifier classes)
#responsiveModifiers: true;
#breakpointOffset: 1;
#screens: {
small: 768px;
medium: 960px;
large: 1440px;
};
#opacity: {
0: 0;
25: .25;
50: .5;
75: .75;
100: 1;
}
#borderRadius: {
none: 0;
small: .3rem;
medium: .5rem;
large: 1rem;
round: 9999px;
}
#components: {
#opacity: {
enabled: false;
responsive: false;
hover: true;
focus: false;
}
#borderRadius: {
enabled: true;
responsive: false;
hover: true;
focus: false;
}
}
.config() {
// Create generators here
& when (#components[#opacity][enabled]) {
#component: opacity;
.generate(opacity, opacity, #opacity);
}
& when (#components[#borderRadius][enabled]) {
#component: opacity;
.generate(radius, border-radius, #borderRadius);
}
}
// Call the mixin for default, non media-query classes
// and prefix it with a period (.)
.groundwork-utility-classes() {
#period: .;
#{period} {
.config();
}
}
// Dynamically generate CSS responsive modifiers, per breakpoint,
// via the #screens list array
.groundwork-media-queries() when (#responsiveModifiers = true) {
each(#screens, {
#media screen and (min-width: (#value + #breakpointOffset)) {
.#{key}&\: {
.config();
}
}
})
}
// Main mixin to generate all CSS utility classes
.generate(#className; #property; #list) {
// Generate CSS classes from a #list array
// e.g `.generate(p, padding, #padding);`
each(#list, {
& when not (#key > 0) {
&#{className} {
#{property}: #value;
}
&hover\:#{className}:hover when (#components[##component][hover] = true) {
#{property}: #value;
}
&focus\:#{className}:focus when (#components[##component][focus] = true) {
#{property}: #value;
}
}
});
}
// Render non media-query classes together
.groundwork-utility-classes();
// Group and render media queries together,
.groundwork-media-queries();
I am trying to print an HTML that comes from server-side. And the main issue that I face now is that css is not applied for some reason. See the fiddle. Is there something I am doing wrong ?
P.S. The JS with frames is used in order to open the print window in the same tab. Previously I ran into trouble that when new tab opened, the JS on the original tab stopped working till I closed the second tab with print content
https://jsfiddle.net/7L9onps1/
#media print {
body * {
visibility: hidden;
}
.test {
visibility: visible;
position: absolute;
left: 0;
top: 0;
background: red;
color: red;
-webkit-print-color-adjust: exact;
}
}
JS:
document.querySelector("#print").addEventListener("click", function() {
var html = '<div class="test">Test</div>';
print(html);
});
function print(html) {
// https://www.sitepoint.com/5-jquery-print-page-options/
document.innerHTML = html;
$('<iframe>', {
name: 'myiframe',
class: 'printFrame'
}).appendTo('body').contents().find('body').append(html);
window.frames['myiframe'].focus();
window.frames['myiframe'].print();
setTimeout(() => { $(".printFrame").remove(); }, 1000);
}
I´m using a libary to do that: https://github.com/DoersGuild/jQuery.print
Angular JS code I am working on has media queries that can be used to limit the display of blocks with code like this:
#media screen and (max-width: 370px) {
#testGrid {
.gridHeader {
div:nth-child(2),
div:nth-child(3),
div:nth-child(n+7) {
display: none;
}
div:nth-child(6) {
border-top-right-radius: 0.4rem;
}
}
.gridBody {
div {
div:nth-child(2),
div:nth-child(3),
div:nth-child(n+7) {
display: none;
}
}
}
}
}
My comment here was that it's not good to use things like div:nth-child(2) as this would easily break if another column was added. Plus it's also difficult to maintain. I suggested to give the column names class names that matched the contents of the columns.
Still this means that I have the code that defines what shows and what does not show far removed from the HTML. Does anyone have any suggestions on a way that I could do this with AngularJS that would have the showing and hiding of columns next to the actual <div>s
You can get the current width from the $window service so you could try something like this:
DEMO
app.controller('MainCtrl', function($scope, $window) {
$scope.name = 'World';
angular.element($window).bind('resize', function(){
$scope.hideThing = ($window.innerWidth < 400);
// have to manually update $scope as angular won't know about the resize event
$scope.$digest();
});
});
Then in your HTML
<body ng-controller="MainCtrl">
<p ng-hide="hideThing" >Hello {{name}}!</p>
</body>