Tag Archives: jQuery

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();
});

Coinroll.it Betting Bot – Martingale System

Hey everyone,

I received an odd request for a script the other day – a bot for an bitcoin gambling website. The request was for a simple JavaScript bookmarklet that would execute the martingale betting system autonomously.

The code I ended up with as follows:

javascript: /* MANUAL CONFIGURATION - Initialisation Only */ var reset_to = 0.00001; /* Amount to reset to */ /* Initialise bot */ initialise_bookmarklet(); var previous_bet = null; var bot_running = false; create_message('Bot initialised, hit run to start...'); /* Runs the bot */ function run_bot(){ /* Check to see whether bot needs to be run/stopped */ if(bot_running == true){ /* Create vars */ var bet_amount = $("#betamount").val(); var parent_id = $('#bets .item:first').attr('id'); var result = $('#bets .item:first-child .lucky'); /* Check if result is same as previous */ if(result == null || result.length == 0){ create_message('No bets on screen... waiting for next run.'); } else if(parent_id != previous_bet){ /* Set previous bet to current bet */ previous_bet = parent_id; /* Check the current bet amount */ if(bet_amount >= $('#max_bet').data('max_bet') || bet_amount > $('#account-balance').text()){ /* Reset bet amount */ $('#betamount').val(reset_to); create_message('MAXXED OUT'); } /* Check if first item is a win */ if($(result).hasClass('win')){ /* Adjust bet amount to reset amount and roll */ $('#betamount').val(reset_to); roll(); } else if($(result).hasClass('lose')){ /* Double amount and roll again */ setDouble(); roll(); } else{ create_message('Unknown status, not a win or loss... wait for next run...'); } } else if ($('#betbutton').hasClass('pressed') == false){ create_message('Assumed 503, press again...'); roll(); } else{ create_message('Previous bet is still there, wait ' + $('#bot_timeout').val() + 'ms...'); } /* Schedule next run */ setTimeout(function(){ run_bot(); }, $('#bot_timeout').val()); } else if(bot_running == false){ /* Update status to prevent bot running again */ create_message('Bot stopped...'); } else{ /* Error occurred */ create_message('Error: Unknown status.'); create_message('Bot stopped...'); } } /* Run when button clicked */ function bot_status_change(button){ /* Check whether to start or stop bot */ if(bot_running == false){ /* Run bot and display message */ create_message('Running bot...'); $(button).text('Pause'); bot_running = true; run_bot(); } else if(bot_running == true){ /* Update status to prevent bot running again */ create_message('Stopping bot...'); bot_running = false; $(button).text('Run'); } else{ /* Error occurred */ create_message('Error: Unknown status.'); create_message($(button).text('Run')); bot_running = false; } } /* Creates a message */ function create_message(message){ console.log(message); $('#status_div').prepend(message + '
'); } /* Sets the max bet */ function set_max_bet(){ /* Retrieve max bet */ var txt_max_value = parseFloat($.trim($('#max_bet').val())); /* Check if new bet is not a number */ if(isNaN(txt_max_value) == false){ /* Set max bet and display to user */ $('#max_bet').data('max_bet', txt_max_value); create_message('New Max Bet: ' + txt_max_value + ""); } else{ create_message('

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'); create_message('Max bet is not a number, not updated.'); create_message('Current Max Bet: ' + max_bet); create_message('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

'); } } /* Displays button to start bot etc */ function initialise_bookmarklet(){ /* Create vars */ var controls; var div_styles = "max-width:250px; width:250px;position: fixed; top: 10px; left: 10px; text-align: left; background-color: rgba(238, 238, 238, 0.84); padding: 10px; border: 1px solid rgba(116, 116, 116, 0.46); border-radius: 3px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); color: #333;"; var status_div = "
"; /* Set controls */ controls = "
" + /* Wrapper start */ "Timeout:
" + "Run
 
" + /* Timeout button */ "Max Bet:
" + "Set" + /* Max Bet */ " 

Timeout: How many milliseconds the bot should wait between each bet.

Max Bet: The bot will revert to the reset amount if the bet exceeds this value (eg. 0.041)

" + "
"; /* Close wrapper */ /* Append status div */ controls += status_div; /* Add button to body */ $('body').append(controls); }

To add the bookmarklet, simply create a bookmark using the code above as the url. Go to CoinRoll, enter a bet and a starting value of 0.0001. Finally, click the bookmark icon, choose your max bet and hit start.

Martingale Bot for CoinRoll.it

Martingale Bot for CoinRoll.it

Note that this is just a quick script and has a lot of potential to be optimised. I should also mention that this is not an exploit, just a bot. The martingale system is still gambling and if you play long enough you WILL lose.

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"
    }
]

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, however there’s also a zip which is a little easier to manage. Note that you’ll probably want to clean it up a little if you plan to use it in production. The following libraries and plugins are also used:
jQuery
jQuery UI
jQuery FullCalendar
jQuery miniColors

