Drag and Drop Code for Mobile Game - javascript

I have a drag and drop feature for my mobile game. Here it is:
https://jsfiddle.net/elchininet/otw3pw13/4/
Unfortunately, I have no idea what's going wrong inside my actual source code.
I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15 ">
Close<img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo portrait">
</div>
<div data-role="main" class="ui-content">
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
<li>How To Play</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
<p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>
</div>
</div>
</body>
</html>
CSS
#options div{
background:#666;
color: #FFF;
display: inline-block !important;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
width: 50px;
}
#slices img{
display: inline-block;
height: 30px;
}
#area{
background: #CCC;
border: 1px solid #666;
margin-top: 20px;
height: 200px;
width: 200px;
}
JavaScript
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
var slices = $("#slices");
var options = $("#options");
var area = $("#area");
var selected;
var result;
//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;
//---Make boxes dragables
options.find("div").draggable();
//---When the boxes are dropped
area.droppable({
drop: function(event, ui){
console.log("yes");
if( Number( ui.draggable.attr("data-index") ) == result ){
alert("correct");
}else{
alert("incorrect");
}
}
});
//---Insert random pizza slices
function insertPizzas(){
selected = [];
result = 0;
//---Generate aleatory pieces
var rand
while(selected.length < 2){
//---Random value
rand = Math.floor( Math.random() * total );
//---Sum result
result += pizzas[rand].value;
selected.push( rand );
}
//---Clear the slices
slices.html("");
//---Add the new slices
selected.forEach(function(number){
var img = $("<img/>");
img.attr("src", pizzas[number].image);
slices.append(img);
});
}
insertPizzas();


