Develop Reference

jQuery-Mobile external Panel always open among pages

I've tried to search around but found no relatable topics I could understand.
I'm not very familiar with Javascript or coding in general.
I am using Jquery Mobile 1.4.5 and this is my issue:
I cannot get external panels to work properly. The panel displays just fine on my first page, but when I change page it won't show up as intended. My plan is to have the panels work in the same manner as they do on the Jquery mobile demo page.
Link: Jquery Mobile Demo
Here you can see the panel is always showing no matter what page they are on, I found out they don't use external panels on that site but it should still be possible.
How my site works at the moment:
Panel work just fine when loading first page (#page_home)
When entering new page (#page_kodi or #page_download) it does not show up automatically as intended.
When I enter #page_kodi or #page_download and manually bring it up it stays up as intended
This is the odd part: When I go from (with panel open) #page_download to #page_kodi to #page_home (main page) it works.
when I go from #page_home to another page it does not work.
Here is my JS code for panels, I'm sure there is a better way to write this, and maybe some of it is not needed.
Javascript:
<script>
<!-- Creates the panels & navbars/Tabs -->
$(document).on("pagecreate", function() {
$("body > [data-role='panel']").panel();
$("body > [data-role='panel'] [data-role='listview']").listview();
});
$(document).on("pageshow", function() {
$("body > [data-role='header']").toolbar();
$("body > [data-role='header'] [data-role='navbar']").navbar();
});
</script>
<script>
$(document).on("pagebeforeshow", function( event, data ) {
$('#leftpanel').panel("open");
})
</script>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("pagebeforecreate", "#page_home", function () {
$( "#leftpanel" ).panel({ dismissible: true });
$( "#leftpanel").panel("close");
});
}
</script>
<script>
$(document).on("pagecreate", "#page_home", function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
setTimeout(function(){
$('#leftpanel').panel("close");
}, 500);
}
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_home", function () {
$( "#leftpanel" ).panel({ dismissible: false });
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_download", function () {
$( ".leftpanel" ).panel( "option", "dismissible", false );
$('#leftpanel').panel("open");
});
</script>
<script>
$(document).on("pagebeforecreate", "#page_kodi", function () {
$( "#leftpanel" ).panel( "option", "dismissible", false );
$('#leftpanel').panel("open");
});
</script>
<script>
/* Left & Right swipe gestures to open panels*/
$(document).on("pagecreate", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(document).on("swipeleft swiperight", function(e) {
if ($(".ui-page-active").jqmData("panel") !== "open") {
if (e.type === "swipeleft") {
$("#rightpanel").panel("open");
} else if (e.type === "swiperight") {
$("#leftpanel").panel("open");
}
}
});
}
});
</script>
I have placed all these in my HTML file.
HTML Panel:
<div style="margin-top: 0px; background-color: #212120;" class="customlist panel-open" data-role="panel" data-position="left" data-dismissible="" data-display="overlay" data-theme="none" id="leftpanel">
<ul data-role="listview" data-inset="false">
MY CONTENT HERE
</ul>
</div>
data-dismissible="" I have put it this way because that's what works when you set it manually with JS, or so i've read. It did not work if I set it to false or true.
Basically what I'm trying to do here is always have the panel OPEN on bigger screens and closed with option to open it with swipe on smaller screens. This works as of now. The trouble I am having is when changing pages the panel does not act as intended and closes when I am going from my front page to another, but not if I go from another to my front page.
PS: I've also put the panel between two of my pages like this:
page_home
-- panel
-- some popup
page_download
page_kodi
Thanks in advance for all the help you can give and sorry for the wall of text.

