Reputation: 2912
I have a javascript code to bind a jQuery colorbox to my element, but cant figure out how to change the value of the property inside the callback:
$(".iframe").colorbox({
iframe: true,
width: '80%',
height: '80%',
onLoad: function() {
console.log(width);
},
});
Why do I get ReferenceError: width is not defined
or how do I access this property?
Upvotes: 0
Views: 94
Reputation: 2912
I was able to achieve what I want by using the:
width: function() {
}
this way I can programmatically override the width variable, which I was trying to do...
Upvotes: 0
Reputation: 7346
Write this in your onLoad
function:
onLoad: function() {
console.log($(this).width());
}
Upvotes: 0
Reputation: 32531
You're attempting to access a width
variable in the global scope. Sort of like trying to use document
, window
, or $
. What you want to access is the width
property of the colorbox object. If the plugin binds this
to the colorbox object then you could do something like this:
$(".iframe").colorbox({
...
onLoad: function() {
console.log(this.width);
}
});
But I assume you're trying to access the width of the element you're binding the colorbox to. If that's the case, you may try something like this:
var $iframe = $(".iframe");
$iframe.colorbox({
...
onLoad: function() {
console.log($iframe.width());
}
});
Upvotes: 0
Reputation: 69994
You get an error because width is just a property of the object you are passing to the colorbox function. Its not a variable you can reference.
They doing this:
var myWidth = '80%';
$(".iframe").colorbox ({
iframe:true,
width: myWidth,
height:'80%',
onLoad:function() {
console.log( myWidth );
},
});
or this
var props = {
iframe:true,
width: '80%',
height:'80%',
onLoad:function() {
console.log( props.width );
},
};
$(".iframe").colorbox(props);
Upvotes: 1