Category: javascript

Categories
code javascript jQuery

Jquery Tools Overlay

Here’s the quick and dirty on how to create and control an overlay using jquery tools.

Download jquery tools, you can choose just the components you need: For an overlay with a mask you need overlay and expose…http://flowplayer.org/tools/download/index.html

image

Put the js in the appropriate place.

Then on the page that needs the overlay you only need a container with an id for the content of the overlay to live in: 

<div class="for_styling" id="someId">
    The content of the overlay goes here...
</div>


To initialize the overlay:


<script type="text/javascript">
    $(function () {
        $('#someId').overlay({
            top: 'x',
            mask: {
                color: '#333',
                opacity: 0.6,
                loadSpeed: 200 //ms
            },
            closeOnClick: false, // to make it modal if you need to
            load: true // to make it load on page load
        });
        // to open the overlay at any time
        $('#someId').data('overlay').load();
        // to close the overlay at any time
        $('#someId').data('overlay').close();
    });
</script>





That’s pretty much it. There will be an element created with a class of “close”  that you can style as needed. 
This has a close function automatically attached.




There are events to attach functions to…


onBeforeLoad 
before the overlay is displayed. The overlay has already been positioned at the location from where it will start animating. 


onLoad 
when the overlay has completely been displayed 


onBeforeClose 
before the overlay is closed 


onClose 
when the overlay is closed 


…and there are methods for getting the trigger (if there is one, we didn’t look at that here), or the overlay, checking to see if it is open, etc…


I really think this is the way to go from now on, rather than using Thickbox, etc…


		


	


	

		
	


	






	



	


		
			

				Categories
				

					audio html5 interaction javascript				

			


			
Creating a synth toy in HTML5 and Javascript

		


			

		


		
	





	


		


			
It’s been a while since posting…life eh! Anyway, I’ve been actively  working on a synth toy/tool that works in the browser using only HTML5 and Javascript (and jQuery [yes this is also js :P], mainly to speed things up).  It is here: http://ahsquared.com/synth/audiogen.html.


I have made no attempt yet at UI design or even any kind of prettiness,  just getting the functionality squared away. This borrows heavily from a  blog  post by Steven Wittens for how to create and manipulate the audio  samples.


Continue reading “Creating a synth toy in HTML5 and Javascript”


		


	


	

		
		


			

		


		
	


	






	



	


		
			

				Categories
				

					code javascript				

			


			
Facebook Select All Bookmarklet

		


			

		


		
	





	


		


			
For some reason Facebook seems to think that its users love clicking and so refuses to give us a Select All button (is that part of the monetization scheme? are they going to charge for it?) Anyway I can’t stand it, so I found a little bookmarklet that will invite all your friends.





The one I found worked well but it selected everyone, even those who were already members, so I altered it so it would only select friends who needed the invite. Follow the steps below to create the bookmarklet that makes this work. The instructions are for Firefox, but should be similar for other browsers.





How to create a Firefox Bookmarklet The best way to do it would be to add this as a browser bookmarklet. So in FireFox:


    

  1. Right click next to your other bookmarklets and select New Bookmark.
    2. 

  2. In the Name field type: FaceBook Select All (or whatever you want)
    3. 

  3. In the Location field copy and paste the code you see below in the code box exactly as it is. You can leave the KEYWORDS and DESCRIPTION field blank. They aren’t necessary.

    javascript:elms=document.getElementById('friends').getElementsByTagName('li');for(var fid in elms){if(typeof elms[fid] === 'object' && elms[fid].className != 'disabled'){fs.click(elms[fid]);}}
    

    4. 

  4. Hit Add.
    5. 



You can also just drag this link to your bookmark toolbar: FB Select All


Now wherever you are adding friends to an event or group using the Facebook friend selector you can click the bookmarklet and it will select everyone who is not already a member.





Enjoy.