I am encountering an issue with my custom plugin as I am relatively new to this. My goal is to modify the properties of div elements on a webpage.
Here is the JavaScript code I am using:
(function($) {
$.fn.changeDiv = function( options ) {
var settings = $.extend({
// These are the defaults.
text : 'Hello, World!',
color: "#556b2f",
backgroundColor: "white",
borderColor : "white",
borderWeight: "1px;",
fontWeight : 'bold',
fontStyle : 'Trebuchet MS, Callibri, Sans-Serif',
fontSize : '18px',
position: "center",
fl : "auto",
wt: "auto",
ht: "auto",
mRight: "auto",
mLeft: "auto",
complete : null
}, options );
return this.each( function() {
$(this).text( settings.text );
if ( settings.color ) {
$(this).css( 'color', settings.color );
}
if ( settings.fontStyle ) {
$(this).css( 'font-style', settings.fontStyle );
}
if ( settings.fontWeight ) {
$(this).css( 'font-weight', settings.fontWeight );
}
if ( settings.fontSize ) {
$(this).css( 'font-size', settings.fontSize );
}
if ( settings.wt ) {
$(this).css( 'width', settings.wt );
}
if ( settings.ht ) {
$(this).css( 'height', settings.ht );
}
if ( settings.position ) {
$(this).css( 'text-align', settings.position );
}
if ( settings.fl ) {
$(this).css( 'float', settings.fl );
}
if ( settings.mRight ) {
$(this).css( 'margin-right', settings.mRight );
}
if ( settings.mLeft ) {
$(this).css( 'margin-left', settings.mLeft );
}
if ( $.isFunction( settings.complete ) ) {
settings.complete.call( this );
}
});
};
In my function call, I use this method:
$('#header').changeDiv({
text: 'This is the header div',
fontStyle: 'Verdana, Arial, Helvetica, Sans-serif',
fontWeight: 'bold',
backgroundColor: '#406481',
fontSize: '30px',
ht: "50px",
position: "center",
complete : function() { $(this).easeIn("slow",1500); }
});
The outcome only shows the text 'This is the header div' in green color and centered alignment. However, when I apply the same changeDiv function to the menu, no changes occur. Upon altering the return function like so:
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor,
borderColor: settings.backgroundColor,
borderWeight: settings.borderWeight,
fontWeight: settings.fontWeight,
fontStyle: settings.fontStyle,
fontSize: settings.fontSize,
position: settings.position,
fl: settings.fl,
wt: settings.wt,
ht: settings.ht,
mRight:settings.mRight,
mLeft: settings.mLeft
});
I can observe through FireBug that the styles are indeed being applied to the divs, however, the default text remains unchanged.
Seeking assistance!