http://shoes4school.project-x.me/get-involved.html
Can someone please tell me what i'm doing wrong the the jQuery column faux... I can not get it to work after trying several different methods...
The code i'm using is... my url is above
$j(".content-block").height(Math.max($("#right").height(), $(".content-block").height()));
How to faux columns on webpage
(function($){
// add a new method to JQuery
$.fn.equalHeight = function() {
// find the tallest height in the collection
// that was passed in (.column)
tallest = 0;
this.each(function(){
thisHeight = $(this).height();
if( thisHeight > tallest)
tallest = thisHeight;
});
// set each items height to use the tallest value found
this.each(function(){
$(this).height(tallest);
});
}
})(jQuery);
Firebug show this error :
preloadImages is not defined
preloadImages([
Related
Prior to using Ember's new Glimmer components, I used the didInsertElement lifecycle hook to calculate the natural width of an image element. I am passing in a target width so I can resize the image in the browser.
didInsertElement() {
this._super(...arguments);
if (this.targetWidth && this.targetWidth < this.element.naturalWidth) {
this.targetHeight = Math.round(this.targetWidth / this.element.naturalWidth * this.element.naturalHeight);
set(this, 'width', this.targetWidth);
set(this, 'height', this.targetHeight);
}
else {
set(this, 'width', this.naturalWidth);
set(this, 'height', this.naturalHeight);
}
With Glimmer components, and using #ember/render-modifiers, the src being passed in by the parent:
<img {{did-insert this.calculateDimensions}} src={{#src}} width={{this.width}} height={{this.height}}>
In the component JS file
#action
calculateDimensions(element) {
if (this.args.targetWidth && this.args.targetWidth < element.naturalWidth) {
this.height = Math.round(this.args.targetWidth / element.naturalWidth * element.naturalHeight);
this.width = this.args.targetWidth;
}
else {
this.width = element.naturalWidth;
this.height = element.naturalHeight;
}
element.setAttribute("width", this.width);
element.setAttribute("height", this.height);
}
This all works fine if you reload the index/home page. However, when you first arrive at the site, the image is not rendered, because the value for element.naturalWidth is zero. The element is present, and if it's logged to the console I can see the values for natural width and height. Is the ember-render-modifier {{did-insert}} not a full replacement for didInsertElement?
Any help much appreciated.
I am not sure if this the "Ember" way to solve this but I've used the load event:
<img {{on "load" this.calculateDimensions}} src={{#src}} width={{this.width}} height={{this.height}}>
It solves the problem but I'm still not sure why the ember-modifer {{did-insert}} does not achieve the same thing - I had assumed the element was inserted into the DOM, and therefore you would be able to obtain its naturalWidth and height?
I'm reading docs but there seems to be no parameters to do what i need: I have a plain bar chart and I need to make some bars blink depending on threshold configuration. Is there any plugin or secret parameter to obtain this?
As far as I understand, you want to have a blinking bar.
So what you can do is create the bar and then dynamically update its background-color from 'transparent' to the original color periodically using a timer.
This will create a blinking effect.
Ok, so if you want the first bar to blink:
let count = 0;
setInterval(() => {
if(count % 2 === 0) {
myChart.data.datasets[0].backgroundColor[0] = 'transparent';
myChart.update();
}
else {
myChart.data.datasets[0].backgroundColor[0] = '#FFC857';
myChart.update();
}
count++;
}, 2000);
I don't know if there is a better solution for it, but this is the first thing that came to my mind.
I'm trying to figure out what's wrong about sending action from parentView to one of its children view:
I've made a PhotoUploadView used to resize and then upload images; it adds canvas drawing the resized image in a div inside its template:
<div class="img-list">
//here the canvas will be added
</div>
The action "saveImages" in this view, acts like this:
var list = this.$('.img-list');
$.each(list.children(), function(index, value) {
//here the code to save
}
But this action is not called directly; because I need to save not only the images but also some records (an offer record and many products records, children of the offer; the images are associated to the product record);
So I have the action "save" on the parentView that is like this:
//save records
offer.save().then(function(savedOffer) {
newProducts.forEach(function(product, indexP) {
product.set('offer', savedOffer);
product.save().then(function(savedProduct) {
}
}
}
//save photos by cycling the PhotoUploadViews that are inside ProductViews that are inside the mainView
this.get('childViews').forEach(function(view, index) {
if (index >= 4) { //the childView from the 4th are the ProductViews
var productId = view.get('product').get('id');
var folder = 'offer-' + controller.get('model').get('id') + '/product-' + productId + '/';
view.get('childViews')[0].send('saveImages', folder, productId); //the first childView of a ProductView is the UploadView
}
});
Well, this works and save the images correctly when you add images to an existing offer with existing product; but when you are creating a new offer, it fails since the folder will becone "offer-undefined/product-undefined" because of course you must wait the records to be saved in order to get their ID;
So I'm trying now to move the send action into the .then callback of product save:
var childViews = this.get('childViews'); //the childView starting from the 4th are the productsViews
offer.save().then(function(savedOffer) {
newProducts.forEach(function(product, indexP) {
product.set('offer', savedOffer);
product.save().then(function(savedProduct) {
var currentPview = (childViews[4 + indexP]); //get the productView associated with the current product
var productId = savedProduct.get('id');
var folder = 'offer-' + savedOffer.get('id') + '/product-' + productId + '/';
currentPview.get('_childViews')[2].send('saveImages', folder, productId); //the object at index 2 of _childViews array is the photoUploadView
Here, the folder is built correctly but after sending action, the saveImages action crashes saying that list is undefined; trying to log the value of "this" inside "saveImages" I can see that also its value is undefined; Someone can please explain why calling the action from one point, it works, and calling it inside the .then callback of product save it doesn't?
I also would like to understand why in the first case I can do
.get('childViews')[0]
to get the PhotoUploadView, but in the second I must do
.get('_childViews')[2]
since using get('childViews) it doesn't work anymore; What is the difference between childViews and _childViews? And why _childViews has more elements than childView?
I need to be able to select an index and have it visible. I can get the index to be selected but can't get it to scroll...
for (var _index:int=0; _index < registrarsAll.length; _index++) {
registrarsList.addItemAt(registrarsAll[_index].name, registrarsList.length);
registrarsIDs.addItemAt(registrarsAll[_index].id, registrarsIDs.length)
if(registrarsAll[_index].id == judgeID) {
judgesLB.selectedIndex = registrarsIDs.length-1;
}
}
judgesLB.scrollToIndex(judgesLB.selectedIndex);
The index gets selected but I can't get it to scroll into view. I am calling this on creationComplete. registrarsList is the data source for the list judgesLB.
thanks for any help.
John
I was able to get it to work in the updateComplete event of the judgesLB list...
updateComplete = "{((judgesLB.selectedIndex>13)?judgesLB.scrollToIndex(judgesLB.selectedIndex):null)}"
selectedIndex cannot be negative. -1 will generate an error.
How to add new row on top instead of defaulted to bottom, in slickgrid dataview impelmentation also it is appreciated someone provide example of deleting a row.
Here is an example function that will work with the example 1-simple.html example..
To Add a Row at the top:
function addRow(){
var newRow = {title: "new Title", duration: "1 day"};
var rowData = grid.getData();
rowData.splice(0, 0, newRow);
grid.setData(rowData);
grid.render();
grid.scrollRowIntoView(0, false);
}
To Delete row, it is the same idea. Get the grid data collection/ slice the array to get the data out of you want to delete and then call setData and render...
Sometimes Splice doesn't work. Try the code below:
DataView.insertItem(insertBefore, item) ///Here insertBefore can be 0
function addRow() {
var newRow = columns,
newId = dataView.getLength();
newRow.id = newId + 1;
dataView.insertItem(0, newRow);
}
and then you can call this function on button click.
This really works. I have tried it myself.