Blue Orange Green Pink Purple

Archive for the ‘Javascript’ Category

You can use the search form below to go through the content and find a specific post or page:

Aug 19

Running videos with Flexsilder and issues to be pointed with iframe

Flexslider become one of the most popular jquery based slider for its lots of options, content based support and also for responsive. I’m gonna here to discuss some key points about running videos with Flexslider which needs to be pointed to avoid JS errors and for smoothness.

For vimeo video, we use froogaloop js file, there is a updated file for this, try to use updated one and always add this JS file at the end of the html file.

For youtube video in firefox browser, sometimes nav arrows don’t show and other css issues, try to use ‘wmode=transparent’ at the end of the iframe src.

Iframe should not be hidden at first by ‘display:none’, this can be in a case that we want a play button to be clicked on this and to play the video, and the iframe is hidden at first. so hidden iframe can cause error like ‘value not an object’ or so on.

Use ‘enablejsapi=1&verson=3′ to use it with youtube player API.

For youtube player API, always try to read first its document(https://developers.google.com/youtube/js_api_reference) and get idea as well as other issues.

To play a youtube video, the easiest and also the dirty! way is to add ‘autoplay=1′ at the end of the iframe src like below:

    $('videiID')[0].src += "&autoplay=1";

We can also use a simple function ‘callplayer()’ to control youtube iframe as shown here(http://jsfiddle.net/g6P5H/) or discussed here(http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html) .

Some useful links about youtube and vimeo API with Flexslider : https://github.com/woothemes/FlexSlider/issues/346#issuecomment-13826530, http://daigo.org/2012/11/learning-flexslider-api

So, above points can reduce your hassle for JS erros or others.

Happy coding!

Jul 08

Javascript function parameter issue : Uncaught SyntaxError: Unexpected token = in Google Chrome

In Javascript, we often use functions for common tasks. Recently I have fallen in a problem where i have written a function to get ajax call which is common for some actions. That function has a parameter to get the URL which needed for ajax call. It was ok in Firefox, but in chrome, all other JS work stopped, due to the parameter error, that is ‘parameter default value’. Solution is, you can’t assign a default value to the function parameter. More explanation here: Function default parameter.

So we need to use below way for browser compatibility:

function get_ajax_fields(parameter){
        flds_request = jQuery.ajax({
            url: baseURL+"dataimport/"+parameter,
            dataType: "json"
        });
        return flds_request;
}

We can't use like this: parameter=''

Hope the issue can save your time! Enjoy!!

Apr 05

Javascript calculation…..

Guys, good day!

After a long time, started blogging again! today wanna discuss 1 important JS issue which we need in our daily development lot of times. When we need to calculate some values like a height of a div and add some extra px to that height, in such a situation we may add a digit with a variable. Sometimes its returns not expected value, its recommended to use ‘ParseInt‘ function to manipulate its correctly.

See below example :

var old_height = $('.mydiv').height();
var new_height = parseInt(old_height+10);

Now new_height has calculated value. we forget the use of this JS function and try to find out the errors, but this simple function needs to be remember in all case of addition.

Its just like a remember for experienced guys and a better practice info for beginner!

Cheers and have good practice!

Apr 05

Go to a URL/link from drop down list/menu in html+javascript

In many web application, we see some kind of drop down list to go to a URL only by clicking on the list item, no need to click on any button. For the users, this is a nice experience that they don’t have to click on submit button.
I have described here in details the tutorial especially for beginners. Let we have a form like below:

<form method="post" action="http://www.example.com/submit.php">
<input type="submit" name="submit_button" value="Go">
<select name="url_list" >
<option value="http://www.example.com/index.html">list 1</option>
<option value="http://www.example.com/about.html">list 2</option>
</select>
</form>

we can improve the form performance by combining it with a simple javascript and it has below advantages:

1.It makes your page more efficient, because if JavaScript is enabled, the web browser can jump to the destination webpage itself without having to run the script. Also it is nicer for users because they do not need to select the “go” button.

2.The form will also continue to work with web browsers that do not have JavaScript available.

Now, the following example displays a drop down list with a js function. Include the js in your <head></head> of the file :

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin gotosite
function gotosite()
{
var URL = document.gotoform.url_list.options[document.gotoform.url_list.selectedIndex].value; window.location.href = URL;
}
// End gotosite -->
</script>

and now try the form like this :

<form name="gotoform" method="post" action="http://www.example.com/submit.php">
<noscript>
<!-- use noscript to only show this if no javascript is available -->
<input type="submit" name="submit_button" value="Go">
</noscript>
<select name="url_list" size="1" onChange="gotosite()">
<-- Value of first option is default, usually current page -->
<option value="http://www.example.com/submit.php"> Select a Site...</option>
<option value="http://www.example.com/index.html">list 1</option>
<option value="http://www.example.com/about.html">list 2</option>
</select>
</form>

we call ‘gotosite()’ function on ‘onChange’ of <select>, and this will help to jump to the url for each list.
Hope this will help the beginners for more reliable user experience.

Mar 21

Alter Dynamic Table Row Background Colors Using JavaScript

Many web applications that present tabular data use alternating background colors of table rows to increase the readability of that data. This could be more attractive and nice looking for visitors.

I wanted the table to be dynamic. We can use PHP for doing this, but hence I’m showing it in JavaScript.

Getting Started

Let’s start with an ordinary html table. Whether the table contains head/foot elements doesn’t matter in this case:

<table id="theTable">
<tr><td>0 - some txt</td></tr>
<tr><td>1 - some txt</td></tr>
<tr><td>2 - some txt</td></tr>
<tr><td>3 - some txt</td></tr>
<tr><td>4 - some txt</td></tr>
</table>

we use a style element through which we have defined two classes for background colors:

<style>
.odd{background-color: white;}
.even{background-color: gray;}
</style>

The style is flexible: it could just as well define something else, such as that every second row should display in italics. The complete function looks like this:

function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}

The above function should be called from the onload event of the body tag:

<html>
…
<body onload="alternate('thetable')">
<table id="thetable">
<tr><td>…</td></tr>
</table>
…

The result could look something like this:

row color example

Hope this may help the beginners who are developing web applications.

Happy’s coding.

I wanted the table to be dynamic. We can use PHP for doing this, but hence I’m showing it in JavaScript.

Getting Started

Let’s start with an ordinary html table. Whether the table contains head/foot elements doesn’t matter in this case:

<table id="theTable">
<tr><td>0 - some txt</td></tr>
<tr><td>1 - some txt</td></tr>
<tr><td>2 - some txt</td></tr>
<tr><td>3 - some txt</td></tr>
<tr><td>4 - some txt</td></tr>
</table>

we use a style element through which we have defined two classes for background colors:

<style>
.odd{background-color: white;}
.even{background-color: gray;}
</style>

The style is flexible: it could just as well define something else, such as that every second row should display in italics. The complete function looks like this:

The above function should be called from the onload event of the body tag:

<html>
…
<body onload="alternate('thetable')">
<table id="thetable">
<tr><td>…</td></tr>
</table>
…

The result could look something like this:
1457_rowcolor1

Hope this will may help the beginners who are developing web applications. J

Happy’s coding.

Saif The Green

Recent Posts
Archives
Categories
- CodeIgniter
- Javascript
- Linux
- MySQL
- opencart
- php
- SEO
- Software Development
- Web Development
- Web Services
- Wordpress
Meta
Archives
Search

Archive for the ‘Javascript’ Category

Running videos with Flexsilder and issues to be pointed with iframe

Javascript function parameter issue : Uncaught SyntaxError: Unexpected token = in Google Chrome

Javascript calculation…..

Go to a URL/link from drop down list/menu in html+javascript

Alter Dynamic Table Row Background Colors Using JavaScript

Getting Started

Getting Started

Let’s start with an ordinary html table. Whether the table contains head/foot elements doesn’t matter in this case:

Saif The Green

Recent Posts

Archives

Categories

Meta

Archives

Search