Techno Blaze | Ajax, Android, Asp.net C#, Codeigniter, jQuery, mySQL: October 2012

Thursday 25 October 2012

jquery for keyup function typing aswell append the datas to screen

<html>
<head>
<style>

p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" value="some text"/>
<p></p>
<script>
    $(document).ready(function() {
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
    });
</script>

</body>
</html>

php for youtube upload by using url

<form action="tube.php" method="post">
<input type="text" name="id" />
<input type="text" name="you" />
<input type="submit" value="submit" />
</form>
<?php $con=mysql_connect("localhost","root","");
mysql_select_db("tube",$con);
$long = $_POST['you'];
$id = $_POST['id'];
mysql_query("INSERT INTO `youtube`(`id`, `url`) VALUES ('$id','$long')") or die("unable to connect");
$query=mysql_query("SELECT `id`, `url` FROM `youtube` where `id`=1");
while($res=mysql_fetch_array($query))
{

?>
<?php

$longString = $res['url'];
$len=strlen($longString );

?>
<?php
if($len>43)
{
?>
<iframe width="560" height="315" id="cs" src="
<?php

$b = substr($longString , strpos($longString , 'watch?v') + 1);

$c = substr($b, 0, strpos($b, '&'));

$str2 = substr($c, 7);

/*
echo substr_replace($c, '', 15) . "<br />\n";
echo "<br>";
$d = substr($a, 0, strpos($a, '='));
print $d; // prints 9999 */

$mn=substr_replace($longString , 'embed/', 23);

$mn .=$str2;

echo $mn;

?>" frameborder="0" allowfullscreen></iframe><?php } else {?>

<?php

$separator = 'embed/';
$separatorlength = strlen($separator) ;
$maxlength =53 - $separatorlength;
$start = $maxlength / 2 ;
$trunc = strlen($longString) - $maxlength;

$st= substr_replace($longString, $separator, $start);
echo "<br>";
$st.=substr($longString,31);

?>
<iframe width="560" height="315" src="<?php echo $st; ?>" frameborder="0" allowfullscreen></iframe><?php } ?> <br /><br /><br /> <?php }?>

print the screen-js

<A HREF="javascript:window.print()">Click to Print This Page</A>

youtube side bar-scroll control

<nav>
    <ul style="padding:40px;" id="uli">
        <li>
            <a href="#10"><img src="thumbimages/aaviskar.png" width="110" style="margin-bottom:5px;" /></a>
        </li>

           <li>
            <a href="#16"><img src="thumbimages/daksha2.png" width="110" style="margin-bottom:5px;"/></a>
        </li>

        <li>
            <a href="#11"><img src="thumbimages/nehru.png" width="110" style="margin-bottom:5px;"/></a>
        </li>
              <li>
            <a href="#17"><img src="thumbimages/daksha1.png" width="110" style="margin-bottom:5px;" /></a>
        </li>

        <li>
            <a href="#13"><img src="thumbimages/black.png" width="110" style="margin-bottom5px;" /></a>
        </li>

        <li>
            <a href="#12"><img src="thumbimages/dhall.png" width="110" style="margin-bottom:5px;"/></a>
        </li>





        <li>
            <a href="#14"><img src="thumbimages/aaga.png" width="110" style="margin-bottom:5px;" /></a>
        </li>
        <li>
            <a href="#15"><img src="thumbimages/maharajroof.png" width="110" style="margin-bottom:5px;"/></a>
        </li>


    </ul>
</nav>


implement this in header section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $('nav ul li a').click(function(){

        var el = $(this).attr('href');
        var elWrapped = $(el);

        scrollToDiv(elWrapped,300);

        return false;

    });

    function scrollToDiv(element,navheight){



        var offset = element.offset(90);
        var offsetTop = offset.top;
        var totalScroll = offsetTop-navheight;

        $('#b2').animate({
                scrollTop: totalScroll
        },500);

    }



});
</script>

jqueryui

$("#ddl").kendoDropDownList({
  height: 300,
  optionLabel: "select...",
  index: 0,
  dataTextField: "name",
  dataValueField: "name",
  dataSource: {
  serverFiltering: true,
  transport: {
  read: {
  url: "http://ws.geonames.org/searchJSON",
  dataType: "json",
  data: {
  featureClass: "P",
  style: "full",
  maxRows: 12,
  name_startsWith: function() {
  return "g";
  }
  }
  }
  },
  schema: {
  data: "geonames"
  }
  }
});

$("#combobox").kendoComboBox({
  index: 0,
  dataTextField: "name",
  dataValueField: "name",
  filter: "startswith",
  dataSource: {
  serverFiltering: true,
  transport: {
  read: {
  url: "http://ws.geonames.org/searchJSON",
  dataType: "json",
  data: {
  featureClass: "P",
  style: "full",
  maxRows: 12,
  name_startsWith: function() {
  return $("#combobox").data("kendoComboBox").text();
  }
  }
  }
  },
  schema: {
  data: "geonames"
  }
  }
});

$("#autocomplete").kendoAutoComplete({
  dataTextField: "name",
  animation: false,
  dataSource: {
  serverFiltering: true,
  transport: {
  read: {
  url: "http://ws.geonames.org/searchJSON",
  dataType: "json",
  data: {
  featureClass: "P",
  style: "full",
  maxRows: 12,
  name_startsWith: function() {
  return $("#autocomplete").val();
  }
  }
  }
  },
  schema: {
  data: "geonames"
  }
  }
});

jquery auto complete url

auto complete-jquery-array

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "cbe",
label: "coimbatore",
desc: "cbe1"

},
{
value: "blr",
label: "banglore",
desc: "blr1"

},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine"

}
];

$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );

return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>

<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
<input id="project" />
<input id="project-id" />
<p id="project-description"></p>

</body>
</html>

jquery autocomplete wqith array concept

$(function() {
    var arrLinks = [
        {
        key: 1,
        url: "http://google.com",
        label: 'google'},
    {
        key: 2,
        url: "http://yahoo.com",
        title: "Yahoo",
        label: 'yahoo'},
    {
        key: 2,
        url: "http://microsoft.com",
        label: 'microsoft'}
    ];
    $("input[name=url]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.url + "</a>").appendTo(ul);
    };
});

use jquery plugins and like jquery.js

Wednesday 24 October 2012

J-QUERY IMAGE BLINK