Redefining droppable area after current item is removed - javascript

I have a grid of logo's. You can either double click the logo to get rid of it or you can drag it to a specified square where I would like it to reveal some details about that logo.
Here is the tool in question:
Drag or Hide a Logo
I have two questions if you could please assist me:
When I drag a logo to the droppable square, how would you reccommend I collect information about that specific logo and reveal the information next to the droppable area?
When I double click a logo that has been dropped onto the droppable area, that logo will disappear. After it disappears, how can I redefine that droppable area again and use it for other logos?
If you see any other information I may have screwed up please let me know the better way of executing. Thank you so much!
Here's the jQuery:
<script>
$(document).ready(function() {
$('.imageShowing').dblclick (function() {
$(this).stop().animate({
zIndex: '1',
height: '100',
width: '140',
}, 100, function() {
$(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo })
$(this).stop().animate({
zIndex: '1',
top: '500',
opacity: '0'
}, 700, function() {
$(this).hide("fast");
// Animation complete.
});
});
});
}); //end document.ready
$(init);
function init(){
$('.imageShowing').draggable( {
containment: '#wrapper',
cursor: 'move',
snap: '#droppable',
stop: cardDropped,
start: objectGrabbed,
revert: true,
});
$('#droppable').droppable( {
drop: handleCardDrop,
hoverClass: 'droppableHover',
accept: '.imageShowing'
});
}
function objectGrabbed(event, ui) {
$(this).stop().animate({
zIndex: '100',
},0,function() {
$(this).stop().animate({
opacity: '.5'
}, 500);
});
}
function cardDropped() {
$(this).stop().animate({
opacity: '1',
zIndex: '12'
}, 500);
}
function handleCardDrop( event, ui ) {
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
</script>
And the CSS if you need it:
#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;}
#grid {width: 935px; height: 536px; margin: auto; background: url(images/gridLine.png) repeat-y top; padding:0; position: relative; z-index: 5;} /* height equals 134 X 4. Each horizontal grid is 134 in height and 950px in width */
#logoWrapper {position: absolute; top: 2px; left: 36px }
#logoWrapper ul {text-decoration: none; list-style-type: none; margin:0; padding:0; }
#logoWrapper ul li {list-style-type: none; float: left; position: relative; padding: 0 6px 6px 0; height: 128px; width: 180px; margin: 0;}
#logoWrapper ul li img { margin:0; position: absolute; z-index: 6;}
#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}
#droppableWrapper {border: dashed 5px #666; width: 180px; margin:0 auto; }
#droppable {height: 128px; width: 180px; background: #CCC;};
.droppableHover {background: #333; }

For your first question.. For me it would depend on:
a) how much info you will be displaying,
b) where is that info being stored (in the html? data attributes of logo? ajax?)
To me, this feels like more a design question than anything, but once i know where the data is and where it's going, I would just create a function for retrieving it, putting it in a template, and displaying it on the page. Then hook into your drop callback.
For your second question... It looks like you just need to 'enable' droppable again. Maybe something like $('#droppable').droppable('enable') after your dblclick animation is done, but I would look at the jquery docs for specifics on that.

Related

jQuery draggable moves when dropped

