Max-height transition problems - javascript

I make autocomplete
Max-height set from JavaScript:
if (data.length < 10)
element.css({'max-height': (30 * newVal.length) + 'px'})
If max-height decreases(e.g. 300px to 150px), transition does not work.
If max-height increases(e.g. 150px to 300px), transition works.
.autocomplete-ion {
background-color: gray;
position: absolute;
width: 90%;
left: 5%;
top:45px;
overflow-y: auto;
z-index: 10000000;
background-color: #FAFAFA;
transition: 0.8s;
max-height: 300px;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
ul li {
padding:5px;
}
}

It is because you have max-height value as 300px in your css. So you should remove that to work properly
.autocomplete-ion {
background-color: gray;
position: absolute;
width: 90%;
left: 5%;
top:45px;
overflow-y: auto;
z-index: 10000000;
background-color: #FAFAFA;
transition: 0.8s;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
ul li {
padding:5px;
}

Because the height change from element add/remove will not cause a animation.
When elements increasing, the new height is likely to always larger than previous max-height, so when you set a higher max-height, the animation appears from old max-height to new one.
When elements decreasing, if you remove the elements first, then the height will decrease first, without animation, then, when you set the new max-height, it'll only animate part only if new max-height is smaller than decreased height. And if the new max-height is still larger than decreased height, the animation not appears at all.
So you have to first set to the new max-height when new elements is less then old ones, to trigger animation, and set the list to new one(either by removing or create a new list) when animation ends.
var list = $(".autocomplete-ion ul");
var tryAppend = function(newList) {
var curList = $(".autocomplete-ion ul li");
var curLength = curList.length;
var newLength = newList.length;
if (newLength <= 10) {
// If its adding, no need to listen to animation, as the new height will be definetly larger.
// Otherwise,
if (newLength < curLength) {
$(".autocomplete-ion").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
list.empty().append(newList);
$(this).off();
});
$(".autocomplete-ion").css({'max-height': (30 * newLength) + 'px'});
} else {
$(".autocomplete-ion").css({'max-height': (30 * newLength) + 'px'});
list.empty().append(newList);
}
}
};
var create = function(num) {
var list =[];
var i, li;
for (i = 0; i < num; ++i ) {
li = $("<li>").text("Test li " + (i + 1));
list.push(li);
}
tryAppend(list);
};
$(".cl").click(function() {
var counts = parseInt($(this).data("len"), 10);
create(counts);
});
$(".clear").click(function() {
list.empty();
});
.autocomplete-ion {
background-color: gray;
position: absolute;
width: 90%;
left: 5%;
top:45px;
overflow-y: auto;
z-index: 10000000;
background-color: #FAFAFA;
transition: 0.8s;
max-height: 0px;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
ul li {
height: 40px;
padding:5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="autocomplete-ion">
<ul>
</ul>
</div>
<button class="cl" data-len="1">1</button>
<button class="cl" data-len="5">5</button>
<button class="cl" data-len="10">10</button>

Related

.height returns value over 10x the actual one

Got a dynamic bubble showing up inside a listing. I'm trying to set it above a button by jquery calculating its height, adding a few more pixels, and setting negative "top" style. But with div's height at 34px, it returns height of 400 something.
Tried both: .height and .outerHeight
Jquery
if($(".bubble")[0]) {
$(".bubble").each(function(){
const self = this;
setTimeout(function(){
$(self).removeClass("hide");
if ($(window).width()> 1000) {
var bubblehe = ($(this).height()+14)*-1;
} else {
var bubblehe = $(this).height+14;
}
$(self).css('top',bubblehe);
}, <?php echo $myoptions['bubble_delay']; ?>)
});
$(document.body).click(function(){
$(".bubble").addClass("hide");
});
}
css of the .bubble
.bubble {
padding:2px 0;
position:absolute;
text-align:center;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 5px 10px #cccaca;
left: 0;
right: 0;
background-color: #fff;
pointer-events: none;
color:#e98007;
font-size:12px;
transition:0.3s;
}

Changing div left property set in % using javascript/jQuery?

Hope you can help me!! So I have a div inside another div and I'd like to move the second one back and forth with a step of 14.5% left and right stopping it before the black edges. I've managed to do it setting the left property in px but I'd like to to that with percentages..how can I do that? Thanks in advance!
PS. of course now the code doesn't work well because of the px changing..for this reason I'd like to work with %s...
$(document).ready(function() {
$('#min_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left<99.495){
$('.highlighted').css('left',left);
}
else{
left= left - 103.108;
$('.highlighted').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left>411.111){
$('#highlighted').css('left',left);
}
else{
left= left + 103.108;
$('#highlighted').css('left',left);
}
});
});
.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id=highlight class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>
First, your highlighted id is missing " and you're are trying to get your element by calling the id attribute with the class value.
You can get the container width with .width() function, and then calculate the percentage by multiplying it by 0.145.
$(document).ready(function() {
$('#min_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left < step){
$('#highlight').css('left',left);
}
else{
left= left - step;
$('#highlight').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left > (containerWidth - (2*step))){
$('#highlight').css('left',left);
}
else{
left = left + step;
$('#highlight').css('left',left);
}
});
});
.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id="highlight" class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>

