Moved on to a new location!

So as you all may have noticed, I haven’t posted anything new. Well I’ve been really tied up with work but also decided to make a place of my own (online). So from now on I’ll be posting and responding at my new site asantillan.com. So see you all there!

Take care and Jah Bless!

adding paging to JCarousel

Sorgalla Jcarousel which you can find here┬áis a great slider plugin but it lacked the neat paging at the bottom..So here’s a quick solution for it:

First start off with the css:


.jcarousel-navigation { list-style: none; position: relative; float: left; display: block; left: 50%; margin-top:2%;}
 .jcarousel-navigation li{padding:0 5px 0 0; position: relative; float: left; display: block; right: 50%;}
 .jcarousel-navigation li a {
 width: 11px;
 height: 11px;
 display: block;
 background: #666;
 background: rgba(0,0,0,0.5);
 cursor: pointer;
 text-indent: -9999px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 -o-border-radius: 20px;
 border-radius: 20px;
 box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
 }

.jcarousel-navigation li.active a {
 background: #000;
 background: rgba(0,0,0,0.9);
 cursor: default;
 }

Now setting up the html, this plugin creates custom html once it’s rendered so I just inserted this after the ul list like so:


<ul id="mycarousel" class="jcarousel-skin-tango">

<li>Slide 1</li>

<li>Slide 2</li>

</ul>

<!-- This is for the custom paging -->

<ul class="jcarousel-navigation">
 </ul>

Now for the magic of Jquery:

We need to have a count of total slides there are and store it in a variable to be used later:


var totalslides = 1;

As you can see in the UL navigation there are no “li” so this is loaded automatically by the amount of li’s in the main carousel like so:


$('#mycarousel li').each(function(){
 $('.jcarousel-navigation').append('<li id="' + totalslides + '"><a href="#"></a></li>');

});

Now because we start “totalslides =1″ that’s just for the id value but that would be incorrect in later use so lets go ahead and subtract 1:


totalslides = totalslides - 1;

Now here’s the tricky part, this plugin has a setting which you can set to “circular” which means that it’s a continuos slide so the value it always adds 1 to each slide, so lets start off with creating a function that would return the right slide value:


function calcSlide(value){
 current = value;
 if(value > totalslides){
 current = value - totalslides;
 calcSlide(current);
 }

 return current;
 }

Now having the right slide value we can control its navigation, first off by initiating the carousel like so:


$('#mycarousel').jcarousel({
 wrap: 'circular', //continuos slide
 scroll: 1, //goes one slide at a time
 itemFirstInCallback: mycarousel_itemFirstInCallback, //detects visible slide
 initCallback: mycarousel_initCallback //setup special functions to be set when initiating the carousel
 });

So when initiating lets setup the navigation control:


function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-navigation li a').click(function(e){
 panel = $(this).parent('li').attr('id');
 carousel.scroll(jQuery.jcarousel.intval(panel));
 return false;
 });
 };

that will tie every href in the navigation ul to the slide.

Now when first slide is visible, lets setup the navigation:

 function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
 bubble = calcSlide(idx);
 $('.jcarousel-navigation li').each(function(){
 if($(this).attr('id') == bubble)
 $(this).addClass('active');
 else
 $(this).removeClass('active');
 });
 };

And there you go, now u have a good simple looking slider with the nice little circular navigation at the bottom and in case you’re confused with so much code broken up here’s the complete thing:


<script type="text/javascript">
 var totalslides = 1;

 function mycarousel_initCallback(carousel) {
 jQuery('#viewvid').bind('click', function() {
 carousel.scroll(jQuery.jcarousel.intval(1));
 pageslide('about');
 return false;
 });

 jQuery('.jcarousel-navigation li a').click(function(e){
 panel = $(this).parent('li').attr('id');
 carousel.scroll(jQuery.jcarousel.intval(panel));
 return false;
 });
 };

 function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
 bubble = calcSlide(idx);
 $('.jcarousel-navigation li').each(function(){
 if($(this).attr('id') == bubble)
 $(this).addClass('active');
 else
 $(this).removeClass('active');
 });
 };

function calcSlide(value){
 current = value;
 if(value > totalslides){
 current = value - totalslides;
 calcSlide(current);
 }

 return current;
 }

 jQuery(document).ready(function() {

 $('#mycarousel li').each(function(){
 $('.jcarousel-navigation').append('<li id="' + totalslides + '"><a href="#"></a></li>');
 totalslides++;
 });
 totalslides = totalslides - 1;

 $('#mycarousel').jcarousel({
 wrap: 'circular',
 scroll: 1,
 itemFirstInCallback: mycarousel_itemFirstInCallback,
 initCallback: mycarousel_initCallback
 });

});

</script>

