I have setup a list of contact in list of categories...
http://jsfiddle.net/dalkill/ny7qeep6/2/
<div class='category_snap_to_target green'>
<div class='contact_draggable'>
blah blah1
</div>
<div class='contact_draggable'>
blah blah2
</div>
</div>
<div class='category_snap_to_target yellow'>
<div class='contact_draggable'>
blah blah3
</div>
<div class='contact_draggable '>
blah blah4
</div>
</div>
<div class='category_snap_to_target red'>
<div class='contact_draggable'>
blah blah5
</div>
<div class='contact_draggable'>
blah blah6
</div>
</div>
<div class='category_snap_to_target blue'>
</div>
<style>
.blue { background-color: blue }
.red { background-color: red }
.green { background-color: green }
.yellow { background-color: yellow }
</style>
<script>
$(function() {
$( '.contact_draggable' ).draggable();
$('.category_snap_to_target').droppable({
accept: '.contact_draggable',
drop: function(event, ui){
$(this).append($( ui.draggable ));
$( ui.draggable ).css('position', '');
}
});
});
</script>
user can contact and drop in another category... however after the first drag and contact div looses the ability to show show the helper...
it still drags and drops fine... but on second attempt to move same contact div it looses it's helper functionality . still drags and drops but no visual indication to user.
also i had to add $( ui.draggable ).css('position', ''); to make the "append" function work nicely by appending the contact div into the category div . without it, the contact div stays where you last leave it with mouse, and does not snap into place below the last contact in that category ???
You need the position: relative for the visual indication. Instead of setting position: '', you can set left: auto and top:auto.
$( ui.draggable ).css('left', 'auto');
$( ui.draggable ).css('top', 'auto');
Check out the Fiddle
Related
I am new to JQuery Mobile. Currently trying to use JQM in an ASP.NET MVC project. I am following this tutorial found on JQM official site. But it uses multiple html pages.
<div data-role="page" id="page2" data-prev="page1" data-next="page3">
<div role="main" class="ui-content">
.....
</div>
</div>
Here data-next="page3" is used to show page3.html. My question- is page3.html being loaded by ajax while viewing page2.html ?. If I would like to use all the pages in a single html file by using JQM Page, how should i proceed?
data-next and data-prev are just arbitrary HTML5 data attributes used in the example to store the url of the next and previous pages. For internal pages you could set them to "#page2", "#page3", etc. So for 3 pages you might set it up like this:
<div id="page1" data-role="page" data-prev="" data-next="#page2">
<div data-role="header" data-position='fixed'>
<h1>Page 1</h1>
</div>
<div data-role="content">
I am page 1
</div>
</div>
<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
<div data-role="header" data-position='fixed'>
<h1>Page 2</h1>
</div>
<div data-role="content">
I am page 2
</div>
</div>
<div id="page3" data-role="page" data-prev="#page2" data-next="">
<div data-role="header" data-position='fixed'>
<h1>Page 3</h1>
</div>
<div data-role="content">
I am page 3
</div>
</div>
Then you just update the example's javascript to use the internal url without adding the ".html" to it:
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "slide"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "slide",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
// Handler for navigating to the next page
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
});
jQM uses the jqmData() function to get and set data attributes.
Here is a working DEMO
In my jQuery mobile app for android , I have a long list view inside a popup , I have used iscroll because overflow:auto is not working on android 2.3.6 , and scrolling now is working ok on all android devices after using iscroll , but the problem is that the scroll bar starts from the header of the popup to the end of the popup ( along the popup height) not the list view height "popup content" although i applied the iscroll to the div that contains the listview. How can I fix this problem and make the scroll appears a long the list height? please help me
This is the iscroll.js that i use jsfiddle
<head>
<script type="text/javascript" src="js/iscroll.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
</body>
JS code
$(document).on( 'pagecreate', '#index',function(){
var scrollObj;
// to make the popup take the screen width ,height
var window_Width = $( window ).width();
var window_Height = $(window).height();
$('#MyPOPUP').css('width', window_Width-30 );
$('#scrollContent').css('width', window_Width-30 );
$('#MyPOPUP').css('height', window_Height-(window_Height/4) );
$('#scrollContent').css('height', window_Height-(window_Height/4)-87 );
scrollObj = new iScroll('scrollContent', { vScrollbar: true, hScrollbar:false,fixedScrollbar : true,momentum: true});
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
setTimeout(function () {
scrollObj.refresh();
}, 0);
$('#Btn1').on('click', function(){
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
selected_elem = $(this).attr('id');
console.log('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});
CSS
#scrollContent{
padding: 0 !important;
}
I have a list view inside a popup , when the user select a list element I want to change this element "li" background color , I have tried the following code it was working on jQuery mobile 1.3.2 but it didn't work when i upgraded my app to 1.4.0 , How can I change the background color of the list element when the user click on it ? please help me
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Java script code
$('#index').on( 'pageinit',function(){
for(var i=1;i<=50;i++)
{
$('#countrieslist').append('<li id="'+i+'">'+''+'<font>'+Country+i+'</font>' +'</li>');
}
$('#countrieslist').listview('refresh');
});
$('#Btn1').on('touchstart', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
You have a little typo in your loop that creates the countries, but other than that the code seems to work,
Here is a working DEMO
Because pageinit is deprecated n 1.4, I have used pagecreate; and in the for loop the word country after the font tag should be within the single quotes as it is not a variable. Also, in the li click, I reset all other countries to transparent background before setting the newly selected one:
$(document).on( 'pagecreate', '#index',function(){
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
$('#Btn1').on('click', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$('#countrieslist li').css({background: 'transparent'});
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});
I am trying to select only the outer container for the drop target with jQuery UI.
I am trying to drop in media-content but not in media-list-items.
The reason is that media-list-items is not the full width of it's parent and I only want to drop to the right side which is a different background color the full height.
HTML:
<div class="media-content clearfix ui-droppable on" style="">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="media-list-items clearfix">
<ul data-gallery_id="18" class="media-list ui-sortable" style="">
<li id="media_17"></li>
<li id="media_15"></li>
</ul>
</div>
</fieldset>
</form>
</div>
JS:
var $trash = $('.media-content:not(.media-list-items), .media-content');
$trash.droppable({
accept: '.media-list > li',
drop: function(event, ui) {
console.log('trashed');
}
});
I'm not sure you can achieve what you want without adding another element as your "trash" droppable. With some neat css you can make it look pretty much the same :)
html
<div class="media-content">
<form method="post" class="form-horizontal" action="./">
<fieldset>
<div class="trash"></div> <!-- added a trash element -->
<div class="media-list-items">
<ul class="media-list">
<li id="media_25"></li>
<li id="media_26"></li>
<li id="media_27"></li>
</ul>
</div>
</fieldset>
</form>
</div>
css
.media-content {
position: relative; /* makes it contain absolutely positioned descendants */
}
.media-content .trash {
position: absolute;
top: 0; bottom: 0; /* stretches to full height of .media-content */
right: 0;
width: 100px;
background:#f5f5f5;
}
js
$('.media-content .trash').droppable({
drop: function(event, ui) {
console.log('trashed');
}
});
Demo at: http://jsfiddle.net/KazeG/6/
I am trying to modify the following script to show/hide the Tip only when the "?" is hovered on and not the entire "li" Block
The HTML:
<ul class="tips">
<li>
? Feature 1
<div class="tip">
<h4>Tip Title 1</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
<li>
? Feature 2
<div class="tip">
<h4>Tip Title 2</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
<li>
? Feature 3
<div class="tip">
<h4>Tip Title 3</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
</ul>
The JQuery script
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
The CSS:
.tips div {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}
I have tried to modify the script like so
$("ul.tips li a").hover(function() {
so it targets the "a" tag but the it ends up not showing anything.
You need to end your lines of js:
$("ul.tips li a").hover(function() {
$(this).siblings("div.tip").stop()
.fadeIn()
.css("display","block"); // <-- gotta put the semi-colon
}, function() {
$(this).siblings("div.tip").stop()
.fadeOut(); //<-- here too
});
That seems unusual as it seems like it should work, but try:
$(".tooltip").hover(function() { ... });
You should also change the $(this).find("div")... to $(this).next()...
You need to make sure that you wrap your event handler in the in jQuery's document ready function:
$(document).ready(function () {
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
});
Your hover event won't bind to the html elements unless the html elements have been loaded into the DOM tree already. $(document).ready() delays running the JS included in the passed anonymous function until the rest of the html document is loaded and the DOM tree is ready.
More reading at: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()