Response title
This is preview!
- Screen name: scozza
scozza's Profile
2 Posts
1 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 08-Feb-2013 12:02 AM
- Forum: Using jQuery
Hi Guys,
I want to code a 3x segment full screen UI for ipad through HTML. The premise is a main toolbar, a sub toolbar and content panel. Of course the main toolbar actions will change the subs content, and the subs actions whill change the content panel.
I have played around with .sortable for a solution and achieved something fairly rough and clunky. Would I be better to do this using .position collision? I'm sure there's a much nicer solution than what I have built and I'm looking for any pointers for a better outcome.
I've inc. the code below;- <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortableMain { margin: -8px; padding: 0; width: 1024px; height: 768px; }
#sortableSub { margin: 0; padding: 0; width: 1024px; height: 668px; }
#mainToolbar { float: left; width: 1024px; height: 100px; background-color:#CC0033; }
#subToolbar { float: left; width: 200px; height: 668px; background-color: #093; }
#content { float: left; width: 824px; height: 668px; background-color: #36C; }
</style>
<script>
$(function() {
$( "#sortableMain" ).sortable({ axis: "y", placeholder: "ui-state-highlight"});
$( "#sortableMain" ).disableSelection();
$( "#sortableSub" ).sortable({ axis: "x", placeholder: "ui-state-highlight" });
$( "#sortableSub" ).disableSelection();
});
</script>
</head>
<body>
<div id="sortableMain">
<div id="mainToolbar">1</div>
<div id="sortableSub">
<div id="subToolbar">2</div>
<div id="content">3</div>
</div>
</div>
</body>
</html>
- Hey Guys,
I'm using sortable for a 3 section UI.
I want the ability to shift the mainToolbar and subToolbar layers around while maintaining nav functionality so that people with pref for right/left hand nav can customise the UI.
The sorting all works well when there's four layers of equal size, but when I drop to 3 layers (with one as full width) the positioning gets a little disrupted. Since I'm a newbie at this coding stuff I thought you guys might be able to show me the way?- <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Display as grid</title>
<divnk rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<divnk rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { divst-style-type: none; margin: 0; padding: 0; width: 1024px; height: 768px; }
#mainToolbar { float: left; width: 1024px; height: 100px; background-color:#CC0033; }
#subToolbar { float: left; width: 200px; height: 100px; background-color: #093; }
#content { float: right; width: 824px; height: 100px; background-color: #36C; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<div id="sortable">
<div id="mainToolbar">1</div>
<div id="subToolbar">2</div>
<div id="content">3</div>
</div>
</body>
</html>
- «Prev
- Next »
- <!doctype html>
Moderate user : scozza
