< / eXtreme Coding >: Javascript

Showing posts with label Javascript. Show all posts

Saturday, November 26, 2016

Reviews of Top Frameworks For HTML5 Hybrid Mobile Apps

Technology moves so fast now a days, and this is specially true in the JavaScript world. So if you're starting now in Hybrid Mobile development and you're looking for a Framework, you will come face to face with dozens of choices (that at first look, they all look the same).

One good place to start is by checking comparisons and reviews of the top Frameworks available for Hybrid Mobile Apps development and see which one most fits your needs.

I leave you here some good blog posts about it:

Link1: http://tutorialzine.com/2015/10/comparing-the-top-frameworks-for-building-hybrid-mobile-apps/

Link2: http://www.findalltogether.com/post/comparing-the-best-hybrid-app-frameworks-ionic-vs-f7-vs-famous-vs-onsenui-vs-manifoldjs/

My Top 3 are Ionic Framework, Framework7 and Onsen UI. And yours?

Friday, March 30, 2012

Scroll page with javascript

Sometimes it's useful to scroll the page automatically to send users to certain parts of the page. To do that the easiest way is using javascript, more specifically jquery that is a javascript framework.

Test it here:

Scroll down!

Example code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript" 
SRC="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function scroll_up()
{
    $(window).scrollTop(0);
}
function scroll_to_last_div()
{
    $(window).scrollTop($('#last_div').offset().top);
}
</SCRIPT>
</head>
<body>
<center>
<div style="height:100px;width:400px;">
<br><br>
<a href="javascript:scroll_to_last_div();">Scroll to last div!</a>
</div>
<div style="height:600px;width:400px;background:#234a34;">
</div>
<div style="height:100px;width:400px;" id="last_div">
<br><br>
<a href="javascript:scroll_up();">Scroll to top!</a>
</div>
<div style="height:600px;width:400px;background:#fa342a;">
</div>
</center>
</body>
</html>

Tuesday, October 18, 2011

Mootools - Javascript Framework

Note: This tutorial it's not for beginners but it's for people already with some knowledge of Javascript, HTML and CSS.

Mootools it's a javascript framework that allows you to create animations and take your website to the next level. Check Mootools Website and check their documentation and demos.

I leave here an exemple of how to create a cool publicity to your website using mootools function Fx.Slide.

Code:

<html>
<head>
<script src="js/codemirror.js" type="text/javascript"></script>
<script src="js/mootools-core-1.3-full.js" type="text/javascript"></script>
<script src="js/mootools-more-1.3-full.js" type="text/javascript"></script>
<script src="js/mootools-art-0.87.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
/* function called when the page loads */
window.addEvent('domready', function() {

var state = 0; /* state variable 0 - out 1 - in */
var mySlideH = new Fx.Slide('slideH_div', {mode: 'horizontal', duration: 7000}); /* initialize the slide */

mySlideH.hide(); /* Initialy hide the image */
animated_truck();
window.setInterval(animated_truck,10000); /* Set the time interval to call the animated_truck function */

/* Alternate the slide state */
function animated_truck(){
if(state == 0)
{
slide_in();
state = 1;
}
else
{
slide_out();
state = 0;
}
}

/* Function to slide in the image */
function slide_in(){
document.getElementById('truck_img').src="images/truck2.png"; /* change the image */
mySlideH.slideIn(); /* slide in the image */
}

/* Function to slide out the image */
function slide_out(){
document.getElementById('truck_img').src="images/truck4.png"; /* change the image */
mySlideH.slideOut(); /* slide out the image */
}
});

</script>

</head>
<body>
<div id="slideH_div" style="height: 200px; width: 1000px;">
<img id="truck_img" src="images/truck2.png" style="float:right;"/>
</div>
</body>
</html>

Download: Mootools Example