jquery BlockUI - Transparent loading image - javascript

I have a image I want to make spin as transparent when my screen is blocked. By default there is a white box as the message CSS. Not sure how to achieve this.
source: view-source:http://malsup.com/jquery/block/#demos
This section here creates a white box around the image.
$.blockUI({ message: '<h1><img src="./images/loading.gif" /></h1>'
If I comment this section of the source code out the whole image disappears.
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor: '#fff',
cursor: 'wait'
},

Try this:
css: {
backgroundColor: 'transparent',
border: '0'
},
example fiddle: https://jsfiddle.net/johnboker/ft3vwn2f/

Related

::before pseudo element not working in makeStyles

I am using makeStyles in react and I cannot figure out why the ::before content won't show. It will work if I make the content a picture but it doesn't show with text.
To clarify further the ::before element is not being rendered at all.
cardPoint: {
alignSelf: 'center',
justifySelf: 'start',
maxWidth: '250px',
position: 'relative',
"&::before": {
content: 'Look at me',
display: 'inline-block',
color: '#000',
},
}
I think you have to pass 'Look at me' as '"Look at me"':

React Native Responsive Screen

I have a question about screen design in React Native.
I am building an App with Expo. It runs on my AS Emulator - Nexus 5x. When I take my real device - Samsung S9 the pages look different for example text on the left and right is cut away because the screen seems to be to small. However both devices have the same width kind of 72mm and 69mm but S9 is curved. How do you guys keep your apps responsive?
I already did some componentWillMount checks where I make the fields height larger if the screen is to high. Should I do the same for the width? Or should I maybe use react-native-responsive-screen package for example? If there are some more experienced RN-Devs please give me a quick tip on how you actually manage this.
Edit :: Is this code below actually a good practice? Its my StyleSheet and I tried to work with absolute position - which looks nice on the Emulator but I guess it's not good practice.. Should I rewrite the styles?
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center"
},
headerText: {
fontSize: 30,
color: "black"
},
DateContainer: {
marginTop: 10,
marginBottom: 10
},
DateText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 14,
left: -100
},
phaseButton: {
position: "absolute",
top: -42,
right: -95,
height: 30,
backgroundColor: "#a51717",
borderRadius: 45
},
checkbox: {
position: "absolute",
top: -5,
right: -180,
height: 30
},
ZeitText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 12,
left: -199.5
},
ZeitInput: {
position: "absolute",
left: -150,
top: 8,
width: 100,
height: 35,
borderWidth: 1,
textAlign: "center"
},
checkText: {
position: "absolute",
top: 12,
right: -115,
height: 30,
color: "black"
},
button1: {
position: "absolute",
left: -120,
top: 8,
height: 30,
marginHorizontal: 20,
backgroundColor: "#a51717"
},
button2: {
position: "absolute",
left: -60,
top: 8,
height: 30,
backgroundColor: "#a51717"
}
});
Edit2.0: I changed my absolute positions to flexDirection: row and the width to percent. Is a Button that takes width: "30%" responsive? so does it always take 30% of the space there is?
you can use so many approaches for having a responsive application ,
one of the most common and i think the best one , is giving the style values according to the width and height of the devices.
you can easily import Dimensions from react-native and do your styling according to width and height property of the device running the app!
e.g.
import { Dimensions } from 'react-native';
const {width,height} = Dimensions.get('window')
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
marginLeft:width*.01
},})
and so on, For more informations i recommend you to read https://reactnative.dev/docs/dimensions
i hope it helps
I always set a flex to the screen first. And style it accordingly.
<View style={{flex: 1}}>
<View>
"Any styling here"
</View>
</View>
This will give me a full screen flex at first. And this will adjust accordingly to the device's screen.

React Native Half oval on View

I'm new to react-native, I want to create a view with a half oval in the bottom. I can achieve this problem using CSS, but I cannot use it in react-native as it only accepts the single number.
Example result
.halfOval {
background-color: #a0C580;
width: 400px;
height: 20px;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
<div class="halfOval"></div>
One solution I can say is to create a semicircle and scale it based on your device resolution. Sample code is given below
<View style={styles.ovalBgH}>
<View style={styles.ovalBg}>
</View>
</View>
Stylesheet code
ovalBgH:{
overflow: 'hidden',
width : 50,
height:25,
position : 'absolute',
borderBottomEndRadius:25,
borderBottomLeftRadius:25,
left:-25,
top:10,
backgroundColor:'transparent',
transform: [
{scaleX: 7}
]
},
ovalBg:{
backgroundColor: '#a0c580',
width : 50, height:50,
transform: [
{scaleX: 7}
]
}
Screenshot is given below
Try to use this kind of style may be your requirement would be fulfilled.
https://snack.expo.io/HkfD57Ipr
style={{
width: 100,
height: 50,
backgroundColor: '#a0C580',
borderBottomEndRadius: 100,
borderBottomStartRadius: 100,
transform: [{ scaleX: 3 }],
}}

SweerAlert2 - How to change responsive image in alert

I have this SweetAlert2 JavaScript:
$(document).ready(function(){
swal.fire({ position: 'center', customClass: 'swal-height', showConfirmButton: false,
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE1.jpg)
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 });
});
This script works fine in desktop screens - but as IMAGE1 has 600x600 pixels - it will be big for mobile devices.
Then I need to change the image to IMAGE2 (with a small width) to make it works at small devices.
any idea?
Since you asked about the best practice, the answer is to use srcset, see: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes
you don't need two seperate images, you can just add max-width:100% to the image element. Then it will not exceed 100% of screen width, whatever it's set width is.
best solution that I found:
split the screen resolution via JavaScript and add a CSS control for small-devices
$(document).ready(function(){
if (screen.width > 800) {
swal.fire({ position: 'center', customClass: 'swal-height', showConfirmButton: false,
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE2.jpg)
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 });
}
if (screen.width >= 800) {
swal.fire({ position: 'center', customClass: 'swal-height', showConfirmButton: false,
width: 600, padding: 150, background: '#fff url(../custom/media/misc/IMAGE1.jpg)
no-repeat', backdrop: 'rgba(10, 10, 10, 0.65)', timer: 10000 });
}
});
and CSS:(sweetalert2 demands the height control via css)
.swal-height {
height: 600px;
width: 600px;
}
#media (max-width: 800px) {
.swal-height {
height: 300px;
width: 300px;
}
}

Qtip shows text at bottom of the page when hovered over

I am currently using Qtip do display text when I hover over a button. And here's my code/function that's using qtip:
$('a.helpTip').qtip({
name: 'dark',
tip: true,
position: {
corner: {
tooltip: 'topLeft',
target: 'rightBottom'
}
},
style: {
width: 400,
padding: 5,
background: '#cfdfff',
color: 'black',
textAlign: 'left',
border: {
width: 2,
radius: 4,
color: '#5271b0'
}
}
});
Whenever I hover over the help button, the text will show up at the bottom of the page for some reason like in the photo above. When I inspect the code this is what I see:
<div id="qtip-6" class="qtip qtip-default qtip-pos-tl" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-6-content" aria-hidden="true" data-qtip-id="6" style="width: 400px; z-index: 15001;"><div class="qtip-content" id="qtip-6-content" aria-atomic="true">This is my Help Text, it will be longer than it was to see what happens if it has to wrap around.</div></div>
Does anybody know how to fix this or why this is happening?

Categories