Category Archives: 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

Advertisements

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('
' + fileSize + ' MB
'); } else{ $('body').append('
' + fileSize + ' MB
'); } }); });
.file{
padding: 5px 7px;
border-radius: 3px;
background-color: green;
color: white;
margin: 5px;
}

.file.valid{
background-color: rgb(127, 197, 127);
}

.file.invalid{
background-color: rgb(197, 127, 127);
}

Here’s the link to the full fiddle: http://jsfiddle.net/nLLMF/

There’re also a whole heap of other options listed on this StackOverflow post if you’re chasing something a bit more robust: http://stackoverflow.com/a/13249924/522859

http://jsfiddle.net/nLLMF/embedded/

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 it pretty useful for backtracking through jQuery exceptions.

For more info, check out this Stackoverflow post: http://stackoverflow.com/q/6715571/522859

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 page.

There are a couple of ways to go about fixing this. Note the href value in the following:

<a href='javascript:void(0)' class='btn_show_reply' data-comment_id="">Reply

The second option is probably already familiar to anyone using ajax forms, simply have your function return false:

<a href='javascript:void(0)' onClick='myFunction()' id='my_awesome_link' data-comment_id="">Reply


function myFunction(){

   //Do some awesome stuff
   // ...

   //Return false to prevent link from affecting anything
   return false;
}

The third option is simply a jQuery-ish rehash of number 2:



/* Does some awesome stuff while preventing the calling link from directing the user */
$('#my_awesome_link').click(function(e) {

   //Do some awesome stuff and then prevent the link from directing user
   e.preventDefault();
});

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:


Once you save that you should see something similar to the image below:

Twitter Bootstrap Dropdown Button

A standard twitter bootstrap dropdown button.

Change list item text alignment

To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

Change dropdown button color

Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

Let me know if you have any issues.

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

#calendar .fc-event{
	box-shadow: 2px 2px 2px #706868;
}

Style Times and Days – Add border radius to headings

#calendar .fc-agenda-axis, #calendar .fc-widget-header{
	background-color: #C2E6FF;
	border-color: #AED0EA;
	font-weight: normal;
	padding: 3px;
	border-radius: 3px;
}

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": "2012-11-23 14:00:00",
        "end": "2012-11-23 15:00:00"        
    },
    "1",
    {
        "title": "Test event 2",
        "id": "822",        
        "start": "2012-11-23 9:00:00",
        "end": "2012-11-23 10:00:00"
    },
    "2",
    {
        "title": "Test event 3",
        "id": "823",        
        "start": "2012-11-24 8:00:00",
        "end": "2012-11-24 6:00:00"
    },
    "3",
    {
        "title": "Test event 4",
        "id": "824",        
        "start": "2012-11-27 6:00:00",
        "end": "2012-11-27 7:00:00"
    }
]

Working JSON

[
    "0",
    {
        "allDay": "",
        "title": "Test event",
        "id": "821",
        "start": "2012-11-23 14:00:00",
        "end": "2012-11-23 15:00:00"        
    },
    "1",
    {
        "allDay": "",
        "title": "Test event 2",
        "id": "822",        
        "start": "2012-11-23 9:00:00",
        "end": "2012-11-23 10:00:00"
    },
    "2",
    {
        "allDay": "",
        "title": "Test event 3",
        "id": "823",        
        "start": "2012-11-24 8:00:00",
        "end": "2012-11-24 6:00:00"
    },
    "3",
    {
        "allDay": "",
        "title": "Test event 4",
        "id": "824",        
        "start": "2012-11-27 6:00:00",
        "end": "2012-11-27 7:00:00"
    }
]