What it Looks Like:

Full Calendar Example with Client Side Edits

Full Calendar Example with Client Side Edits

How to Use It:

It’s all pretty straight forward, but just in case any one runs into issues there are two parts to this example. First, you generate an event template. You can then drag and drop this template onto the calendar as many times as you want.

The second part allows you to edit existing events without posting back to the server. To do this, simply click an event and then make the necessary adjustments using the top panel on the right. Once you’re done, just press update event.

The example uses the standard title property, but also includes a few others: descriptions, price, available. You can change/remove these to suit your needs, just remember to pull them out of the JavaScript as well.

Zip:

Full Calendar Zip

Basic Example Page:


	

		
		
		
		
		
	
	

		
		
Background:

Border:

Text:





Description


One Hour
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js http://js/jquery-ui-1.9.2.custom.min.js http://js/fullcalendar.js http://js/view_calendar.js http://js/jquery.miniColors.js

Basic JavaScript:

/* Wait for DOM to load etc */
$(document).ready(function(){

	//Initialisations
	initialise_calendar();
	initialise_color_pickers();
	initialise_buttons();
	initialise_event_generation();
	initialise_update_event();
});


/* Initialise buttons */
function initialise_buttons(){

	$('.btn').button();
}


/* Binds and initialises event generation functionality */
function initialise_event_generation(){

	//Bind event
	$('#btn_gen_event').bind('click', function(){

		//Retrieve template event
		var template_event = $('#external_event_template').clone();
		var background_color = $('#txt_background_color').val();
		var border_color = $('#txt_border_color').val();
		var text_color = $('#txt_text_color').val();
		var title = $('#txt_title').val();
		var description = $('#txt_description').val();
		var price = $('#txt_price').val(); 
		var available = $('#txt_available').val();

		//Edit id
		$(template_event).attr('id', get_uni_id());

		//Add template data attributes
		$(template_event).attr('data-background', background_color);
		$(template_event).attr('data-border', border_color);
		$(template_event).attr('data-text', text_color);
		$(template_event).attr('data-title', title);
		$(template_event).attr('data-description', description);
		$(template_event).attr('data-price', price);
		$(template_event).attr('data-available', available);

		//Style external event
		$(template_event).css('background-color', background_color);
		$(template_event).css('border-color', border_color);
		$(template_event).css('color', text_color);

		//Set text of external event
		$(template_event).text(title);

		//Append to external events container
		$('#external_events').append(template_event);

		//Initialise external event
		initialise_external_event('#' + $(template_event).attr('id'));

		//Show
		$(template_event).fadeIn(2000);
	});
}


/* Initialise external events */
function initialise_external_event(selector){

	//Initialise booking types
	$(selector).each(function(){

		//Make draggable
		$(this).draggable({
			revert: true,
			revertDuration: 0,
			zIndex: 999,
			cursorAt: {
				left: 10,
				top: 1
			}
		});

		//Create event object
		var event_object = {
			title: $.trim($(this).text())
		};

		//Store event in dom to be accessed later
		$(this).data('eventObject', event_object);
	});
}


/* Initialise color pickers */
function initialise_color_pickers(){

	//Initialise color pickers
	$('.color_picker').miniColors({
		'trigger': 'show',
		'opacity': 'none'
	});
}