I have set up a simple drag and drop interface which implements the clone functionality. The issue I have is that when the element is dragged to the main canvas and then dropped, it suddenly shifts to the right, rather than dropping exactly where I drag it.
Here is the javascript:
$(function() {
var x = null;
$("#draggable").draggable({
helper: 'clone',
cursor: 'move',
snap: '.snap-target'
});
$("#canvas").droppable({
drop: function(e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
containment: '#canvas',
snap: '.snap-target'
});
x.appendTo('#canvas');
}
}
});
});
I have created a jsfiddle:
https://jsfiddle.net/kuyn6gmc/
If you try and drag the blue box into the main canvas then release the mouse you will see how the box "pops" to the right slightly. When you move the box within the canvas, it works fine. On the fiddle it's not as bad as when it's full width on a browser, I think it's relative to the total width of the viewport.
If anyone knows why this may be happening I would appreciate it :)
Thank you
Michael
The reason this is occuring is because the draggable element is absolutely positioned relative to the viewport while it is being dragged. Once the element is appended, the positioning is relative to the #canvas element (because of position: relative), which is why the element moves when you drop it.
As the other answer suggests, you could remove position: relative from the element, however, that probably won't work in all cases. I'd suggest taking the positioning of the element into account before appending the element.
Updated Example
For instance, you could subtract the offset top/left positioning, as well as the width of the border. In doing so, the #canvas element can still be relatively positioned.
var canvasOffset = {
'top': parseInt($(this).offset().top, 10) + parseInt($(this).css('border-top-width'), 10),
'left': parseInt($(this).offset().left, 10) + parseInt($(this).css('border-left-width'), 10)
}
$draggble.css({
"top": parseInt($draggble.css('top'), 10) - canvasOffset.top + 'px',
"left": parseInt($draggble.css('left'), 10) - canvasOffset.left + 'px'
}).appendTo('#canvas');
You have to put position: relative to the body instead of the canvas.
.draggable { padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; position: relative; }
.small { border: 1px solid slateblue; width: 115px; height: 115px; background: #c5cae9 }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
.text-box { text-align: center; vertical-align: middle; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, serif; font-size: 13px }
#canvas { width: 600px; height: 300px; border: 1px solid #cccccc; margin: auto;
clear: both; }
.draggable-selectors { margin: 10px auto; width: 1000px; }
body { position: relative; margin: 0; }
<body class='snap-target'>

jQuery - Text and Image scrolling effects are not working

http://honghanhdinh.com/
I am currently developing my website and I am running into some troubles with some of the parallax tutorials I am learning.
As you can see, the plane and the words to my name "Hong" appears on on the opening page but the other 2 parts of my name "Hanh Dinh" only appears when beginning to scroll down. In addition, the plane also disappears upon scrolling and flys out from the right to the left.
I don't want the plane to appear upon entering the website but for it to naturally slide out to the left when scrolling down. I also want my full name "Hong Hanh Dinh" to appear upon entering the website--not just the Hong part.
I've tried many things to fix it but I think I'm missing something.
Here is the beginning of HTML code:
<BODY>
<!--Begin about info--!>
<MAIN>
<section id="bg" data-speed="10" data-type="background">
<div id="plane">
<img src="http://www.locanto.info/classifieds/images/airplane.png">
</div>
<div id="parallax2">
<h2 id="center" class="parallax2">Hong</h2>
<h2 id="left" class="parallax2">Hanh</h2>
<h2 id="right" class="parallax2">Dinh</h2>
</div>
</section>
Here is my CSS:
#bg {
background-color: #FFFFFF;
background-size
}
#parallax2 {
height: 800px;
margin-bottom: 600px;
overflow: hidden;
padding-top: 200px;
}
/* Parallax Scrolling text */
#center.parallax2 {
font-size: 175px;
color: #CC3333;
opacity: 0.5;
text-align: center;
left: 200px;
padding: 0;
position: relative;
bottom: 100px;
}
#left.parallax2 {
color: #336699;
font-size: 200px;
text-align: left;
left: 400px;
opacity: 0.75;
overflow: hidden;
position: relative;
}
#right.parallax2 {
color: #C5C3DE;
font-size: 250px;
text-align: right;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 1200px;
bottom: -300px;
}
This is the jQuery for the "Hong Hanh Dinh" scrolling:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#parallax2',
(new TimelineLite()).append([
TweenMax.fromTo($('#left.parallax2'), 1, {
css: {
top: 200
},
immediateRender: true
}, {
css: {
top: -900
}
}),
TweenMax.fromTo($('#right.parallax2'), 1, {
css: {
top: 500
},
immediateRender: true
}, {
css: {
top: -1800
}
})
]), 1000 // scroll duration of tween
);
});
This is the jQuery for the flying plane:
$(document).ready(function() {
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#plane').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
});
});
Please let me know if my error is in the CSS or in the jQuery. Thank you!
I think you could fix this by adding width: 0; and overflow: hidden; to your div#plane. Otherwise, follow these steps:
Step 1:
Remove the img tag from the plane div, it is not needed. Add the id to the img tag itself.
<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">
Step 2:
#plane{
position: fixed;
right: -WIDTH OF IMAGE;
}
Step 3:
$(document).ready(function() {
$(window).scroll(function() {
$('#plane').css({
'right': $(this).scrollTop() - WIDTH OF IMAGE,
});
});
});
Your name "Hanh Dinh" does exist when it loads but it is out of our range of sight, change this line:
css: {
top: 200
}
To a number like -400 and you'll see it'll appear on screen.
(That is for Hanh, for Dinh you'll need a larger number like -900.

How to display non fixed elements above fixed elements

I have a page with both fixed and non fixed elements. I am using a div to make the background blue, and then fading it out to reveal the black background behind it in the html css. The problem is, my skyline image is not fixed, and nothing can push it above the fixed elements, not even z-indexing. What's the appropriate way to push this element above the fixed background div.
The problem in short, is I want my blue sky behind my cities.
Here's the css for the blue background div
.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
}
Here's how I'm fading it out.
$( ".blue" ).delay( 12000 ).fadeOut(2000);
Here's my jsfiddle.
http://jsfiddle.net/wzrjL68s/
Here: http://jsfiddle.net/ctwheels/wzrjL68s/5/
I've also fixed position of elements, etc. as I suppose you intended to position them
HTML
<body>
<div class="blue"></div>
<h2 id="text1">a web design demonstration</h2>
<h3 id="text2">by cory</h3>
<img id="cloud2" src="http://www.rapitech.net/wp-content/uploads/2013/11/tumblr_ms59qmrRWf1s5jjtzo1_r1_500.png">
<img id="jacksonville" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Cincinnati_Skyline_Outline.png" class="img-responsive" alt="Responsive image">
</body>
CSS
html {
background-color: black;
overflow-x: hidden;
}
body {
display: none;
background-color: #6e8eb5;
}
#cloud2 {
margin-top:800px;
left: -100px;
height:150px;
opacity: 0.4;
}
#text1, #text2 {
opacity: 0.0;
color: black;
font-family: Georgia, serif;
color: white;
position: fixed;
margin-bottom: 200px;
width: 75%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align:center;
}
.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
z-index:-100;
}
JS
$("body").fadeIn(2000);
$("html, body").animate({
scrollTop: $(document).height()
}, 8000);
$("#cloud2").animate({
opacity: 0.8,
marginLeft: "110%"
}, 30000);
$("#text1").delay(1500).animate({
opacity: 0.5,
marginTop: "15%"
}, 4000);
$("#text2").delay(5000).animate({
opacity: 0.5,
marginTop: "20%"
}, 4000);
$("#text1").delay(500).animate({
opacity: 0.0,
marginLeft: "60%"
}, 2000);
$("#text2").delay(1500).animate({
opacity: 0.0,
marginLeft: "30%"
}, 2000);
$(".blue").delay(12000).fadeOut(2000);

