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');
});
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 found plenty of examples of fixing an element's top relative to the window. How do I fix an element X pixels from the bottom of the window? Simply changing 'top' to 'bottom' does not work (for example,if the element's height is more than the window height)
From the top:
var pixels = 10;
var $elemPosition = $element.position();
var $elementH = $element.height();
var $windowH = $(window).height();
var $bottom = $element.offset().top + $element.height();
if ($(window).scrollTop() + pixels >= $elemPosition.top) {
$element.css({
'position': 'fixed',
'top': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Solved it! Solution I came up with:
if (($windowH + $(window).scrollTop() - $bottom - pixels) >= 0) {
$element.css({
'position': 'fixed',
'top': ($windowH - $element.height() - pixels) + 'px',
'width': $eW + 'px',
'height': $eH + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Use the CSS bottom property instead of the top property.
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
According to your comments and demand :
for example,if the element's height is more than the window height
You wants something like this ?
JS
$element = $("#element");
function setPosition(){
var pixels = 10;
var $elementH = $element.height();
var $windowH = $(window).height();
if ($windowH > $elementH) {
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'bottom': '0px'
});
}
}
$(function(){
setPosition();
$(window).scroll(function(){
setPosition();
});
});
If you try to change the height of the element to 700px for instance, you'll see he gets relative position.
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
http://jsfiddle.net/suenot/3b3XM/1/
// in FF and IE each() don't work offset()
// $(this).offset().top return empty string
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});
Help me please, i can't find the solution.
I am not sure if $(this).css('background-color'); is what you want, but after updating it shows the box. See output in fiddle
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background-color');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});
I have this HTML:
<div id="studyTestContent" class="studyTestItem">
<input type="text" class="dropInput" size="15">
<ul class="inputDrop" style="display:none;">
<li class="dropDownItem">Si</li>
<li class="dropDownItem">y</li>
<li class="dropDownItem">con</li>
<li class="dropDownItem">el</li>
</ul>
</div>
and I have this jQuery:
$('.dropInput').click(function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
With this function I am attempting to show the <ul> when the input is clicked. Nothing happens when I click it. Any ideas why?
Edit: I just figured out what the problem was, I am inserting the html after the page loads so I need to do:
$('.dropInput').live('click', function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
Make sure you wait until the document is ready with
$(document).ready(function() {
// put all your jQuery goodness in here.
$('.dropInput').click(function() {
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";
$(this).next().show();
$(this).next().css({
'position': 'absolute',
'right': right,
'top': top
});
});
});
Since you are inserting the HTML into the document after the initial, you will need to use jQuery live() to bind the event to the new element.
$(this).next(":hidden").show();
Try:
$(document).ready(function(){
$('.dropInput').click(function() {
var offset = $(this).offset(),
height = $(this).height(),
width = $(this).width(),
top = offset.top + height + "px",
right = offset.left + width + "px";
$(this)
.next('.inputDrop')
.show()
.css({
'position': 'absolute',
'right': right,
'top': top
});
});
});