How to add class on specific div when scroll?

I am playing around and practice my JS (beginner). I have created stacking panels and i hit a wall. I just can not target and add class of shadow to the moving element (only when one panel is above other, class should add).
For now i have this:
const boxes = Array.from(document.querySelectorAll(".box"));
const wrapper = document.querySelector(".wrapper");
const leftMargin = 60; //px
function scrollWrap(e) {
let scrollCoord = wrapper.scrollLeft; // horizontal scroll value
boxes.forEach((box, index) => {
let leftMarginStop = index * leftMargin;
const boxCoord = box.getBoundingClientRect();
let leftCoordPanel = boxCoord.left;
let flag = false;
//console.log({scrollCoord, leftMarginStop, leftCoordPanel, box});
if (boxCoord.left <= leftMarginStop) { // if left side of pannel is less than margin 60, 120, 180,...
//console.log("STAHP!!");
box.style.position = "sticky";
box.style.left = `${leftMarginStop}px`; // sets the left to 60, 120, 180,...
flag = true;
if (flag) {
box.classList.add("shadow");
console.log(this) //how to target each panel rather than wrapper?
} else {
box.classList.remove("shadow");
}
} else {
box.style.position = "static";
box.style.left = 0;
flag = false;
}
});
}
wrapper.addEventListener("scroll", scrollWrap);
body {
margin: 0;
padding: 0;
}
.wrapper, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
position: sticky;
height: 750px;
z-index: 1;
}
.wrapper {
width: 1442px;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
display: flex;
overflow: scroll;
}
.wrapper .box1 {
min-width: 357px;
height: 750px;
background-color: #1a1a1a;
}
.wrapper .box2 {
min-width: 357px;
height: 750px;
background-color: #333;
}
.wrapper .box3 {
min-width: 702px;
height: 750px;
background-color: #4d4d4d;
}
.wrapper .box4 {
min-width: 630px;
height: 750px;
background-color: #666;
}
.wrapper .box5 {
min-width: 630px;
height: 750px;
background-color: #808080;
}
.wrapper .box6 {
min-width: 357px;
height: 750px;
background-color: #999;
}
.wrapper .box7 {
min-width: 630px;
height: 750px;
background-color: #b3b3b3;
}
.wrapper .box8 {
min-width: 630px;
height: 750px;
background-color: #ccc;
}
.shadow {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
</div>
If anyone can help me out, please show me code with explanation, so i can see and know what and how.
I try to do it with some flag or without, but every time the class is added when element reaches the end (left padding). I want to add class when element is on top of other element. If it is not, remove class. Also, how to make this so it works on mouse scroll wheel? I was testing this with apple magic mouse, but on scroll wheel it does not work.
Oh and please, if you see something very wrong please let me know, i am beginner and would like to learn something from this post.
For now i have managed to update my code. It works when i scroll and shadow is also applying to the panel. There is still something i wonder.
When i add shadow class i created transition. It works perfect, but when i remove shadow class it just disappears, no transition back. Why is that? I want shadow to appear and disappear in same way
How to track every single panel if it has reached the left margin, and than apply eventListener with mouse enter and mouse leave on it? So when i hover to "closed" panel, i get that item and if i hover on NOT "closed" panel i will not get item. I was trying with console.log "this" but it returned every panel i mouse entered it
How to target every panel, so i can later say, when 4th panel reaches left margin, the margin of stacked elements change?
My updated code:
const boxes = Array.from(document.querySelectorAll(".box"));
const wrapper = document.querySelector(".wrapper");
const leftMargin = 60; //px
function scrollWrap(e) {
let scrollCoord = wrapper.scrollLeft; // horizontal scroll value
boxes.forEach((box, index) => {
let leftMarginStop = (index) * leftMargin; // calculation for left margin stop (60, 120, 180,...)
const boxCoord = box.getBoundingClientRect();
const leftSideOfCurrent = boxCoord.left; // coordinarion of left side of panel
const rightSideOfCurrent = boxCoord.right; // coordinarion of right side of panel
const leftSideOfNextItem = box.nextElementSibling.getBoundingClientRect().left; // coordinarion of left side of NEXT panel
box.style.position = "sticky";
box.style.left = `${leftMarginStop}px`;
// controll shadow of first element
scrollCoord > 0 ? boxes[1].classList.add("shadow") : boxes[1].classList.remove("shadow");
// controll shadow of all 0+ elements
if (leftSideOfCurrent <= leftMarginStop) { // if left side of pannel is less than margin 60, 120, 180,...
box.nextElementSibling.classList.add("shadow");
}
// controll removal of shadow of all 0+ elements
if (leftSideOfNextItem === rightSideOfCurrent) {
box.nextElementSibling.classList.remove("shadow");
}
// when panel 5 reach left margin, left margin change from 60 to 30 to all panels
if (boxes[4] && leftSideOfCurrent < leftMarginStop) {
console.log("helo");
}
});
}
wrapper.addEventListener("scroll", scrollWrap);
body {
margin: 0;
padding: 0;
}
.wrapper, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
position: sticky;
height: 750px;
z-index: 1;
}
.wrapper {
width: 1442px;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
display: flex;
overflow: scroll;
}
.wrapper .box0 {
min-width: 357px;
background-color: #1a1a1a;
}
.wrapper .box1 {
min-width: 357px;
background-color: #333;
}
.wrapper .box2 {
min-width: 702px;
background-color: #4d4d4d;
}
.wrapper .box3 {
min-width: 630px;
background-color: #666;
}
.wrapper .box4 {
min-width: 630px;
background-color: #808080;
}
.wrapper .box5 {
min-width: 357px;
background-color: #999;
}
.wrapper .box6 {
min-width: 630px;
background-color: #b3b3b3;
}
.wrapper .box7 {
min-width: 630px;
background-color: #ccc;
}
.shadow {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1.2);
-webkit-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
-moz-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
-o-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
}
<div class="wrapper">
<div class="box box0"></div>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
</div>
Tips for your code:
In your CSS code, the wrapper element has a width property. This
causes the page and the wrapper element to have a scrollbars. So,
remove it.
You do not need to use javascript to add stickiness to the
boxes. The only CSS will do this for you. You need JavaScript only
for add the left property and shadow to the boxes.
Don’t try to use overflow: auto|scroll|hidden on the parent element
of a position:sticky element. It completely breaks the stickiness.
overflow: visible is fine. See the code snippet below.
In your JavaScript code, the flag variant value, always is true, So
the shadow class can't remove from elements.
Other notes:
If you’re wanting to use position:absolute on an element inside of
a sticky element you have to be careful. If your app is running in
an older browser that doesn’t support position:sticky, then that
sticky element won’t act like a relative positioned element. So
the absolute positioned element will skip it and look up the DOM
tree until it finds the next non-static element (absolute / relative / fixed position), defaulting to the html element if none
found. In other words, your absolute positioned element is going
to be in a way different place on the screen than you expected it to
be.
position: sticky; is supported in a lot of browsers, but not yet
in Edge. IE doesn’t matter at this point. There are many
polyfills out there if you absolutely have to have this behavior,
but they all use JavaScript. A better option is to design your app
so that sticky position is a slick addition, but the app still
functions without it.
Example:
const boxes = Array.from( document.querySelectorAll( '.box' ) ),
scroller = document.querySelector( '.scroller' ),
leftMargin = 30,
length = boxes.length - 1;
function scrollWrap() {
boxes.forEach( function( box, index ) {
let leftMarginStop = index * leftMargin;
const boxCoord = box.getBoundingClientRect();
let leftCoordPanel = boxCoord.left;
if ( leftCoordPanel <= leftMarginStop ) {
box.style.left = leftMarginStop + 'px';
if ( index < length ) boxes[ index + 1 ].classList.add( 'shadow' )
if ( index == 0 && boxes[ 1 ].getBoundingClientRect().left == box.offsetWidth ) boxes[ 1 ].classList.remove( 'shadow' )
} else {
box.style.left = 0;
if ( index < length ) boxes[ index + 1 ].classList.remove( 'shadow' )
}
} );
}
scroller.addEventListener( 'scroll', scrollWrap )
html,
body {
margin: 0;
height: 100%
}
.scroller {
height: 100%;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden
}
.wrapper {
height: 100%;
display: flex
}
.box {
min-width: 630px;
height: 100%;
position: -webkit-sticky;
position: sticky;
left: 0 /* <-- become sticky once touching left edge */
}
.box1 {
min-width: 357px;
background: #1a1a1a url(https://cdn.pixabay.com/photo/2015/12/10/16/09/seamless-pattern-1086662__340.jpg)
}
.box2 {
min-width: 357px;
background: #333 url(https://cdn.pixabay.com/photo/2015/12/18/23/46/template-1099298__340.png)
}
.box3 {
min-width: 702px;
background: #4d4d4d url(https://cdn.pixabay.com/photo/2014/07/28/16/00/pattern-403769__340.png)
}
.box4 {
background: #666 url(https://cdn.pixabay.com/photo/2017/06/10/03/14/damask-2388884__340.png)
}
.box5 {
background: #808080 url(https://cdn.pixabay.com/photo/2015/12/12/17/34/seamless-pattern-1089797__340.png)
}
.box6 {
min-width: 357px;
background: #999 url(https://cdn.pixabay.com/photo/2016/03/06/16/23/background-1240686__340.png)
}
.box7 {
background: #b3b3b3 url(https://cdn.pixabay.com/photo/2018/04/24/05/00/backdrop-3346304__340.png)
}
.box8 {
background: #ccc url(https://cdn.pixabay.com/photo/2016/04/01/09/03/floral-1299131__340.png)
}
.shadow {
box-shadow: -10px 0px 40px rgba(0, 0, 0, 1);
}
<div class="scroller">
<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
</div>
</div>
About your updated code:
the following line in your jS code:
const leftSideOfNextItem = box.nextElementSibling.getBoundingClientRect().left;
causes an error. Because, when index become 8, box.nextElementSibling can't retrieve any element. So you can change it to this:
const leftSideOfNextItem = ( index < boxes.length - 1 ) ? box.nextElementSibling.getBoundingClientRect().left : 0;
Also at the end of your JS code, the following code snippet:
if (index[4] && leftSideOfCurrent < leftMarginStop) {
console.log("helo");
}
must change to:
// when panel 5 reach left margin, left margin change from 60 to 30 to all panels
if (index == 4 && leftSideOfCurrent <= leftMarginStop) {
console.log("helo");
leftMargin = 30
}
Also you must change const leftMargin = 60; to var leftMargin = 60;
Updated code:
const boxes = Array.from(document.querySelectorAll(".box"));
const wrapper = document.querySelector(".wrapper");
var leftMargin = 60; //px
function scrollWrap(e) {
let scrollCoord = wrapper.scrollLeft; // horizontal scroll value
boxes.forEach((box, index) => {
let leftMarginStop = (index) * leftMargin; // calculation for left margin stop (60, 120, 180,...)
const boxCoord = box.getBoundingClientRect();
const leftSideOfCurrent = boxCoord.left; // coordinarion of left side of panel
const rightSideOfCurrent = boxCoord.right; // coordinarion of right side of panel
const leftSideOfNextItem = ( index < boxes.length - 1 ) ? box.nextElementSibling.getBoundingClientRect().left: 0; // coordinarion of left side of NEXT panel
box.style.position = "sticky";
box.style.left = `${leftMarginStop}px`;
// controll shadow of first element
scrollCoord > 0 ? boxes[1].classList.add("shadow") : boxes[1].classList.remove("shadow");
// controll shadow of all 0+ elements
if (leftSideOfCurrent <= leftMarginStop) { // if left side of pannel is less than margin 60, 120, 180,...
box.nextElementSibling.classList.add("shadow");
}
// controll removal of shadow of all 0+ elements
if (leftSideOfNextItem === rightSideOfCurrent) {
box.nextElementSibling.classList.remove("shadow");
}
// when panel 5 reach left margin, left margin change from 60 to 30 to all panels
if (index == 4 && leftSideOfCurrent <= leftMarginStop) {
console.log("helo");
leftMargin = 30
}
});
}
wrapper.addEventListener("scroll", scrollWrap);
body {
margin: 0;
padding: 0;
}
.wrapper, .box0, .box1, .box2, .box3, .box4, .box5, .box6, .box7 {
position: sticky;
height: 750px;
z-index: 1;
}
.wrapper {
width: 1442px;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
display: flex;
overflow: scroll;
}
.wrapper .box0 {
min-width: 357px;
background-color: #1a1a1a;
}
.wrapper .box1 {
min-width: 357px;
background-color: #333;
}
.wrapper .box2 {
min-width: 702px;
background-color: #4d4d4d;
}
.wrapper .box3 {
min-width: 630px;
background-color: #666;
}
.wrapper .box4 {
min-width: 630px;
background-color: #808080;
}
.wrapper .box5 {
min-width: 357px;
background-color: #999;
}
.wrapper .box6 {
min-width: 630px;
background-color: #b3b3b3;
}
.wrapper .box7 {
min-width: 630px;
background-color: #ccc;
}
.shadow {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1.2);
-webkit-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
-moz-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
-o-transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
transition: box-shadow 0.2s cubic-bezier(0.4,-0.01, 0, 0.98);
}
/* To make the console visible. */
.box0 {
height: 700px;
)
<div class="wrapper">
<div class="box box0"></div>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
</div>
This was helpful. I know for error but could not fix it. I have set let leftMargin = 60; i use let instead var.
I am working on the margins, if the 5th panel reaches the left margin the margin of all panels get 30px. I did it also for reverse:
if (index > 4 && leftSideOfCurrent <= leftMarginStop) {
leftMargin = 30;
} else if (index < 5 && leftSideOfCurrent > leftMarginStop) {
leftMargin = 60;
}
But now when 5th panel reaches left margin, the panels less than 5 get EACH transitioned seperately instead of all, but when the 5th element is no longer in left margin, all gets transitioned at same time. Why is it like that? I do not understand. Can you explain please?

