Change jquery function on click - jquery-animate

I wrote a function to change the height of container according to its content
function heightChange()
{
var h1 = $("#primary-page .entry-content-pageAbout").height();
var h2 = 550;
var max = Math.max(h1,h2);
$('#content').height(max);
}
and it works on $(window).resize
i want to change the height on click, so i wrote this
$(".entry-content-sublinksAbout a:eq(0)").click(function(){
$(".entry-content-page-holder").animate({top:-420}, 800,'easeInOutCubic');
heightChange();
});
my problem is on click i want to get the function and also want to deduct the top:-420 from the total height of #contentit which i just animated on click.
please help

To be honest, I'm unsure what you're asking for here, but is this something that will help?
function heightChange(a) {
$(".entry-content-page-holder").animate({top:-420}, 800,'easeInOutCubic');
var h1 = $("#primary-page .entry-content-pageAbout").height();
var h2 = 550;
var h3 = a;
var max = Math.max(h1,h2);
max = max - h3;
$('#content').height(max);
}
$(".entry-content-sublinksAbout a:eq(0)").click(function(){
heightChange(420);
});
$(window).resize(function() {
heightChange(0);
});

Related

Area map into a bootstrap tab not working

I have a bootstrap tabs that is working well.
I have an area map that is working well if it is not inserted into a tab.
I use the Responsive Image Maps jQuery Plugin from Matt Stow, also works fine.
The symptom:
Then I put the area map into one of the tabs, a not active by default.
Then I click on the tab to make it shown. So the img is well shown.
But the area map does not working. I can't see the clickable rect.
But if I manually resize my navigator, then the area map works.
The page: https://boutique.bilp.fr/71-les-pieds-de-poteaux.html
Select tab "Guide de choix", the white rectangles should be clickable. THey are not until I manually resize the window.
The cause:
The responsible is the Responsive Image Maps jQuery Plugin. In its code, it makes a call to the jquery .width() method to obtain the width of the img where the map should works. And because the parent (tab) is hidden, the returned width is wrong. And it uses it to resize the map... with bad values. The map is then so small that it seems to not work.
Thanks for your help.
One solution is to modify the Responsive Image Maps jQuery Plugin by making ancestors visible before calling width().
Original code:
/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
$.fn.rwdImageMaps = function() {
var $img = this;
var rwdImageMap = function() {
$img.each(function() {
if (typeof($(this).attr('usemap')) == 'undefined')
return;
var that = this,
$that = $(that);
// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').on('load', function() {
var attrW = 'width',
attrH = 'height',
w = $that.attr(attrW),
h = $that.attr(attrH);
if (!w || !h) {
var temp = new Image();
temp.src = $that.attr('src');
if (!w)
w = temp.width;
if (!h)
h = temp.height;
}
var wPercent = $that.width()/100,
hPercent = $that.height()/100,
map = $that.attr('usemap').replace('#', ''),
c = 'coords';
$('map[name="' + map + '"]').find('area').each(function() {
var $this = $(this);
if (!$this.data(c))
$this.data(c, $this.attr(c));
var coords = $this.data(c).split(','),
coordsPercent = new Array(coords.length);
for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0)
coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
else
coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
}
$this.attr(c, coordsPercent.toString());
});
}).attr('src', $that.attr('src'));
});
};
$(window).resize(rwdImageMap).trigger('resize');
return this;
};
})(jQuery);
The modified code:
/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
$.fn.rwdImageMaps = function() {
var $img = this;
var rwdImageMap = function() {
$img.each(function() {
if (typeof($(this).attr('usemap')) == 'undefined')
return;
var that = this,
$that = $(that);
// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').on('load', function() {
// Modif BC : make ancestors visible so .width() can return the right value
//************************************************
var hidden_ancestors = [];
$that.parents().each(function() {
if ($(this).css('display') == 'none')
{
$(this).show();
hidden_ancestors.push($(this));
};
});
// END Modif BC
var attrW = 'width',
attrH = 'height',
w = $that.attr(attrW),
h = $that.attr(attrH);
if (!w || !h) {
var temp = new Image();
temp.src = $that.attr('src');
if (!w)
w = temp.width;
if (!h)
h = temp.height;
}
var wPercent = $that.width()/100,
hPercent = $that.height()/100,
map = $that.attr('usemap').replace('#', ''),
c = 'coords';
$('map[name="' + map + '"]').find('area').each(function() {
var $this = $(this);
if (!$this.data(c))
$this.data(c, $this.attr(c));
var coords = $this.data(c).split(','),
coordsPercent = new Array(coords.length);
for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0)
coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
else
coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
}
$this.attr(c, coordsPercent.toString());
});
// Modif BC : Restore invisibility on ancestors
//*********************************************
jQuery.each(hidden_ancestors, function(index, value)
{
$(value).css({display: ''});
});
// END Modif BC
}).attr('src', $that.attr('src'));
});
};
$(window).resize(rwdImageMap).trigger('resize');
return this;
};
})(jQuery);
I will propose this improvment to Matt Stow, the author

