I stumbple upon this Javascript flip effect page.
When I inspect its obfuscated source code, I can not find css property transform or rotate .
I want to know how the flip effect is achieved. What CSS properties are involved?
$(document).ready(function() {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').click(function() {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false)
} else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function() {
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
body {
/* Setting default text color, background and a font stack */
font-size: 0.825em;
color: #666;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.sponsorListHolder {
margin-bottom: 30px;
}
.sponsor {
width: 180px;
height: 180px;
float: left;
margin: 4px;
/* Giving the sponsor div a relative positioning: */
position: relative;
cursor: pointer;
}
.sponsorFlip {
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #ddd;
background: url("img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover {
border: 1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow: 0 0 30px #999 inset;
-webkit-box-shadow: 0 0 30px #999 inset;
box-shadow: 0 0 30px #999 inset;
}
.sponsorFlip img {
/* Centering the logo image in the middle of the .sponsorFlip div */
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -70px;
}
.sponsorData {
/* Hiding the .sponsorData div */
display: none;
}
.sponsorDescription {
font-size: 11px;
padding: 50px 10px 20px 20px;
font-style: italic;
}
.sponsorURL {
font-size: 10px;
font-weight: bold;
padding-left: 20px;
}
.clear {
/* This class clears the floats */
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/jquery.flip.min.js"></script>
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="data:image/png;base64,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">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
The company that redefined web search.
</div>
<div class="sponsorURL">
http://www.google.com/
</div>
</div>
</div>
It's a jQuery plugin they use to achieve this result. It's called jquery.flip.min.js 😉
• Here is a more legible version of their JavaScript code:
eval(function(p, a, c, k, e, r) {
e = function(c) {
return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
};
if (!''.replace(/^/, String)) {
while (c--) r[e(c)] = k[c] || e(c);
k = [
function(e) {
return r[e]
}
];
e = function() {
return '\\w+'
};
c = 1
};
while (c--)
if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
return p
}('(5($){5 H(a){a.1D.1f[a.1E]=1F(a.1G,10)+a.1H}6 j=5(a){1I({1J:"1g.Z.1K 1L 1M",1N:a})};6 k=5(){7(/*#1O!#*/11&&(1P 1Q.1h.1f.1R==="1S"))};6 l={1T:[0,4,4],1U:[1i,4,4],1V:[1j,1j,1W],1X:[0,0,0],1Y:[0,0,4],1Z:[1k,1l,1l],20:[0,4,4],21:[0,0,A],22:[0,A,A],23:[12,12,12],24:[0,13,0],26:[27,28,1m],29:[A,0,A],2a:[2b,1m,2c],2d:[4,1n,0],2e:[2f,2g,2h],2i:[A,0,0],2j:[2k,2l,2m],2n:[2o,0,R],2p:[4,0,4],2q:[4,2r,0],2s:[0,t,0],2t:[2u,0,2v],2w:[1i,1o,1n],2x:[2y,2z,1o],2A:[1p,4,4],2B:[1q,2C,1q],2D:[R,R,R],2E:[4,2F,2G],2H:[4,4,1p],2I:[0,4,0],2J:[4,0,4],2K:[t,0,0],2L:[0,0,t],2M:[t,t,0],2N:[4,1k,0],2O:[4,S,2P],2Q:[t,0,t],2R:[t,0,t],2S:[4,0,0],2T:[S,S,S],2U:[4,4,4],2V:[4,4,0],9:[4,4,4]};6 m=5(a){T(a&&a.1r("#")==-1&&a.1r("(")==-1){7"2W("+l[a].2X()+")"}2Y{7 a}};$.2Z($.30.31,{u:H,v:H,w:H,x:H});$.1s.32=5(){7 U.1t(5(){6 a=$(U);a.Z(a.B(\'1u\'))})};$.1s.Z=5(i){7 U.1t(5(){6 c=$(U),3,$8,C,14,15,16=k();T(c.B(\'V\')){7 11}6 e={I:(5(a){33(a){W"X":7"Y";W"Y":7"X";W"17":7"18";W"18":7"17";34:7"Y"}})(i.I),y:m(i.D)||"#E",D:m(i.y)||c.z("19-D"),1v:c.J(),F:i.F||1w,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};c.B(\'1u\',e).B(\'V\',1).B(\'35\',e);3={s:c.s(),n:c.n(),y:m(i.y)||c.z("19-D"),1x:c.z("36-37")||"38",I:i.I||"X",G:m(i.D)||"#E",F:i.F||1w,o:c.1y().o,p:c.1y().p,1z:i.1v||39,9:"9",1a:i.1a||11,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};16&&(3.9="#3a");$8=c.z("1b","3b").8(3c).B(\'V\',1).3d("1h").J("").z({1b:"1A",3e:"3f",p:3.p,o:3.o,3g:0,3h:3i});6 f=5(){7{1B:3.9,1x:0,3j:0,u:0,w:0,x:0,v:0,N:3.9,O:3.9,P:3.9,Q:3.9,19:"3k",3l:\'3m\',n:0,s:0}};6 g=5(){6 a=(3.n/13)*25;6 b=f();b.s=3.s;7{"q":b,"1c":{u:0,w:a,x:a,v:0,N:\'#E\',O:\'#E\',o:(3.o+(3.n/2)),p:(3.p-a)},"r":{v:0,u:0,w:0,x:0,N:3.9,O:3.9,o:3.o,p:3.p}}};6 h=5(){6 a=(3.n/13)*25;6 b=f();b.n=3.n;7{"q":b,"1c":{u:a,w:0,x:0,v:a,P:\'#E\',Q:\'#E\',o:3.o-a,p:3.p+(3.s/2)},"r":{u:0,w:0,x:0,v:0,P:3.9,Q:3.9,o:3.o,p:3.p}}};14={"X":5(){6 d=g();d.q.u=3.n;d.q.N=3.y;d.r.v=3.n;d.r.O=3.G;7 d},"Y":5(){6 d=g();d.q.v=3.n;d.q.O=3.y;d.r.u=3.n;d.r.N=3.G;7 d},"17":5(){6 d=h();d.q.w=3.s;d.q.P=3.y;d.r.x=3.s;d.r.Q=3.G;7 d},"18":5(){6 d=h();d.q.x=3.s;d.q.Q=3.y;d.r.w=3.s;d.r.P=3.G;7 d}};C=14[3.I]();16&&(C.q.3n="3o(D="+3.9+")");15=5(){6 a=3.1z;7 a&&a.1g?a.J():a};$8.1d(5(){3.K($8,c);$8.J(\'\').z(C.q);$8.1e()});$8.1C(C.1c,3.F);$8.1d(5(){3.M($8,c);$8.1e()});$8.1C(C.r,3.F);$8.1d(5(){T(!3.1a){c.z({1B:3.G})}c.z({1b:"1A"});6 a=15();T(a){c.J(a)}$8.3p();3.L($8,c);c.3q(\'V\');$8.1e()})})}})(3r);', 62, 214, '|||flipObj|255|function|var|return|clone|transparent||||||||||||||height|top|left|start|second|width|128|borderTopWidth|borderBottomWidth|borderLeftWidth|borderRightWidth|bgColor|css|139|data|dirOption|color|999|speed|toColor|int_prop|direction|html|onBefore|onEnd|onAnimation|borderTopColor|borderBottomColor|borderLeftColor|borderRightColor|211|192|if|this|flipLock|case|tb|bt|flip||false|169|100|dirOptions|newContent|ie6|lr|rl|background|dontChangeColor|visibility|first|queue|dequeue|style|jquery|body|240|245|165|42|107|140|230|224|144|indexOf|fn|each|flipRevertedSettings|content|500|fontSize|offset|target|visible|backgroundColor|animate|elem|prop|parseInt|now|unit|throw|name|js|plugin|error|message|cc_on|typeof|document|maxHeight|undefined|aqua|azure|beige|220|black|blue|brown|cyan|darkblue|darkcyan|darkgrey|darkgreen||darkkhaki|189|183|darkmagenta|darkolivegreen|85|47|darkorange|darkorchid|153|50|204|darkred|darksalmon|233|150|122|darkviolet|148|fuchsia|gold|215|green|indigo|75|130|khaki|lightblue|173|216|lightcyan|lightgreen|238|lightgrey|lightpink|182|193|lightyellow|lime|magenta|maroon|navy|olive|orange|pink|203|purple|violet|red|silver|white|yellow|rgb|toString|else|extend|fx|step|revertFlip|switch|default|flipSettings|font|size|12px|null|123456|hidden|true|appendTo|position|absolute|margin|zIndex|9999|lineHeight|none|borderStyle|solid|filter|chroma|remove|removeData|jQuery'.split('|'), 0, {}))
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>
I have a script to draw a selection box over a grid (just a .png image) however I have an error where the selection box is drawn in the wrong place.
I think it's because the script which the mousedown position uses calculates top and left on page load. If the page is resized before creating a selection box, it uses the original calculations of top and left and is therefore not in the correct position.
Is there a way to fix this problem without completely bastardising my script?
Below is the code used along with a .zip and a jsFiddle, thank you for your help!
jsFiddle
.zip
CSS:
body{
background-color: #3AB3F0;
}
#board-background{
width: 1000px;
height: 1000px;
padding: 25px 25px 25px 25px;
margin: 25px auto 25px;
position: relative;
background: url(https://abs.twimg.com/a/1366134123/t1/img/wash-white-30.png);
border: 0px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#board {
position: absolute;
background-color: #FFF;
z-index: 1;
width: 1000px;
height: 1000px;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
#board img {
position: absolute;
z-index: 2;
user-drag: none;
-moz-user-select: none;
-webkit-user-drag: none;
}
#selectionBox {
position: absolute;
z-index: 3;
display: none;
background-color: red;
min-width: 0px;
min-height: 0px;
width: 10px;
height: 10px;
opacity: 0.8;
}
HTML:
<html>
<head>
<link href="css/test.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script type="text/javascript" src="js/board_script.js"></script>
</head>
<body>
</body>
</html>
JS:
// GRID CREATION SCRIPT //
// -------------------- //
function creategrid(){
//Outside background for the board
var BoardBackground = document.createElement('div');
BoardBackground.id = 'board-background';
BoardBackground.class = 'board-background';
document.body.appendChild(BoardBackground);
//Generated image
var Board = document.createElement("div");
Board.id = 'board';
Board.className = 'board';
BoardBackground.appendChild(Board);
//grid image
var grid = document.createElement("img");
grid.id = 'grid';
grid.className = 'grid';
grid.src = "media/grid.png";
Board.appendChild(grid);
}
// Selection Box Script //
// -------------------- //
var isDragging = false,
dragStart,
cellSpacing = 10,
gridOffset,
selectionBox;
function getMousePos (e) {
return {
'left': Math.floor((e.pageX - gridOffset.left) / cellSpacing) * cellSpacing .toFixed( 0 ),
'top': Math.floor((e.pageY - gridOffset.top) / cellSpacing) * cellSpacing .toFixed( 0 )
};
};
$(document).ready(function(){
creategrid(10);
gridOffset = $('#board').offset();
selectionBox = $('<div>').attr({id: 'selectionBox'})
.appendTo($('#board'));
$('#board').on('mousedown', function(e){
isDragging = true;
var pos = getMousePos(e);
dragStart = pos;
selectionBox.css({
left: pos.left,
top: pos.top,
width: 10,
height: 10
}).show();
});
$('#board').on('mousemove', function(e){
if(!isDragging)
return false;
var pos = getMousePos(e);
var diff = {
'left': pos.left - dragStart.left,
'top': pos.top - dragStart.top
};
selectionBox.css({
left: Math.min(pos.left, dragStart.left),
top: Math.min(pos.top, dragStart.top),
width: Math.abs(diff.left),
height: Math.abs(diff.top)
});
});
$('#board').on('mouseup', function(e){
isDragging = false;
});
});
Media:
(I need 10 rep to post a third link, so here's plaintext and 'code')
oi43.tinypic.com/33opjtd.jpg
[grid.png](http://oi43.tinypic.com/33opjtd.jpg "grid lined image with transparent background")
Other things that I need help with:
another minor error is the fact that, when selecting to the left and the top, the box rotates around the top left corner rather than the bottom right (try selecting the entire grid from the bottom right square).
I think that this has something to do with putting an if statement around the math.abs in the css and subtracting 10px from either side... but I can't work it out
Also in the future I want to be able for the user to upload an image and have it displayed over the selection box (dynamically changing in size) it should be possible by changing the css of the selection box... I might open a separate question for that though.
A single line can solve your selection probleme on resize :
$(window).resize(function(){gridOffset = $('#board').offset();})