We Keep Coding

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;
}
}

Check when text is at specific position

I have text inside a div that scrolls down using the jquery marquee plugin. It sort of acts as an introduction to a project I'm working on. I want to reveal that project to the user as soon as the text in the div is completely done scrolling.
How can I know when the text is completely gone from the screen? How do I get its position?
PS: Before you think you know how it should work. Can you try it out yourself using my code in the snippet?
/*INTRO*/
$('#intro').marquee({
duration: 15000,
gap: 5,
delayBeforeStart: 0,
direction: 'down',
pauseOnHover: true,
duplicated: false
});
#intro{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: absolute;
opacity: 0.5;
font-size: 140%;
text-align: center;
height: 200%;
top: -20%;
left: 7%;
padding-left:15%;
padding-right:15%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js'></script>
<div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></p></div>
Here's a fiddle of it as well.

You can use the finished event on your $('#intro'), like so
$('#intro').on('finished', function () {
alert('Text done scrolling');
});
Updated Fiddle
UPDATE:
Hey also if you want to show something right after you can destroy the marquee in order to stop it from continuous rotation and therefore memory consumption on the client side.
So i've updated the fiddle to show how that could work, but the changes are minor:
HTMl:
<div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></b></p></div>
<div id="project">
<h1>
Project here
</h1>
</div>
Additional CSS:
#project {
display: none;
}
#project.active {
display: block;
}
Finally the JS:
/*INTRO*/
$('#intro')
.bind('finished', function(){
console.log('has finished');
//Change text to something else after first loop finishes
$(this).marquee('destroy'); // I thought it would remove the element, but it just stop the marquee
$(this).hide(); // So perhaps hide you would like to hide it.
//Show project
$('#project').addClass('active');
})
.marquee({
duration: 15000,
gap: 5,
delayBeforeStart: 0,
direction: 'down',
pauseOnHover: true,
duplicated: false
});

jquery BlockUI - Transparent loading image

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/

Too long chart axis label title

Say, I have a way too long axis title like the one here: http://jsfiddle.net/KaZMr/
What I would like to achieve is truncating that long title and display it in a hint. I know it can be simply truncated with something like:
//...
title: {
text: 'Temperature (°C)'.substring(0, 10) + "..."
},
//...
But how can I apply hint on it? I know it can be done with svg elements like in this question, but highcharts does not seem to parse such markup correctly inside title.text.
So probably anyone knows a workaround for this?

I think there are a number of ways to go about solving this issue, all of which involve using the useHTML attribute of the title.
http://api.highcharts.com/highcharts#title.useHTML
Here's a quick and dirty implementation as a starting point.
http://jsfiddle.net/qeQQn/
HTML
<div id="wrapper">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
<div id="divCT"><strong>Long Text Message</strong><br />
This is such a big axis title that it cannot be fully displayed and overlaps everything. So loooooooooooooooooooooooooooooooooooooong</div>
</div>
some of the JavaScript:
yAxis: {
title: {
useHTML: true,
text: '<span id="highCT">Long Text Message</span>'
},
...
$("#highCT").on(
{
mouseenter: function() {
$("#divCT").show();
},
mouseleave: function() {
$("#divCT").hide();
}
}
);
CSS
#wrapper {
position: relative;
margin: 0;
padding: 0;
}
#highCT {
text-decoration: none;
}
#divCT {
position: absolute;
top: 100px;
left: 40px;
width: 300px;
display: none;
z-index: 20000;
background-color: #000;
color: #FFF;
font: 10pt Arial, sans-serif;
padding: 10px;
}
However, I have to wonder what is going on with your chart if you have to use such a long title. Without knowing more and at first glance, it seems you would want to keep the title short and add descriptive text somewhere near the chart that is always visible, or at least visible by other means than hovering/clicking on the side title.
...of sideways interest:
Is it possible to use jQuery .on and hover?
How to change the style of Title attribute inside the anchor tag? (if you want to try to tackle the issue with an a tag on the title)

How to make tooltip display beside every image

I have several images that I applied jQuery tooltip effect on..it works, but the problem is that irrespective of the image i click the tooltip only displays at the top of the page.
Is there a way I can make the tooltip appear beside each image that is clicked.
The jQuery I have so far looks like this :
$('.image').hover(function () {
$('.tooltip').fadeIn(1000);
}, function () {
$('.tooltip').fadeOut(1000);
});
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
CSS
.tooltip {
display: none;
height: auto;
position: absolute;
background-color: #D1C585;
color: black;
border: 2px solid rgba(128, 0, 32, 0.3);
padding: 5px;
border-radius: 5px;
font-family: actor;
}
HTML
<img src="image.jpg" class="image">

It needs to have position: absolute and its parent has to be position: relative. Inside the hover function do:
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})

It all depends on where the location of the tooltip node is located. However, you can get the fixed position of the image by grabbing and adding all the offsetLeft/offsetTop of all the element and it's parents. For example.
$('.image').hover(function() {
var e = this,top=0,left=0;
while(e){
top+=e.offsetTop;
left+=e.offsetLeft;
e=$(e).parent();
}
$(this).css({position:'fixed',top:top+"px",left:left:left+"px"});
$('.tooltip').fadeIn(1000);
}, function() {
$('.tooltip').fadeOut(1000);
});
I did not test this code. However, I hope this points you in the right direction. You can then use the size of the image(offsetHeight and offsetWidth) to position the tooltip around the image.

Here is an example using jquery ui, see jquery ui tooltip for documentation
HTML
<img src="http://img262.imageshack.us/img262/68/sahara4rs.jpg" title="tyre">
Javascript
$(document).tooltip({
track: true,
show: {
effect: "fade",
delay: 1000
},
hide: {
effect: "explode",
delay: 250
}
});
On jsfiddle