Home Search Member List Faq Register Login  
UltimatePanel
ShowHideOnClick Example (Scrolling Problem)

Thread Starter: DominoMaximo   Started: 11-17-2008 2:23 PM   Replies: 6
 Karamasoft Support Forums » General Discussions » UltimatePanel » ShowHideOnClick Example (Scrolling Problem)
 Printable Version    « Previous Thread   Next Thread »
  17 Nov 2008, 2:23 PM
DominoMaximo is not online. Last active: 5/7/2009 10:46:01 AM DominoMaximo

Top 10 Posts
Joined on 11-16-2007
Posts 31
 ShowHideOnClick Example (Scrolling Problem)
http://www.karamasoft.com/Samples.aspx?component=UltimatePanel

I am trying to make the panel scroll vertically but nothing is happening.  The panel stays put and in my xml file I have set the following properties:

AutoScrollVertical="True"
AutoScrollHorizontal="True"
DefaultItemNowrap="False"

I would have thought my panel would have moved up and down when I set this property.  Any help would be great



  
  17 Nov 2008, 3:38 PM
DominoMaximo is not online. Last active: 5/7/2009 10:46:01 AM DominoMaximo

Top 10 Posts
Joined on 11-16-2007
Posts 31
Re: ShowHideOnClick Example (Scrolling Problem)
Any ideas?

  
  17 Nov 2008, 4:26 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: ShowHideOnClick Example (Scrolling Problem)
Have you set ShowHideOnClick property to True as well? If you look at the code at http://www.karamasoft.com/Samples.aspx?component=UltimatePanel&sample=ShowHideOnClick, you can see which properties yu need to set to make the panel scrolling.
  
  18 Nov 2008, 8:30 AM
DominoMaximo is not online. Last active: 5/7/2009 10:46:01 AM DominoMaximo

Top 10 Posts
Joined on 11-16-2007
Posts 31
Re: ShowHideOnClick Example (Scrolling Problem)
Yes the ShowHideOnClick property in my xml file is set to "True".  Also the ShowHideItemVerticalAlign property doesn't show up in the intellisense.

XML FILE:
<?xml version="1.0" encoding="utf-8"?>
<Panel xmlns="http://schemas.karamasoft.com/WebControls/UltimatePanel"
       CssFile="~/style/ShowHideonClick.css"
       ScriptPath="~/Scripts"
       ImagePath="~/images"
       PanelCssClass="ShowHidePanel" GroupHeaderCssClass="ShowHideGroupHeader"
       GroupHeaderOpenCssClass="ShowHideGroupHeaderOpen" DefaultItemCssClass="ShowHideItem"
       DefaultGroupCssClass="ShowHideGroup" DefaultItemOverCssClass="ShowHideItemOver"
       PanelWidth="170" GroupSpacing="4" GroupHeaderWidth="130" DefaultItemOver="Item"
       GroupHeaderLeftIcon="GroupHeader_LeftIcon.gif"
       GroupHeaderLeftIconOpen="GroupHeader_LeftIconOpen.gif"
       GroupHeaderRightIcon="GroupHeader_RightIcon.gif"
       GroupHeaderRightIconOpen="GroupHeader_RightIconOpen.gif"
       DefaultLeftIcon="Item_LeftIcon.gif" DefaultLeftIconOver="Item_LeftIcon.gif"
       AutoScrollVertical="True" AutoScrollHorizontal="True" DefaultItemNowrap="False"
       ShowHide="True" ShowHideOnClick="True" PanelSlip="True"
       ShowHideItemImage="~/Images/ShowHideLeftBP.gif"
       ShowHideItemImageOver="~/Images/ShowHideLeftOverBP.gif"
       ShowHideItemCssClass="ShowHideGroupHeaderOpen"
       ShowHideItemOverCssClass="ShowHideGroupHeaderOpen"
       SmoothTimeout="0">
  <Group xmlns="">
    <Item ID="ItemBlueprint" Caption="Blueprint">
      <Group>
        <Item ID="PnlBlueprint" Type="ServerControl" ServerControlID="panelBlueprint" />
      </Group>
    </Item>
  </Group>
</Panel>

CSS FILE:
.ShowHidePanel
{
    Z-INDEX:999;
    background-color:#ffffff;
}

