Register now and start sharing your code snippets.
-->

Opening a new tab with Firefox

JavaScript posted 7 months ago by christian

Note that this only works from a Firefox extension: 

   1  function openTab(url, focus) 
   2    {
   3      var tab = getBrowser().addTab(url);
   4  
   5      if(focus)
   6      {
   7        getBrowser().selectedTab = tab;
   8      }
   9     
  10      return tab;
  11    }
  12

Tagged open, tab, firefox

Opening a new window in the center of the screen with JavaScript

JavaScript posted 7 months ago by christian

This JavaScript code will open a URL in a new window and center the window on the screen, instead of showing the window in a random place:

   1  var url = 'http://google.com/';
   2  var width  = 640;
   3  var height = 480;
   4     
   5  var left   = (screen.width / 2) - (width / 2);
   6  var top    = (screen.height / 2) - (height / 2);
   7     
   8  var xWindow = window.open(url, 'post', 'resizable=1,width=' + width + ',height=' + height + ', top=' + top + ', left=' + left);
   9  
  10  xWindow.focus();

Tagged javascript, window, open, center, screen

Getting the state of checkboxes with jQuery

JavaScript posted 9 months ago by christian

The following code will loop through all selected (checked) checkboxes and collect their values in an array: 

   1  var selected = [];
   2  $('#select-columns input[@type=checkbox]').filter(':checked').each(function () {
   3  	selected.push(this.value);
   4  });
   5  console.log(selected);

More examples can be found here

Tagged jquery, checkbox

How to create an autocompleted field with jQuery, which looks and feels like autocomplete with Scriptaculous & prototype

JavaScript posted 9 months ago by christian

There are a lot of autocomplete plugins for jQuery, but not one of them seems to work similarly to Scriptaculous, except for the one at bassistance.de.

To use it follow the instructions found here.

There are a couple of gotchas for ex-scriptaculous users, like that the controller should return the list of tags with a newline character as separator, compared to an HTML list with Scriptaculous.

The other gotcha is the syntax, which is a lot prettier than Scriptaculous:

   1  <script type="text/javascript">
   2  $("#tags-field").autocomplete("/tags/autocomplete", {
   3  	multiple: true,
   4  	autoFill: true,
   5  	minChars: 3
   6  });
   7  </script>

Remember that /tags/autocomplete should render a list of tags delimited by linefeeds:

   1  ruby
   2  php
   3  java
   4  perl
   5  python

Note that jQuery sends the user typed text in a request parameter named ‘q’, so jQuery makes the following request to your controller: ’/tags/autocomplete?q=ruby’.

The list that’s shown when you type something can be styled with these CSS rules:

   1  div.ac_results {
   2  	width: 350px;
   3  	background: #fff;
   4  }
   5  
   6  div.ac_results ul {
   7  	border:1px solid #888;
   8  	margin:0;
   9  	padding:0;
  10  	width:100%;
  11  	list-style-type:none;
  12  }
  13  
  14  div.ac_results ul li {
  15  	margin:0;
  16  	padding:3px;
  17  }
  18  
  19  // Hovering over list item
  20  div.ac_results ul li.ac_over {
  21  	background-color: #ffb;
  22  }

The plugins documentation is quite good, but for some reason it was easier to figure out what was needed to get it working by reading the code.

Tagged jquery, autocomplete, plugin, scriptaculous, prototype

Show and Hide (toggle) the Blueprint Grid with a JavaScript

JavaScript posted about 1 year ago by christian

This snippet-which could be improved on-allows you to easily display and hide the BlueprintCSS grid.

Put the following code inside the <head> element: 

   1  <style title="grid" type="text/css">
   2  		.container { }
   3  </style>
   4  <script type="text/javascript">
   5  	function toggleGrid() {
   6  		if (!document.styleSheets) return;
   7  	
   8  		var cssTitle  	 = "grid"
   9  		var selectorName = ".container";
  10  		var cssText   	 = "background: url('images/grid.png');";
  11  		var css = new Array();
  12  	
  13  		// Find the stylesheet
  14  		for(i = 0; i < document.styleSheets.length; i++)
  15  		{
  16  			var styleSheet = document.styleSheets[i];
  17  			
  18  			if(styleSheet.title == cssTitle) {
  19  				if (document.styleSheets[i].cssRules)
  20  					css = document.styleSheets[i].cssRules;
  21  				else if (document.styleSheets[i].rules)
  22  					css = document.styleSheets[i].rules;
  23  				else return;
  24  				
  25  				break;
  26  			}
  27  		}
  28  
  29  		// Find the selector
  30  		for (i = 0; i < css.length; i++) {
  31  		
  32  			if ((css[i].selectorText.toLowerCase() == selectorName)) {
  33  				if(css[i].style.cssText == "") {
  34  					css[i].style.cssText = cssText;
  35  				}
  36  				else {
  37  					css[i].style.cssText = "";
  38  				}
  39  			}
  40  		}
  41  	}
  42  </script>

Change selectorName or cssText, if needed. Next add the following link, for example, to the footer:

   1  <a href="javascript:toggleGrid();" id="toggle-grid">Show grid</a>

Now when you click the link, the grid will be displayed. Click again to hide it.

Note that this is a simple example of how to change a CSS style sheet dynamically with JavaScript. You can use it to change any selector at runtime.

Tagged blueprint, css, blueprintcss, toggle, grid, javascript