We Keep Coding

html5 drag and drop, getting dragged item position

is there any way to get the dragged item position in the dragover/dragenter/dragleave events in terms of X and Y related to the page? i know i can get the mouse position by calling event.clientX or event.clientY, but i would like to know the position of the floating element that created by the drag (the one that can be set by event.dataTransfer.setDragImage() function)
for example this code will print the mouse location when dragging, and not the real offset of the floating element:
function dragOver(event) {
console.log(event.clientX
});

With help of jQuery library you can achieve it,You can use console to print values, just to show you I'm printing positions on screen.
$('#dragMe').draggable(
{
containment: $('body'),
drag: function(){
var position = $(this).position();
var xPos = position.left;
var yPos = position.top;
$('#positionX').text('positionX: ' + xPos);
$('#positionY').text('positionY: ' + yPos);
},
accept: '#dragMe',
over : function(){
$(this).animate({'border-width' : '5px',
'border-color' : '#0f0'
}, 500);
$('#dragThis').draggable('option','containment',$(this));
}
});
#dragMe {
width: 10em;
height: 6em;
padding: 0.5em;
border: 4px solid #ccc;
border-radius: 0 2em 2em 2em;
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
#dropMe {
width: 12em;
height: 12em;
padding: 0.5em;
margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dragMe">
<p>DRAG ME</p>
<ul>
<li id="positionX"></li>
<li id="positionY"></li>
</ul>
</div>
<div id="dropMe"></div>

CSS Flex - When re-sizing wrapper flex item change its width dimension

I am using CSS Flex in order to display three DIVs consequential in a wrapper.
The width dimension for the first DIV (item0) is to 50px.
I need to change the height of the wrapper and keep the original width for item0 and item1 DIVs inside the wrapper.
My current problem is that:
When re-sizing the wrapper, item for flex (item0) get a different width. size
Please click the two buttons in the example to see the change in dimension.
I would like to know:
Why the width size change?
How to maintain the width size for item0 and item2same as my original CSS settings?
Notes:
I understand scroll-bar appears taking space. How I could I keep item0 and item2 at a fix width and item1 stretching to fill up the remaining space? (I have tried to use % but I cannot get the result wanted).
var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');
btn0.addEventListener('click', function(event) {
wrapper.style.height = '25px';
result.value = item0.getBoundingClientRect().width;
});
btn1.addEventListener('click', function(event) {
wrapper.style.height = '350px';
result.value = item0.getBoundingClientRect().width;
});
#wrapper {
width: 250px;
height: 350px;
background-color: gray;
overflow: auto;
}
#flex-container {
display: flex;
}
#item0 {
width: 50px;
background-color: red;
height: 150px;
}
#item1 {
width: 150px;
background-color: orange;
height: 150px;
}
#item2 {
width: 50px;
background-color: pink;
height: 150px;
}
<div id="wrapper">
<div id="flex-container">
<div id="item0" class="item">a
</div>
<div id="item1" class="item">b
</div>
<div id="item2" class="item">c
</div>
</div>
</div>
<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">

Use flex: 0 0 50px for the item0 style.
See jsfiddle
It tells the flexbox layout don't grow and don't shrink and give it a width of 50px.
It is always good to use the flex: property for flexbox items because the default value for it may be different from browser to browser.
(Actually your problem doesn't happen in firefox for example)

When the width of the container is reduced, all child elements are reduced proportionally too.
Add flex: 0 0 auto; to item0 and item2. It disallows element to shrink to its minimum when there is not enough space.
var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');
btn0.addEventListener('click', function(event) {
wrapper.style.height = '25px';
result.value = item0.getBoundingClientRect().width;
});
btn1.addEventListener('click', function(event) {
wrapper.style.height = '350px';
result.value = item0.getBoundingClientRect().width;
});
#wrapper {
width: 250px;
height: 350px;
background-color: gray;
overflow: auto;
}
#flex-container {
display: flex;
}
#item0 {
flex: 0 0 auto;
width: 50px;
background-color: red;
height: 150px;
}
#item1 {
width: 150px;
background-color: orange;
height: 150px;
}
#item2 {
flex: 0 0 auto;
width: 50px;
background-color: pink;
height: 150px;
}
<div id="wrapper">
<div id="flex-container">
<div id="item0" class="item">a
</div>
<div id="item1" class="item">b
</div>
<div id="item2" class="item">c
</div>
</div>
</div>
<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">

Trouble in synchronising and/or adding captions to images using caroufredsel plugin

