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;
}
}
Related
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?
I have two 'screens' with different background images.
when the user clicks on the down arrow it scrolls from one 'screen' to the one below. The second screen is set to display none at the beginning. This all works as expected, however, when trying to scroll to the top of the screen again it jumps to the top as opposed to smoothly scrolling back to the top. I am also using GSAPs tween library for other animations.
Please see code below:
JS
$('.down-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-two', {display: 'block', onComplete: scrollDown})
tl.set('.background-one', {display: 'none', delay: 0.6})
function scrollDown(){
$('html, body').animate({scrollTop: $(window).height()}, 600);
}
});
$('.up-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-one', {display: 'block', onComplete: scrollUp})
tl.set('.background-two', {display: 'none', delay: 0.6})
function scrollUp(){
$('html, body').animate({scrollTop: 0}, 600);
}
});
CSS
.background-one {
background: url(../img/Background1.png) no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
}
.background-two {
background: url(../img/Background2.png) no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
}
HTML
<div class="background-one">
<div class="up-arrow">UP</div>
</div>
<div class="background-two">
<div class="down-arrow">DOWN</div>
</div>
My guess is that when you set the top block to display: block; it appears immediately and pushes down your bottom block.
What you could try instead is sliding the blocks in (By animating their heights instead of scrolling).
Does it work when you properly close your html div-tags?
Edit:
I created a fiddle, the animation works fine. You're removing (display:none) the other element, which causes the page to flicker/jump.
function scrollDown(){
$('html, body').animate({scrollTop: $(window).height()}, 600);
}
function scrollUp(){
$('html, body').animate({scrollTop: 0}, 600);
}
$('.down-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-two', {display: 'block', onComplete: scrollDown})
tl.set('.background-one', {display: 'none', delay: 0.6})
});
$('.up-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-one', {display: 'block', onComplete: scrollUp})
tl.set('.background-two', {display: 'none', delay: 0.6})
});
Tip: Keep your functions outside your click-handler.
I am using Jquery dialog like this:
<body>
<div id="comments_dialog">
Insert a comment
<form>
<input type="text" id="search" name="q">
</form>
</div>
....
</body>
dialog = $( "#comment_dialog" ).dialog({
autoOpen: false,
height: 400,
width: 350,
dialogClass: "flora",
modal: true,
buttons: {
"New Comment": addComment,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
My page is a scrollable page with a lot of data.
The issue is that the dialog is being displayed in the middle of the page, and I would like it to be displayed in the middle of the CURRENT screen, so the user wouldn't need to scroll to see it.
How can I do it?
EDITED
Based on a few solutions here, I set the CSS to be fixed like this:
.flora.ui-front {
z-index: 1000 !important;
position:fixed !important;
}
.flora.ui-dialog {
z-index: 1001 !important;
position:fixed !important;
}
However, I read that position fixed conflicts with zIndex.
What can I do in this case that I need the dialog to put ontop and in the middle of current screen?
You might be using position:absolute; in your css, try changing it to position:fixed;
#comment_dialog{
position:fixed;
}
What i always use for my modals / dialogs:
#comment_dialog{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
As long as your div has a size (doesn't need to be a fixed size) it will display it in the middle of the window (centered horizontally and vertically)
To apply these styles dynamically to your element with Jquery, use this:
$("#comment_dialog").css({
"position" : "fixed",
"top": "0",
"left": "0",
"right": "0",
"bottom": "0"
});
do a position fixed, and use calc function for top and left
#comment_dialog {
position:fixed;
left: calc(50% - 200px) !important;
top: calc(50% - 175px) !important;
}
i think that's help for you
try this
dialog = $( "#comment_dialog" ).dialog({
autoOpen: false,
height: 400,
width: 350,
my: "center",
at: "center",
of: window,
z-index : 9999,
modal: true,
buttons: {
"New Comment": addComment,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
You can use the following CSS.
Please run the example in "Full Screen" and resize browser window to see the effect.
Explanation:
Use position:fixed for your dialog, this means dialog element is positioned relative to the browser window.
Set position top and left using calc which enable to perform calculations to determine CSS property values.
Value for top is calculated as: 50% of the actual viewport height minus half dialog height, so dialog will be always placed in the center of the view port height.
Value for left is calculated as: 50% of the actual viewport width minus half dialog width, so dialog will be always placed in the center of the view port width.
Result is the dialog always placed at the center of the viewport.
#comments_dialog {
position:fixed;
top: calc(50vh - 250px/2);
left: calc(50vw - 350px/2);
height: 250px;
width: 350px;
background-color:yellow;
z-index: 1000;
}
<div id="comments_dialog">
Your content here.
</div>
You can have the same result using jQuery in this way, it will add inline style to your dialog:
$("#comments_dialog").css({
"position": "fixed",
"top": "calc(50vh - 250px/2)",
"left": "calc(50vw - 350px/2)",
"width": "350px",
"height": "250px",
"background-color": "yellow",
"z-index": "1000";
});
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/
Ok I'm not using the 'alsoResize' but I've tested and it behaves the same.
When you resize the main element, the black border from the bottom element 'marquee' often nudges out of line with the dashed white border from the top element.
$(".layer").resizable({
//alsoResize: '.marquee',
resize: function(event, ui) {
$('.marquee').css({
width : ui.size.width + "px",
height : ui.size.height + "px",
left : ui.position.left + "px",
top : ui.position.top + "px",
});
},
handles: 'all',
aspectRatio: true,
});
http://jsfiddle.net/digitaloutback/uGr3w/3/
Using firebug on a local demo, at the stage they go out of line, you can see the inline element styles for left, top and width, height are different.
I wonder if a work around would be to send the position and size stats to function which outputs an exact measurement to both elements? Any simpler options? Thanks
UPDATE:
I've got a workaround which works cleanly.. it is to pass the resizable-calculated dimensions to a function which sets the top layer to these dimensions also.
I'm sure there's a more efficient method to do this, feel free to offer an optimised version..
http://jsfiddle.net/digitaloutback/VDfpY/5/
There seems to be a discrepancy in the size and position reported by the ui parameter to the resize event, and the actual sizes and positions. This is possibly due to a delay between the ui parameter being built and the event being fired.
I experimented using the actual position and size reported at the time of the event running:
$('.marquee').css({
'left' : $(this).position().left,
'top' : $(this).position().top,
'width' : $(this).width(),
'height' : $(this).height()
});
This seems to match much more precicely the actual dimensions.
http://jsfiddle.net/VDfpY/1/
How about this?
Let the CSS handle the sizes and not the JS
http://jsfiddle.net/HerrSerker/uGr3w/5/
--edit added code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".layer").resizable({
handles: 'all',
aspectRatio: true,
});
});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
background: #999}
.marquee {
border: 1px dashed #fff;
position: absolute;
left: -1px; top: -1px;
width: 100%; height: 100%;
display: block;
z-index: 2500;
}
.layer {
border: 1px solid black;
position: absolute;
left: 150px; top: 150px;
width: 250px; height: 226px;
display: block;
z-index: 2501;
}
</link>
<body>
<div id="canvas">
<a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>