Here’s a quick snapshot of what the final result looks like:
carousel

Let me know what you think, hope this helps someone out :)

Use Jquery to select several or all rows in an asp .net gridview

Ok so lets say you have a gridview in asp.net and would like to be able to select all rows not using codebehind.
Here’s a quick and easy way to do it:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
		//Click on individual rows and select
        $("#<%=myGrid.ClientID%> tr").click(function (e) {
            if (($(this).attr('class') == 'gridrow') || ($(this).attr('class') == 'gridselected')) {
                if ($(this).attr('class') == 'gridselected') {
                    $(this).removeClass("gridselected");
                    $(this).attr('class', 'gridrow');

                }
                else {
                    $(this).attr('class', 'gridselected');
                }

                buildArray();
            }
        });
		//Selects all rows in gridview
        $("#<%=btnAll.ClientID%>").click(function (e) {
            $("#<%=myGrid.ClientID%> tr").each(function () {
                $(this).attr('class', 'gridselected');
            });
            buildArray();
            e.preventDefault();
            $("#clearall").toggle();
        });
		//Clears all selected rows..
        $("#clearall").click(function (e) {
            clearRows();
            $("#clear").toggle();
        });
    });
	//Builds a comma seperated list and inserts it into a textbox to be used later.
    function buildArray() {
        var selectedrows = "";
        $(".gridselected").each(function () {
            if(selectedrows == "")
                selectedrows = $(this).children().eq(0).text();
            else
                selectedrows = selectedrows + ',' + $(this).children().eq(0).text();
        });
        $("[id$='txtRowId']").val(selectedrows);
    }
	
	//Clears Rows
    function clearRows() {
        $("#<%=myGrid.ClientID%> tr").each(function () {
            $(this).removeClass("gridselected");
			$(this).attr('class', 'gridrow');
        });
    }
</script>

My class “hiddencol” all it is, is “display:none” so that way it’s rendered but hidden

<asp:TextBox ID="lblRowId" runat="server" CssClass="hiddencol" />
<asp:Button ID="btnAll" runat="server" Text="Seleccionar Todos" CssClass="cancelbtn left" />

All this is, is a image with an X to clear the selected rows. I used css to show the image with a special background. You
don’t have to, you can use any other control or image but if you change the id remember to update your script.

<div id="clearall" class="xbutton hiddencol"></div>

In your gridview use the rowstyle property to add the class “gridrow” so your script works.

<RowStyle BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" CssClass="gridrow" />

Asp.net Gridview select row with Jquery

As you may have seen in one of my earlier posts I wrote about selecting a gridview row without using a
button, by just clicking on the row. And it works, if you need it to do that as you may have seen
it really works. But what if you want something faster than going back to the server everytime you click
on a row. What if you could do that on the client side instead?
Well thanks to JQuery you can, and it’s quite easy.
Here’s how I did it.

1. First we need to write out the script that will do such thing. Now in my case I want to save
the row id from a column to a textbox, to be used later on.

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=mygridview.ClientID%> tr").click(function (e) {
            if (($(this).attr('class') == 'gridrow') || ($(this).attr('class') == 'gridselected')) {
                clearRows();
                $(this).attr('class', 'gridselected');
                $("[id$='lblRowId']").val($(this).children().eq(0).text());
            }
        });
    });

    function clearRows() {
        $("#<%=mygridview.ClientID%> tr").each(function () {
            $(this).removeClass("gridselected");
        });
    }
</script>

What I am doing there is attaching the .click event into each TR as you know when the gridview is
rendered every row is a TR.

