I used a jQueryScrollSpy (https://github.com/sxalexander/jquery-scrollspyhttps://github.com/sxalexander/jquery-scrollspy) to set it up so that when you scroll into the div #red, its respective child '.test' fadesIn. How do I set it up so that when you scroll to the top of N div, the child of N appears? (and disappears after leaving div N.)
Thank you for the help, I have never set up a loop of this sort.
Joe
<script type="text/javascript">
$(document).ready(function() {
$(".test").hide();
$('#red').each(function(i) {
var position = $(this).position();
console.log(position);
console.log('min: ' + position.top + ' / max: ' + parseInt(position.top + $(this).height()));
$(this).scrollspy({
min: position.top,
max: position.top + $(this).height(),
onEnter: function(element, position) {
if(console) console.log('entering.#red');
$("#red").children().fadeIn(200);},
onLeave: function(element, position) {
if(console) console.log('leaving.#red');
$("#red").children().fadeOut(200);}
/*onEnter: function(element, position) {
if(console) console.log('entering.#blue');
$(".test").show();},
onLeave: function(element, position) {
if(console) console.log('leaving.#blue');
$(".test").hide();}*/
});
});
});
</script>
Related
I am trying to create a scroll pagination system but I am facing a problem:
$(window).scroll(function(){
if ($(window).scrollTop()) == $(document).height()-$(window).height()){
$.ajax({
url: "loadit.php?id=" + $('.post:last').attr('id'),
beforeSend: function(){
$('#loader').show();
},
success:
function (html) {
$('#loader').show();
setTimeout(() => {
if(html){
$('#comments').append(html);
$('#loader').hide();
}else{
$('#loader').hide();
}
}, 1000);
}
});
}
$(window) .scrollTop ()) == $ (document) .height () - $ (window) .height ()
This equality is not always true because there is a slight margin of sensitivity and that makes it so that I am unable to execute the rest of my code.
Even when I use Math.floor or ceil, it doesn't solve the problem at some scroll level.
Could someone help me resolve this issue?
I'm pulling data from mySQL through Laravel, generating a map, which works well, now I just want buttons that jump to each marker. For some reason it only goes to the last position.
$.ajax({
url: '/lookup',
type: "post",
data: {'lat':$("#lat").val() ,'lng':$("#lng").val(), '_token': $('input[name=_token]').val()},
success: function(data){
var nearest = data;
var markers = data;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i].lat, markers[i].lng);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i].name,
icon: 'http://website.com/assets/images/icons/love_google.png'
});
google.maps.event.addDomListener(document.getElementById("link_"+i), "click", function(e) {
alert(position);
map.setCenter(position);
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.setContent('<div class="info_content"><h3>' + markers[i].name + '</h3><p>' + markers[i].address + '<br />' + markers[i].city + ', ' + markers[i].state + ' ' + markers[i].zip + '<br />' + markers[i].phone + '</p></div>' );
infoWindow.open(map, marker);
}
})(marker, i));
}
}
});
You should construct the event listener for the button click in the same way you're doing it for the marker click. The problem is that position at the time you click the button will be just whatever that variable is at that point in time, not whatever it was on the iteration of the loop when you constructed the event listener.
Try something like:
google.maps.event.addDomListener(document.getElementById("link_"+i), "click", (function(position) {
return function() {
alert(position);
map.setCenter(position);
}
})(position));
I'm able to drag rows within the kendo ui grid. Seperately able to drag rows outside the grid to another html element.
Is it possible to do both at same time?
For within grid:
Draggable within the grid:
grid.table.kendoSortable({
filter: ">tbody >tr",
cursor: "move",
hint: function(element) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + element.html() + '</tr></tbody></table></div>');
},
container: ".etr-watchlist_grid tbody",
change: function(e) {
let oldIndex = e.oldIndex,
newIndex = e.newIndex,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
}
});
Drag outside the Grid:
$(".myGrid table tbody > tr").kendoDraggable({
group: "gridGroup",
threshold: 100,
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
$(".dropHere").kendoDropTarget({
group: "gridGroup",
drop: function(e) {
e.draggable.hint.hide();
var txt = '';
$(e.draggable.element[0]).find("td").each(function(idx, td){
txt += $(td).text() + '\n';
});
e.dropTarget.text(txt);
}
});
});
I have taken an example of row reordering via drag from the telerik forums:
http://www.telerik.com/forums/drag-and-drop-reordering
I have augmented the example to add dragging of rows outside the grid to multiple targets as well:
DEMO
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
selectable: true,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
threshold: 100,
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
e.draggable.hint.hide();
var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(document.elementFromPoint(e.clientX, e.clientY));
if (dest.is("th")) {
return;
}
dest = dataSource.getByUid(dest.parent().data("uid"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
dataSource.sort({ field: "position", dir: "asc" });
}
}
});
$(".dropTarg").kendoDropTarget({
group: "gridGroup",
drop: function(e) {
console.log(e.draggable)
e.draggable.hint.hide();
var txt = '';
$(e.draggable.currentTarget).find("td").each(function(idx, td){
txt += $(td).text() + '\n';
});
e.dropTarget.text(txt);
}
});
I use Rendro countdown (http://github.com/rendro/countdown/)
$('.countdown.callback').countdown({
date: +(new Date) + 10000,
render: function(data) {
$(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
},
onEnd: function() {
$(this.el).addClass('ended');
}
}).on("click", function() {
$(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
});
Styled output
<div class="countdown styled"></div>
<h2>Countdown with callback</h2>
<p>Click on the green box to reset the counter to 10 sec.</p>
<div class="countdown callback"></div>
How to automatically reset the counter (without click) back to 10 after countdown = 0 ?
I tried insert onclick function into onEnd but doesn't works.
Try resetting the date option and calling the start([refreshRate]) method in the onEnd function after you do your addClass.
this should restart the countdown.
something like this:
$('.countdown.callback').countdown({
date: +(new Date) + 10000,
render: function(data) {
$(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
},
onEnd: function() {
$(this.el).addClass('ended');
this.update(+(new Date) + 10000);
this.start(1000);
}
}).on("click", function() {
$(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
});
see a fiddle here: http://jsfiddle.net/MaurizioPiccini/xDy5d/
I am try to get the values from the selected row and pass them through $.getJSON as parameters. I can get the value, however, when I click on the link strange characters appear before and after the value. The character in the link appears as %OA++++++++++value+++++++%0A.
Here is my code
var className='';
var Section='';
$('#listsubject tr').click(function () {
var th = $(this);
var td = $(this).find('td');
$.each(td, function (index, item) {
if (index == 2) className = item.innerHTML;
});
$.getJSON('#Url.Action("getStudentList/","Student")',
{ classname: className
}, function (data) {
alert('test');
});
Kindly help me. Am stuck here
Thanks in advance
EDIT
when i try the code
$.getJSON('#Url.Action("getStudentList/","Student")',
{ classname: className,
section:'A'
}, function (data) {
alert('test');
});
in the link the section part shows fine, only problem is with the classname
UPDATE
fiddle link
http://jsfiddle.net/gordon/vzTDc/2/
Try this. I think its OK now.
var className = '',
Section = '';
// you were trying with $('#listsubject tr'), but first tr has no td
// so click should bind with tr from 2nd
// so correct selector will be $('#listsubject tr:gt(0)')
$('#listsubject tr:gt(0)').click(function() {
var th = $(this);
var td = $(this).find('td');
$.each(td, function(index, item) {
// As you have 2 td with in each row, so the index will be 0 and 1
// not 2 and 3
if (index == 0) {
className = $.trim($(item).text()); // $.trim() will remove spaces
}
if (index == 1) {
Section = $.trim($(item).text());
}
});
console.log('ClassName: ' + className + ', Section: ' + Section);
$.getJSON('StudentMarks/getSubjectGrading', {
classname: className,
section: Section
}, function(data) {
alert(data);
});
});
DEMO