How do I launch a Lightbox(Fancybox) from a ToolTip(tooltipsy)?

the app I am working on right now requires the user to hover over an icon, which launches a tooltip, which the user can click a link inside of to launch a fancybox with the corresponding product. I am running into the problem of the tooltipster not launching the fancybox.
Here is the code I am currently using.
HTML:
<body class="body">
<div class="main-container">
<div class="column">
<div class="anicontainer">
<a id="p1tooltip" class="overlay" href="javascript:void(0)" >
<img src="icon.png"/>
</a>
</div>
</div>
</div>
CSS:
.main-container {
position: absolute;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
padding: 0;
z-index: -1;
height: 1080px;
width: 1920px;
background-image: url(../bk.png);
background-size: 1920px 1080px;
background-repeat: no-repeat;
display: inline-table;
border: 1px solid #C0C0C0;
border-radius: 5px;
}
.anicontainer {
z-index: 100;
width: 1530px;
height: 1080px;
margin: 0 0 0 0;
padding 0 0 0 0;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
display: table-cell;
vertical-align: top;
}
.column {
display: table-row;
z-index: 100;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
padding: 0;
}
#p1tooltip {
top: 440px;
left: 290px;
}
.overlay {
display: table-cell;
height: auto;
width:auto;
position:absolute;
z-index: 5;
}
First Code I tried JS:
$('#mst').tooltipster({
animation: 'fade',
delay: 100,
trigger: 'hover',
position: 'right',
fixedWidth: 30,
interactive: 'true',
contentAsHTML: 'true',
content: $('<p class="font tt">Title</p><hr><p class="tt font"><a id="p1" href="javascript:void(0)"><img src="icon.png"/></a>Product1</p>')
});
Second Code I tried JS:
$('#p1tooltip').tooltipster({
animation: 'fade',
delay: 100,
trigger: 'hover',
position: 'right',
fixedWidth: 30,
interactive: 'true',
content: $('<p class="font tt">Title:</p><hr><p class="tt font"><a class="fancybox" href="javascript:$.fancybox( {href : '
product.html '} );"><img src="icon.png"/></a>Product1</p>')
});
JSFIDDLE
Your problem is that the Fancybox link inside the tooltipster content option doesn't exist in the DOM when the Fancybox trigger initialises everything.
Solution would be to set your tooltipster content option to an element already on the page (a div inside of a hidden div should work fine), or to reinitialise Fancybox inside the tooltipster functionReady callback option.
Javascript is a functional language, you can just pass a new function back through the options.
Example:
$('#p1tooltip').tooltipster({
functionReady: function () {
$("a.fancybox").fancybox();
}
});
first thing I see : do not use $('<p>aaa</p><p>bbb</p>') but $('<div><p>aaa</p><p>bbb</p></div>'). It's important fot Tooltipster to have only one container tag for all your stuff, it makes a difference in some cases.
If that's not enough, please prepare a JSfiddle, it will be easier to debug for everyone.