.ShowHideGroupHeader
{
    background-color:#CECECE;
    color:#000080;
    font-family:Tahoma;
    font-size:10pt;
    font-weight:Bold;
    cursor:hand;
    cursorStick out tongueointer;
}

.ShowHideGroupHeaderOpen
{
    background-color:#639CCE;
    color:#ffffff;
    font-family:Tahoma;
    font-size:10pt;
    font-weight:Bold;
    cursor:hand;
    cursorStick out tongueointer;
}

.ShowHideGroup
{
    padding-top:5px;
    padding-bottom:5px;
    border-styleTongue Tiedolid;
    border-width:1px;
    border-top:0px;
    border-color:#639CCE;
    background-color:#f5f5f5;
}

.ShowHideItem
{
    colorBig SmilearkBlue;
    font-family:Tahoma;
    font-size:8pt;
    text-decoration:Underline;
    margin-top:5px;
    padding-left:5px;
    cursorStick out tongueointer;
    cursor:hand;
}

.ShowHideItemOver
{
    color:Red;
    font-family:Tahoma;
    font-size:8pt;
    text-decoration:Underline;
    margin-top:5px;
    padding-left:5px;
    cursorStick out tongueointer;
    cursor:hand;
}

.ShowHideItemTitle
{
    color:Black;
    font-family:Tahoma;
    font-size:8pt;
    font-weight:Bold;
    margin-top:5px;
    padding-left:4px;
}

.aspx file
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testkarm.aspx.vb" Inherits="testkarm" %>
<%@ Register Assembly="UltimatePanel" Namespace="Karamasoft.WebControls" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ShowHideOnClick</title>
 <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
        <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <SCRIPT LANGUAGE="javascript">
<!--
var img1 = new Image(); img1.src = "../Images/GroupHeader_LeftIcon.gif";
var img2 = new Image(); img2.src = "../Images/GroupHeader_LeftIconOpen.gif";
var img3 = new Image(); img3.src = "../Images/GroupHeader_RightIcon.gif";
var img4 = new Image(); img4.src = "../Images/GroupHeader_RightIconOpen.gif";
var img5 = new Image(); img5.src = "../Images/Item_LeftIcon.gif";
var img6 = new Image(); img6.src = "../Images/Item_BlankLeftIcon.gif";
//-->
        </SCRIPT>
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
             <cc1:UltimatePanel id="upSH" runat="server" style="POSITION:absolute;TOP:10px"  PanelSource="~/ShowHideOnClick.xml"
                ScriptPath="~/Scripts"  PanelSlipIncrement="5"  ImagePath="~/Images/" CssFile="~/style/ShowHideOnCLick.css">
            </cc1:UltimatePanel>
            <table>
                <TR vAlign="top">
                    <TD style="PADDING-LEFT: 10px; FONT-SIZE: 8pt; WIDTH: 750px; FONT-FAMILY: Verdana">
                        In addition to setting the <b>ShowHide</b> property to True to make your panel
                        invisible you can also set the <b>ShowHideOnClick</b> property to True to let
                        the user click on the additional item to show/hide the panel rather than moving
                        mouse over and out of this item.<br>
                        <br>
                        You can set the <b>ShowHideItemImage</b> and <b>ShowHideItemImageOver</b> properties
                        to display different images rather than a caption when the mouse is over the
                        additional item or not.<br>
                        <br>
                        You can set the <b>PanelSlip</b> property to True to slip the panel while it is
                        moving in and out of the browser window during the show/hide process. This
                        property comes with additional parameters such as <b>PanelSlipTimeout</b> and <b>PanelSlipIncrement</b>
                        to change the speed of this slip operation.<br>
                        <br>
                        You can also align the vertical position of the panel handle by setting the <b>ShowHideItemVerticalAlign</b>
                        property to Top, Middle or Bottom. It is set to Middle by default.<br>
                        <br>
                        The following lines were added intentionally to make the vertical and
                        horizontal scrollbars appear.
                    </TD>
                </TR>
                <TR vAlign="top">
                    <TD style="PADDING-LEFT: 10px">
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                        AutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSampleAutoScrollSample<br>
                    </TD>
                </TR>
            </table>
        </form>
    </body>

</html>

VB File


