https://jsfiddle.net/tk48ecxb/24/
Here is an example of the code I'm working with. It works fairly well with larger sizes but it breaks the small size boxes. Not sure why its moving them when removing resized boxes, that isn't happening in the actual project I'm working on. Need the boxes, which are actually svg's in the project, to fill the width of the larger boxes and not really be choppy or attach in weird ways.
Also, anyway to trigger an event when all boxes are filled?
HTML
<div class="top-row">
<ul class="holderList">
<li class="holder" id="large"></li>
<li class="holder" id="medium"></li>
<li class="holder" id="small"></li>
<li class="holder" id="tiny"></li>
</ul>
</div>
<div class="bottom-row">
<ul>
<li class="square" id="square1">
</li>
<li class="square" id="square2"></li>
<li class="square" id="square3"></li>
<li class="square" id="square4"></li>
</ul>
</div>
CSS
ul li{
border: 1px solid black;
display: inline-block;
}
.holderList > li{
margin: 20px;
}
#large{
height: 200px;
width: 200px;
}
#medium{
height: 150px;
width: 150px;
}
#small{
height: 100px;
width: 100px;
}
#tiny{
height: 50px;
width: 50px;
}
.square{
height: 60px;
width: 60px;
background: green;
}
JS
$(".square").draggable({
drag: function(event, ui) {
var draggable = $(this).data("ui-draggable");
$.each(draggable.snapElements, function(index, element) {
ui = $.extend({}, ui, {
snapElement: $(element.item),
snapping: element.snapping
});
if (element.snapping) {
if (!element.snappingKnown) {
element.snappingKnown = true;
draggable._trigger("snapped", event, ui);
}
} else if (element.snappingKnown) {
element.snappingKnown = false;
draggable._trigger("snapped", event, ui);
}
});
},
snap: ".holder",
snapMode: "inner",
snapped: function(event, ui) {
var squareWidth = ui.snapElement.width();
var squareHeight = ui.snapElement.height();
ui.helper.css({width: squareWidth, height: squareHeight});
}
});
All I need to do was add snapTolerance apparently.
Now to figure out how to create a popup if all windows are filled.
Related
I need to create popup language dropdown menu with country name, flag and link to the language version of the site. After user select menu item - it should take you to the needed url (language version of the page) and this choice should stay visible on the new page (after reload).
Example of the menu - https://prnt.sc/sjumj8 (https://www.farfetch.com/shopping/women/items.aspx)
Here is an example of what I'm trying to create: https://jsfiddle.net/Okean/8x0atLpy/62/
<ul class="list-unstyled" id="select-lang">
<li class="init">[SELECT]</li>
<li data-value="value 1"> <img src="https://image.flaticon.com/icons/svg/197/197615.svg"> Language 1 </li>
<li data-value="value 2"> <img src="https://image.flaticon.com/icons/svg/197/197386.svg">Language 2 </li>
<li data-value="value 3"> <img src="https://image.flaticon.com/icons/svg/197/197484.svg">Language 3 </li>
<li data-value="value 4"> <img src="https://image.flaticon.com/icons/svg/197/197380.svg">Language 4 </li>
</ul>
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').toggle();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.toggle();
});
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
$('#select-lang').val(selItem);
}
$('#select-lang').change(function() {
var selVal = $(this).val();
sessionStorage.setItem("SelItem", selVal);
});
body{
padding:30px;
}
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
li img {
width: 20px;
}
You can use localStorage. Once user is selected an option, you can save it to browser's local storage where 'language' is your key and you can name it anything and where 'selectedOption' is the language user has selected.
// Set the preference
window.localStorage.setItem("language", selectedOption);
// Get the preference, anytime you want once set
window.localStorage.getItem("language")
I have something like the attached code where some green divs can be dragged and dropped between list elements.
There are 2 issues that I don't seem to be able to solve:
1) The "ghost" dragged image in the larger "Take Me" div is almost invisible. The user has very little idea of what is been dragged. Can this be changed somehow ?
2) The drop target is the one under the mouse pointer. This is quite logical but it makes it difficult for the user to understand where the green is going to be dropped. If it was dragged by the bottom then the green makes a big jump down when the mouse button is released. Is there a way to make the top of the ghost image snap to the pointer ?
In the final application there will be many green divs and the user should be able to slot them together with no overlap so a clear idea of what is being dragged and precision dropping are important.
Would I be better off not using the drag events and implement dragdrop manually the old-fashioned way (most likely using some kind of library) ?
I need support only for the latest browsers and have tried only Chrome and FF on Windows so far.
function initDragDrop(){
initDragDrop.dragged = null;
// Dragged
$('div')
.on('dragstart',
function(event) {
initDragDrop.dragged = this;
initDragDrop.dragged.style.opacity = 0.5;
event.originalEvent.dataTransfer.setData('text/plain', 'dummy');
})
.on('dragend', function( event ) {
event.target.style.opacity = '';
});
// Drop targets
$('li')
.on('dragenter', function(event) {
event.preventDefault();
})
.on('drop dragdrop', function(event){
event.preventDefault();
event.stopPropagation();
event.target.classList.remove('dragover');
if ( initDragDrop.dragged ) {
initDragDrop.dragged.style.opacity = '';
$(this).append($(initDragDrop.dragged));
initDragDrop.dragged = null;
}
})
.on('dragover', function(event) {
event.target.classList.add('dragover');
event.preventDefault();
})
.on('dragleave', function(event) {
event.target.classList.remove('dragover');
});
}
initDragDrop();
ul {
width: 30em;
display: block;
}
ul.small {
margin-top: 4em;
width: 10em;
}
li {
height: 2em;
border: 1px solid grey;
}
li.dragover {
background: #ddd;
}
div {
background-color: lightgreen;
border: 2px solid darkgreen;
position: relative;
margin: 0;
width: 90%;
height: 5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li></li>
<li></li>
<li><div draggable="true">
Take Me
</div></li>
<li></li>
</ul>
<ul class="small">
<li></li>
<li></li>
<li><div draggable="true">
Take Me too
</div></li>
<li></li>
<li></li>
<li></li>
</ul>
You can't style the dragged element directly.
As soon as the drag is started, it is a bitmap copy of what the element looked like at this moment.
But, you can change its style (or classes) before the drag starts, and revert it back right after.
So, we should be able to stylize it to be at the good position before the "screenshot" occurs.
Here is an attempt where the styling works but not the positionning… I'm trying to figure it out:
(function initDragDrop() {
initDragDrop.dragged = null;
// Dragged
$('div')
.on('dragstart', function(event) {
initDragDrop.dragged = this;
initDragDrop.dragged.classList.add('ghost');
event.originalEvent.dataTransfer.setData('text/plain', 'dummy');
// Set style for the element before dragging it
var elm = event.target;
elm.classList.add('dragged');
elm.style.top = (event.clientY) - 5 + 'px';
elm.style.left = (event.clientX) - 5 + 'px';
// Reset style after drag has started
setTimeout((function(elm) {
return function() {
elm.classList.remove('dragged');
elm.style.removeProperty('top');
elm.style.removeProperty('left');
}
})(elm), 1000);
})
.on('dragend', function(event) {
// event.target.style.opacity = ''; // Not used
});
// Drop targets
$('li')
.on('dragenter', function(event) {
event.preventDefault();
})
.on('drop dragdrop', function(event) {
event.preventDefault();
event.stopPropagation();
event.target.classList.remove('dragover');
if (initDragDrop.dragged) {
initDragDrop.dragged.classList.remove('ghost');
$(this).append($(initDragDrop.dragged));
initDragDrop.dragged = null;
}
})
.on('dragover', function(event) {
event.target.classList.add('dragover');
event.preventDefault();
})
.on('dragleave', function(event) {
event.target.classList.remove('dragover');
});
})();
ul {
width: 30em;
display: block;
}
ul.small {
margin-top: 4em;
width: 10em;
}
li {
height: 2em;
border: 1px solid grey;
}
li.dragover {
background: #ddd;
}
div {
background-color: lightgreen;
border: 2px solid darkgreen;
position: relative;
margin: 0;
width: 90%;
height: 5em;
}
.ghost {
opacity: 0.5;
}
.dragged {
display: block;
position: fixed;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li></li>
<li></li>
<li>
<div draggable="true">
Take Me
</div>
</li>
<li></li>
</ul>
<ul class="small">
<li></li>
<li></li>
<li>
<div draggable="true">
Take Me too
</div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
I am trying to add JQuery functionality to my Rails application; however, it is not working. I am using JQuery draggable to move images around the screen. I have it working in a stand alone html file but I'm having a lot of difficulty adding it to my Rails application. This is the stand alone file:
<!DOCTYPE html>
<html>
<head>
<title>City</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/jquery-ui-1.10.4/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4/ui/jquery-ui.js"></script>
<style type="text/css">
h1, h3
{
text-align: center;
margin: 0px;
}
/* style the list to maximize the droppable hitarea */
#canvas
{
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0px auto;
overflow: hidden;
}
/*#canvas ol { margin: 0; padding: 1em 0 1em 3em; }*/
/*li { list-style: none;}*/
.canvas-area
{
width: 600px;
height: 600px;
}
/* map background */
/* img {
position: relative;
left: 50%;
top: 50%;
}*/
/* draggable icons */
.draggable
{
background: transparent url('images/transparent.png') repeat center top;
width: 40px;
height: 40px;
padding: 5px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
border: hidden;
/*position: absolute;*/
}
#draggable
{
width: 40px;
height: 40px;
}
div img
{
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
}
.arrow img
{
width: 200px;
height: 200px;
}
.arrow
{
width: 200px;
height: 200px;
border: 1px solid black;
}
.commercial100 img
{
width: 100px;
height: 100px;
}
.commercial100
{
width: 100px;
height: 100px;
}
#building img
{
height: 150px;
}
</style>
<script>
// jquery ui script for snapping to grid
$(function() {
$( ".draggable" ).draggable({ grid: [10,10] });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ], snap: true });
});
</script>
</head>
<body>
<div class="content">
<!-- Canvas for building the city -->
<h1>Mock view of my city</h1>
<h3>600 x 600</h3>
<div id="canvas">
<div id="ignoreThis" class="ui-widget-content canvas-area">
<p class="placeholder">Add your items here</p>
<div id="arrowSvg" class="draggable ui-widget-content arrow">
<img src="images/arrow.svg" alt="house" type="image/svg+xml" /> SVG (200px x 200px)
</div>
<div id="arrowPng" class="draggable ui-widget-content arrow">
<img src="images/arrow.png" alt="house"> PNG (200px x 200px)
</div>
<div id="building" class="draggable ui-widget-content commercial100">
<img src="images/building.png" alt="building" />
</div>
<div id="factory" class="draggable ui-widget-content commercial100" >
<img src="images/factory.png" alt="factory" />
</div>
<div id="ferry" class="draggable ui-widget-content commercial100" >
<img src="images/ferry.png" alt="ferry" />
</div>
<div id="house2l" class="draggable ui-widget-content" >
<img src="images/house2l.png" alt="two level house" />
</div>
<div id="houseSvg" class="draggable ui-widget-content">
<img src="images/house.svg" alt="house" type="image/svg+xml" /> SVG
</div>
<div id="housePng" class="draggable ui-widget-content">
<img src="images/house.png" alt="house" />
</div>
<div id="houseSF" class="draggable ui-widget-content" >
<img src="images/housesf.png" alt="SF house" />
</div>
<div id="street1" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
<div id="street2" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
<div id="street3" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
<div id="street4" class="draggable ui-widget-content street" >
<img src="images/street.png" alt="street">
</div>
</div>
<script>
// code to make the active div move to the front
// code from http://www.codingforums.com/javascript-programming/260289-bring-div-element-front-click.html
// create an array to hold the (buildings, streets, landmarks) element's id
var ids=[],
// grab all the divs (each icon) and put it into thedivs
thedivs = document.getElementById("canvas").getElementsByTagName("div");
for (var i = 0; i < thedivs.length; i++) {
// add the id of each div to the ids array
//alert(thedivs[i].id);
ids.push(thedivs[i].id);
thedivs[i].onclick = function() {
for (var a = 0; a < ids.length; a++) {
if (this.id == ids[a]) {
// take current id that matches the selected id and move it to the end
ids.push(ids.splice(a,1));
}
document.getElementById(ids[a]).style.zIndex=a;
}
}
}
</script>
</div>
<input type="button" value="save" onclick="saveAction()">
<script>
//Cycle through images and grab their x/y positions
var saveAction = function(){
elementNames = document.getElementById("canvas").getElementsByTagName("div");
for(var i = 0; i < elementNames.length; i++)
{
var idName = $( "#" + elementNames[i].id);
var offset = idName.offset();
alert("Left pos: " + offset.left + " Top pos: " + offset.top);
}
};
</script>
</div>
</body>
</html>
I have placed the Javascript in assets/javascripts/custom_map.js and I have placed the html / css in my new_map.html.erb view. The images are showing up fine in the Rails app but they are not draggable. How can I fix this? Thanks!
Perhaps your load order is incorrect or your assets path is wrong. Try linking your script as the last thing on your page and wrap everything in it inside a jquery ready function:
$(function() {
// all your scripts here
});
Also try viewing your source and making sure that your .js file is serving correctly
It should be /assets/yourjs.js rather than /assets/javascripts/yourjs.js
Also, I think you may be able to use the jquery ui stack function to make items settle on top (not sure, you might want to try it):
$( ".draggable" ).draggable({ stack: ".draggable" });
Without knowing the specific errors you're receiving, I can only detail why you're having a problem, and how to resolve it generally:
Unobtrusive
You should never put javascript in your HTML code (known as inline JS). Problems being that it's messy & can be easily tampered with... hence making it relatively insecure, and generally seen as amateurish
A better way is to use unobtrusive JS (where the JS is stored in files loaded outside the scope of HTML). Rails uses the asset pipeline for this:
#app/assets/javascripts/application.js
var ready = function() { // -> you said JQuery :)
$( ".draggable" ).draggable({ grid: [10,10] });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ], snap: true });
/////////////////////////////////
var ids=[],
// grab all the divs (each icon) and put it into thedivs
thedivs = document.getElementById("canvas").getElementsByTagName("div");
for (var i = 0; i < thedivs.length; i++) {
// add the id of each div to the ids array
//alert(thedivs[i].id);
ids.push(thedivs[i].id);
thedivs[i].onclick = function() {
for (var a = 0; a < ids.length; a++) {
if (this.id == ids[a]) {
// take current id that matches the selected id and move it to the end
ids.push(ids.splice(a,1));
}
document.getElementById(ids[a]).style.zIndex=a;
}
}
}
};
$(document).on("page:load ready", ready);
If you migrate your JS from your views and put into your asset files, you'll be in a much better position to give us feedback, which we can then use to help fix your problem further
I am new to this so please bear with me if my question is obviously stupid. I am trying to incorporate the slideshow as shown in this site using caroufredsel http://coolcarousels.frebsite.nl/c/48/
Now I needed to add captions to the images. so after trying to tweak the code unsuccessfully, I created a workaround where I created another carousel for just the captions and synchronized it with the main carousel. It worked that the captions appeared just fine but now I am not able to synchronize it with the click function/feature on the main carousel. if I comment the click function out , it works splendidly, but I need that click function. what am I doing wrong or is there an easier way to do what I want. I went thru the documentation and tried to incorporate a new div with id "item". but then the entire "pager" section disappears etc. I will include the full code here. thanks in advance for the help.
my css looks like this::
html, body {
height: 100%;
padding: 0;
margin: 0px;
}
body {
min-height: 400px;
}
#wrapper {
width: 697px;
height: 400px;
margin: -155px 0 0 -330px;
position: absolute;
top: 270px;
left: 50%;
box-shadow: 0px 1px 20px #c5a101;
border:3px solid #c5a101;
background-color: rgba(246,217,90,0.9);
}
#carousel {
width: 580px;
height: 360px;
overflow: hidden;
position: relative;
z-index: 2;
float:left;
}
#carousel img {
display: block;
float: left;
}
#pager {
width: 112px;
height: 350px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
#pager div {
height: 81px;
width: 100px;
box-shadow: 0px 0px 5px #c5a101;
}
#pager img {
cursor: pointer;
display: block;
height: 81px;
width: 112px;
margin-bottom: 5px;
float: left;
border:3px solid #c5a101;
cursor:default;
}
#texts-wrapper {
width: 700px;
height: 50px;
float: left;
}
#texts > div {
width: 300px;
height: 50px;
position: relative;
float: left;
margin-top: auto;
}
#texts > div > div {
width: 700px;
position: absolute;
left: 2px;
bottom: 5px;
float: right;
padding-top: 25px;
}
#texts a {
color:#083377;
font-family:Trajan Pro;
font-size: 16px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
text-decoration: none;
outline: none;
display: block;
background-color: rgba(248,229,145,0.4);
border: 1px solid rgba(246,217,90,0.4);
width: 700px;
height: 85px;
padding-left: 10px;
}
#texts a:hover {
background-color: rgba(255,208,0,0.9);
box-shadow: 0px 2px 15px #c5a101;
color: rgba(227,75,76,0.7);
}
my html code looks like this::
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="img/building.jpg" width="580" height="350" />
<img src="img/guytalkingtokids.jpg" width="580" height="350" />
<img src="img/group.jpg" width="580" height="350" />
<img src="img/oath.jpg" width="580" height="350" />
<img src="img/finalists.jpg" width="580" height="350" />
</div>
<div id="pager"></div>
</div>
<div id="texts-wrapper">
<div id="texts">
<div>
<a style="text-decoration:none; " href="blank.html" >
<div><p>The red building across the street.</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>How yall doin? blah blah</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>Lotsa ppl!.</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>I put another caption!</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div> <p>Yay! We won?! How?!</p></div></a>
</div>
</div>
</div>
</div>
And my script tag looks like::
$(function() {
var $carousel = $('#carousel'),
$pager = $('#pager');
// gather the thumbnails
var $thumb = $( '<div class="thumb" />' );
$carousel.children().each(function() {
var src = $(this).attr( 'src' );
$thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
});
// duplicate the thumbnails
for (var a = 0; a < $carousel.children().length - 1; a++) {
$pager.append( $thumb.clone() );
}
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 5500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
}
}
});
// create thumb carousels
var $thumbs = $('.thumb');
$thumbs.each(function( i ) {
$(this).carouFredSel({
auto: false,
scroll: {
fx: 'directscroll'
},
responsive:true,
items: {
start: i+1,
visible: 1,
width: 112,
height: 89.6
}
});
// click the carousel---> comment out this portion to disable the click function on small images
$(this).click(function() {
var src = $(this).children().first().attr('src').split('/small/').join('/large/');
$carousel.trigger('slideTo', [$('img[src="' + src + '"]', $carousel), 'next']);
});
});
// comment out the click function and uncomment this section of #texts to have a synchronised carousel with captions but no click function
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
});
Now I used jquery version 1.8.2 and caroufredsel version 6.2.1. thanks again for the help in advance. sorry if my code looks messy as well.Latest update as of 3/22/2014:: I went thru the documentation of the plugin CarouFredSel and stumbled upon one of the settable parameters/ configurations called "synchronise". If I understood it right, I can synchronise 2 carousels to respond to the same event. So i added the line of code "synchronise:{"#carousel"} into the text carousel to tell it to synchronise it with the main carousel...
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
synchronise:{"#carousel"},/*This is the new line I added*/
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
Unfortunately that did not work as well. Now there is no timing pattern as well. everytime I click the small image it just went ahead in position at a random rate. So I am still stuck with the same problem if not making it worse. Thanks for the help in advance.
After fighting with the problem for more than a week, I was able to figure out a solution to my problem. Now it may not be the best solution but it worked and hence I am posting it so that in future if somebody else has the same or similar problem, it may be of help.Now if anyone came up with a solution that works better, I would still like you to post it here for I may want to learn what you did, why you did it and learn from the experience. I dont claim to be an expert programmer. I am still learning and this site has been a great learning tool for me so far.Anyway coming back to the problem, I added this piece of code...
//sais try: synchronise texts and carousel to work together and on click
var index = $(this).triggerHandler( 'currentPosition' );
if ( index == 0 ) {
index = $(this).children().length;
}
// trigger the titles carousel
$('#texts').trigger('slideTo', [ index, 'next' ]);
right here...
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 3500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
/* [ the code goes here!]*/
now with that i was able to synchronise the carousels (#carousel, #texts) together to work with the click function/feature as well. Also I had tried to synchronise the carousel using a synchronise function thats in carouFredSel. Well take that out. It did not work.I dont know if this is going to be useful to anyone else but if it did, thats great. But again if somebody came up with a better solution please do let me know as well. Thanks. Keep up the goo work
I tried 'float: left;', but when scrolling(slowly is clearer), only one list item scroll..but not numItem of one row..(But photos app built in palm pre ROM woks just fine)
In one file:
<div id="results-list" class='thumb-list' x-mojo-element="List"></div>
In another:
<ul>#{-listElements}</ul>
In another:
<li class='thumb-item'>
<img src="#{-pic_idFormatted}"/>
</li>
The CSS:
/**
* thumblist
*/
.thumb-list {
padding: 12px;
}
.thumb-item {
float: left;
margin: 8px;
}
.thumb-item img {
width: 80px;
height: 80px;
border-radius: 5px;
border: 1px solid black;
}
The Script:
this.resultsModel = {items: []};
this.controller.setupWidget('results-list', {
itemTemplate:'thumb/search-result',
listTemplate:'thumb/result-list',
formatters:{pic_id:this.formatThumb.bind(this)},
//renderLimit: 50,
lookahead: 20,
fixedHeightItems: true,
initialAverageRowHeight:100,
hasNoWidgets: true
},
this.resultsModel);
in the same grid
The <ul> should wrap <li>s:
<ul>#{-listElements}
<li class='thumb-item'>
<img src="#{-pic_idFormatted}"/>
</li>
</ul>
But other than that, the rest of your question is very unclear.