/* Initialises calendar */
function initialise_calendar(){

	//Initialise calendar
	$('#calendar').fullCalendar({
		theme: true,
		firstDay: 1,
		header: {
			left: 'today prev,next',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		defaultView: 'agendaWeek',
		minTime: '6:00am',
		maxTime: '6:00pm',
		allDaySlot: false,
		columnFormat: {
			month: 'ddd',
			week: 'ddd dd/MM',
			day: 'dddd M/d'
		},
		eventSources: [
			{
				url: 'calendar_events.json',
				editable: false
			}
		],
		droppable: true,
		drop: function(date, all_day){
			external_event_dropped(date, all_day, this);
		},
		eventClick: function(cal_event, js_event, view){
			calendar_event_clicked(cal_event, js_event, view);
		},
		editable: true
	});	

	//Initialise external events
	initialise_external_event('.external-event');
}


/* Handle an external event that has been dropped on the calendar */
function external_event_dropped(date, all_day, external_event){

	//Create vars
	var event_object;
	var copied_event_object;
	var duration = 60;
	var cost;

	//Retrive dropped elemetns stored event object
	event_object = $(external_event).data('eventObject');

	//Copy so that multiple events don't reference same object
	copied_event_object = $.extend({}, event_object);
	
	//Assign reported start and end dates
	copied_event_object.start = date;
	copied_event_object.end = new Date(date.getTime() + duration * 60000);
	copied_event_object.allDay = all_day;

	//Assign colors etc
	copied_event_object.backgroundColor = $(external_event).data('background');
	copied_event_object.textColor = $(external_event).data('text');
	copied_event_object.borderColor = $(external_event).data('border');

	//Assign text, price, etc
	copied_event_object.id = get_uni_id();
	copied_event_object.title = $(external_event).data('title');
	copied_event_object.description = $(external_event).data('description');
	copied_event_object.price = $(external_event).data('price');
	copied_event_object.available = $(external_event).data('available');

	//Render event on calendar
	$('#calendar').fullCalendar('renderEvent', copied_event_object, true);
}


/* Initialise event clicks */
function calendar_event_clicked(cal_event, js_event, view){

	//Set generation values
	set_event_generation_values(cal_event.id, cal_event.backgroundColor, cal_event.borderColor, cal_event.textColor, cal_event.title, cal_event.description, cal_event.price, cal_event.available);
}


/* Set event generation values */
function set_event_generation_values(event_id, bg_color, border_color, text_color, title, description, price, available){

	//Set values
	$('#txt_background_color').miniColors('value', bg_color);
	$('#txt_border_color').miniColors('value', border_color);
	$('#txt_text_color').miniColors('value', text_color);
	$('#txt_title').val(title);
	$('#txt_description').val(description);
	$('#txt_price').val(price);
	$('#txt_available').val(available);
	$('#txt_current_event').val(event_id);
}


/* Generate unique id */
function get_uni_id(){

	//Generate unique id
	return new Date().getTime() + Math.floor(Math.random()) * 500;
}


/* Initialise update event button */
function initialise_update_event(){
	var test = $('#calendar').fullCalendar( 'clientEvents');
	//Bind event
	$('#btn_update_event').bind('click', function(){

		//Create vars
		var current_event_id = $('#txt_current_event').val();

		//Check if value found
		if(current_event_id){

			//Retrieve current event
			var current_event = $('#calendar').fullCalendar('clientEvents', current_event_id);

			//Check if found
			if(current_event && current_event.length == 1){

				//Retrieve current event from array
				current_event = current_event[0];

				//Set values
				current_event.backgroundColor = $('#txt_background_color').val();
				current_event.textColor = $('#txt_text_color').val();
				current_event.borderColor = $('#txt_border_color').val();
				current_event.title = $('#txt_title').val();
				current_event.description = $('#txt_description').val();
				current_event.price = $('#txt_price').val();
				current_event.available = $('#txt_available').val();

				//Update event
				$('#calendar').fullCalendar('updateEvent', current_event);
			}
		}
	});
}

Stylesheet

body{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
}

#content_wrapper{
	width: 820px;
	margin-left: auto;
	margin-right: auto;
}

#calendar{
	width: 650px;
	float: left;
}

.btn{
	font-size: 85%
	margin-top: 10px;
}

