What I Broke – Programming and Web Development

Category: jQuery

  • Refresh a Page with JavaScript

    Hey everyone, Just a quick post on how to force a page refresh with JavaScript (no jQuery required): location.reload(); Note that the reload function accepts a boolean parameter that can be used for force a server refresh. Alternatively, it just defaults to the cache. Checkout this Stackoverflow post for more info: http://stackoverflow.com/a/5404869/522859

  • Detecting FileSize – jQuery

    Hey everyone, Just a quick post on how to detect a file’s size with jQuery. I’m currently using a version of this for basic client side validation: Upload image: $(document).ready(function(){ $(‘#image-file’).bind(‘change’, function() { var fileSize = this.files && this.files.length > 0 && this.files[0].size ? this.files[0].size / 1024 / 1024 : 0; if(fileSize > 0){ $(‘body’).append(”…

  • How to Get a JavaScript Stack Trace – Chrome Console

    Hey everyone, Just a quick post on something useful I came across today. In JavaScript you can access the stack trace via console using the following command (ctrl + shift + j): console.trace() In Chrome, this will let you navigate to each relevant call by clicking the line number in the console window. I’ve found…

  • Stop a Link from Going Anywhere – CSS/JavaScript

    Hey everyone, Another quick one – how to stop a link from doing anything. I’ve just come across a need to use a link that acts as a button. A slight UI issue with this is that clicking a hyperlink will with an href value of ‘#’ will push scroll to the top of the…

  • Dropdown Button – Twitter Bootstrap

    Hey everyone, Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code: Button Text Menu Option #1 Menu Option #2 Menu Option #3 Menu Option #4 Menu Option #5 Once you save that you should…

  • Change Current Day Color – jQuery FullCalendar

    Hey everyone, Just a quick post on how to change a few of the styles in FullCalendar. All you need to do is add these after the default styles are loaded: Current Day Background Color .fc-today{ background-color: blue; } Change Calendar Background Color #calendar .fc-content{ background-color: #FFFFFF; font-size: 80%; } Add Box Shadow to Events…

  • Events Only Showing in Month View – FullCalendar

    Hey everyone, Ran into a bit of a problem with FullCalendar today after setting up a JSON feed. My events were only appearing in the month view. This StackOverflow post explains that this is due to the fact that the allDay property wasn’t set. Original JSON [ “0”, { “title”: “Test event”, “id”: “821”, “start”:…

  • FullCalendar Example with Client-Side Event Updates

    Hey everyone, I’ve been mucking around with FullCalendar recently and decided to share one of the prototypes I’ve ended up with. It basically lets the user change the events without having to do a postback. A user simply has to click the event, type in the changes and hit update. I’ve posted the code below,…

  • Format JSON – JSONLint

    Hey everyone, Just a site that I came across today that was pretty useful for JSON: http://jsonlint.com/ I’ve been working with jQuery FullCalendar and needed some sample data. It has the option to use a JSON feed but mine wasn’t working for some reason. JSONLint allowed me to both format and validate it. Let me…

  • Fields Missing from jQuery Post – Serialize Data

    Hey everyone, I was using jquery’s serialize method to post completed form data only to find that a number of my fields were missing. //Display loader and disable forms disable_form_fields(true); //Post via ajax $.ajax({ type: ‘POST’, url: ‘uploads/add’, data: $(form).serialize(), success: function(data, text_status, oHTTP){ handle_form_response(data, text_status, oHTTP, $(form).data(‘file_id’)) }, error: function(){ //Hide loader etc set_form_loading(false);…

Create a website or blog at WordPress.com