Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Paolo Scamardella
24,828 PointsOverriding a Method From a 3rd Party JavaScript Library?
JavaScript is not your classical OOP language compare to C#, Java. and so on. I'm using a third party JavaScript Library for my project, and I wanted to know if there is a way to override a third party JavaScript method. For example, this library has a method called $.notify({ timer: 5000, container: '#container' }). and as you can see, it takes in an object as a parameter. Is there a way to override this function to accept an object with a custom property like this $.notify({ timer: 5000, container: '#container', position: 'top' })? As you can see, I want to add a position property to the literal object. I do not want to go into the third party library and add the position property because it is not a good idea. It is best to leave the library alone, and add a custom JavaScript file and override the function. Does anyone knows a proper or recommended way to do this?
4 Answers
Gavin Ralston
28,770 PointsIs this something that function chaining couldn't handle for you?
This seems especially relevant when it looks like on one hand you're setting up a timer event, and I can't see how that's directly related to the positioning of an element, especially one with an id, where you can't possibly need any more specificity, so I can only assume you'd want to do something because of the timer event firing, which just lends itself to....another function entirely.
Sorry, I guess I just don't understand what you're trying to do. I do understand that overriding a function in js looks like complete nonsense from a C perspective, though. :)
Paolo Scamardella
24,828 PointsOk, let me make a real example of how to use this function. This is a bootstrap theme that has a bunch of cool widgets and other stuff.
$.notify({
type: "success",
container: "floating",
title: "This is a notification title",
message: "This is a notification message",
timer: 5000,
closeBtn: true
});
The method above does nothing but display a notification/alert to the screen with a title, message, and a close button even though I set a timer to disappear after 5 seconds. The type property sets the color to green just like boostrap alert colors. The container property can have only 3 options.
- First Option - container: "#id or .class" - Set an id or class where you want to display the notification/alert.
- Second Option - container: "page" - This will set the notification/alert to the entire page.
- Third Option - container: "floating" - This will set a notification/alert to the top right corner of the page.
The container: "floating" will only display to the top right corner (only option) , and I would like to have other options as well such as top-left, center, bottom-left and bottom-right.
So, I was wondering if I can add an extra property like this:
$.notify({
type: "success",
container: "floating",
position: "top-left" /////////////////////////////////////// Here
title: "This is a notification title",
message: "This is a notification message",
timer: 5000,
closeBtn: true
});
I know just by adding the position property won't do anything unless I go in and change the implementation of the notify function. What would be the proper way in doing this?
Gavin Ralston
28,770 PointsIt would seem to me that if you set the container property to an id or class, you'd be able to style that yourself and put it wherever you want with a css selector. (or SASS, or LESS, or whatever styling option you prefer)
The other two look more like built-ins to make your life easier if you're fine with having it display fullscreen or in the upper-right.
But if I'm understanding you correctly, that first option is probably all you need. The container will be have an id that you can already have a style applied, and you could override more general styling by just finding out what type of container it returns and making sure the less desirable styling is removed overridden from the theme/framework. Possible bonus points for keeping style in the stylesheets?
Paolo Scamardella
24,828 PointsThanks for your help Gavin! Unfortunately, the first option is not going to be what I needed. The first option is different from the floating option because the first option will "inject" the alert into the HTML DOM while the floating option is like a "dialog" or "notification" that pops up into the upper right side of the page. It is no big deal, and I hope I made myself clear about the difference between the 2 options.
Gavin Ralston
28,770 PointsEh, it was worth a shot. Perhaps posting the a link to the theme and functions in the thread directly might help for ideas. It's hard to suss out what they're doing with just a function signature sometimes.
Sorry I couldn't be more help. (By "help" I mean throwing out random guesses and hoping something inspired you to find the actual solution, heh)
Paolo Scamardella
24,828 PointsOk, here is a link http://wrapbootstrap.com/preview/WB0048JF7 On the left menu -> click on UI Elements -> Alerts & Tooltips On that screen, there are 3 buttons for alerts. "Page Alerts", "Panel Alerts", and "'Growl-Like' Notification"....click on all 3 and see the differences. The one that I'm interested in changing is the "'Grow-Like' Notification" where it has only one position, and it is top upper right. There is no documentation because these themes are for sale.