#event_generation_wrapper{
	float: left;
	width: 120px;
	background-color: #DDD;
	margin-left: 20px;
	margin-top: 40px;
	border: 1px solid #4297D7;
	background-color: #FCFDFD;	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 10px 5px 10px 5px;
}

#event_generation_wrapper .left{
	float: left;
	width: 70px;
}

#event_generation_wrapper .right{
	float: left;
	max-width: 25px;
	margin-left: 10px;
}

#event_generation_wrapper input{
	width: 112px;
}

#event_generation_wrapper textarea{
	width: 110px;	
	height: 50px;
}

#event_generation_wrapper .miniColors-triggerWrap{	
	margin-bottom: 5px;
}

#event_generation_wrapper .text{
	padding-top: 1px;	
	margin-bottom: 5px;
	line-height: 10px;
}


#external_events{
	float: left;
	width: 130px;
	background-color: #DDD;
	margin-left: 20px;
	margin-top: 40px;
	border: 1px solid #4297D7;
	background-color: #FCFDFD;	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#external_events .external-event{
	width: 100px;
	margin: 5px;
	font-family: Verdana, Arial, sans-serif;
	border: 1px solid #36C;
	padding: 3px;
	text-align: center;
	background-color: #36C;
	color: white;
	cursor: pointer;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#calendar .ui-widget-header{
	font-weight: normal;
	padding: 3px 3px 3px 3px;
}

#calendar .fc-header-title{
	font-weight: normal;
}

#external_event_template{
	display: none;
}

Basic List of Events (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"
    }
]

Let me know if you have any issues or something to add!

Cheers,
Chris

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 know if you come across any other useful formatters/validators.

Cheers,
Chris

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);

				//Unspecified error
				alert('An error has occurred.');
			},
			dataType: 'json'			
		});

Thanks to this stackoverflow post I realised that the data wasn’t being serialised because I’d disabled most of the fields beforehand. This was done in order to prevent the user from changing the values. To get around this I simply had to serialise the data BEFORE disabling anything.


                //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);

				//Unspecified error
				alert('An error has occurred.');
			},
			dataType: 'json'			
		});

               //Display loader and disable forms - DO THIS AFTER SERIALISING
		disable_form_fields(true);

Let me know if you have any issues.

jQuery DateTimePicker with Bootstrap

Hey everyone,

I ran into a bit of trouble today trying to get datetimepicker to work within bootstrap tabs. The dialog appeared however none of the buttons seemed to work. The fields also remained unpopulated.

It turned out the the issue was caused by the fact that I’d used jquery’s clone function to duplicate the tabs without reassigning field ids. This meant that there were multiple fields with the same id, confusing datetimepicker.

The solution I used was to dynamically assign all of the ids as each tab was displayed:


/* Bind tab change events: this has been done so that there is less js overhead */
function bind_tab_change_events(){

	//Bind change event
	$('.nav-tabs').bind('show', function(e){

		//Create vars
		var selected_file_id = $(e.target).data('file_id');

		//Initialisations
		initialise_time_pickers('#file_' + selected_file_id + ' .timepicker', selected_file_id);	
	})
}

/* Initalise timepickers */
function initialise_time_pickers(selector, unique_id){

	//Loop through each bound element
	$.each($(selector), function(index, value){

		//Set id - datepicker won't work without unique ids
		$(value).attr('id', $(value).attr('id') + '_' + unique_id);

		//Initialise datepicker		
		$(value).datetimepicker();
	});
}

UPDATE:
It looks like quite a few people hitting this post are looking for a bootstrap specific alternative, Sebastien has provided a link to one in the comments below:
Bootstrap DatetimePicker.

Another one that looks really good, a bit less clunky than any of the alternatives I’ve seen: http://tarruda.github.com/bootstrap-datetimepicker/

Plain timepicker: http://jdewit.github.com/bootstrap-timepicker/

Plain datepicker: http://www.eyecon.ro/bootstrap-datepicker/

Let me know if you have any questions!

Remove Disabled Attribute – Twitter Bootstrap

Hey everyone,

I was using Bootstrap’s disabled attribute today and just needed a way to remove it. Once again, jQuery has a quick and easy way to do this:


$('#my_input').removeAttr('disabled');

There’s a whole heap of documentation on the jQuery site: http://api.jquery.com/removeAttr/