I am new to this so please bear with me if my question is obviously stupid. I am trying to incorporate the slideshow as shown in this site using caroufredsel http://coolcarousels.frebsite.nl/c/48/
Now I needed to add captions to the images. so after trying to tweak the code unsuccessfully, I created a workaround where I created another carousel for just the captions and synchronized it with the main carousel. It worked that the captions appeared just fine but now I am not able to synchronize it with the click function/feature on the main carousel. if I comment the click function out , it works splendidly, but I need that click function. what am I doing wrong or is there an easier way to do what I want. I went thru the documentation and tried to incorporate a new div with id "item". but then the entire "pager" section disappears etc. I will include the full code here. thanks in advance for the help.
my css looks like this::
html, body {
height: 100%;
padding: 0;
margin: 0px;
}
body {
min-height: 400px;
}
#wrapper {
width: 697px;
height: 400px;
margin: -155px 0 0 -330px;
position: absolute;
top: 270px;
left: 50%;
box-shadow: 0px 1px 20px #c5a101;
border:3px solid #c5a101;
background-color: rgba(246,217,90,0.9);
}
#carousel {
width: 580px;
height: 360px;
overflow: hidden;
position: relative;
z-index: 2;
float:left;
}
#carousel img {
display: block;
float: left;
}
#pager {
width: 112px;
height: 350px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
#pager div {
height: 81px;
width: 100px;
box-shadow: 0px 0px 5px #c5a101;
}
#pager img {
cursor: pointer;
display: block;
height: 81px;
width: 112px;
margin-bottom: 5px;
float: left;
border:3px solid #c5a101;
cursor:default;
}
#texts-wrapper {
width: 700px;
height: 50px;
float: left;
}
#texts > div {
width: 300px;
height: 50px;
position: relative;
float: left;
margin-top: auto;
}
#texts > div > div {
width: 700px;
position: absolute;
left: 2px;
bottom: 5px;
float: right;
padding-top: 25px;
}
#texts a {
color:#083377;
font-family:Trajan Pro;
font-size: 16px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
text-decoration: none;
outline: none;
display: block;
background-color: rgba(248,229,145,0.4);
border: 1px solid rgba(246,217,90,0.4);
width: 700px;
height: 85px;
padding-left: 10px;
}
#texts a:hover {
background-color: rgba(255,208,0,0.9);
box-shadow: 0px 2px 15px #c5a101;
color: rgba(227,75,76,0.7);
}
my html code looks like this::
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="img/building.jpg" width="580" height="350" />
<img src="img/guytalkingtokids.jpg" width="580" height="350" />
<img src="img/group.jpg" width="580" height="350" />
<img src="img/oath.jpg" width="580" height="350" />
<img src="img/finalists.jpg" width="580" height="350" />
</div>
<div id="pager"></div>
</div>
<div id="texts-wrapper">
<div id="texts">
<div>
<a style="text-decoration:none; " href="blank.html" >
<div><p>The red building across the street.</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>How yall doin? blah blah</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>Lotsa ppl!.</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>I put another caption!</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div> <p>Yay! We won?! How?!</p></div></a>
</div>
</div>
</div>
</div>
And my script tag looks like::
$(function() {
var $carousel = $('#carousel'),
$pager = $('#pager');
// gather the thumbnails
var $thumb = $( '<div class="thumb" />' );
$carousel.children().each(function() {
var src = $(this).attr( 'src' );
$thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
});
// duplicate the thumbnails
for (var a = 0; a < $carousel.children().length - 1; a++) {
$pager.append( $thumb.clone() );
}
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 5500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
}
}
});
// create thumb carousels
var $thumbs = $('.thumb');
$thumbs.each(function( i ) {
$(this).carouFredSel({
auto: false,
scroll: {
fx: 'directscroll'
},
responsive:true,
items: {
start: i+1,
visible: 1,
width: 112,
height: 89.6
}
});
// click the carousel---> comment out this portion to disable the click function on small images
$(this).click(function() {
var src = $(this).children().first().attr('src').split('/small/').join('/large/');
$carousel.trigger('slideTo', [$('img[src="' + src + '"]', $carousel), 'next']);
});
});
// comment out the click function and uncomment this section of #texts to have a synchronised carousel with captions but no click function
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
});
Now I used jquery version 1.8.2 and caroufredsel version 6.2.1. thanks again for the help in advance. sorry if my code looks messy as well.Latest update as of 3/22/2014:: I went thru the documentation of the plugin CarouFredSel and stumbled upon one of the settable parameters/ configurations called "synchronise". If I understood it right, I can synchronise 2 carousels to respond to the same event. So i added the line of code "synchronise:{"#carousel"} into the text carousel to tell it to synchronise it with the main carousel...
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
synchronise:{"#carousel"},/*This is the new line I added*/
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
Unfortunately that did not work as well. Now there is no timing pattern as well. everytime I click the small image it just went ahead in position at a random rate. So I am still stuck with the same problem if not making it worse. Thanks for the help in advance.

