Here is the link to existing sortable http://jsfiddle.net/bcAH2/5
Just copying the code,
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default four">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
...
</ul>
Script
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$("#sortable .four").css("height","190px");
});
What I am trying to achieve is to fill spaces below cells 1 2 3 with cells like 5 6 7 8... Is it not possible by drag and drop?
There's a jQuery plugin called gridster that might do what you want (see the demo in the front page). A simpler but less flexible alternative, as explained in more detail in this answer, is to create several columns and make each one sortable, connecting them to allow dragging from one to another. Here's an example close to yours, but not with some caveats:
You can have tiles with greater height, but not with greater width, without messing the layout (gridster does not have this limitation);
You can't have "empty spaces" between two tiles in one column (gridster has less limitations on that);
If you remove all tiles from one column, it will disappear (unless you style it to have a fixed width, with or without contents; gridster does not have this limitation).
The problem here is not in drag and drop, but the flow of the floated elements.
All the elements after "four" will align to it, and since it's higher - it takes more space. So the space in the second row in front of "four" is actually not the part of the "grid".
Actually, there is no grid here, since you're working with floated elements.
Hope this helps you to understand why it can't be achieved with the current styling and scripting.
I found this elegant plugin, ShapeShift which does the job nicely
There is another forked version of gridster, thought worth sharing here, gridster.js Forked
Related
I'm super new to Javascript and I need help solving this problem.
I have created a list and I would like the font weight of the selected element to be bold and the opacity of the non-selected element dropping to .5 on the click.
I understood that I need to use an eventlistener "click" but I´m pretty stucked, if someone can give me some hints will be greatly, greatly, appreciated.
<div class="media">
<ul>
<li class="language" id="italian">Italian</li>
<li class="language" id="english">English</li>
</ul>
</div>
I do not know exactly what you are trying but changing CSS via java script, one way
<li class="language" id="selectedElement">Italian</li>
<li class="language" id="nonSelectedElement">Italian</li>
function click() {
document.getElementById("selectedElement").style.fontWeight = "bold";
document.getElementById("nonSelectedElement").style.opacity = 0.5;
}
Using Jquery-mobile, the following (abbreviated here) footer
<div data-role="footer">
<a href="#table" data-role="button" data-icon="plus"
data-iconpos="left" class="ui-btn-left">Open</a>
<a href="#" data-rel="back" data-role="button" data-icon="delete"
data-iconpos="notext" class="ui-btn-right">Close</a>
</div>
that exist in a popup, when popped-up, its buttons
are displayed outside the popup-frame, aligned under it.
Why? What am I doing wrong?
The full example is in http://jsfiddle.net/yotam/d0aqmx6m/
I'm beginning to wonder if button footers are not supported in popups. Or at least, not fully supported. From the docs, you need to throw a "ui-title" in there too - it's what will give the footer height (The docs show a span after the button definitions).
I've done that here:
<div data-role="footer">
Open
Close
<span class="ui-title"></span>
</div>
See: http://jsfiddle.net/had4or71/
Of course, it only partially solves your problem, as though they are now in the footer, they don't yet look good. I tried with a navbar in the footer with similarly disappointing results (the navbar was well positioned top, bottom, and left, but ran over the right border pretty badly.
Finally, I did this version real quick as well:
http://jsfiddle.net/ph0e54ee/2/
Which shows pushing the close button into the header like the demos site does, and just presenting your open button inline as a standard button - alas, it's a compromise, and not what you asked for.
On further investigation, it would appear the "ui-btn-left" and "ui-btn-right" classes are not supported in the footer, see:
gh:6331
gh:6872
gh:6137 (comment)
Again, I messed about with the CSS a bit, and managed to get something sort of nice, at least on my test browser of chrome. I suspect your mileage will vary greatly outside of chrome.: http://jsfiddle.net/9crnjakr/
Is possible to make a standard jquerymobile listview without the right arrow image that apears on the rigt of the li object?
Standard list view
Thanks
In versions of jQuery Mobile >= 1.0, use the data-icon attribute:
<li data-icon="false">Your Text</li>
data-icon="false" attribute removes the arrow.
Another way of doing this will be by adding data-icon="false" to the ul instead of li as indicated by Jacob above.
<ul data-role="listview" data-icon="false">
This way, all child objects within the listview will by default carry no icons.
If icon still persist just remove a tag or wrap it with a div.
e.g
<div>
<a> //your stuff here </a>
</div>
add data-icon-"false" on the li tag
I built a listview using jquery mobile. However, I would like to have a little more body text than what fits on a typical mobile screen.
<article id="military_list">
<ul data-role="listview" data-inset="true">
<li><a href="barracks">
<img src="../img/structure/barracks.png"/>
<h3>Barracks</h3>
<p>Fearless fighters weilding with shield and sword</p>
</a></li>
<li><a href="mage">
<img src="../img/structure/mage.png"/>
<h3>Mage Quarters</h3>
<p>Where magical folk live</p>
</a></li>
</ul></article>
It takes the <p></p> tag and abbreviates it automatically. Is there a way to instead simply jump down a line? There appears to be a lot of space left over in the block.
Heres an example:
As you can see in the yellow area, it cuts off the string and adds 'grant you...' rather than going to the next line.
Use this css:
.ui-li-desc {
white-space: normal !important;
}
Here's an example: http://jsfiddle.net/Gajotres/3ZVeN/
In order to add a fade transition to addClass/removeClass I am using jQuery UI:
$(document).ready(function(){
$('header nav a').hover(
function(){
$('header').stop().removeAttr("style").addClass('header-pink', 'slow')
},
function(){
$('header').stop().removeClass('header-pink', 'slow')
}
)
});
My goal is: to change (with a fade animation/effect) the background-color of the parent element (header) when :hover the child element (hover nav a). The css class is very simple:
.header-pink { background: pink; }
The HTML:
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
Of course, I am calling jQuery and jQuery UI with no errors:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"</script>
<script src="js/libs/jquery.effects.core.min.js"></script>
The jQuery script does not work properly because:
The class is added (onmouseover) but with no transition (fade) effect.
The class is added in a undesired way: <header style="background:
pink;"> I use .removeAtrr("style") to avoid this odd behavior.
The class is not removed (onmouseout).
Using .animate() to animate colors with jQuery UI is something I prefer to avoid because I am using variables with LESS and, of course, I want the style only to be modified by the stylesheet.
Please, check my project to get an idea. As you can see, my intention is to replace the background color of the fixed <header> with the color of the links when you place the cursor over the links. In other words, the background color of the <header> turns with a transitional fade animation/effect as blue or pink as soon as the pointer is :hover the link "Posts." or "Links." but it recovers its original state (with no css class, .removeClass()) as soon as the pointer is out with the same transitional fade animation/effect. Please note that my project is still in development and I am currently testing the effect with same properties for all the links; when I accomplish the desired result I will apply the individual properties (background-color) for every link.