how to return shape from mouse event evt.currentTarget.children[0]

var stage, output;
function init() {
stage = new createjs.Stage("testCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawRoundRect(0, 0, 100,20,10);
//console.log(circle.graphics.command.radius);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = 50;
dragger.y = 10;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.on("pressmove",function(evt) {
// currentTarget will be the container that the event listener was added to:
//evt.currentTarget.x = evt.stageX;
//evt.currentTarget.y = evt.stageY;
// make sure to redraw the stage to show the change:
//console.log(evt.currentTarget.children[0].graphics.command);
var newWidth= evt.stageX - evt.currentTarget.x;
console.log(evt.currentTarget.children[0].graphics);
if(newWidth<0)
newWidth = 0;
evt.currentTarget.children[0].graphics.command.w= newWidth;
evt.currentTarget.children[1].x= newWidth/2;
stage.update();
});
stage.update();
}
this code is working fine under http://www.createjs.com/demos
(i can reach this evt.currentTarget.children[0].graphics.command.w, because evt.currentTarget.children[0] returns shape)
but not on your own html. it is there any js i need to add in the heading?
Did you checked if "pressmove" trigger?
Maybe you should use this stage.enableMouseOver(20); to enable mouse events.

Triggering clearIconTap callback on dynamically created fields

I am creating a simple app using Sencha Touch where I'm dynamically creating container with textfields, textareafields etc. when the user needs to add new container with components. The problem now is when the clear icon on the textareafield is tapped it clears the text, but I would like to know which textareafield has been cleared. Can anyone help me in this please?
This is how I created container .
var childObj2 = {};
childObj2.xtype = 'container';
var type = 'vbox';
var layout = {}
layout.type = type;
childObj1.layout = layout;
var txtarea= {};
txtarea.xtype = 'textareafield';
txtarea.id = "txt51";
txtarea.flex = 3;
txtarea.maxRows = 7;
txtarea.placeHolder = 'Type here';
txtarea.value = value['notes'];
txtarea.inputCls = 'txtareaStyle'
txtarea.clearicontap = "clearText";
How to add clearicontap listener to this?
When you you create a textfield simply add a listener to it for the clearicontap event and that callback will get executed for each of the fields.
For example:
var container = Ext.create('Ext.Container', {});
for (var i=1; i<=3; i++) {
var field = Ext.create('Ext.field.Text', {
id: 'textfieldnumber' + i,
listeners: {
clearicontap: function() {
alert("Tapped clear icon on text field number: " + i + "!");
}
}
});
container.add(field);
}
[EDIT]
I answer the question you make after your edit:
I am using the standard way of creating Sencha components through Ext.create(), and I would suggest you to switch to the same way. It is not clear by the code you posted how those Javascript objects are actually transformed into Ext components. Anyway, they are very likely components configurations, so I guess you could try:
txtarea.listeners = {
clearicontap: function() {
alert("Tapped clear icon on text field");
}
}

swipe.js getPos API help needed

I'm using for a mobile solution the slider "swipe.js" (https://github.com/bradbirdsall/Swipe). Now i would like to use the api-function getPos to return the actually slide. Unfortunatley my code doesn't work:
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
callback: function() {
var pageNumber = elem.getPos();
alert("P"+pageNumber);
}
});
What's wrong? how doest it work?
thanks for your help
You were almost there:
var pos = mySwipe.getPos() + 1;
alert( pos );

Dojo Datagrid - Get the row number

I am trying to retrieve the line number in dojo data grid. rowIndex function would not help me much because I need the 'line number' and NOT 'row number' when sorted.
The scenario:
I would like to set the focus on one specific row and this focus should remain even after sorting. But if I use the code below, it does not select the correct row.
For example, the index 1 is on the 5th line after sorting. However, the e.item.id still remains as 1, expected is 5.
calendar.on("itemClick", function (e)
{
MyGrid.doclick({ rowIndex: e.item.id });
MyGrid.scrollToRow(e.item.id);
});
Additionally, I also tried...
calendar.on("itemClick", function (e)
{
var identity = MyGrid._by_idx[e.item.id].idty;
var gridItem = MyGrid.getItem(identity);
var gridItemIndex = MyGrid.getItemIndex(gridItem);
MyGrid.doclick({ rowIndex: gridItemIndex });
MyGrid.scrollToRow(e.item.id);
});
Could you please let me know how to get the correct row after fitering? I thank you for your time.
Wishes,
Santosh
Okay, I figured out the answer.
GetGridItemIndexByGridItem = function (gridItem) {
var indexLength = MyGrid._by_idx.length;
var element = null;
var gridItemIndex = -1;
for (var i = 0; i < indexLength; i++) {
element = MyGrid._by_idx[i];
if (element.item.Guid == gridItem.Guid) {
gridItemIndex = i;
}
}
return gridItemIndex;
}
Best Wishes