Skrollr – image not in sync

When using Skrollr I recently noticed that if you’re using ”$(document).ready(function(){ skrollr.init(); }) ” when calling the script, all the images might not have been loaded. This can lead to images beeing unsynced when scrolling. By changing to ”$(window).load(function() {skrollr.init();})” the problem is solved. This is beacuse window.load is not true until all images and content is loaded =)

Annonser

Stream Airvision (aircam) on webpage

Well, the correct term is not streaming it´s featching a new image every 0,5 second. The problem is that you need to be logged into the cam, so first, login to your webcam and activate the public user. Then lets do some bad hacking:

Add this to your page and change the following things:

http://ADDRESS-TO-YOUR-EMPTY-GIF-FILE/empty.gif
Should link to a 1px X 1px empty gif

http://ADDRESS-TO-YOUR-WEBCAM
The link to your webcam (IP or DynDNS)

http://ADDRESS-TO-YOUR-AJAX-LOADER-IMAGE/ajax-loader.gif
Address to a nice ajax-loader gif-animation

YOUR-DUMMY-IMAGE.jpg
To a image with the same size as your video output. I have a youtube kind of image with a play button on.


<script>
$(document).ready(function(){

$('#videoframe').click(function() {
$("#submit").click();
$('#videoframe').unbind('click');
$('#videoframe').removeClass('pointer');
$('#videoframe').attr("src","http://ADDRESS-TO-YOUR-EMPTY-GIF-FILE/empty.gif");
});

$("#loginform").submit( function () {
$("#webcamlogin").one('load', function() {
setInterval(function(){
var currentDate = new Date().getTime();
$('#videoframe').attr("src","http://ADDRESS-TO-YOUR-WEBCAM/snapshot.cgi?_="+currentDate);
},1000);
});
});

});
</script>
<style>
.videoframecontainer { position: relative; height: 263px; width: 470px; background: url(http://ADDRESS-TO-YOUR-AJAX-LOADER-IMAGE/ajax-loader.gif) no-repeat center center;}
#webcamlogin{height:0;width:0;border:0;margin:0;padding:0}
#submit{border:0;background: #fff;color: #fff;}
.pointer {cursor: hand; cursor: pointer;}
</style>

<div class="videoframecontainer">
<img id="videoframe" class="pointer" width="470" height="263" border="0" src="YOUR-DUMMY-IMAGE.jpg" alt="">
</div>

<form enctype="multipart/form-data" id="loginform" method="post" action="http://ADDRESS-TO-YOUR-WEBCAM/login.cgi" target="webcamlogin">
<input type="hidden" name="uri" id="uri" value="" />
<input type="hidden" name="username" id="username" value="public" />
<input type="hidden" name="password" id="password" maxlength="8" value="" />
<input name="Submit" type="submit" id="submit" value="Show" />
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
setInterval(function(){
var currentDate = new Date().getTime();
$('#videoframe').attr("src","http://YOUR-URL-TO-THE-SERVER/snapshot.cgi?_="+currentDate);
},500)
// ]]></script>
<img id="videoframe" alt="Video preview" src="http://YOUR-URL-TO-THE-SERVER/snapshot.cgi?_=136421898asd7583" width="640" height="360" border="1" />

The thing here is to use javascript to reload the image, and then use current timestamp to make sure the browsern doesn´t cache the image. Just click your ”YOUR-DUMMY-IMAGE.jpg” image to start the stream.

Enjoy!

 

Comment if you need any help =)

jQuery clone and change multiple id

This is a bit tricky, but I prefere to do it this way:
counter++;

var newset = $(”#template”).clone(true).attr(”id”, counter).hide().fadeIn(1000);
$(”input[name=firstname]”, newset).attr(”id”, ”firstname”+data);
$(”input[name=lastname]”, newset).attr(”id”, ”lastname”+data);
$(”input[name=company]”, newset).attr(”id”, ”company”+data);
$(‘#container’).append(newset);

So, first clone the elements, then before appending it, change each id it self.

Super fast blogg post, I´m in a hurry 🙂