By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.
By the other hand, put the jQuery code inside a document ready event.
$(document).on("ready", function(){
//--- Put the jQuery code here
}
Here you have your code (with the document ready event) running from an web server:

Related

how to make javascript draggable work on mobile

I have 3 item which is item 1, item 2, and item 3
item1 with <data-price="10">， item1 with <data-price="20">， item1 with <data-price="30">
These items are draggable and when these items drag and drop on the red area, it will sum up the total
It works successfully on a desktop browser but the item is not draggable on the mobile browser.
I tried using Draggin.js. It's draggable on mobile browser but the javascript function(the calculation) is not working.
Is there another way to make it draggable on a mobile browser?
var price = 20, math = '', items = [], state = 'outside';
$(function() {
function calcPrice(math) {
var value = 0;
price = 20;
console.log("Item array: " + items);
$.each( items, function( key, value ) {
price+= $(".draggable[data-item='" + value + "']").data('price');
});
$("#test2").html(price)
}
$(".draggable").draggable({
containment: "#container",
scroll: false
});
$("#droppable").droppable({
drop: function(e, u) {
if(u.draggable.data('state') == 'outside') {
items.push(u.draggable.data('item'));
u.draggable.data('state', 'inside');
calcPrice('add');
}
},
out: function(e, u) {
if(u.draggable.data('state') == 'inside') {
u.draggable.data('state', 'outside');
var myIndex = $.inArray(u.draggable.data('item'), items);
items.splice(myIndex, 1);
price = $("#droppable").text();
calcPrice('remove');
}
}
});
});
#container {
width: 500px;
height: 350px;
background: #ccc;
}
#droppable {
height: 100px;
width: 100%;;
background: #ff0000;
}
.draggable {
width: 100px;
height: 50px;
border: 1px solid black;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script src="https://aegasiagroup.com/wp-content/themes/Avada/js/DragDropTouch.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div class="row">
<div id="container" class="col-sm-4">
<div id="droppable">Drag and drop here</div>
<div>
<p>SUGAR: <span id="test2">20</span></p>
</div>
<div class="draggable" data-item="1" data-price="10" data-state="outside">Item 1 = [Price 10]</div>
<div class="draggable" data-item="2" data-price="20" data-state="outside">Item 2 = [Price 20]</div>
<div class="draggable" data-item="3" data-price="30" data-state="outside">Item 3 = [Price 30]</div>
</div>
</div>
</body>

Drag and drop for fill in the blanks using JQuery UI

Below is my scenario explanation in screenshot,
From the above mentioned picture.Brown box positions are defined as droppable and the below choices are draggable.If I drag drop it is working fine.
If I drag another option in already defined place its overlapping for example
What I want to do is it will replace text as "venerated" and already dropped text "supercious" will come back to the text of choices in below box.How can I do this .Please anyone help me to get out of this issue.
Below is my code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.box1
{
background: #E7AC9F;
height: 20px;
width: 100px;
display: inline-block;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
.di1{
border: 1px dotted #22BAA0;
margin: 10px;
padding: 10px;
width: 100px;
border-radius: 4px;
font-size: 14px;
cursor: move;
list-style: none;
display: inline-block;
}
</style>
<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>
<script>
$( function() {
$(".box1").sortable();
$(".box1").disableSelection();
$(".qitem2").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$(".box1, #qlist2").droppable({
hoverClass : 'ui-state-highlight',
accept: ":not(.ui-sortable-helper)",
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
$(ui.draggable).removeAttr("style");
}
});
});
</script>
</head>
<body>
<p>The multi-coloured eyes,<div class="box1"></div>and striking facial cuts and curves<div class="box1"></div> the Siberian Husky as one of the most desirable and breeds <div class="box1"></div>of dogs. Originally from Siberia, they look like replicas of wolves; also, they are challenging to new owners due to their agility and<div class="box1"></div></p>
<div id="qlist2">
<div class="qitem2 di1">
Option 1
</div>
<div class="qitem2 di1">
Option 2
</div>
<div class="qitem2 di1">
Option 3
</div>
<div class="qitem2 di1">
Option 4
</div>
<div class="qitem2 di1">
Option 5
</div>
<div class="qitem2 di1">
Option 6
</div>
<div class="qitem2 di1">
Option 6
</div>
</div>
</body>
</html>

Just make an container for draggables elements so that whenever second element is dropped in droppable we can move first element in it's container
HTML :
<div id="qlist2">
<div id = "dragitem1-container" class="drag-container">
<div id="dragitem1" class="qitem2 di1">
Option 1
</div>
</div>
<div id = "dragitem2-container" class="drag-container">
<div id="dragitem2" class="qitem2 di1">
Option 2
</div>
</div>
<div id = "dragitem3-container" class="drag-container">
<div id="dragitem3" class="qitem2 di1">
Option 3
</div>
</div>
</div>
<div class="droppable-element">
</div>
JS:
$(document).ready(function() {
function makedraggable() {
$(".qitem2").draggable({
"revert": "invalid"
});
}
makedraggable();
$(".droppable-element").droppable({
"accept": ".qitem2",
"drop": function(event, ui) {
if ($(this).find(".qitem2").length) {
var $presentChild = $(this).find(".qitem2"),
currChildId = $presentChild.attr("id"),
$currChildContainer = $("#" + currChildId + "-container");
$currChildContainer.append($presentChild);
$presentChild.removeAttr("style");
makedraggable();
}
$(ui.draggable).clone().appendTo(this).removeAttr("style");
$(ui.draggable).remove();
}
})
})
I think this is what you want
https://jsfiddle.net/4bL4tfrt/

Js not working and I am fairly new to Js and JQuery. Also there are no error messages

Here is my js, relevant css for photo album, and html. My photo album should automatically cycle between photos or be able to cycle between photos using the next and previous buttons. However neither is working properly. I am not sure if I am referencing js and the jquery library correctly in the html document. I am fairly new to js and jquery so any information on what might be wrong with my code would be helpful. Thank you.
ps. html formatted a bit weird in my post.
$(document).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});
/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.img-cont div {
background: rgba(0, 0, 0, 0.55);
width: 100%;
display: inline-block;
display: none;
}
.img-cont img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shear Excellence</title>
<link href="site.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<!--Current Fonts add | after each in url to simplify-->
<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
<!--google fonts-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="header">
Gallery
</div>
<div id="nav-menu">
<ul>
<li>Home</li>
<li>Services</li>
<li id="current">Gallery</li>
<li>About Us</li>
</ul>
</div>
<div class="soc-media">
<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
</div>
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="img-cont">
<div style="display: inline-block;">
<img src="http://i.imgur.com/qlkUBfl.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/WiMIaUL.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/LsPrhg5.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/9SsZHVO.jpg"/>
</div>
<div>
<img src="http://imgur.com/WSlGugy.jpg"/>
</div>
<div>
<img src="http://imgur.com/GkPzEX7.jpg"/>
</div>
<div>
<img src="http://imgur.com/WpYyjyQ.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/ilDrPeq.jpg"/>
</div>
</div>
<div id="footer">
<p>
Shear Excellence Salon is located at
<br>
Phenix Salon Suites
<br>
145 Willow Bend, Suite #107 Crystal, Minnesota 55428
<br>
+1-763-807-4186
<br>
© 2016 Nicholas Smith
</p>
</div>
</div>
<script type="text/javascript" src="myScripts.js"></script>
</body>
</html>