$("#<%=mygridview.ClientID%> tr").click(function (e) {

After that I am validating if the TR’s class is gridrow or gridselected, this will leave out headers,
footers and paging.

if (($(this).attr('class') == 'gridrow') || ($(this).attr('class') == 'gridselected')) {

then you want to clear the styling applied to all rows so just the one you clicked on has a styling.
I do this by calling a clearRows function

function clearRows() {
        $("#<%=mygridview.ClientID%> tr").each(function () {
            $(this).removeClass("gridselected");
        });
    }

once that finished then I set the style to just the row clicked

$(this).attr('class', 'gridselected');

And finally I capture the value at column 0 and insert it as value to my textbox

$("[id$='lblRowId']").val($(this).children().eq(0).text());

Now for styles this is what I currently have, of course you or your designer are welcome to change
this.

<style>
.gridselected{background:#000 !important; color:#fff;}
.gridrow{cursor:pointer;}
.gridrow:hover{background:#000 !important; color:#fff;}
.hiddencol{display:none;}
</style>

As you may have noticed in my styles I have a “hiddencol” this I use to just set visibility off on any
field I don’t want displayed like my textbox

<asp:TextBox ID="lblRowId" runat="server" CssClass="hiddencol" />

And finally my gridview, now to save time I just did a real basic gridview example.
In my first column I have a Bound field that holds the ID from the database, which is what I use
for editing later on.

<asp:BoundField DataField="Transactionid" HeaderStyle-CssClass="hiddencol" ItemStyle-CssClass="hiddencol"
	FooterStyle-CssClass="hiddencol">
    <FooterStyle CssClass="hiddencol"></FooterStyle>
    <HeaderStyle CssClass="hiddencol"></HeaderStyle>
    <ItemStyle CssClass="hiddencol"></ItemStyle>
</asp:BoundField>

As you may remember in my script I am looking for the class “gridrow” so here is where we add that class

<RowStyle CssClass="gridrow" />

And that does it! Now you avoid having to go to the server everytime you want to select a row
and capture any value. If you need any other column just change inside “eq”

$(this).children().eq(HERE).text()

complete gridview

<asp:GridView ID="mygridview" runat="server">
<columns>
<asp:BoundField DataField="Transactionid" HeaderStyle-CssClass="hiddencol" ItemStyle-CssClass="hiddencol"
    FooterStyle-CssClass="hiddencol">
    <FooterStyle CssClass="hiddencol"></FooterStyle>
    <HeaderStyle CssClass="hiddencol"></HeaderStyle>
    <ItemStyle CssClass="hiddencol"></ItemStyle>
</asp:BoundField>
</columns>
<RowStyle CssClass="gridrow" />
</asp:GridView>

Good Luck and hope that helps someone out there wanting to make web apps faster and better ;)

loading images with thumbnails in popup Jquery

Ok first off lets not get it confused with great plugins out there like fancybox or some others that do this. It’s quite different and not being able to find and accepting the challenge of doing it myself is why I came up with this.

Here is a screenshot of what my goal was.

So clicking on one of the images you see in the back brings up a popup with thumbnails of that 1 item in particular and the bigger image. The difference between this and others is that they are not thumbnails of the seen gallery but thumbnails of an image inside a gallery.

So first off here is what my css looks like:

<style type="text/css">
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
min-width: 380px;
min-height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
padding:5px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;

}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
#btnClose
{
float: right;
text-decoration:none;
}

#result{text-align:center;} /* Center items inside of div */
.thumb{max-width:30px; max-height:30px;} /* Set sizes for thumbnails */
.full{float:left;} /* Displays the bigger image inside the popup to the left */
.web_dialog ul{list-style:none; margin:10px auto; float:left;} /* Basic styling for the thumbnail list */
.web_dialog ul li{padding:5px;}
.clr{clear:both;} /* Clear floats */
</style>

the html markup is quite simple in this example:

<a href="#" onclick="loadimgs('1');"><img src="img/sur/acanalado.jpg" /></a>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<a href="#" id="btnClose">x</a>
<div class="clr"></div>
<div id="result"></div>
</div>

now for the jquery portion:

<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});

});

//shows the thumbnail in bigger image
function showfull(img){
$('.full').attr('src', img);
}

//calls a php file which returns html to be generated inside the #result div
function loadimgs(dirname) {
$('#result').html('');
$.ajax({
type: "POST",
url: 'loadimg.php',
data: {
directory: dirname
},
success: function(data) {
$('#result').append(data);
}
});

ShowDialog(true);
}

//basic popup functions
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);

if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function (e)
{
HideDialog();
});
}
}

function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>

As you might notice in my function loadimgs() I call a file “loadimg.php” here is what that looks like:

<?php
$directory = $_POST['directory'];
$fullpath = "img/sur/textures/" . $directory . "/";

$a=array();
//First we open the directory
if ($handle = opendir($fullpath)) {
while (false !== ($file = readdir($handle))) {
if(preg_match("/\.png$/", $file)) {//if the file's extension is .png
$a[]=$file;
}
else if(preg_match("/\.jpg$/", $file)) //else if it's .jpg
$a[]=$file;
else if(preg_match("/\.jpeg$/", $file)) //or .jpeg
$a[]=$file;
}
closedir($handle);
}
$imgs = '';//declare a variable to hold the html
//Now when i wrote this it was 4am, so I got lazy and did a first loop to get an image to be
set as the first full sized image using a for each value inside the array
foreach($a as $i){
$imgs = "<img src='". $fullpath . $i."' class='full' />";
break;//escape the loop
}
//now start setting up the ul list for thumbnails
$imgs = $imgs . '<ul>';
foreach($a as $i){//again open a foreach loop
$imgs = $imgs . '<li>';//open a li
$imgpath = $fullpath . $i;//set the image path with the fullpath and the value from array
//in the href i will be calling a jquery function showfull passing as a parameter the image path
$imgs = $imgs . "<a href='#' onclick=\"showfull('".$imgpath."');\" ><img src='" $fullpath . $i."' class='thumb' /></a>";
$imgs = $imgs . '</li>';//close the li
}
//close everything else off
$imgs = $imgs . '</ul><div class="clr"></div>';
echo $imgs;//echo out the result

