Setup:
[gridstack]
I'm using "0.4.0" merged to "1.0.0-dev" from the develop branch.
I have a column for the plugin/widget that I will drag onto the grid, so basically I use the jQueryUI for droppable and draggable.
Just discovered an issue while resizing and dragging of items around and after awhile trying to drag another into the grid generates and error "Uncaught TypeError: Cannot set property '_grid of undefined" line 933 "node._grid = self;". Screenshot is attached.
Also the "ui-draggable-handle" sticks on the grid with additional class named "ui-draggable-dragging". It totally breaks the plugin and you need to refresh the page to have all functionality back to normal but every other dragstop event.
<div id="sidebar">
<div class="item ui-draggables"><span>{json-config}</span></div>
</div>
<div id="grid1" class="grid-stack">
<div class="grid-stack-item">//loaded from draggables with json config</div>
</div>
http://www.screencast.com/t/snK9VR1C442
Related
I have a slider created using JQuery-UI which has 4 slider segments. The structure is something like this:
<div id="mySlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all disabled">
<div class="ui-slider-segment" title="1">
<div class="ui-slider-segment" title="2">
<div class="ui-slider-segment" title="3">
<div class="ui-slider-segment" title="4">
</div>
Initially the slider has the 'disabled' class. When I click on any segment of the slider, it triggers the slideChange event and the event handler which I wrote for that event removes the class 'disabled'. This works as expected in Chrome and Firefox browsers.
My problem occurs when I test this in casper.js. I've tried the following one after the other without success.
I followed the solution posted here: How to move jquery-ui slider with CasperJS
//left and top co-ordinates of the segments fetched using element.getBoundingClientRect()
this.mouse.down(242.890625,488.75);
this.mouse.move(214.46875,403.9375);
this.mouse.up(214.46875,403.9375);
I can't use CSS3 selectors for the triggering mousedown in casper.js, as there are no IDs for the segments, and every segment has the same classes (dynamically generated by JQuery-UI).
var slide = casper.evaluate(function(){
var sliderId = $('#mySlider');
sliderId.slider('value',2);
});
casper.then(function(){
var sliderClass = casper.evaluate(function(){
return document.getElementById('mySlider').className;
});
console.log(sliderClass); //still contains the class 'disabled'
});
Where am I going wrong? I've included both jquery and jquery-ui libraries. Is there any other way?
I have a normal jquery page with header, content and a panel
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
</div>
The page is initially loaded with a menu in the panel (with a custom ajax call) and a welcome text as content. Besides text, the header also contains a button to open the menu panel.
When a user taps on a menu item I only want to replace the content, not the entire page.
I've been trying with
$.mobile.changePage('my/valid/url', {
pageContainer : $('#myPage')
});
I can see in my network log that I get the correct content from the JQM ajax call. But when I look at the DOM, the only thing that happened is that an empty div is appended to #myPage, i.e. the content from ajax is not inserted. And the old content is still there. See below:
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
<div data-role="content" data-url="my/valid/url">EMPTY</div>
</div>
One other thing is that the whole page, #myPage, is hidden (display="none"). It seems that JQM wants to show an entire new page instead of just allowing me to change the content of one div inside #myPage.
Is it possible to change just a part of a JQM-page using JQM?
I've done it with a custom ajax call and then appended the markup to the DOM myself. But then I need to do a lot of other stuff manually, like enhancing , showing/hiding the load indicator etc.
I have a sortable in which two consecutive elements may be "attached" to each other. When the attach action is performed, I wrap the two "field" elements in a "field-group-container" div in hopes that I would be able to drag both inner "field" elements as a unit.
Oddly enough, this approach works perfectly if I initiate the dragging from the field-group-container's first child (of two children), however, if I initiate the dragging from the second child, the field gets pulled out of the field-group-container. I would like the two field elements to move together regardless of which element is clicked to initiate dragging.
I tried making the "items" sortable option more specific to only allow dragging field-group-containers and fields that are not children of a field-group-container but it looks like the click event is cancelled before it bubbles up to the field-group-container.
In order to find out whether this is an issue with the sortable or my implementation of it, I created a boiled down version to see if I could replicate my issue.
<div id="sortable">
<div class="field">A</div>
<div class="field">B</div>
<div class="field-group-container">
<div class="field">C</div>
<div class="field">D</div>
</div>
<div class="field">E</div>
<div class="field">F</div>
<div class="field">G</div>
</div>
http://jsfiddle.net/prsGz/
It works exactly as expected!
This contradicts the behavior I'm observing in my project. In my real
implementation the "field" elements have several inner elements such
as labels, buttons, etc.
My question
Does anyone know what would be causing this behavior?
What could be causing my two field elements to not move as a unit
even though they are both wrapped in a parent container?
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
I've got a jquery accordion on site BUT it kinda doesn't work >> when browser loads page accordion looks good (with one first section opened) BUT when I press on some other section, first section closes and none of sections ar opening up, so it kinda stucks with all sections closed! When I reload the page this loop starts from the beginning. Here is the link to the site, click on "Pakalpojumi" to see that accordion.
Here is the html of accordion:
<div id="accord">
<h3><a id="gr" href="#">Griezšana</a></h3>
<div>
<p>
max griešanas garums: 2500mm </br>max loksnes biezums: 4mm
</p>
</div>
<h3><a id="ur" href="#">Urbšana</a></h3>
<div>
<p>
Mēs piedāvājam 3 dažādu veidu stacionārie urbji
</p>
</div>
<h3><a id="lo" href="#">Locīšna</a></h3>
<div>
<p>
max loksens garums: 2000mm, </br>max spiešanas spēks: 65 t
</p>
</div></div>
Adding accordion to accord:
$('#accord').accordion();
Does anyone have any idea of what could be wrong?
The code works fine by itself, see here. On closer inspection of your site, there is a style which is placed on the active div each time the header is clicked (I'm using chrome, it appears as element.style in its css properties) which sets the height, padding-top and padding-bottom to 0px. If I disable those styles, the selected div appears fine. Do you happen to be adding these styles on every click?
Edit
Ok, I found your problem... Does the second tab here look familiar? According to this post it's because when you initialise your accordion, its parent element is hidden (via your 'off' class). So you can get around this issue by defining a height for your divs after initialising your accordian like so:
$('#accordion').accordion();
$('#accordion >div').css('height', '300');
... or by by initialising your accordion once its parent is shown.