Friday, March 30, 2012

Jquery and Moo-tools/JavaScript conflict

The conflict with the two happens since they both refer to the function with the dollar symbol. The solution is quite simple: we just need to define an another symbol to refer to Jquery functions.


This is NOT working due to a conflict:

    <%--initiates the Jquery stuff--%>
    <script type="text/javascript" >
        function tick() {
            $('#my_jq_div').slideUp(function () { $(this).appendTo($('# my_jq_div ')).slideUp(); });
        }
        setInterval(function () { tick() }, 3000);
    </script>
    
    <%--initiates the Moo-tools stuff--%>
    <script type="text/javascript" >
        window.addEvent('domready', function () {
            var myVar = new MooStuff({ orientation: 'vertical' });
        });         
    </script>

This is working:

<%--initiates the Jquery stuff--%>
    <script type="text/javascript" >
        var jq = jQuery.noConflict();
        function tick() {
            jq('#my_jq_div').slideUp(function () { jq(this).appendTo(jq('# my_jq_div ')).slideUp(); });
        }
        setInterval(function () { tick() }, 3000);
    </script>
    
    <%--initiates the Moo-tools stuff--%>
    <script type="text/javascript" >
        window.addEvent('domready', function () {
            var myVar = new MooStuff({ orientation: 'vertical' });
        });         
    </script>

Enjoy!

Saturday, March 24, 2012

JQuery - locating ASP.NET elements on web page

That's the way of locating ASP.NET elements with JQuery:


The ASP.NET element (TextBox this example):

<asp:TextBox ID="my_aspnet_element" runat="server">

And the JQuery to find this element on page:

$('#<%=my_aspnet_element.ClientID%>').do_stuff{()};

Thursday, March 22, 2012

ASP.NET/C# - Display client-side message box from code-behind


We can use the Script Manager in C# in order to fire JavaScript alert on ASP.NET page:

ScriptManager.RegisterStartupScript(this, this.GetType(), "msg", "alert(This is my client-side message triggered from code-behind in C#');", true);

Passing ASP.NET control value to JavaScript variable

We can't use ASP.NET control's original ID in order to pass its value to a client-side code (i.e. var my_js_var = document.getElementById('my_aspnet_textbox').value;

Which means we have to use the following code in order to perform our task:

var my_js_var = document.getElementById('<%=my_aspnet_textbox.ClientID%>').value;


Tuesday, March 20, 2012

CSS - Capitalizing textbox input as you type

If you want to capitalize the text you type into an ASP.NET textbox (i.e. Michael Jordan, not michael jordan), there's no need for fancy JavaScript or code-behind ways. 
All you need to do is to add the text-transform:capitalize; CSS property to the CSS of the textbox and it will capitalize your text as you type.


Enjoy.

Friday, March 16, 2012

CSS a:hover attributes

Sometimes, attributes for a:hover or li:hover don't work well or don't work at all.
The quickest resolution that I found for this issue is to set the CSS parameter "a:visited to clear:both" - this should reset the attributes for a (link) or li (menu item) and also get rid of the default purple color of visited link.


If we''ll take a menu as an example we''ll see something like this:



.menu li
{
    color:Red;
}

.menu li:hover
{
    color:Black;
}

.menu li:visited
{
    clear:both;
}