?>

And with that you have a good looking internal gallery in a modal popup. There might be ways to make this even better or turn it into a plugin. I was just looking for results but I will be adjusting it a bit. As always I welcome any and all suggestions :)

Ajax vs. Jquery for common tasks

Although I haven’t gone through everything that Ajax Toolkit has to offer in asp.net projects, but there is 1 in particular that was bugging me and made me start looking for alternatives. Having somewhat experience in Jquery that’s the first and only thing I looked at to compare.

The Collapsible Panel:

The CollapsiblePanel is a very flexible extender that allows you to easily add collapsible sections to your web page. This extender targets any ASP.NET Panel control. The page developer specifies which control(s) on the page should be the open/close controller for the panel, or the panel can be set to automatically expand and/or collapse when the mouse cursor moves in or out of it, respectively.

Well the same is slideToggle:

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items.

so here is what I had to do with ajax:


<asp:LinkButton ID="LinkButton1" runat="server" Text="View Panel" />
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="Panel1"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="True"
ExpandControlID="LinkButton1"
CollapseControlID="LinkButton1"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="True"
TextLabelID="Label1"
CollapsedText="Show Details..."
ExpandedText="Hide Details"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Vertical" />
<asp:Panel ID="Panel1" runat="server">this will show when clicking on LinkButton1</asp:Panel>

Now with Jquery:


$(document).ready(function () {
$('#dvMore').click(function () {
$('#mypanel').slideToggle();
});
});
</script>

<div id="dvMore">Open</div>
<div id="mypanel" style="display:none;">this will show when opened</div>

When generated I have noticed it’s much faster loading, and the application seems to become lighter..Anyways this is just a brief comparison, I have used Ajax for a long time now and it doesn’t make it easier on .net programmers that haven’t ventured off to learn jquery, but sometimes it might be best to learn something new to make what we do know far better ;)

What are your suggestions on this? Ajax or Jquery?

Jquery Tabs part 2

Ok so going by my last post about creating tabs at footer which you can find <a href=”https://adsanti.wordpress.com/2012/05/30/jquery-tabs/&#8221; target=”_blank”>here</a>
the changes I’ve made are to close the tab by clicking on it not just the “X” and some fadeout effects aswell..
I am showing here just the changes, the css and html you can find it in my previous <a href=”https://adsanti.wordpress.com/2012/05/30/jquery-tabs/&#8221; target=”_blank”>post</a>

1. I created a common function to handle the closing of the tabs…

function CloseTab(){
//added a fade effect to have it dissapear as it closes, this is optional
$("#content2").fadeOut(5);
$("#content1").fadeOut(5);
$("#tabs").animate({
height: "0"
}, 1000 );
$("#tab1").animate({bottom:"33"}, 1000);
$("#tab2").animate({bottom:"33"}, 1000);</code>

$("#x").attr("style", "display:none");

}

2. And just changed how the clicks work for each one

$(document).ready(function() {

$("#x").click(function() { //When trigger is clicked...
CloseTab();
});

$("#tab1").click(function() { //When trigger is clicked...
//first check current position of tab if it's already opened then it will close, if not it will show contents
if(($("#tabs").height() == 180) &amp;&amp; ($('#tab1').attr('class') == "active"))
{
CloseTab();
}
else
{
$("#tabs").animate({
height: "180"
}, 1000 );
$("#x").attr("style", "display:inline");
$("#tab1").animate({bottom:"215"}, 1000);
$("#tab2").animate({bottom:"213"}, 1000);
$("#content2").attr("style", "display:none");
$("#content1").fadeIn(1000);
$("#tab2").attr("class", "inactive");
$("#tab1").attr("class", "active");
}
});

$("#tab2").click(function() { //When trigger is clicked...
if(($("#tabs").height() == 180) &amp;&amp; ($('#tab2').attr('class') == "active"))
{
CloseTab();
}
else
{
$("#tabs").animate({
height: "180"
}, 1000 );
$("#x").attr("style", "display:inline");
$("#tab1").animate({bottom:"213"}, 1000);
$("#tab2").animate({bottom:"215"}, 1000);
$("#content1").attr("style", "display:none");
$("#content2").fadeIn(1000);
$("#tab2").attr("class", "active");
$("#tab1").attr("class", "inactive");
}
});
});
Follow

Get every new post delivered to your Inbox.

Join 206 other followers