Assuming you are using a single-page model, here is a simple stub for a JQM project with a Panel which can stay open among different pages. The default behavior is parametrized by overriding the _bindPageEvents function of the mobile.panel widget, so you can dinamcally set a flag for that.
You can set the stayAlwaysOpen flag as you like, by spoofing the useragent string or (maybe better) by checking the viewport width, up to you. You could also check a CSS breakpoint for that purpose.
To keep header navigation and make the panel somewhat more pleasant, i used also the function scalePanelToContent from: jQuery mobile panel between header and footer (credits: Omar).
var stayAlwaysOpen = true;
$.widget("mobile.panel", $.mobile.panel, {
_bindPageEvents: function() {
var self = this;
this.document
// Close the panel if another panel on the page opens
.on("panelbeforeopen", function(e) {
if (self._open && e.target !== self.element[0]) {
self.close();
}
})
// On escape, close? might need to have a target check too...
.on("keyup.panel", function(e) {
if (e.keyCode === 27 && self._open) {
self.close();
}
});
if (!this._parentPage && this.options.display !== "overlay") {
this._on(this.document, {
"pageshow": function() {
this._openedPage = null;
this._getWrapper();
}
});
}
// Clean up open panels after page hide
if(stayAlwaysOpen) return;
if (self._parentPage) {
this.document.on("pagehide", ":jqmData(role='page')", function() {
if (self._open) {
self.close( true );
}
});
} else {
this.document.on("pagebeforehide", function() {
if (self._open) {
self.close( true );
}
});
}
}
});
function scalePanelToContent() {
var screenH = $.mobile.getScreenHeight();
var headerH = $(".ui-header").outerHeight() - 1;
var footerH = $(".ui-footer").outerHeight() - 1;
var panelH = screenH - headerH - footerH;
$(".ui-panel").css({
"top": headerH,
"bottom": footerH,
"min-height": panelH
});
}
$(document).ready(function() {
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a",
position: "fixed",
tapToggle: false
});
$("#nav-panel").panel({
theme: "b",
display: "overlay",
position: "left",
positionFixed: true,
swipeClose: false,
dismissible: false
}).enhanceWithin();
$("#nav-panel").on("panelbeforeopen", function(event, ui) {
scalePanelToContent();
$(".ui-content").animate({
"margin-left": "17em"
}, 300, "swing");
});
$("#nav-panel").on("panelbeforeclose", function(event, ui) {
$(".ui-content").removeClass("panel-shrink").animate({
"margin-left": "0"
}, 300, "swing", function() {
$(this).removeAttr("style");
});
});
scalePanelToContent();
});
$(window).on("resize", function() {
scalePanelToContent();
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
var isPanelOpen = $("#nav-panel").hasClass("ui-panel-open");
$(".ui-content").toggleClass("panel-shrink", isPanelOpen);
});
.panel-shrink {
margin-left: 17em !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header">
Menu
<h2>Header</h2>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
<div data-role="page" id="page-1">
<div data-role="content">
<form>
<fieldset data-role="controlgroup">
<legend>Vertical:</legend>
<input name="checkbox-v-2a" id="checkbox-v-2a" type="checkbox">
<label for="checkbox-v-2a">One</label>
<input name="checkbox-v-2b" id="checkbox-v-2b" type="checkbox">
<label for="checkbox-v-2b">Two</label>
<input name="checkbox-v-2c" id="checkbox-v-2c" type="checkbox">
<label for="checkbox-v-2c">Three</label>
</fieldset>
</form>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
<div data-role="page" id="page-3">
<div data-role="content">
Page 3
</div>
</div>
<div data-role="panel" id="nav-panel">
<ul data-role="listview">
<li>Link #1
</li>
<li>Link #2
</li>
<li>Link #3
</li>
</ul>
</div>
</body>
</html>
Just a last hint:
You can use the same stayAlwaysOpen flag inside your swipe events so that the panel will keep the same behavior in mobile devices and in desktop browsers also for smaller window sizes.

jquery draggable on few divs

Picture:
<div id="grid-wrapper">
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
</div>
I want to change class on two divs when I drop my span, and remove draggable.
I have this:
$( ".dragandrop" ).draggable({ snap: "#grid" });
$("#grid").droppable({
drop: function( event, ui ) {
$( this )
.addClass( "droped" )
}
});
This code add me .droppable only on first div, and doesn't add class "droped", I can't do removing .draggable. Can you help me?

First off, be careful using the same id for multiple elements. It can cause really weird issues (see this post).
Second, make sure you add the draganddrop class to the appropriate elements that you want to, well, drag and drop.
And you want to removed the draggable on an element once you dropped it? I think what you want looks something like this:
$( ".dragandrop" ).draggable({
snap: ".dragandrop" ,
stop: function(event, ui){
$( this ).addClass( "droped" );
$( this ).draggable( 'disable' );
}
});
$(".dragandrop").droppable({});
div{
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="grid-wrapper">
<div id="grid1" style="background:orange;" class="dragandrop">a</div>
<div id="grid2" style="background:red;" class="dragandrop">b</div>
<div id="grid3" style="background:green;" class="dragandrop">c</div>
<div id="grid4" style="background:yellow;" class="dragandrop">d</div>
</div>
You may also want to add in some logic to keep the active div on top.

Infinite Scroll + Masonry loading all items

I'm trying to set up Masonry with Infinite Scroll, it works but it currently loads all items and then when I click on the next page link it loads them all again.
Nav:
<div class="more" id="navigation">
MORE IDEAS
</div>
JS:
$(document).ready( function() {
(function() {
// Main content container
var $container = $('.grid');
// Masonry + ImagesLoaded
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
percentPosition: true
});
});
// Infinite Scroll
$container.infinitescroll({
// selector for the paged navigation (it will be hidden)
navSelector : "#navigation",
// selector for the NEXT link (to page 2)
nextSelector : "#navigation a",
// selector for all items you'll retrieve
itemSelector : ".grid-item",
},
// Trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
// Pause Infinite Scroll
$(window).unbind('.infscr');
// Resume Infinite Scroll
$('.more a').click(function(){
$container.infinitescroll('retrieve');
return false;
});
})();
});
Content:
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
Currently it loads all items, 1 to 6, then when I click the Load More button it loads items 1 to 6 again. I've looked on the couple of other questions which are similar to this but they are different circumstances. It's probably something simple, any help would be most appreciated.