Partial Class testkarm    Inherits System.Web.UI.Page    Protected WithEvents upAS As Karamasoft.WebControls.UltimatePanel#Region " Web Form Designer Generated Code "    'This call is required by the Web Form Designer.    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()    End Sub    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init        'CODEGEN: This method call is required by the Web Form Designer        'Do not modify it using the code editor.        InitializeComponent()    End Sub#End Region    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load        'Put user code to initialize the page here    End SubEnd Class
 





  
  18 Nov 2008, 8:51 AM
DominoMaximo is not online. Last active: 5/7/2009 10:46:01 AM DominoMaximo

Top 10 Posts
Joined on 11-16-2007
Posts 31
Re: ShowHideOnClick Example (Scrolling Problem)
Just a heads up when referring to this particular example...

I am referring back to the example (http://www.karamasoft.com/Samples.aspx?component=UltimatePanel&sample=ShowHideOnClick) and I think the examples are great, but in the example you guys are referring to an incorrect CSS file.

ShowHide.css should be ShowHideOnClick.css.

I am assuming the key for scrolling is setting the autoscrollvertical and autorscrollhorizontal equal to true.  I posted my code in my previous post and I believe I have that.  There is obviously something I am missing and I cannot get it to work. 
AutoScrollVertical="True"
AutoScrollHorizontal="True"


<Panel xmlns="http://schemas.karamasoft.com/WebControls/UltimatePanel"
CssFile="/Karamasoft/UltimatePanel/v3.2/Demos/CS/Samples/ShowHide/ShowHide.css"
ScriptPath="~/Scripts"
ImagePath="/Karamasoft/UltimatePanel/v3.2/Demos/CS/Samples/Images/MSDN"
PanelCssClass="ShowHidePanel"
GroupHeaderCssClass="ShowHideGroupHeader"
GroupHeaderOpenCssClass="ShowHideGroupHeaderOpen"
DefaultItemCssClass="ShowHideItem"
DefaultGroupCssClass="ShowHideGroup"
DefaultItemOverCssClass="ShowHideItemOver"
PanelWidth="170"
GroupSpacing="4"
GroupHeaderWidth="130"
DefaultItemOver="Item"
GroupHeaderLeftIcon="GroupHeader_LeftIcon.gif"
GroupHeaderLeftIconOpen="GroupHeader_LeftIconOpen.gif"
GroupHeaderRightIcon="GroupHeader_RightIcon.gif"
GroupHeaderRightIconOpen="GroupHeader_RightIconOpen.gif"
DefaultLeftIcon="Item_LeftIcon.gif"
DefaultLeftIconOver="Item_LeftIcon.gif"
AutoScrollVertical="True"
AutoScrollHorizontal="True"

DefaultItemNowrap="False"
ShowHide="True" ShowHideOnClick="True"
PanelSlip="True"
ShowHideItemImage="/Karamasoft/UltimatePanel/v3.2/Designer/Images/UltimatePanel/ShowHideLeft.gif"
ShowHideItemImageOver="/Karamasoft/UltimatePanel/v3.2/Designer/Images/UltimatePanel/ShowHideLeftOver.gif"
ShowHideItemCssClass="ShowHideGroupHeaderOpen"
ShowHideItemOverCssClass="ShowHideGroupHeaderOpen"
SmoothTimeout="0">


  
  18 Nov 2008, 11:52 AM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Re: ShowHideOnClick Example (Scrolling Problem)
In your ASPX page, you will need to set the DOCTYPE as follows in order to make your panel scrollable:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  
  18 Nov 2008, 12:00 PM
DominoMaximo is not online. Last active: 5/7/2009 10:46:01 AM DominoMaximo

Top 10 Posts
Joined on 11-16-2007
Posts 31
 Re: ShowHideOnClick Example (Scrolling Problem)
Thanks that worked, I appreciate your help, a spot I would have never checked!  [<Surprise)]

You deserve a Beer for all your hard work!



  
 Page 1 of 1 (7 items)
Karamasoft Support Forums » General Discussions » UltimatePanel » ShowHideOnClick Example (Scrolling Problem)

You can add attachments
You can post new topics
You can reply to topics
You can delete your posts
You can edit your posts
You can create polls
You can vote in polls
Forum statistics are enabled
Forum is unmoderated

© 2002-2018 Karamasoft LLC. All rights reserved.