Trying to trigger the setTimeout(function) to a scroll position of 850 but need some help....
$(document).ready(function() {
var below_850 = false;
$(document).scroll(function() {
var top = $(document).scrollTop();
below_850 = (top > 850);
}
setTimeout(function(){
$('.odometer').html('652348');
}, 1000);
}
});
I'm trying to do something similar but when the user reaches that odometer element and not by a fixed scroll position. The following tutorial might help u:
http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/
Related
You'll see in this JsFiddle https://jsfiddle.net/xpvt214o/402281/ there is an image scrolling within another one on window scroll.
How can I modify the below so that it doesn't start scrolling until it hits that element (after all the br tags)?
I've tried offsetting it but not getting anywhere.
It would also be fine if it just scrolled a lot slower.
jQuery(document).ready(
function() {
var $w = $(window);
var $d = $('.oh');
$(window).scroll(function(event) {
var st = $w.scrollTop();
_x = st;
lastScrollTop = st;
$d.css('bottom', _x);
});
});
Here's an example of what I'm trying to achieve https://www.sketchapp.com/
I found this which does what I'm looking for
https://codepen.io/JTParrett/pen/BkDie
$.fn.moveIt = function(){
var $window = $(window);
var instances = [];
$(this).each(function(){
instances.push(new moveItItem($(this)));
});
window.addEventListener('scroll', function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}, {passive: true});
}
var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop){
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) +
'px)');
};
// Initialization
$(function(){
$('[data-scroll-speed]').moveIt();
});
I have been looking around for an example of adding items to a list with react and having it animate the newly added item, but not to the end of the list, but the beginning of the list. I found this example, but all the messing around I have done locally and online, I cant seem to get the item to animate when added to the first spot in the array. Here is a simple react todo add item. How can I get the item to add to the first spot, and do the animation to the first spot?
JS Fiddle: http://jsfiddle.net/kb3gN/13152/
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1)
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<TodoItem item={item} key={item} onClick={this.handleRemove.bind(this, i)}/>
);
}.bind(this));
return (
<div>
<div><button onClick={this.handleAdd}>Add new</button></div>
<ReactCSSTransitionGroup transitionName="example">
{items}
</ReactCSSTransitionGroup>
</div>
);
}
});
React.render(<TodoList/>, document.getElementById('list'));
Your issue is your appending to your todo list. If you add to the front, the resulting animation is what you are looking for.
Change the handleAdd to:
handleAdd: function() {
var newItems = this.state.items;
newItems.unshift([prompt('Enter some text')]);
this.setState({items: newItems});
},
the key point is to use unshift instead of push. Browse the mdn docs to understand the differences
Here I have a code to update a cell contet when pressing a button.
It works fine, but it doesn't set the flag, that indicates, that the cell has been changed.
It should look like this with the litle red triangle:
The code:
<a id="button" href="#">Click me</a>
<div id="grid"></div>
<script>
var dataSource, grid;
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
data: [
{ category: "Beverages", name: "Chai", price: 18},
{ category: "Seafood", name: "Konbu", price: 6}
],
})
grid = $("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
}).data("kendoGrid");
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
});
});
</script>
Update:
Here is the update based on #tstancin: Kendo example.
Thank you for the answer - I had thought of it to.
I am wondering if it's possible to do the update in a more clean way with some binding through som MVVM perhaps?
Kind regards from Kenneth
If that's all you want then you should expand your button click code with the following:
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
$("#grid tr:eq(1) td:eq(1)").addClass("k-dirty-cell");
$("#grid tr:eq(1) td:eq(0)").prepend("<span class='k-dirty'></span>");
});
But if you, for instance, manually change the value of name column from Chai to something else, and then click the click me button, the dirty marker in the name column will disappear.
You should use flags for every cell and set them before data.set(). Then, in the grid's dataBound event you should inspect every cell's value and assign the dirty marker if it's needed. For manual changes you should handle the save event and set flags there.
I wrote a script that makes it posible to use a call like this:
SetCellData(id, columnName, value);
So with an id, a columnName and a value, I can update a value in a grid and the flag will be set on the cell.
function SetCellData(id, columnName, value) {
var dataItem = grid.dataSource.get(id);
dataItem.set(columnName, value);
var columnIndex = GetColumnIndex(columnName);
if (columnIndex > -1) {
var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')
if (!cell.hasClass("k-dirty-cell")){
cell.prepend("<span class='k-dirty'></span>");
cell.addClass("k-dirty-cell");
}
}
}
function GetColumnIndex(columnName) {
var columns = grid.columns;
for (var i = 0; i < columns.length; i++)
if (columns[i].field == columnName)
return i;
return -1;
};
I have the code here : example
I am trying to use a modal window within another window as a confirm/message popup, but there are some issues I am not sure if I can't get around.
Here's a jsfiddle of my situation: Fiddle
The problems I am trying to fix are:
Using a modal window while also using appendTo seems to have issues with the back drop, I see its there until you click elsewhere, then it disappears.
It would be great if I could center the modal within my window rather than the Window
Even though dragging is disabled on the modal, if you grab the modal title bar, it will move the outside window.
If I click the 'X' to close the inner modal, it closes my external window.
Can anyone suggest solutions to any of these issues?
$('<div id="confirmModal"><div id="confirmWindow">Is This Correct?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div></div>').prependTo('#Window');
$('#confirmWindow').kendoWindow({
modal: true,
resizable:false,
draggable:false,
appendTo: '#Window',
close: function() {
setTimeout(function(){
$('#confirmWindow').kendoWindow('destroy');
}, 200);
}
});
$('#confirmWindow').find('#btnNo').click(function () {
$('#confirmWindow').kendoWindow('close');
});
$('#confirmWindow').find('#btnYes').click(function () {
$('#confirmWindow').kendoWindow('close');
});
Edit
I have edited the fiddle as the first one was an older version of what i meant to post.
From appendTo documentation:
The element that the Window will be appended to. Note that this does not constrain the window dragging within the given element.
So, Kendo windows are floating, they are not constrained to the element that you append it to. This means that does not make sense prepend the confirmation window to an HTML element and then append it to that same element.
Check response from a telerik enginer
http://www.kendoui.com/forums/kendo-ui-web/window/kendowindow-appendto-boundaries.aspx
<script type="text/javascript">
$(document).ready(function () {
$("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {
var wnd = $("#window").data("kendoWindow");
var position = wnd.wrapper.position();
var minT = 0;
var minL = 0;
//Get the Window width and height and
//place them in position of the hard-coded width and height
var maxT = 600 - wnd.wrapper.height();
var maxL = 900 - wnd.wrapper.width();
if (position.left < minL) {
coordinates = { left: minL };
$(wnd.wrapper).css(coordinates);
}
if (position.top < minT) {
coordinates = { top: minT };
$(wnd.wrapper).css(coordinates);
}
if (position.left > maxL) {
coordinates = { left: maxL };
$(wnd.wrapper).css(coordinates);
}
if (position.top > maxT) {
coordinates = { top: maxT };
$(wnd.wrapper).css(coordinates);
}
})
})
</script>
Please take a look at first image. Here everything is ok
But when we move horizontal scroll to the right header is shifted. This only happened when vertical scroll is appeared.
It's because of header width less than content width and I can fix it if I add 20px to the last header cell. But are there other solutions?
UPDATE 1:
createExpensesGrid: function (containerId) {
var gridDefinition = window['personalExpensesGridModel'];
var grid = $("#" + containerId);
if (gridDefinition) {
var buildKey = function (key) {
return gridDefinition.gridid + key;
};
$.extend(gridDefinition, {
loadComplete: function () {
var selectedGuidRow = $('#TransId').val();
if (selectedGuidRow) {
$(this).setSelection(selectedGuidRow, true);
}
$(this)
.find('.notes')
.each(function () {
$(this).tipsy();
});
validateGrid($(this));
// To prevent grid from being focused on tab
$(this).removeAttr("tabindex");
$(this).find("*[tabindex]").removeAttr("tabindex");
}
});
}
grid.jqGrid(gridDefinition);
}