jQuery: re-arranging list items using eq

I'm working on a navigation bar with 3 items. When you click an item, the item order should re-arrange so the clicked item is at the center (horizontal navbar). Here's the code so far:
$('li').mousedown(function(e){
$('li').addClass('flanking');
$(this).removeClass('flanking');
$('ul li:eq(0)').after($(this));
if( $(this) == '(ul li:eq(0)' ){
$('ul li:eq(2)').prependTo('ul');
};
});
This works for re-arranging the second and last place list items of the three, but not if you click the first. I've tried changing the if statement (intended to catch if the first item in the list is clicked) to the following
if( $(this) == $('ul li:eq(0)') ){
$('ul li:eq(2)').prependTo('ul');
};
Which doesn't work either. How can I check if the clicked 'li' is the first in the 'ul', and then move it to the middle? Thanks for reading.
EDIT: See Jaak Kütt's answer for a scalable solution and working demo, Gokhan Arik's using eq and to the correct syntax for the if statement, and Birrel's for some pretty awesome animation.
Edit: Came up with a more generic solution which doesn't care about how many elements are in the list and places the clicked element in the middle (or closest to the center if there is an even number of elements) while pushing the elements between the from-to points in the direction (top-bottom) it came from.
This jsFiddle example features 4 different-length lists (in <li> and <p> sibling examples) and less line breaks.
$('li').mousedown(function (e) {
var self = $(this),
length = self.siblings().length + 1,
middle = length / 2 - 1,
list = self.parent().children(),
i = self.index() - 1;
if (length % 2) {
$()[i < middle ? 'after' : 'before'].call(
list.eq(Math.round(middle)),
self
);
} else {
list.eq(
Math[i < middle ? 'ceil' : 'floor'].call(null, middle)
).after(self);
}
});
PS1: removed the "flanking" class business OP had from the example as it was not really relevant to the rest of the functuality.
PS2: any efforts to fine-tune the algebra involved will have my thanks :D
Change your if statement to this,
if( $(this)[0] == $('ul li:eq(0)')[0] ){
$('ul li:eq(2)').prependTo('ul');
};
You are making mistake when you compare things. jQuery selector returns array of objects.
Here is one with animation, works properly now in Chrome.
HTML:
<div class="wrapper">
<ul>
<li class="flank_left">1</li>
<li class="middle">2</li>
<li class="flank_right">3</li>
</ul>
</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
.wrapper {
width: 310px;
position: relative;
margin: 10px;
}
ul li {
display: block;
width: 100px;
height: 25 px;
background: #099;
cursor: pointer;
float: left;
}
.flank_left {
position: absolute;
top: 0px;
left: 0px;
}
.flank_right {
position: absolute;
top: 0px;
left: 210px;
}
.middle {
position: absolute;
top: 0px;
left: 105px;
}
JavaScript:
$('li').click(function () {
// If not middle element and if not animated...
if (!$(this).hasClass('middle') && !$('.middle').is(':animated')) {
if($(this).hasClass("flank_left") ){ // If flank_left
$( this ).switchClass( "flank_left", "middle", 1000);
$( '.middle' ).switchClass( "middle", "flank_left", 1000);
}else{ // if flank_right
$( this ).switchClass( "flank_right", "middle", 1000);
$( '.middle' ).switchClass( "middle", "flank_right", 1000);
}
}
});
NOTE: There are TWO external resources that you need for this. You can find them and download them here and here
I have implemented a re-arranging of list items with animation. The requirement was that I have five elements:
1 2 3 4 5
and rearrange order like, when click on 1st element it place the position in center like this:
5 4 1 2 3
you can check my fiddle: Jsfiddle
$('.horizontal li').on('click', function (e) {
$(this).addClass('active').siblings().removeClass('active');
var tparent = $(this).parent();
var childs = tparent.children().length;
var eachWidth = this.clientWidth + 10;
var middle = eachWidth * (parseInt(childs / 2));
var rowChild = $(this).parent().children('li');
var currentIndex = rowChild.index($(this));
rowChild.each(function (li) {
if ($(this).attr("POS")) {
cp = $(this).attr("POS");
} else {
$(this).attr("POS", li);
}
});
function animateEach() {
rowChild.each(function (li) {
var _minePos = $(this).position().left;
var cp = $(this).attr("POS");
var _newPos = cp * eachWidth;
$(this).animate({
left: (cp - li) * eachWidth,
}, 40, function () {
// checkPOS();
});
});
setTimeout(checkPOS(true), 40);
}
var currentelement = $(this);
var currentIIN = $(this).attr("POS");
function checkPOS(ee) {
if (currentIIN != 2) {
rowChild.each(function (li) {
var eachPOS = $(this).attr("POS");
if (eachPOS >= 4) {
$(this).attr("POS", 0);
} else {
$(this).attr("POS", parseInt(eachPOS) + 1);
}
});
currentIIN = currentelement.attr("POS");
animateEach();
} else {
if (ee) currentelement.addClass('active');
}
}
checkPOS();
p {
margin: 1px;
cursor: pointer;
}
li {
cursor: pointer;
}
ul.horizontal {
clear: both;
display: block;
height: 40px;
}
ul.horizontal li {
float: left;
/*background: #ccc;*/
display: block;
margin-left: 10px;
padding: 5px;
position: relative;
}
.ul.horizontal .li.a {
border:2px solid #fb7d1e;
font-size: 50px;
}
.horizontal li.active {
/*background:silver;*/
font-weight:bold;
color:blueviolet;
font-size: 20px;
/*height: 150px;*/
/*width:150px;*/
webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
/*border:1px solid ;*/
/*border-radius: 1em;*/
-webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
-moz-box-shadow: 0 58px 36px -56px #7ac9ff;
box-shadow: 0 58px 36px -56px #7ac9ff;
}
/*background: #ccc;*/
display: block;
margin-left: 10px;
padding: 5px;
position: relative;
}
.ul.horizontal .li.a {
border:2px solid #fb7d1e;
font-size: 50px;
}
.horizontal li.active {
/*background:silver;*/
font-weight:bold;
color:blueviolet;
font-size: 20px;
/*height: 150px;*/
/*width:150px;*/
webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
/*border:1px solid ;*/
/*border-radius: 1em;*/
-webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
-moz-box-shadow: 0 58px 36px -56px #7ac9ff;
box-shadow: 0 58px 36px -56px #7ac9ff;
}
Check my Jsfiddle

IE7 Modal dialog - Positioning wrong?

Update
I found the actual issue.
In my code I am referencing the height of the overlay,
In all browsers except IE7 this is the same as the window size, however in IE7 this is the document size.
So I changed it to reference the window size and it works :).
So my question now is, Why does IE7 do this, and am I correct is assuming IE7 is the foul ball here?
Original
I am creating a modal dialog script (for my own use).
The code works perfectly in.
Google chrome,
Firefox,
IE8+
However in IE7 The positioning is all wrong.
Example
These are the positioning values I get in IE9 vs IE7 (keep in mind that the values are smaller than a normal window as i have the dev tools open.)
IE7
left: 367px;
top: 1409px;
IE9
left: 369.5px;
top: 122.5px;
What do I need to do to fix this?
The CSS
Note that this css has some strange rules such as the body tag for testing purposes only.
Note that I am aware that rgba, box-shadow etc does not work in css3 supportless browsers,
I will fix this when the dialog functions properly.
body {
padding: 0;
margin: 0;
color: #fff;
height: 3000px;
}
#modal-overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
}
#modal-dialog {
display: none;
background: #000;
border-bottom: 1px solid #141414;
border-right: 1px solid #141414;
border-top: 1px solid #121212;
border-left: 1px solid #121212;
position: absolute;
z-index: 99999;
-webkit-box-shadow: 3px 3px 10px #000000;
-moz-box-shadow: 3px 3px 10px #000000;
box-shadow: 3px 3px 10px #000000;
}
#modal-element{
margin-top: 16px;
overflow-x: hidden;
overflow-y: auto;
}
#test, #test2 {
display: none;
width: 800px;
padding: 5px;
}
#test2 {
width: 600px;
}
#modal-close {
position: absolute;
background-image: url('close.png');
width: 16px;
height: 16px;
top: -5px;
right: -5px;
cursor: pointer;
}
#modal-title {
position: absolute;
top: -10px;
left: 5px;
color: #fff;
font-size: 16px;
font-weight: bold;
}
#modal-close:hover {
-webkit-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
-moz-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
}
#modal-close:active {
-webkit-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
-moz-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
}
The Javascript
(function($) {
$.widget("hailwood.modal", {
options: {
width: null,
height: null,
title: '',
closeOnEscape: true,
modal: true
},
self: {},
_create: function() {
//setup our elements
var self = this;
this.body = $('body');
this.content = self.element;
this.place = $('<div id="modal-place" style="display:none;"></div>');
this.dialog = $('<div id="modal-dialog"><div id="modal-element"></div></div>');
this.stuff = $('#modal-element', this.dialog);
this.overlay = $('<div id="modal-overlay"></div>');
this.title = $('<div id="modal-title">' + this.options.title + '</div>');
this.closeButton = $('<div id="modal-close"></div>');
//shove the placeholder element in
this.content.after(this.place);
//capture width and height
this.orig_width = (this.options.width === null ? this.content.outerWidth(true) : this.options.width);
this.orig_height = (this.options.height === null ? this.content.outerHeight(true) : this.options.height);
//insert elements into the dom
this.body.prepend(
this.overlay.prepend(
this.dialog.prepend(
this.stuff.prepend(this.content)
)
.prepend(this.closeButton)
.prepend(this.title)));
//make the content visible
this.content.show();
this.refresh(this);
//show the overlay and dialog
this.overlay.fadeIn('medium', function(){
self.dialog.show('slide', {direction: 'down'}, 'medium');
});
//setup the resize handler
$(window).resize(function() {
self.refresh();
});
this.closeButton.click(function() {
self.close();
});
if (this.options.closeOnEscape)
$(document).bind('keyup.hailwood.modal', function(e){
if (e.keyCode == 27)
self.close();
});
//setup close handler
this.self = this;
},
close: function() {
this.destroy();
},
refresh: function() {
var self = this;
if (self.overlay.length == 0 || self.dialog.length == 0)
return false;
self.height = self.orig_height;
self.width = self.orig_width;
//make an adjustment to the height if it is bigger than the overlay
var s1 = self.height;
self.height = (self.height > self.overlay.height() ? self.overlay.height() - 20 : self.height);
var diff = (s1 === self.height ? 0 : 16);
//set the dialog height and width
self.dialog.height(self.height);
self.dialog.width(self.width);
self.stuff.height(self.height -diff);
self.stuff.width(self.width);
//position the dialog
self.left = (self.overlay.width() / 2) - (self.dialog.outerWidth() / 2);
self.top = (self.overlay.height() / 2) - (self.dialog.outerHeight() / 2);
self.dialog.css({left : self.left, top : self.top});
},
destroy: function() {
var self = this;
self.dialog.hide('slide', {direction: 'down'} ,'medium', function() {
self.place.after(self.content.hide());
self.place.remove();
self.dialog.remove();
$(window).unbind('.hailwood.modal');
$(document).unbind('hailwood.modal');
self.overlay.fadeOut('medium', function() {
self.overlay.remove();
});
});
$.Widget.prototype.destroy.call(this);
}
});
/*
* Remember what I said in the first comment?
* we pass in jQuery here so it gets aliased as $
*/
})(jQuery);
Try removing this line:
body {
height: 3000px;
}
Didn't affect FF when I tested, and I really don't see a use for it anyways.
It's always best to remove unnecessary code when you're trying to get CSS stuff to work so you can nail down the source of the problem, unless you think that box-shadow might be related to your positioning problem.

Categories