After fighting with the problem for more than a week, I was able to figure out a solution to my problem. Now it may not be the best solution but it worked and hence I am posting it so that in future if somebody else has the same or similar problem, it may be of help.Now if anyone came up with a solution that works better, I would still like you to post it here for I may want to learn what you did, why you did it and learn from the experience. I dont claim to be an expert programmer. I am still learning and this site has been a great learning tool for me so far.Anyway coming back to the problem, I added this piece of code...
//sais try: synchronise texts and carousel to work together and on click
var index = $(this).triggerHandler( 'currentPosition' );
if ( index == 0 ) {
index = $(this).children().length;
}
// trigger the titles carousel
$('#texts').trigger('slideTo', [ index, 'next' ]);
right here...
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 3500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
/* [ the code goes here!]*/
now with that i was able to synchronise the carousels (#carousel, #texts) together to work with the click function/feature as well. Also I had tried to synchronise the carousel using a synchronise function thats in carouFredSel. Well take that out. It did not work.I dont know if this is going to be useful to anyone else but if it did, thats great. But again if somebody came up with a better solution please do let me know as well. Thanks. Keep up the goo work

Create a HTML Title Box via JS

Is there a way to display a title box without creating a html element with title="something" attribute and moving the mouse over it?
Something like: document.tooltip = "Google";
that would display http://puu.sh/67Fub.jpg without having to move the mouse over the Google image nor needing the image in the first place.

You could do something with CSS, using the :before or :after psuedo-elements (jsfiddle):
<div>Hello world</div>
div {
position: relative;
}
div:hover:after {
content: 'foo bar';
position: absolute;
background: cornsilk;
padding: 10px;
border: 1px solid #222;
box-shadow: 1px 1px 1px 1px #222;
}
To take it a step further, you can do it dynamically like this (just an example):
var text = $('input').val();
$('div').attr('data-content',text);
div:hover:after {
content: attr(data-content);
/*plus all the other stuff*/
}

try this:
<div id="container">
<div style="width:140px;">
<h1 id="text">GOOGLE</h1>
</div>
</div>
js:
var tile = $('<div />').appendTo('#container');
tile.attr('id','tile');
tile.text('google');
tile.css({
'background-color':'cornsilk',
width:'50px',
height:'20px',
'position': 'absolute',
'display': 'none',
'box-shadow': '1px 1px 1px 1px #222',
});
$('#text').on('mouseover',function(e){
tile.show();
tile.css({
'left': e.pageX + 'px',
'top': e.pageY + 'px'
});
});
$('#text').on('mouseout',function(e){
tile.hide();
});

JQuery Masonry -- expand div's over other div's

I'm making something similar to an iphone layout (a bunch of tiles with pictures/numbers that you can click on to get more information). After the layout has been set, I'd like a click-event to expand one of the tiles to be full screen. Right now, it moves the tiles so that the layout is re-adjusted. Is it possible to get masonry to stop rendering so that one tile get's enlarged over the other tiles?
The following is what I've tried (but unsuccessfully). Note: It uses d3.js to generate the div's for masonry to use.
function drawGrid(divname,orders)
{
var mydiv = d3.select(divname);
$(divname).masonry({
itemSelector: '.g1',
isAnimated: true,
//isResizable: true
});
var myd = mydiv.selectAll("div");
var mygs = myd.data(orders,function(d){ return d.orderid;})
.enter().append("div")
.attr("class","g1")
.append("g");
var x1 = mygs.append("div")
.attr("class","tickerdiv")
.text(function(d){ return d.ticker; });
var ActiveOrder = "1";
$(divname+' .g1').click(function() {
//$(this).show('maximised');
console.log("clicked")
$(this).animate({"display":"none","position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"z-index": 1000 }, 1000);
});
var x = [];
x.redraw = function(o)
{
x1.text(function(d){ return d.ticker; });
}
return x;
}
and from the css file:
.g1 { min-height:80px; width: 100px; margin: 15px; float: left; background-color: RGB(223,224,224); border-radius: 10px; vertical-align: middle; text-align: center; padding-top: 20px;}

EDIT Ok, my first answer was not useful here - absolute positioning won't work in case of masonry's/Isotope's relatively positioned container with absolute positioned elemens contained therein; the solution is rather to take the content of a masonry/Isotope element out of the DOM on click and append it temporarily to the body. You can see the basic idea in my dirty swedish sandbox
<!-- masonry/Isotope item large -->
<div class="item large">
<div class="header">
<p>Click here</p>
</div>
<div class="minimised">
<p>Preview</p>
</div>
<div class="maximised">
<p>Content</p>
<button id="screen-overlay-on">Screen overlay on</button>
<div id="screen-overlay-background"></div>
<div id="screen-overlay-content">
<p>Content</p>
<button id="screen-overlay-off">Screen overlay off</button>
</div>​
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#screen-overlay-on').click(function(){
var sob = $('#screen-overlay-background').detach();
var soc = $('#screen-overlay-content').detach();
sob.appendTo('body');
soc.appendTo('body');
$('#screen-overlay-background').toggleClass("active");
$('#screen-overlay-content').toggleClass("active");
});
$('#screen-overlay-background, #screen-overlay-off').click(function(){
$('#screen-overlay-background').toggleClass("active");
$('#screen-overlay-content').toggleClass("active");
});
});
</script>
With CSS like
#screen-overlay-background {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1000;
}
#screen-overlay-content {
display: none;
position: absolute;
top: 50%;
left: 50%;
height: 240px;
width: 320px;
margin: -120px 0 0 -160px;
background-color: #FFF;
z-index: 1000;
}
#screen-overlay-background.active, #screen-overlay-content.active {
display: block;
}

You can add a :hover to the element in css and change the z-index. You could easily change this on click with a class as well...
.item {
z-index:1
}
.item:hover{
z-index:2500;
}