Responsive slider with fixed height

If you want to have a fixed height for a responsive-slider, you must disable ”max-width” and set width and height to auto. This is NOT a solution for a specific slideshow, just a general thinking of how to solve it.

Ex.)

.slider img {
max-width: none;
height: auto;
width: auto;
}

Then you can set your height for the container div.

Javascript associative array (objects)

Javascript does not have associative arrays, only key numbered arrays. But it is posible to use javascript objects and let them behave as associative arrays, example:


//-- Create object<script>
var myObject = { 'level1': {'level1-sub1' : 'value 1 1', 'level1-sub2' : 'value 1 2', 'level1-sub3' : 'value 1 3'},
'level12' : {'level2-sub1' : 'value 2 1', 'level2-sub2' : 'value 2 2', 'level2-sub3' : 'value 2 3'},
'level13' : {'level3-sub1' : 'value 3 1', 'level3-sub2' : 'value 3 2', 'level3-sub3' : 'value 3 3'}};

//-- Loop object
function loopObj(myObject)
{
for (i in myObject) {
if (typeof myObject[i] === 'object') {
loopObj(myObject[i]);
} else {
alert(myObject[i]);
}
}
}

loopObj(myObject);
</script>

Javascript objects can be read in two ways, myObject.myKey or myObject[‘myKey’]. The second ways has to be used if you want to loop throw all keys.

Read this blog post for more info: http://www.quirksmode.org/js/associative.html

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