I am trying to write a jQuery plugin to do some animation but I want to pass the animation options in as a string like the following:
(function ($) {
$.fn.animateBox = function (options) {
options = $.extend({
animation: "backgroundColor: '#0E4839', padding: '10px', color: '#ffffff', fontSize: '153.846%', margin: '0 0 1em 0'"
}, options);
return $(this).each(function () {
var box = $(this);
box.animate({ options.animation }, 'slow');
});
};
})(jQuery);
Is this possible as the above is currently throwing an error complaining the dot in the options.animation should be a semi colon (as it is expecting something like backgroundColor: '#0E4839')
You are passing the property as a string, but the jQuery animate expects an object. And you can't substitute a variable inside {} (an object literal).
So the easiest solution would be to make animation an object instead of string, so that it looks like this:
options = $.extend({
animation: {
backgroundColor: '#0E4839',
padding: '10px',
color: '#ffffff',
fontSize: '153.846%',
margin: '0 0 1em 0'
}
}, options);
then change this:
box.animate({options.animation}, 'slow');
to this:
box.animate(options.animation, 'slow');
Related
I'd like to add some styles into html element from methods:
<div class="add-profile-img" v-bind:style="getBackgroundImg()">
The method is:
getBackgroundImg: function() {
return {
width: 180px;
height: 180px;
background-color: 'yellow';
background-image:url(this.BASE_URL +'/uploads/noimg.gif');
}
},
However, I get
Syntax Error: Identifier directly after number (79:13)
77 | getBackgroundImg: function() {
78 | return {
> 79 | width: 180px;
| ^
How can I fix it?
Dimension in pixels need to be in string format so the function return a valid javascript object:
return {
width: '180px',
height: '180px',
'background-color': 'yellow',
'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
}
can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)
data(){
return{
yourStyleVariable: {
backgroundColor: 'red'
}
}
}
We're using HighCharts in our app, and I've added a function to expand the chart fullsize. I change the styles as well as use Javascript to change the height of the div.
However nothing changes until you actually resize the browser window. Anyone else run into this issue?
<section id="highchart-container" ng-class="{'high-chart-expanded' : highChartMax}">
<highchart id="chart1" config="chartConfig" style="height:auto"></highchart>
</section>
ChartHeader scope
function expandChartPanel() {
vm.chartMaxed = !vm.chartMaxed;
highChart = ScopeFactory.getScope('highChart');
if (vm.chartMaxed) {
highChart.highChartMax = true;
}
else {
highChart.highChartMax = false;
}
highChart.toggleChartSize();
}
HighChartDirective scope
function toggleChartSize() {
var chart1 = document.getElementById("chart1");
if (vs.highChartMax) {
chart1.style.height = "100%";
} else {
chart1.style.height = "400px";
}
}
Styles (SASS)
.high-chart-expanded {
min-height: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
#highcharts-6,
#chart1,
.highcharts-background,
.highcharts-container {
min-height: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
}
}
HighChart chartConfig
ApiFactory.quotes(buildFullUrl(url)).then(function (data) {
var quote_data = formatQuotes(data, 'quotes');
// Create the chart
vs.chartConfig = {
options: {
legend: {
itemStyle: {
color: "#333333",
cursor: "pointer",
fontSize: "10px",
fontWeight: "normal"
},
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
x: 60
},
chart : {
zoomType: 'x',
events: {
load: function () {
// HighChart loaded callback:
broadcastChartloaded();
}
}
},
This is what I see when I console out the chartConfig
console.log('highChart.chartConfig = ', highChart.chartConfig);
Try chart.setSize(width, height) ?
Here's a working example
UPDATE : for angular directive
To Pull out the chart object from directive you can just go the jQuery route:
var chart = $('#theChart').highcharts();
chart.setSize(width, height);
Specifically for ng-highcharts users, here's how its recommended to pull out the high-charts object by the author of the directive. The above method will work just fine too.
var chart = this.chartConfig.getHighcharts();
chart.setSize(width, height);
Although you can do it anywhere in your controller/directive/service, I would recommend you create a new service that returns this object , and then inject it in your controller if you are strict about following Angular design pattern, but if not just those two lines should work fine anywhere that you have access to chartsConfig object.
To reset the chart to being responsive again check this answer.
On my webpage I have a members button which animates a dropdown when toggled. The only problem is that it animates every time I load a page without clicking the button to cause the action. I would like it to only open when the button is clicked and be hidden completely the rest of the time.
The javascript I am using is:
$(document).ready(function() {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle( function() {
$('#members').animate({
marginTop: '0'
}, 500);
},
function() {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
As you can see it first animates the div to be -80px. I want it to be -80px without having to animate it every time I load up any page.
Thanks!
To #members css class, just add that:
display:none;
I also updated the javascript:
$(document).ready(function() {
$('#members').css({
marginTop: '-80px'
});
$('.mem').toggle(function(){
$('#members').css({
display: 'block'
});
$('#members').animate({
marginTop: '0'
}, 500);
},
function(){
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
You need to attach the animate function to a button click. Since you haven't posted the HTML, you'll need to replace "buttonSelector" with the actual selector you want to use.
For example
$(document).ready(function () {
$(buttonSelector).click(function () {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle(function () {
$('#members').animate({
marginTop: '0'
}, 500);
}, function () {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
});
I am trying to build my own objects with methods in JavaScript however, failed at my first ever try with the following code returning the complete code along with " has no method 'writeOut' in the chrome dev tools console.
var link = function bhLink(options) {
defaultOptions = {
targetURL: '#',
target: '_blank',
textColor: '#000',
bgColor: '#fff',
font: 'Arial',
fontSize: '12px',
lineHeight: '12px',
text: '[Test]'
}
if (typeof options == 'object') {
options = $.extend(defaultOptions, options);
} else {
options = defaultOptions;
}
link.prototype.writeOut = function() {
return $('<a></a>')
.prop({'href':this.targetURL, 'target': this.target})
.css({'font-family':this.font, 'color':this.textColor, 'font-size': this.fontSize, 'line-height':this.lineHeight});
}
} // end link
I use it like
$('#id_of_some_button').click(function(e) {
e.preventDefault();
$('#id_of_some_div').html(link.writeOut);
});
Both the click event and the link is within $(document).ready({}); blocks.
Any ideas?
EDIT ==============================================
Added options as argument and an if statement to check wether there are options provided..
Your syntax is very strange for an attempt at building an object containing methods. Firstly, you are attempting to access the defaultOptions object by just using this. Secondly, the call to writeOut in the html() block is only passing the function reference, not instantiating the function. Try this:
var link = {
defaultOptions: {
targetURL: '#',
target: '_blank',
textColor: '#000',
bgColor: '#fff',
font: 'Arial',
fontSize: '12px',
lineHeight: '12px',
text: '[Test]'
},
writeOut: function () {
return $('<a></a>', {
'text': this.defaultOptions.text,
'href': this.defaultOptions.targetURL,
'target': this.defaultOptions.target
})
.css({
'font-family': this.defaultOptions.font,
'color': this.defaultOptions.textColor,
'font-size': this.defaultOptions.fontSize,
'line-height': this.defaultOptions.lineHeight
});
}
} // end link
$('#id_of_some_button').click(function (e) {
e.preventDefault();
$('#id_of_some_div').append(link.writeOut());
});
Example fiddle
I can create a jquery object inline like this (this code is working)
$('#tip').qtip({
content: el.REASON,
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
style: {
tip: {
corner: 'leftMiddle',
},
border: {
radius: 11,
width: 4
},
name: 'red'
},
show: {
ready: true,
effect: { type: 'slide' }
},
hide: {
when: { target: jq, event: 'click' },
effect: function() {
$(this).fadeTo(200, 0);
}
}
})
now I want to move this JSON to a function, because I have multiple constructors in my code (this code is not working)
function qtipJSON(el, jq) {
return
{
content: el.REASON,
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
style: {
tip: {
corner: 'leftMiddle',
},
border: {
radius: 11,
width: 4
},
name: 'red'
},
show: {
ready: true,
effect: { type: 'slide' }
},
hide: {
when: { target: jq, event: 'click' },
effect: function() {
$(this).fadeTo(200, 0);
}
}
}
};
$('#tip')(qtipJSON(el, qj))
My error is
Uncaught SyntaxError: Unexpected token {
I've noticed that it's because of nested jsons.
WORKING:
function a(){
return {sdasda:'asda',sdasd:'asdas'}
}
for(i in a()){
document.write(i)
}
ALSO WORKING:
function a(){
return {sdasda:'asda',sdasd:'asdas', aa:{sds:'1212', sddss:'2222'}}
}
for(i in a()){
document.write(i)
}
Replace this
return
{
content: el.REASON,
...
by this:
return {
content: el.REASON,
...
and welcome to the club of people injured by JS semicolon injection.
You cannot end a line with return if you want to return an object literal because of implicit semicolon injection.
By moving the opening left brace to the same line as the return it will work.
Here is a slight tweak of what you have: http://jsfiddle.net/FqCVD/ (I made some string literals to compensate for undefined variables).
The problem with your final example is a missing : after aa. It should be
return {sdasda:'asda',sdasd:'asdas', aa: {sds:'1212', sddss:'2222'}}
Your function function qtipJSON(el, jq) is missing a semicolon at the end of the return.
As others have mentioned, the problem is the 'return' keyword on a line by itself. When you have a problem like this one try JSLint. It would have reported this error.
javascript will assume you forgot a semi-column and give you this:
return {;
par: 'val'
});
Which won't work. What you should do is wrap your return value/object in parenthesis, like this:
return ({
par: 'val'
});