cat brain.stuff > wordpress » jquery

jQuery + CSS3 rotating panel

Wytze — Tue, 17 Jan 2012 19:58:07 +0000

This is just a small proof of concept (so don’t blame me for the lame CSS I created. ).
I found out it can be done nicer. (Read this awesome article about flip effects) I only do 90 degree rotations on the Y-axis and do no backside-hiding.

The idea is that a visible panel is seemingly rotated and the backside becomes visible. This works by using transition events. The 1st panel is visible at start and the 2nd panel is hidden. Then when an event is triggered (Hovered in this example) the 1st panel will be rotated 90 degrees (y-axis). The panel is then invisible the animation is ended and an event is triggered. At that point the 2nd panel is made visible and an class is added to trigger to animate it from 90 degrees back to 0 degrees. Thus creating an animation which makes it seem like the panel was completely rotated.

The implementation is currently only working for webkit based browsers.


<html>
<head>
	<style type="text/css"> 
		div#slide1
		{
		    width:100px;
		    height:100px;
		    background:red;
		    -webkit-transition: -webkit-transform 0.5s ease-in;
		}
 
		div#slide2
		{
		    width:100px;
		    height:100px;
		    background:green;
		    -webkit-transform: rotateY(90deg);
		    -webkit-transition: -webkit-transform 0.5s ease-in;
		}
 
		div#slide1:hover
		{
		    -webkit-transform: rotateY(90deg);
		}
 
		div#slide2.foo
		{
		    -webkit-transform: rotateY(0deg);
		}
	</style>
 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
		document.addEventListener(
			'webkitTransitionEnd', 
			function( event ) {
				$("#slide1").hide();
				$("#slide2").show().addClass("foo");
			}, false );
	</script>
</head>
<body>
	<p><b>Note:</b> This example does not work in Internet Explorer.</p>
 
	<div id="slide1">Test</div>
	<div id="slide2" style="display: none;">Awesome</div>
 
	<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

jQuery fancybox with ajax content.

Wytze — Fri, 01 Oct 2010 13:43:37 +0000

There are several ways to do this I guess. What I wanted was a default css class which I could apply to an anchor tag and have a specific part of the content loaded in fancybox. This is what I came up with. It is also possible to do this with the ajax property of fancybox itself I suppose.

$(function () {
    $("a.ajaxcontent").click(
        function (event) {
            event.preventDefault();
            var url = jQuery(this).attr("href");
 
            $.get(
                url,
                function (data) {
                    var content = jQuery(data).find("#content");
                    $.fancybox(content);
                }
            );
        }
    );
});

Greasemonkey + jQuery = 1337

Wytze — Fri, 30 Jul 2010 12:58:28 +0000

Got some inspiration from this site for the base script: click

I wanted a site to always show the answer ‘Ja’ (Dutch for yes). Which was normally only shown at a specific time. (The question was if you could start drinking beer. )

Here is the full script:

// ==UserScript==
// @name           ishetalbiertijd.user.js
// @namespace      http://famvdploeg.com/greasemonkey
// @include        http://www.ishetalbiertijd.nl/*
// ==/UserScript==
 
var $;
 
// Add jQuery
(function(){
	if (typeof unsafeWindow.jQuery == 'undefined') {
		var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
			GM_JQ = document.createElement('script');
 
		GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
		GM_JQ.type = 'text/javascript';
		GM_JQ.async = true;
 
		GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);
	}
	GM_wait();
})();
 
// Check if jQuery's loaded
function GM_wait() {
	if (typeof unsafeWindow.jQuery == 'undefined') {
		window.setTimeout(GM_wait, 100);
	} else {
		$ = unsafeWindow.jQuery.noConflict(true);
		letsJQuery();
	}
}
 
// All your GM code must be inside this function
function letsJQuery() {
	//@require does not work for us...
 
	$('span#answer').text('Jaaa!');
	$('#datum').replaceWith('Het kan nu!');
}