I want to use blockUI (www.malsup.com/jquery/block/). There is a little js.code:
function blockSite() {
var loadImSize = 100;
$.blockUI({
message: '<img src="preloader_transparent.gif" width="' +
loadImSize + 'px" height="' + loadImSize + 'px">',
css: {
top: ($(window).height() - loadImSize) / 2 + 'px',
left: ($(window).width() - loadImSize) / 2 + 'px',
width: loadImSize + 'px',
height: loadImSize + 'px'
}
});
}
function unblockSite() {$.unblockUI();}
blockSite();
alert(3);
unblockSite();
How to use that the block-image appears before alert and the image disappears after alert closing? I need for a certainty the the usage
blockSite();
alert(3);
unblockSite();
instead of a
$.blockUI{... ,onBlock: function() {...}, ...}
Thanks
You have to disable it's animation:
$.blockUI({..., fadeIn: 0});
Edit: jsFiddle
Related
For a personal project I'm trying to fill the window with randomly generated div's. I got started with a code I found in some thread and tweaked it to my liking (color and width of the div's for example).
However, this code was designed to generate a div, then make it fade out, and cycle that again. What I'd like is to have a set number of div's loaded on page load and without them disappearing.
I do recognize the ".fadeOut" and ".remove()" at the end of the code, but for the life of me I can't figure out how to prevent the div's from disappearing without breaking the code, let alone having a set number of randomly placed div's appear at once.
(function makeDiv() {
var divsize = ((Math.random() * 100) + 30).toFixed();
var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width': 2 + 'px',
'height': divsize + 'px',
'border': '1px solid' + color,
'transform': 'rotate(' + divsize + 'deg)',
'background-color': color,
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'display': 'none',
'border-radius': '100px',
}).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function() {
$(this).remove();
makeDiv();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
So something like this?
All that I did was remove the fadeIn and fadeOut parts, and then added a simple function to create a fixed number of divs. I also removed the display: 'none' from the divs that were being created.
var makeDiv = () => {
var divsize = ((Math.random() * 100) + 30).toFixed();
var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width': 2 + 'px',
'height': divsize + 'px',
'border': '1px solid' + color,
'transform': 'rotate(' + divsize + 'deg)',
'background-color': color,
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'border-radius': '100px',
}).appendTo('body');
}
var generateDivs = (x) => {
for (let i = 0; i < x; i++) {
makeDiv();
}
}
generateDivs(100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a simple game where I have an animated image flying around the screen that you click to score points. After about 5 seconds the image will fly off the screen. I just want to contain it to a div by whatever means necessary.
$(document).ready(function () {
$('#cursor').animate({
top: '500px'
, left: '500px'
});
$('img').click(function () {
var randomNumber = Math.random();
console.log(randomNumber);
$('#output').html(function (i, val) {
return val * 1 + 10
});
$(this).animate({
top: '+=' + ((Math.random() * 500) - 400) + 'px'
, left: '+=' + ((Math.random() * 500) - 400) + 'px'
})
})
function explode() {
alert("TIME UP!");
}
setTimeout(explode, 10000);
});
Is this solution just a css fix or does it need to be done in jquery?
1.
Don´t use "+=" in your animate.
$(this).animate({
top: '+=' + ((Math.random() * 500) - 400) + 'px'
, left: '+=' + ((Math.random() * 500) - 400) + 'px'
})
2.
To contain it in the viewport consider the use of
window.innerHeight
and
window.innerWidth
3.
To contain it in a div you need to know the width and heigth of the div and consider that into your calculations (e.g. multiply the max with/height with a random number between 0 to 1 and subtract the image size from it)
Example to contain an image into the viewport
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
</head>
<body>
<img style="background: black; width: 15px; height: 15px; position: relative"></img>
<script>
$(document).ready(function () {
$('img').click(function () {
$(this).animate({
top: (Math.random() * window.innerHeight - this.height) + 'px'
, left: (Math.random() * window.innerWidth - this.width) + 'px'
})
})
})
</script>
</body>
</html>
You can easily adapt this to contain your image in your div.
I am working on getting a carousel background fade in when I move to next carousel item. Fading in works with CSS and JS in the code below on page load, but using jQuery to get this to work on change is not working.
JS-CSS:
function doCarouselBlur(imgEl) {
var root = imgEl.closest('.anlNoCarouselRoot');
if (root.length > 0) {
console.log('position: ' + JSON.stringify(root.position()));
console.log('width: ' + root.width());
console.log('height: ' + root.height());
console.log('src: ' + imgEl.attr('src'));
var width = root.width() + 160;
var height = root.height() + 40;
root.find('.carouselBackground').css({
'top': root.position().top - 20,
'left': root.position().left - 120,
'opacity': '0.92',
'transition': 'opacity 2s ease', // THIS WORKS ON LOAD BUT WON'T WORK FOR ON CHANGE
'background-image': 'url(' + imgEl.attr('src') + ')',
'width': width,
'height': height,
'z-index': '-10',
'clip': 'rect(20px, ' + width + 'px, ' + height + 'px, 20px)',
});
root.find('.dark-carousel-overlay').css({
'top': root.position().top - 20,
'left': root.position().left - 120,
'width': width,
'height': height,
'z-index': '-8'
});
};
}
ADDED JQUERY FOR TRANSITION ON CHANGE:
$('div.carouselBackground').on('change', function() {
$(this).fadeTo('slow', '0');
$(this).fadeTo('slow', '0.92');
});
I was just wondering if I could get some assistance, I have dwelled on this for hours and have a feeling I'm forgetting something basic that maybe an extra pair of eyes can help me with
(function($) {
jQuery.fn.center = function(options) {
var settings = $.extend({
hasParent: false,
leftoffset: 0,
topoffset: 0
}, options );
return this.each(function(){
var parent;
if (settings.hasParent) {
parent = $(this).parent();
} else {
parent = window;
}
$(this).css({
"position": "absolute",
"top": ((($(parent).height() - $(this).outerHeight()) / 2) + $(parent).scrollTop() + settings.topoffset + "px"),
"left": ((($(parent).width() - $(this).outerWidth()) / 2) + $(parent).scrollLeft() + settings.leftoffset + "px")
});
});
};
})(jQuery);
The above is the plugin that I have created, but am unable to see an error in, although I am only getting errors in Internet Explorer saying the following
Object doesn't support property or method 'center'
I call this plugin with the following code
$(".center").center({hasParent: true});
UPDATE:
Index File that uses the script
<script src = "http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src = "asset/shiv/dist/html5shiv.js"></script>
<script src = "asset/center.js"></script>
<script>
$(window).load(function(){
$ = jQuery.noConflict();
$("#container").css("height", $(window).height() + "px");
$("#container").css("width", $(window).width() + "px");
$(".center").center({hasParent: true});
$(".center").children().css("opacity", 0);
$(".center").css("visibility", "visible");
var LogoTop = parseInt($("#Logo").css("top"));
var LTTop = parseInt($("#LTText").css("top"));
var CSTop = parseInt($("#ComingSoonText").css("top"));
$("#Logo").css("top", LogoTop - 500);
$("#LTText").css("top", LTTop - 500);
$("#ComingSoonText").css("top", CSTop + 500);
$("#Logo").animate({
opacity: 1,
top: LogoTop
}, 1000, function(){
$("#LTText").animate({
opacity: 1,
top: LTTop
}, 750);
$("#ComingSoonText").animate({
opacity: 1,
top: CSTop
}, 750);
});
$(window).on("resize", function(){
$("#container").css("height", $(window).height() + "px");
$("#container").css("width", $(window).width() + "px");
$(".center").center({hasParent: true});
}).trigger('resize');
});
</script>
I have just currently started learning jQuery and I seem to be able to get it work how I want but I feel that the way that I am writting it is not very efficient. Could anyone assist me in this example below:
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
$(window).resize(function() {
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
});
So here I am positioning a div in the center of the screen. And then it also does it again on window resize as its contents width properties are percentage values. It works perfectly but I can't help but feel that there must be a better way to write this. Any help would be greatly appreciated. Thank you
You can cache the object and trigger the resize event, this way the resize handler is executed on DOM Ready.
$(window).resize(function() {
var $elem = $('.tiles-wrapper');
$elem.css({
top: '50%',
left: '50%',
margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
});
}).resize()
var $tilesWrapper = $('.tiles-wrapper');
function setWrapperStyle () {
var halfWidth = $tilesWrapper.width() * 0.5;
var halfHeight = $tilesWrapper.height() * 0.5;
$tilesWrapper.css({
top: '50%',
left: '50%',
margin: '-' + halfHeight + 'px 0 0 -' + halfWidth + 'px'
});
}
setWrapperStyle();
$(window).on('resize', setWrapperStyle);
You should make a fonction with your first line :
function center(){
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
}
and then you call it a first time and you call it when you resize your window:
center();
$(window).resize(center);
Do you really need jquery here ?
You can use directly css
.tiles-wrapper{
top:50% ;
left:50% ;
width: //what u given
height: //what u given
margin-left: //tiles width/2
margin-right: //tiles height/2
position: //absolute or float
}
if you want to calculate height and width dynamically
just write this on document ready
var $elem = $('.tiles-wrapper');
$elem.css({
top: '50%',
left: '50%',
margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
});
In re-size it will automatically on center position.