Figured it out.
You need to take part of the content you want loaded second out and put it in another html page. Then you need to set the navigation link to go to that page. As it was just set to ?page=2 it was just loading the same page again.

jQuery-UI draggable/droppable Jumping

I'm not new to code here, but this is my first question on SO, so if my etiquette is off excuse me just this once. I've looked around for support on this, and it doesn't seem many people are running into this problem.
I'm playing with jQuery-UI for the dragging and dropping elements, and for the most part it's working fine. However when I drag something from a 'tabbed' div into a droppable area it jumps a couple hundred pixels below it. It's especially odd because I've got it set to revert it's position on an invalid drop, and that's working, but it ignores this rule on the first drop that makes it jump. I'm not sure if this is something in the CSS position style, or if I'm not setting my UI attributes correctly.
http://www.putoutsystems.com/jtest/
Hit the consumables tab > drag the item into the bin. You should see the behavior I'm describing. I'm using jQuery 1.10.2 and jQuery UI 1.10.4
This is all the code for the app:
<link href="css/pepper-grinder/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<style>
#potion { width: 24px; height: 24px; position:relative;}
#tabs { width: 500px; height: 100px;}
#droppable { width: 500px; height: 100px;}
.inventoryTab { height: 40px; }
</style>
<!-- libraries -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<!--functions -->
<script>
//functions
$(function() {
//Dragable Elements
$( ".draggable" ).draggable({ revert: "invalid"});
//Hover Text
$( document ).tooltip();
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
}
});
//Tab Interface
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<!-- Inventory tabs-->
<div id="tabs">
<ul>
<li>Equipment</li>
<li>Consumables</li>
<li>Items</li>
</ul>
<div id="tabs-1" class="inventoryTab" >
</div>
<div id="tabs-2" class="inventoryTab" >
<div id="potion" class="draggable">
<img src="sprites/potion.png" alt="potion" title="Minor Health Potion">
</div>
</div>
<div id="tabs-3" class="inventoryTab" >
</div>
</div>
<br>
<!-- The Bin --->
<h1>The BIN</h1>
<div id="droppable" class="ui-widget-header">
<p>Empty!</p>
</div>
UPDATE: I've come up with a bandaid solution that sets an exact position, that I suppose I could change using variables based on how many objects are in the bin. Check our this code for droppable event:
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
$(ui.draggable).css({
'top': '10px',
'left': '10px'
});
}
});
I'd prefer it if the object got the mouse position when it was dropped, but that's where my jQuery is failing me right now. I'll keep looking.
JSFIDDLE

