Printable View
you would think that this code:
would have taken care of thatCode:for (var i=1;i<100;i++){
$( "#draggable" + i ).draggable();
}
something I noticed: "clicking on the back to list" link hides the draggable divs (because they still "belong" to the divs on the left, even though they have been dragged. you may want to add these two lines to the drop function:
Code:$(ui.draggable).appendTo($(this));
$(ui.draggable).css("position","");
I tried implementing the jquery toggle function for 300, 400, and 800 meal tiles but there is a problem when you toggle back and forth. If you try clicking on for example the 300 cal tiles and then dragging the tile to the right side you will see that if you click on it again that it will disappear from the right side as well.
I can't see that happening. This code seems to work OK (only has the 300, 500 and 800 divs)...
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="meal planning, meals" />
<meta name="description" content="recipes, cooking" />
<meta name="robots" content="noindex,nofollow" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://myownmealplanner.com/css/myownmealplanner.css" />
<link rel="stylesheet" type="text/css" href="http://myownmealplanner.com/css/fullcalendar.css" />
<script type="text/javascript" src="http://myownmealplanner.com/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://myownmealplanner.com/js/ui-1.9.1-jquery-ui.js"></script>
<style>
.plans{
text-decoration:underline;
color:blue;
cursor:pointer;
}
.meals{
display:none;
}
.back{
text-decoration:underline;
color:blue;
cursor:pointer;
float:right
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<a href="/users"><img src="http://myownmealplanner.com/img/layout/indian_wedding.jpg" alt="My Own Meal Planner" id="main_pic" /></a></div>
<div id="top_bar">
<span class="top_tabs">
<a href="/pages/home" class="menu_link">Steps</a></span>
<span class="top_tabs">
<a href="/mealplans/add" class="menu_link">Your Meal Planner</a></span>
<span class="top_tabs">
<a href="/mealplans" class="menu_link">Your Meal Plans</a></span>
<span class="top_tabs">
<a href="/calendars/navigate" class="menu_link">Your Meal Calendar</a></span>
<span class="top_tabs">
<a href="/users" class="menu_link">Register or Log In</a></span>
</div>
<div id="home_page">
<div id="meal_planner">
<script type="text/javascript">
$(document).ready(function() {
var selectedBoxes = new Array();
var total = 0;
var userId = parseInt($('#MealplanUserId').val());
$(".draggable_meal").draggable();
$("#droppable_box").droppable({
drop: function(event, ui) {
var data = $(ui.draggable).attr('id');
selectedBoxes.push($(ui.draggable).attr('id'));
$(ui.draggable).appendTo($(this));
$(ui.draggable).css("position","");
for (var i=1;i<100;i++){
if(data == "draggable" + i){
var myInt = parseInt($('#MealplanCalsPerServing' + i).val());
}
}
if ( typeof myInt === 'undefined' || !myInt) {
myInt = parseInt(0);
}
total += parseFloat(myInt);
$('#response').text(total);
},
// Dropped out, remove it
out: function( event, ui ) {
var data = $(ui.draggable).attr('id');
var sub;
sub = $.inArray(data , selectedBoxes )
if (sub >= 0) {
selectedBoxes.splice(sub, 1);
for (var i=1;i<100;i++){
if(data == "draggable" + i){
var myInt = -($('#MealplanCalsPerServing' + i).val());
}
}
if ( typeof myInt === 'undefined' || !myInt) {
myInt = parseInt(0);
}
total += parseFloat(myInt);
$('#response').text(total);
}
}
});
$('#myId').click(function(event) {
$.post("/mealplans/view", ({ data: selectedBoxes, userId: userId, total: total}), function(data, status) {
window.location = "/mealplans/view"
});
});
$('.plans').click(function() {
$("#tab").hide();
$("#meals"+$(this).attr("id").substr(-3)).show();
});
$('.back').click(function() {
$(this).parent().hide();
$("#tab").show();
});
});
</script>
<h1>Meal Planner</h1>
<br />
<form action="/mealplans/view" id="MealplanViewForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<br />
<div id="draggables_box">
<table id="tab" border="1" width="100%"><tr>
<td><span class="plans" id="pl100">100 cal tiles</span></td>
<td><span class="plans" id="pl200">200 cal tiles</span></td>
<td><span class="plans" id="pl300">300 cal tiles</span></td>
<td><span class="plans" id="pl400">400 cal tiles</span></td>
</tr>
<td><span class="plans" id="pl500">500 cal tiles</span></td>
<td><span class="plans" id="pl600">600 cal tiles</span></td>
<td><span class="plans" id="pl700">700 cal tiles</span></td>
<td><span class="plans" id="pl800">800 cal tiles</span></td>
</tr>
</table>
<div id="meals300" class ="meals">
300 cal meals
<!-- begin of draggable div-->
<div id="draggable5" class="draggable_meal">
<div class="calorie_icon">330 CALS</div>
<span>McDonald's cheeseburger</span>
<input type="hidden" name="data[Mealplan][cals_per_serving5]" multiple="multiple" value="330" id="MealplanCalsPerServing5"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable6" class="draggable_meal">
<div class="calorie_icon">320 CALS</div>
<span>large fries</span>
<input type="hidden" name="data[Mealplan][cals_per_serving6]" multiple="multiple" value="320" id="MealplanCalsPerServing6"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable7" class="draggable_meal">
<div class="calorie_icon">280 CALS</div>
<span>1/2 a bagel with cream cheese and jam</span>
<input type="hidden" name="data[Mealplan][cals_per_serving7]" multiple="multiple" value="280" id="MealplanCalsPerServing7"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>
<div id="meals500" class ="meals">
500 cal meals
<!-- begin of draggable div-->
<div id="draggable3" class="draggable_meal">
<div class="calorie_icon">540 CALS</div>
<span>Oatmeal with raisins, walnuts, and whole milk</span>
<input type="hidden" name="data[Mealplan][cals_per_serving3]" multiple="multiple" value="540" id="MealplanCalsPerServing3"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable2" class="draggable_meal">
<div class="calorie_icon">510 CALS</div>
<span>1 bag <em>Pop Secret Butter Popcorn</em></span>
<input type="hidden" name="data[Mealplan][cals_per_serving2]" multiple="multiple" value="510" id="MealplanCalsPerServing2"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable4" class="draggable_meal">
<div class="calorie_icon">500 CALS</div>
<span>4 dried figs (235 cals) + 15 macadamia nuts (265 cals)</span>
<input type="hidden" name="data[Mealplan][cals_per_serving4]" multiple="multiple" value="500" id="MealplanCalsPerServing4"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>
<div id="meals800" class ="meals">
800 Cal meals
<!-- begin of draggable div-->
<div id="draggable8" class="draggable_meal">
<div class="calorie_icon">200 CALS</div>
<span>Small Peppermint Mocha</span>
<input type="hidden" name="data[Mealplan][cals_per_serving8]" multiple="multiple" value="200" id="MealplanCalsPerServing8"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>
<h2></h2>
<div style="float:right; margin-right: 6px;"><a href="javascript:location.reload(true)">RESET</a></div>
<br style="clear: both;" />
</div><!--end div for draggables_box -->
<div id="droppable_box">
<p>Drop a meal tile here.</p>
</div>
<br style="clear: both;" />
<div style="margin: 0px auto; width: 622px;">
<p><b style="color: red;"></b></p>
<br style="clear: both;" />
<input type="hidden" name="data[Mealplan][user_id]" value="1" id="MealplanUserId"/>
<input type="button" id="myId" name="myButton" value="Send Data" />
</form><br />
<a href="/users/logout">Logout</a></div>
<br />
</div><!--end div for meal_planner -->
</div><!-- end of div home_page-->
<br style="clear: both;" />
<div id="footer">© 2012 Maureen Moore</div>
</div><!--end of container div-->
</body>
</html>
I gave the draggable divs a new class called rightSide when they're dragged to the right side. You can see that the class has changed because the background color turns to pink. Now that it's a new class I can ask it to show instead of toggle like this:
But instead of showing the right side divs, it toggles back to hide just like the left side divs do. At http://myownmealplanner.com/mealplans/add you can click on the 300, 400, 800 tiles to try it out.Code:$("#clickMe3").click(function() {
$(".rightSide").show();
$("#showMe3").toggle();
});
I haven't looked at your code, but it sounds like you didn't read my advice back in post #16
you seem to be creating near identical functions for every element. You should be aware that the real beauty of jQuery is that you can apply the same function to various elements using their class name.Quote:
Originally Posted by xelawho
I'll say it once again: the code posted in 18 works fine. You seem to be trying to solve problems that don't actually exist.
I added those two lines above so now it works but I still need to figure out why it works. This new code is a mystery to me.
removes the draggable div from its original div on the left side and attaches it to the div on the right side (so that when the left hand div is hidden, the newly dropped div remains visible - because before, even though you dragged the div, it kept its position in the DOM)Code:$(ui.draggable).appendTo($(this));
removes the weird inline css styling that you had for those divs - I think you changed it now, but before it was making them go way over to the right. You could probably remove this line.Code:$(ui.draggable).css("position","");
xelawho at http://www.webdeveloper.com/forum/sh...43#post1242743 suggested I use $(ui.draggable).appendTo($(this)); to keep the divs on the right side and now they don't hide when I toggle. It's pretty much working as desired now.
Thanks for all of the useful input xelawho.
You're very welcome. Glad you got it working. FWIW, I don't really like the way that the "previous" tiles remain visible when you click to see a new set, but I guess that's up to you.
You have to click on the link again to make them disappear. Maybe I will change that some time so it's more intuitive but now I'm stuck on the calendar code. http://myownmealplanner.com/calendars/navigate If I delete the calendar css the right side of Saturdays seems to be the normal width but if it's there then the Saturdays are all squeezed together in one narrow column. I tried deleting css in steps to find out which css code is making it so narrow but I couldn't find it. I'm still working on it.
The calendar was fixed by overwriting the jquery file with a newer one so that's taken care of now.
