Issue with jQuery Vertical Splitter in ASP.Net

Sreenath G

15y4.2k.NET

Hi,
I am using jQuery Vertical splitter in my application. I am getting error as Microsoft JScript runtime error: 'jQuery' is undefined.
And I am using this as follows..

Collapse | Copy Code

<script language="Javascript" type="text/javascript" src="splitter.js">script>
    <script>

        $().ready(function () {
            debugger
            $("#MySplitter").splitter();
        });

        $().splitter({ splitbarKey: "I" })

    script>


<div class="main">
	 id="MySplitter">
		 align="center">
			 ID="ContentPlaceHolder1" runat="server">
				<asp:Label ID="Label1" runat="server" Text="Left Panel" Font-Names="Andalus" Font-Size="Large"
					ForeColor="#FF0066">
			
		</div>
		
			 ID="MainContent" runat="server" />
		</div>
	div>
</div>

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Suthish Nair15y ago
resolved?
0
Sreenath G15y ago
Please have a look @ scripts I have and the sample page code is the same I have posted above.
0
Suthish Nair15y ago
Sreenath,

Dont copy paste the code, upload your sample pages as attachment with JQuery files.
0
Sreenath G15y ago
Hi,
I have done that. Changed code in this way... but not working. By the way I have implemented this in MasterPage.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MyMaster.master.cs" Inherits="My_Samples.MyMaster" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Pagetitle>
<%--
--%>
<script src="Scripts/splitter.js" type="text/javascript">script>
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript">script>
<style>
#MySplitter
{
height: 200px;
width: 500px;
border: 5px solid #aaa;
}
#MySplitter div
{
overflow: auto;
}
.vsplitbar
{
width: 5px;
background: #aaa;
}
style>
<script type="text/javascript">
$(document).ready(function () {
$("#MySplitter").splitter({
minAsize: 100,
maxAsize: 300,
splitVertical: true,
A: $('#Leftpane'),
B: $('#Rightpane'),
slave: $("#Rightpane"),
closeableto: 0
});
});
script>
head>
<body>
<form id="form2" runat="server">
<div id="MySplitter">
<div id="Leftpane">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
<asp:TextBox ID="TextBox2" runat="server">left paneasp:TextBox>
asp:ContentPlaceHolder>
div>
<div id="Rightpane">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
asp:ContentPlaceHolder>
div>
div>
form>
body>
html>
0
Suthish Nair15y ago
The JQuery .js file you are referring is not correct.

Click, Drag n Drop the .js file to the section of your .aspx page.
0

Sreenath G15y ago

Hi even This is not working. I have tried this...but not getting any result...

Collapse | Copy Code

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MyMaster.master.cs" Inherits="My_Samples.MyMaster" %>

<head>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        #header
        {
            background: #c4dcfb;
            height: 5%;
        }
        /* Header */

        #MySplitter
        {
            /* Main splitter element */
            height: 95%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #Leftpane
        {
            float: left;
            width: 98%;
            height: 57px;
            border-top: solid 1px #9cbdff;
            background: #c4dcfb;
            overflow: auto;
        }
        #Rightpane
        {
            /*Contains toolbar and horizontal splitter*/
            float: right;
            width: 85%;
            height: 100%;
            background: #f4f4f4;
        }

        /* Splitbar styles; these are the default class names and required styles */
        .splitbarV
        {
            float: left;
            width: 6px;
            height: 100%;
            line-height: 0px;
            font-size: 0px;
            border-left: solid 1px #9cbdff;
            border-right: solid 1px #9cbdff;
            background: #cbe1fb url(~/Images/panev.gif) 0% 50%;
        }

        .splitbuttonV
        {
            margin-top: -41px;
            margin-left: -4px;
            top: 50%;
            position: relative;
            height: 83px;
            width: 10px;
             background: transparent url(~/Images/panevc.gif) 10px 50%;
        }
        .splitbuttonV.invert
        {
            margin-left: 0px;
            background: transparent url(~/Images/panevc.gif) 0px 50%;
        }


        .splitbarV.working,  .splitbuttonV.working,
        {
            -moz-opacity: .50;
            filter: alpha(opacity=50);
            opacity: .50;
        }
        .style2
        {
            width: 580px;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.js">script>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js">script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js">script>
    <script type="text/javascript" src="Scripts/splitter.js">script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#MySplitter").splitter({ minAsize: 100, maxAsize: 300, splitVertical: true, A: $('#Leftpane'), B: $('#Rightpane'), slave: $("#Rightpane"), closeableto: 0 });
        });

    script>
</head>
<form id="form1" runat="server">
<asp:scriptmanager runat="server">
    </asp:scriptmanager>
<div id="MySplitter">
    <table class="style1">
        <tr>
            <td align="center" class="style2" valign="middle">
                <div id="Leftpane" align="center">
                    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

                        <asp:TextBox ID="TextBox1" runat="server">left pane</asp:TextBox>
            </asp:contentplaceholder>
                </div>
            </td>
            <td align="center" valign="middle">
                <div id="Rightpane" align="center">
                    <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            </asp:contentplaceholder>
                </div>
            </td>
        </tr>
    </table>
</div>
</form>