It seems like you don't need this line $(ui.draggable).appendTo($(this));
//functions
$(function () {
//Dragable Elements
$(".draggable").draggable({
revert: "invalid"
});
//Hover Text
$(document).tooltip();
//droppable elements
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("FULL!");
//$(ui.draggable).appendTo($(this)); // comment this out
}
});
//Tab Interface
$("#tabs").tabs();
});
JSFIDDLE DEMO

How to Disable JqueryUI Accordian Section

Hi guys I'm trying to disable queryUI section ,I have only two section , so far I have tried some of my hacks but none seems to work ,
Here what I have tried so far,
//Enable section1 by remove attributes
$('#subfacEdit').removeAttr("disabled");//div
$('#subfacEdit').removeAttr("display");//div
$('#HeadersubfacEdit').removeAttr("disabled");//H3
$('#HeadersubfacEdit').removeAttr("display");//H3
//Disable section2
$('#facEdit').attr("disabled", "disabled");//div
$('#facEdit').attr("display", "none");//div
$('#HeaderfacEdit').attr("disabled", "disabled");//H3
$('#HeaderfacEdit').attr("display", "none");//H3
$('#editAccdordian').accordion("activate", 1);//activate section2
Analysis:
Div does becomes disabled but I guess display attributes is not applied,I only want make sections unclickable by any means.
I have tried MasterMinds Solution with little change ?
http://jsfiddle.net/X8MFf/15/

You could add a special data- attribute to the ones you want to disable, say data-enabled="false". Then, using the beforeActivate event, prevent from switching. Something along the lines of
$( "#EditAccdordian" ).on( "accordionbeforeactivate", function( event, ui ) {
if( ui.newHeader && ui.newHeader.attr('data-enabled') == 'false') {
event.preventDefault();
}
} );
You can also bind the event in the accordion creation.
$( "#EditAccdordian" ).accordion({
beforeActivate: function( event, ui ) {
if( ui.newHeader && ui.newHeader.attr('data-enabled') == 'false') {
event.preventDefault();
}
}
});
Your disabled header should now look like:
<h3 id="HeaderfacEdit" data-enabled="false">Header content</h3>
EDIT:
I removed the jquery selection of ui.newHeader because it is a jquery object. Validation of the object should be done as it is empty when collapsing (see documentation).

Try this will work for you...
$(".DISABLE").click(function(){
$(this).next().hide();
$("#accordion").accordion({active:current});
});
Complete Example
...
//JAVASCRIPT
$(document).ready(function() {
var $accordion = $("#accordion").accordion({ collapsible: true });
$( "#accordion" ).accordion( "option", "clearStyle", true );
var current=null;
$("#accordion h3:not(.DISABLE)").click(function(){
current = $accordion.accordion("option","active");
});
$(".DISABLE").click(function(){
$(this).next().hide();
$("#accordion").accordion({active:current});
});
});
...
//HTML
<div id="accordion">
<h3>Section 1</h3>
<div>
MUK - 1
</div>
<h3 **class="DISABLE"**>Section 2 (Disabled)</h3>
<div>
MUK - 2
</div>
<h3>Section 3</h3>
<div>
MUK - 3
</div>
<h3>Section 4</h3>
<div>
MUK - 4
</div>
</div>