I have a simple webapp consisting of a main page that contains a grid with 3 columns.
<div data-role="content">
<div class="ui-grid-b" id="main">
</div>
</div>
At runtime this grid is expanded with new rows by clicking a button.
$(document).on('pageinit', '#page-home', function() {
$('button').on('click', function() {
var table = $('#main');
var blocka = $('<div class="ui-block-a">One</div>');
var blockb = $('<div class="ui-block-b">Two</div>');
var blockc = $('<div class="ui-block-c">Three</div>');
blocka.appendTo(table);
blockb.appendTo(table);
blockc.appendTo(table);
});
});
Now I have the problem that if there are more rows added (let's say 10) then the last rows run out of screen.
Is there a simple way to automatically scroll to the last row everytime a new one is created?
I know that I can get the element by calling table.find('.ui-block-a:last') but I don't know how to scroll to the found element.
Thanks in advance!
As suggested in this answer: How to go to a specific element on page?
Add the following after blockc.appendTo(table) in your click handler:
$('html, body').animate({
scrollTop: blocka.offset().top + 'px'
}, 'fast');
Here is fiddle demo: http://jsfiddle.net/ezanker/5ap48/
Related
I want to show my tasks like this in bootstrap cards -
Picture for reference
Code that I'm using right now -
HTML
<div class="card" id="todo"></div>
AJAX
var data = JSON.parse(httpRequest2.response);
console.log(data);
$.each(data, function(index, itemData) {
$("#todo").append('<div class="row"><div class="col-9">'+
itemData.Todo.task+
'</div></div></div>'+
'<div class="col-3"><p>'+
Some Data
</div>'
);
});
It is showing multiple to-do in one card. How can I show one to-do in one card?
Please help!
The problem is that you add all the todo in one card (div#todo). So what you need to do is juste to make a div that will contains the card.
<div id="todos"></div>
const data = JSON.parse(httpRequest2.response);
console.log(data);
$.each(data, function(index, itemData) {
$("#todos").append('<div class="card"><div class="row"><div class="col-9">'+
itemData.Todo.task+
'</div></div></div>'+
'<div class="col-3"><p>'+
Some Data
</div></div>'
);
});
It should work as you want. And you can add css to improve style.
I have a draggable element and a div with two static drop zones:
<img id="dragimage" src="_images/image.png" >
<div class="lines">
<div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
<div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
</div>
<script>
$(function () {
$("#dragimage").draggable();
$(".dropzone").droppable({
drop: function(event,ui){
alert('dropped');
}
});
</script>
I have a button that dynamically adds additional drop zones. I add the "ui-droppable" class to the dynamic drop zones since calling .droppable() adds that class automatically to any static droppable elements.
function AddLine()
{
var linecount = $("#linecount").val();
var linediv = $(".lines").html();
linecount++;
$("#linecount").val(linecount);
linediv += '<div class="dropzone ui-droppable " style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>';
$(".lines").html(linediv);
}
When I drop the draggable element into one of the static drop zones prior to adding any dynamic drop zones, I get the alert every time with no difficulties.
When I add one or more dynamic drop zones, the drop event never fires again, even for the original static drop zones.
Any suggestions?
I figured it out with the help of This
The AddLine method above is now this:
function AddLine()
{
var linecount = $("#linecount").val();
var linediv = $(".lines").html();
linecount++;
$("#linecount").val(linecount);
var newline = $('<div class="dropzone ui-droppable" class="ui-droppable" style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>').appendTo(".lines");
newline.droppable( {
drop: function(event,ui)
{
alert('dropped'+linecount);
}
});
}
here's the function:
$('.popoutlink').on('click', function() {
var box = $('#' + $(this).data('box'));
box.siblings().hide();
box.toggle("slide", { direction: "left" }, 500);
box.siblings().hide();
});
the two siblings.hide statements are because I'm in the middle of trying to figure out why I'm left with two slideouts on screen if I click on two buttons in rapid succession.
The html is:
<div class="col-md-2">
<div class="popoutlink" data-box="p1">1</div>
<div class="popoutlink" data-box="p2">2</div>
<div class="popoutlink" data-box="p3">3</div>
<div class="popoutlink" data-box="p4">4</div>
<div class="popoutlink" data-box="p5">5</div>
</div>
<div class="col-md-10 bb" style="height: 400px;">
<div class="popout" id="p1"><h1>panel 1</h1></div>
<div class="popout" id="p2">
<h1>panel 2</h1>
</div>
If I click on two buttons quickly then two windows are left on screen. I would like the siblings to hide before the selected div appears.
I have tried using promise.done():
box.siblings().hide(200).promise().done(function(){
box.toggle("slide", { direction: "left" }, 500);
});
to no effect. Adding box.toggle to hide as a callback:
box.siblings().hide(200, function(){
box.toggle("slide", { direction: "left" }, 500);
});
was very funny but not useful.
How do I get the siblings to go away reliably before I show the selected div no matter how quickly I click the buttons?
You see it here just click on the numbered boxes quickly
Thanks
If I understand your question, this should help:
https://jsfiddle.net/Twisty/3mbh5p0r/
jQuery UI
$(function() {
$('.popoutlink').on('click', function() {
var box = $('#' + $(this).data('box'));
$(".popout").hide();
//box.siblings().hide();
box.toggle("slide", {
direction: "left"
}, 500);
//box.siblings().hide();
});
});
When any of the "links" are clicked, they are all hidden and then only the one whom was clicked is toggled.
Update
A little more testing of .hide() versus .css("display", "none") revealed that changing the CSS was a faster method. This page talks about how it's immediate but I found that it wasn't as fast.
The matched elements will be hidden immediately, with no animation.
This is roughly equivalent to calling .css( "display", "none" ),
except that the value of the display property is saved in jQuery's
data cache so that display can later be restored to its initial value.
If an element has a display value of inline and is hidden then shown,
it will once again be displayed inline.
And:
Note that .hide() is fired immediately and will override the animation
queue if no duration or a duration of 0 is specified.
I did try using the callback, which made it worse. The callback should be triggered when the hide animation is complete, yet it added the element of animating the hide operation. Even when the speed was 0, it was slower.
So I advise this:
$(function() {
$('.popoutlink').on('click', function() {
$(".popout").css("display", "none");
$('#' + $(this).data('box')).show("fast");
});
});
Could anybody please let me know why the following code isn't working when i am using with Jquery mobile JS
http://jsfiddle.net/znz17ctm/7/
This is my code
<div role="main" class="ui-content oms-content" id="dd">
<div class="myactivelabelsWrap" id="result"></div>
</div>
var response = {
"Restaurants": [{
"RestrntArea": "Haii",
"cust_loc_id": "374"
}, {
"RestrntArea": "rerrrwe",
"cust_loc_id": "373"
}]
}
showLabels();
function showLabels() {
//$("#result").html("");
var favoriteresultag = '';
for (var i = 0; i < response.Restaurants.length; i++) {
var name = response.Restaurants[i].RestrntArea;
if (name) {
favoriteresultag +=
'<div data-role="collapsible" data-inset="false" class="my-collaspible"><h3>' +
name +
' <a class="icon-pencil-1 labelEditIcon "></a></h3></div>';
}
}
$("#result").append(favoriteresultag).trigger("create");
}
$(document).ready(function() {
$('.my-collaspible').bind('expand', function() {
alert('Expanded');
});
$('.my-collaspible').bind('collapse', function() {
alert('Collapsed');
});
});
Why the collapse and expand even'ts are being captured ??
Instead of document ready i tried with al the page events of mobile . But no luck .
From your fiddle I can't tell which version of jQM you are using. You have checked version 1.3 but then added the 1.4 css. Assumin version 1.4, I have updated your fiddle:
FIDDLE
Basically, you need to use event delegation to attach the events because the collapsibles do not exist at the time of the bind. Also the event names are actually collapsibleexpand and collapsiblecollapse.
So use on() instead of bind() by handling the event on the parent div and delegating it to all items with class my-collapsible that exist now or added dynamically:
$("#result").on('collapsibleexpand', '.my-collaspible', function () {
alert('Expanded');
});
$("#result").on('collapsiblecollapse', '.my-collaspible', function () {
alert('Collapsed');
});
I'm looking to create a nice effect when appending multiple paragraphs to a div. When I append I want to fadeIn the paragraphs one at a time so one shows after the other. At the moment they all fade in at the same time.
example html;
<div class="wrapper">
<p class="para">paragraph 1</p>
<p class="para">paragraph 2</p>
<p class="para">paragraph 3</p>
</div>
Here is the code used to append to the div
$(results).prependTo(".wrapper").hide().fadeIn('slow');
(Results) is simply the multiple paragraphs.
Thanks in advance for your help and advice.
You could try something like this:
$(results).bind('appear', function(){ // bind a custom event
$(this).fadeIn('slow', function(){
$(this).next('p.para').trigger('appear'); // recurse
});
})
.prependTo('wrapper')
.end() // back to "results"
.hide() // not necessary if already hidden by style rule
.first().trigger('appear'); // start the cascade
Here's an example: http://jsfiddle.net/redler/CDbEn/
You could use queue() for this:
$('p').prependTo("#wrapper").hide().each(function() {
var element = $(this);
$('#wrapper').queue(function() {
setTimeout(function() {
element.fadeIn('slow');
$('#wrapper').dequeue();
}, 700);
});
});
Example.
//assuming resuls is an array of strings containing your p's
var appear = function(index) {
if (results[index])
$(results[index]).prepend('.wrapeer').hide().fadeIn('slow', function(){ appear(index+1); });
}
What about
$('.para').each(function(index){
$(this).hide().prependTo('.wrapper').delay(500 * index).fadeIn('slow');
});