Replace .container div to .img-cont div in your jquery to make it work. Since .container div doesn't exist in your html.
$(document).ready(function() {
var currentIndex = 0,
items = $('.img-cont div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.img-cont div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});
/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.img-cont div {
background: rgba(0, 0, 0, 0.55);
width: 100%;
display: inline-block;
display: none;
}
.img-cont img {
width: 100%;
height: auto;
}
button {
position: absolute;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shear Excellence</title>
<link href="site.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<!--Current Fonts add | after each in url to simplify-->
<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
<!--google fonts-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="header">
Gallery
</div>
<div id="nav-menu">
<ul>
<li>Home</li>
<li>Services</li>
<li id="current">Gallery</li>
<li>About Us</li>
</ul>
</div>
<div class="soc-media">
<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
</div>
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="img-cont">
<div style="display: inline-block;">
<img src="http://i.imgur.com/qlkUBfl.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/WiMIaUL.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/LsPrhg5.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/9SsZHVO.jpg"/>
</div>
<div>
<img src="http://imgur.com/WSlGugy.jpg"/>
</div>
<div>
<img src="http://imgur.com/GkPzEX7.jpg"/>
</div>
<div>
<img src="http://imgur.com/WpYyjyQ.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/ilDrPeq.jpg"/>
</div>
</div>
<div id="footer">
<p>
Shear Excellence Salon is located at
<br>
Phenix Salon Suites
<br>
145 Willow Bend, Suite #107 Crystal, Minnesota 55428
<br>
+1-763-807-4186
<br>
© 2016 Nicholas Smith
</p>
</div>
</div>
<script type="text/javascript" src="myScripts.js"></script>
</body>
</html>

jQuery Mobile - Listview only loads on second page refresh

I'm creating a small jQuery Mobile application. I have a home page with a banner image, a paragraph loaded from a json file, and a link to a second page that has a linked list, also loaded from the json file.
The home page:
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
#banner {
height: 175px;
overflow: hidden;
position: relative;
}
#banner img {
display: block;
position: absolute;
bottom: 0;
margin-right: auto;
margin-left: auto;
max-width: 100%;
}
.bold {
font-weight: bold;
border-bottom: 1px dotted;
}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function getLocations(data) {
var locations = data.stationBeanList;
var numLocations = 0;
var numBikes = 0;
for (var i = 0; i < locations.length; i++) {
if (locations[i].statusValue === 'In Service' && locations[i].availableBikes > 0) {
numBikes += locations[i].availableBikes;
numLocations++;
}
}
var message = '<p>There are a total of <span class="bold">' + numBikes + ' bikes</span> available in <span class="bold">' + numLocations + ' locations</span>.</p>';
$("#home-content-heading").after(message);
}
$(document).on("pagecreate", "#home", function() {
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: getLocations,
error: function() { console.log( 'Error...' ); }
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li>Home</li>
<li>Reports</li>
<li>Locations</li>
</ul>
</div>
<div id="home-header" data-role="header" data-position="fixed" data-theme="b">
<h1>Home</h1>
Menu
</div>
<div id="banner"><img src="bicycle-rental-dock.jpg" alt="A bicycle rental dock" /></div>
<div role="main" id="home-content" class="ui-content">
<h1 id="home-content-heading">BikeShare</h1>
View Locations
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #home -->
</body>
</html>
The second page with the linked list:
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate", "#locations", function() {
function loadData(data) {
var locations = data.stationBeanList;
var list = '';
for (var i = 0; i < locations.length; i++) {
list += '<li>' + locations[i].stationName + '</li>';
}
$("#location-list").append(list).listview('refresh');
}
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: loadData,
error: function() { console.log('Failed to load bikeshare.json'); }
});
});
</script>
</head>
<body>
<div data-role="page" id="locations">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li>Home</li>
<li>Reports</li>
<li>Locations</li>
</ul>
</div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Locations</h1>
Menu
</div>
<div role="main" class="ui-content">
<ul id="location-list" data-role="listview"></ul>
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #locations -->
</body>
</html>
The issue I'm having is when I click on the link and go to the second page, the listview (from json file) does not display unless I hit the browser refresh button. And if I hit refresh and then hit the browser back button, the banner on the first page does not have the custom css applied to it, in addition, the data that was previously loaded and displayed from the json file, it's no longer there. I do not see where I went wrong with my code. Any help is appreciated.