changing element id with jQuery not work for my function

want to assign 2 functions to a button when using the click event of jQuery, it will work like this: I have a div that is hidden behind another div when click the button that slides up div with jQuery to animate ... this #show ID shows the div, and the ID #hide hides the div, how can I assign 2 different IDs for the same button? I have done this using the ID attribute and attr ... is changed to #hide, but the function linked to this ID is not performedry
http://jsfiddle.net/dca2b/1/
HTML:
<div class="content"></div>
<div class="footer"></div>
<div class="hiddendiv">
show
</div>
CSS:
.content {
height: 400px;
}
.footer {
display: inline-table;
background: #ff8;
width: 100%;
height: 80px;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
.hiddendiv {
width: 500px;
height: 300px;
background: #252525;
position: relative;
z-index: 1;
top: -120px;
margin: 0 auto;
}
.hiddendiv a {
color: #000;
font-size: 15px;
font-family: sans-serif;
text-decoration: none;
padding-top:5px;
padding-bottom:5px;
padding-left: 20px;
padding-right: 20px;
background: #eee;
border-radius: 10px;
box-shadow: inset 0px 1px 20px 0px #333;
}
.hiddendiv a:hover {
color: #f0f;
}
JQUERY:
$("#show").click(function () {
$(".hiddendiv").animate({
top: "-=250"
}, "slow");
$("#show").attr("id", "hide");
});
$("#hide").click(function () {
$(".hiddendiv").animate({
top: "+=250"
}, "slow");
$("#hide").attr("id", "show");
});
So there are a couple of parts to my answer, bear with me:
(1) The reason it isn't working right now is because when you run $("#hide").click(function() { ..., there aren't yet any elements on the page with the hide id, so the function doesn't get set to run anywhere. One method you can use to get around this is to do the following:
$(".hiddendiv").on('click', '#hide', function() {
...
});
By attaching the click event handler instead to the parent div, whenever the parent sees that the event occurred in a child div with the id of hide, it will run the function on that child div.
(2) You shouldn't be using IDs here. If at some point you have more than one button that needs this functionality on you're page, you'll be in trouble, since an ID should only be used once per page. A class would work much better in this scenario. Then you can do something like:
$(".hiddendiv").on('click','.show', function () {
$(".hiddendiv").animate({
top: "-=250"
}, "slow");
$(".show").addClass('hide').removeClass('show');
});
(3) Finally, it works! But, if we add another hiddendiv to the page, we find that when we click one, it updates all of them. We can fix that by using this. When the function is triggered, the this keyword will refer to the element that you clicked (either with the show or hide class. We can take advantage of that and do the following:
$(".hiddendiv").on('click','.show', function () {
$(this).parent().animate({
top: "-=250"
}, "slow");
$(this).addClass('hide').removeClass('show');
});
$(".hiddendiv").on('click','.hide', function () {
$(this).parent().animate({
top: "+=250"
}, "slow");
$(this).addClass('show').removeClass('hide');
});

Categories

Resources