Current function:
function SetPopup() {
x$('body').setStyle('overflow', 'hidden');
x$('#divOne').setStyle('height', document.body.offsetHeight + 'px');
x$('#divOne').setStyle('width', 100 + '%');
x$('#divOne').setStyle('display', 'block');
}
What I would like to do is change this function such that 'divOne' would be read-in as a parameter like this:
function SetPopup(string x) {
x$('body').setStyle('overflow', 'hidden');
x$('#x').setStyle('height', document.body.offsetHeight + 'px');
x$('#x').setStyle('width', 100 + '%');
x$('#x').setStyle('display', 'block');
}
But obviously that doesnt work.
What would I need to do to include x where I have optimistically placed it in the bottom function?
Try this:
function SetPopup(elem) {
x$('body').setStyle('overflow', 'hidden');
x$('#' + elem).setStyle('height', document.body.offsetHeight + 'px');
x$('#' + elem).setStyle('width', 100 + '%');
x$('#' + elem).setStyle('display', 'block');
}
function SetPopup(x) {
x$('body').setStyle('overflow', 'hidden');
x$('#'+x).setStyle('height', document.body.offsetHeight + 'px');
x$('#'+x).setStyle('width', 100 + '%');
x$('#'+x).setStyle('display', 'block');
}
Related
I have some JavaScript that currently looks for _target and anchors to target.
I wish to change it to look for a array [_target_index] however I cant seem to get this to work every time I try I get errors.
When I console.log my array I get my expected array output.
Can someone help me addend y code to accept the array rather than just _target ?
What I tried
_scrollTopPixels = (anchorElementArray [_target_index]).offset().top - (_fixedNavHeight + _pdpNavigationHeight + _pdpSectionsHeight);
console error
Uncaught TypeError: anchorElementArray[_target_index].offset is not a function
My full code
_pdpNavigationScrollTo = function () {
_pdpLink.on('click', function (e) {
e.preventDefault();
var _fixedNavHeight, _target, _target_index, _scrollTopPixels;
if (!INFORMA.global.device.isDesktop) {
_target = $(this).data('target');
_target_index = $(this).data('target-index');
$('#pdp-sections').slideUp();
_pdpNavigationHeight = $('#pdp-navigation .nav-pdp-nondesktop').outerHeight();
if (!_pdpFixed)
_pdpSectionsHeight = $('#pdp-sections').height();
else
_pdpSectionsHeight = 0;
_fixedNavHeight = _navHeightMobile;
var anchorElementArray = $("[id='" + _target + "']");
console.log(anchorElementArray[_target_index]);
if (anchorElementArray.length >= [_target_index]) {
//_scrollTopPixels = $("#" + _target).offset().top - (_fixedNavHeight + _pdpNavigationHeight + _pdpSectionsHeight);
_scrollTopPixels = (anchorElementArray [_target_index]).offset().top - (_fixedNavHeight + _pdpNavigationHeight + _pdpSectionsHeight);
} else {
_scrollTopPixels = $("#" + _target).offset().top - (_fixedNavHeight + _pdpNavigationHeight + _pdpSectionsHeight);
}
$('html, body').stop().animate({
scrollTop: _scrollTopPixels
}, 1000);
} else {
_target = $(this).data('target');
$('#pdp-navigation li').removeClass('selected');
$('#pdp-navigation li').addClass('select-options');
_pdpNavigationHeight = _pdpNavigation.height();
_fixedNavHeight = _navHeight;
_scrollTopPixels = $("#" + _target).offset().top - (_fixedNavHeight + _pdpNavigationHeight);
$('html, body').stop().animate({
scrollTop: _scrollTopPixels
}, 1000);
}
})
};
The jQuery method offset requires a jQuery object to access it, as such you need to change;
(anchorElementArray[_target_index]).offset().top
to
$(anchorElementArray[_target_index]).offset().top
I have this little function to print the image size.
while it works when I just call the function
with size('#prototype); for example, it is not working anymore on resize('#protoimg).
Why? Can anyone help me out, please?
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(size('#protoimg'));
)};
Try this:
$(function() {
size('#protoimg')
});
$(window).resize(function() {
size('#protoimg');
});
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#target').html('<p class="size">' + width + '-' + height + '</p>');
}
If #protoimg is an image file, make sure you set attribute width="100%"to avoid overflow.
Try to put to remove the function size(a) out of the $(document).ready(); and put the $(window).resize(); inside
Like this:
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
$(document).ready(function(){
$(window).resize(function() {
size('#protoimg');
});
});
Just remember,the $(window).resize(parameter) need a function as the parameter.But the size('#protoimg') is a result of function.so the correct code is:
$(document).ready(function(){
function size(a){
var height = $(a).height();
var width = $(a).width();
$('#picbox').find('p.size').remove();
$('#picbox').append('<p class="size">' + width + '-' + height + '</p>');
}
size('#protoimg');
$(window).resize(function(){
size('#protoimg');
});
)};
I have a canvas with objects inside and have a event handler for object:selected. When I select the object, a div (vtover) appears at the mouse/touch pointer by pageX and pageY.
What I want to accomplish is to change the event handler from click to touch taphold using jQuery Mobile. I tried to put all code inside my taphold, but that didnt work.
How can I solve this?
chartdiv is the id of my canvas container
Code
canvas.observe("object:selected", function (e) {
$("#chartdiv").on("taphold", function (a) {
// tried to put below code inside this, but this didnt work out.
});
var obj = e.target;
$("#vtover").show();
$("#vtover").offset({
left: event.pageX,
top: event.pageY - 200
});
$("#vt_vol").val(myvol.toLocaleString("de-DE") + " " + unit);
$("#vt_period").val(myper + " Tage");
$("#vt_sump").val(sumper.toLocaleString("de-DE") + " " + unit);
$("#vt_diffp").val(Math.round((myvol * myper / sumper) * 100) + " %");
});
You can't do that, at least not like that, this should work:
var canvasHandler = {
obj : null
}
canvas.observe("object:selected", function (e) {
canvasHandler.obj = e.target;
});
$(document).on("taphold", "#chartdiv",function (a) {
// Now if you need selected canvas just use canvasHandler.obj
$("#vtover").show();
$("#vtover").offset({
left: event.pageX,
top: event.pageY - 200
});
$("#vt_vol").val(myvol.toLocaleString("de-DE") + " " + unit);
$("#vt_period").val(myper + " Tage");
$("#vt_sump").val(sumper.toLocaleString("de-DE") + " " + unit);
$("#vt_diffp").val(Math.round((myvol * myper / sumper) * 100) + " %");
});
this code works:
var myElement = document.getElementById("red");
setInterval(function() {
console.log("Left:" + myElement.offsetLeft + "px | Top:" + myElement.offsetTop + "px");
}, 1000);
This prints out the position(x, y) every second
But If I try and change it to using objects:
function Enemy(id){
this.id = getElementById(id);
this.getCoordinates = function(){
setInterval(function() {
console.log("Left:" + this.id.offsetLeft + "px | Top:" + this.id.offsetTop + "px");
}, 1000);
}
}
$(document).ready(function(){
var enemy = new Enemy("red");
enemy.getCoordinates();
});
It prints out nothing - and I can't see where my mistake is.
In a setInterval or setTimeout (or any event handler like onclick) the this variable refers to the global object. In a browser that's window.
In modern browsers you can do this:
setInterval((function() {
console.log("Left:" + that.id.offsetLeft + "px");
}).bind(this), 1000); // <------- bind
Otherwise all other solutions are basically similar to your first piece of code.
Note that there is an implementation of bind() in pure js from Mozilla that can be ported to older browsers. Search for it on MDN.
The problem is that the value of "this" is changing within the setInterval. The fix is to change it to:
function Enemy(id){
this.id = document.getElementById(id);
var self = this;
this.getCoordinates = function(){
setInterval(function() {
console.log("Left:" + self.id.offsetLeft + "px | Top:" + self.id.offsetTop + "px");
}, 1000);
}
}
function Enemy(id){
this.id = document.getElementById(id);
this.getCoordinates = function(){
var element = this.id;
setInterval(function() {
console.log("Left:" + element.offsetLeft + "px | Top:" + element.offsetTop + "px");
}, 1000);
}
}
$(document).ready(function(){
var enemy = new Enemy("red");
enemy.getCoordinates();
});
As slebetman said, the 'this' variable is not what you expected. Try saving it in a 'that' variable, which can be accessed in different scopes.
function Enemy(id){
var that = this; // reference to 'this' that can be used in other scopes
that.id = document.getElementById(id);
that.getCoordinates = function(){
setInterval(function() {
console.log("Left:" + that.id.offsetLeft + "px | Top:" + that.id.offsetTop + "px");
}, 1000);
}
return that;
}
Might be a question with a simple answer, but I can't find it.
Is there a simpler way to do this:
$('#' + array_with_ID[0]).css('width', array_with_px_value[0] + 'px');
$('#' + array_with_ID[1]).css('width', array_with_px_value[1] + 'px');
$('#' + array_with_ID[2]).css('width', array_with_px_value[2] + 'px');
$('#' + array_with_ID[3]).css('width', array_with_px_value[3] + 'px');
$('#' + array_with_ID[4]).css('width', array_with_px_value[4] + 'px');
etc...
for ( var i = 0, l = Math.max(array_with_ID.length, array_with_px_value.length); i < l; ++i ) {
$('#' + array_with_ID[i]).css('width', array_with_px_value[i] + 'px');
}
Something like this should help. You don't even need the Math.max if you know they will always be the same length.
var array_with_ID = ['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7'];
var array_with_px_value = [ 210, 220, 230, 240, 250, 260, 270 ];
$(array_with_ID).each(function(i){
$('#' + this).css('width', array_with_px_value[i] + 'px');
});
jQuery each will loop through arrays.
jsFiddle