jQuery Mobile by default loads external pages via ajax into the current page's DOM. However, it only loads the markup of the first DIV with data-role="page".
So, you can move the locations javascript into the data-role="page" DIV.
If you don't like the AJAX navigation system, you can 'turn it off', but then you lose the nice transitions.
Read this: http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/

Resizable split screen divs using jquery UI

I have a design in mind that involves a split panel view in html, similar to a winforms split panel. I've been expirimenting with jQuery UI - Resizable and I like the function, I just can't seem to co-ordinate the resizing of the two divs. The problem with the current code is that the two divs resize away from each other, not with one following the other. How can I make the two divs work together?
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
<script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
// initialise plugins
$(function(){
try {
$('ul.sf-menu').superfish();
//set up divs
$('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
}catch(ex){
alert(ex.message);
}
});
</script>
</head>
<body>
<div id="Header">
<div id="Menu">
<ul class="sf-menu" id="nav">
<!-- Snip menu -->
</ul>
</div>
</div>
<div id="Middle">
<div id="Content" class="ui-widget-content">This is where the view is.<br/>
Imagine an image here ...
<br/>
<br/>
<br/>
</div>
<div id="Attributes" class="ui-widget-content">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div id="FootBreak"/>
<div id="Footer">
Help
</div>
</body>
</html>

I have worked out a reasonable hack, using the resize event.
<script type="text/javascript">
var WIDTH_ATTR = 'initWidth';
// initialise plugins
$(function(){
try {
$('#Content').resizable({ handles: 'e', resize: resizeAttr });
$('#Content').attr(WIDTH_ATTR, $('#Content').width());
$('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
}catch(ex){
alert(ex.message);
}
});
function resizeAttr(event, ui){
var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
$('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
};
</script>
I'm still open to cleaner answers from others...

I am not sure if this meets the requirements, but ExtJS handles split panes with ease and works cross-browser. For example, see this RSS feed client in ExtJS. Be aware the ExtJS has commercial licensing restrictions if your intent is to sell your product.

Here is an example with a horizontal split (one top div, one bottom div), maybe slightly more minimalistic:
HTML:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="div1">1st</div>
<div id="div2">2nd</div>
</body>
</html>
CSS:
#div1, #div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* just for making the divs visible */
margin: 5px; /* just for making the divs visible */
}
#div1 {
height: 100px;
top: 0;
}
#div2 {
top: 110px;
bottom: 0;
}
JavaScript:
$('#div1').resizable({
handles: 's',
resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
var new_height = ui.size.height;
$('#div2').css('top', new_height + 10);
}
See demo here.

Categories

Resources