Page cant focus , alway jump to the top of the page

[noob2008]

Hi guys

I have added a web part in my sharepoint everything is up and running

But i have this particular problem

In my web part there a panalbar

In which u all can imagine it like this

( on page load u all will see like this shown below where + is the expandable button )

Category A +
Category B +

(On click of the + sign u all will see like tat)

Category A –
Item 1
Item 2
Item 3
Category B +

The problem is when i click on either Category A or B the whole page will automatic scroll up to the top , to the very first Category
Imagine if in future i were to have 100 expandable item than if user choose the 99 item it will jump up to the top of the page after the item expand than it be troublesome for user to scroll all the way down again .It be messy too .

Therefore i add a javascript

SelfLearningWP_RadPanelBarExpandJS.Append("<script type=""text/javascript""> ")
SelfLearningWP_RadPanelBarExpandJS.Append("function onClicking(sender, eventArgs) {")
SelfLearningWP_RadPanelBarExpandJS.Append("var itemText = eventArgs.get_item().get_text(); alert (itemText); var ele = eventArgs.get_item().get_element();eventArgs.get_item().focus(); ele.scrollIntoView(true);")

My alert prompt works telling me i click on the correct place etc ( alert is just for testing and letting my self know i click on the right place to focus it on later )

But everytime after i click OK on the alert box it jump to the top of the page ( which is not what i want to achieve )

I tried to remove the alert prompt , it also doesnt focus instead it jump to the Category A – ( see above example i gave ) after i expand .

Kindly Advise

Below is my CSS style sheet in case you guy need it :

Code:

.CompanyA_Department_Category
{
background: #EEEEEE;
}

.CompanyA_Department_Alt_Odd_Level0
{
background: #FF9900;
}

.CompanyA_Department_Alt_Even_Level0
{
background: #FFD752;
}

.CompanyA_Department_Category .rpText
{
margin-left: 3px;
font: bolder 8pt Arial;
color: black;
}

.CompanyA_Department_Course .rpText
{
margin-left: 3px;
font: bold 8pt Arial;
color: orange;
}

.CompanyA_Department_CourseDescription .rpText
{
margin-left: 3px;
font: 8pt Arial;
color: black;
cursor: default;
}

.CompanyA_Department_CourseURL .rpText
{
margin-left: 3px;
font: 8pt Arial;
text-decoration: underline;
color: black;
}

.RadPanelBar_Default
{
color: #232323;
background: #FFFFFF;
}

.RadPanelBar_Default ul.rpRootGroup
{
border: none;
/*border: 1px solid #262626;*/
padding: 20px 36px 28px 28px;
}

.RadPanelBar_Default_rtl ul.rpRootGroup
{
padding: 20px 28px 28px 36px;
text-align: right;
}

.RadPanelBar_Default .rpLink
{
border: none;
/*border-bottom: 1px solid #bfbfbf;*/
overflow-x: hidden;
}

.RadPanelBar_Default .rpLink:hover
{
border: none;
/*border-bottom: 1px solid #bfbfbf;*/
text-decoration: none;
/*border-bottom-color: #fff;*/
}

.RadPanelBar_Default .rpText
{
height: 20px;
vertical-align: centre;
margin-right: 7px;
overflow-x: hidden;
}

.RadPanelBar_Default_rtl .rpText
{
height: 20px;
vertical-align: centre;
margin-left: 7px;
margin-right: 0;
}

.RadPanelBar_Default .rpExpandable .rpText
{
background: transparent url(‘/_layouts/images/School/Department/button_expand.gif’) no-repeat right;
}

.RadPanelBar_Default .rpExpanded .rpText
{
background: transparent url(‘/_layouts/images/School/Department/button_collapse.gif’) no-repeat right;
}

.RadPanelBar_Default .rpGroup .rpExpanded .rpText,
.RadPanelBar_Default .rpGroup .rpExpandable .rpText
{
background-position: right 5px;
}

.RadPanelBar_Default_rtl .rpExpandable .rpText
{
background: transparent url(‘PanelBar/arrow-right.gif’) no-repeat left 9px;
}

.RadPanelBar_Default_rtl .rpExpanded .rpText
{
background: transparent url(‘PanelBar/arrow-down.gif’) no-repeat left 9px;
}

.RadPanelBar_Default_rtl .rpGroup .rpExpanded .rpText,
.RadPanelBar_Default_rtl .rpGroup .rpExpandable .rpText
{
background-position: left 5px;
}

.rpimage
{
height: 50px;
width: 50px;
}

.RadPanelBar_Default .rpGroup
{
overflow-x: hidden;
overflow-y: auto;
}

.RadPanelBar_Default .rpGroup .rpLink,
.RadPanelBar_Default .rpGroup .rpLast .rpLink
{
border: none;
}

.RadPanelBar_Default .rpGroup .rpLink:hover,
.RadPanelBar_Default .rpGroup .rpLast .rpLink:hover
{
border: none;
text-decoration: none;
}

.RadPanelBar_Default .rpLevel1 .rpLink .rpFirst
{
border: none;
/*border-top: 1px solid #bfbfbf;*/
}

.RadPanelBar_Default .rpLevel1 .rpLink .rpItem .rpFirst
{
border: none;
/*border-top: 1px solid #626262;*/
}

.RadPanelBar .rpLevel1
{
border: none;
/*border-bottom:1px solid #BFBFBF;*/
}

.RadPanelBar .rpLast .rpLevel1
{
border: none;
}

.RadPanelBar_Default .rpLevel1 .rpLast .rpLink
{
border: none;
}

.RadPanelBar_Default .rpLevel1 .rpLast .rpLink:hover
{
border: none;
}

.RadPanelBar_Default .rpLevel1 .rpGroup .rpLast .rpLink,
.RadPanelBar_Default .rpLevel1 .rpLast .rpGroup .rpLink
{
border: none;
/*border-bottom-width: 1px;*/
}

.RadPanelBar_Default .rpRootGroup .rpLink,
.RadPanelBar_Default .rpRootGroup .rpTemplate
{
font: normal 12px Arial, Verdana, Sans-serif;
color: #fff;
}

/* — space between the top-level categories */
.RadPanelBar ul.rpRootGroup li.rpItem
{
margin-top: 10px;
margin-bottom: 10px;
}

/* — space between the items */
.RadPanelBar ul.rpGroup li.rpItem
{
margin-top: 3px;
margin-bottom: 3px;
}

.RadPanelBar_Default .rpRootGroup .rpText
{
padding: 6px 7px 6px 3px;
}

.RadPanelBar_Default_rtl .rpRootGroup .rpText
{
padding: 6px 3px 6px 7px;
}

.RadPanelBar_Default .rpGroup .rpLink,
.RadPanelBar_Default .rpGroup .rpTemplate
{
font-size: 11px;
}

.RadPanelBar_Default .rpGroup .rpText
{
padding: 1px 7px 0 0;
}

.RadPanelBar_Default_rtl .rpGroup .rpText
{
padding: 1px 0 0 7px;
}

.RadPanelBar_Default .rpLevel1 .rpImage
{
margin-left: 10px;
}

.RadPanelBar_Default .rpLevel2 .rpImage
{
margin-left: 20px;
}

.RadPanelBar_Default .rpLevel3 .rpImage
{
margin-left: 30px;
}

.RadPanelBar_Default .rpLevel1 .rpText
{
padding-left: 10px;
}

.RadPanelBar_Default .rpLevel2 .rpText
{
padding-left: 20px;
}

.RadPanelBar_Default .rpLevel3 .rpText
{
padding-left: 30px;
}

.RadPanelBar_Default .rpLevel1 .CompanyA_ImageItem .rpText
{
padding-left: 5px;
}

.RadPanelBar_Default .rpLevel2 .CompanyA_ImageItem .rpText
{
padding-left: 5px;
}

.RadPanelBar_Default .rpLevel3 .CompanyA_ImageItem .rpText
{
padding-left: 5px;
}

.RadPanelBar_Default_rtl .rpLevel1 .rpText
{
padding-right: 10px;
padding-left: 0;
}

.RadPanelBar_Default_rtl .rpLevel2 .rpText
{
padding-right: 20px;
padding-left: 0;
}

.RadPanelBar_Default_rtl .rpLevel3 .rpText
{
padding-right: 30px;
padding-left: 0;
}

.RadPanelBar_Default .rpSelected .rpText
{
font-weight: bold;
}

.RadPanelBar_Default .rpDisabled .rpText
{
cursor: default;
color: #bbb;
}

.RadPanelBar_Default .rpRootGroup .rpDisabled:hover
{
border: none;
/*border-bottom-color: #bfbfbf;*/
cursor: default;
text-decoration: none;
}

.RadPanelBar_Default .rpGroup .rpDisabled:hover
{
border: none;
/*border-bottom: 1px solid #626262;*/
cursor: default;
text-decoration: none;
}

/* — Without Itemized Separators */
.RadPanelBar_Default .rpGroup .rpItem .rpLink.rpExpandable.CompanyA_Department_Category,
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.rpExpandable.CompanyA_Department_Category
{
border-top: none;
}

.RadPanelBar_Default .rpGroup .rpItem .rpLink.rpExpandable.CompanyA_Department_Category:hover,
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.rpExpandable.CompanyA_Department_Category:hover
{
border-top: none;
}

.RadPanelBar_Default .CompanyA_Department_Category .rpGroup .rpItem.rpFirst .rpLink.CompanyA_Department_Course
{
border-top: none;
}

.RadPanelBar_Default .CompanyA_Department_Category .rpGroup .rpItem.rpFirst .rpLink.CompanyA_Department_Course:hover
{
border-top: none;
}

.RadPanelBar_Default .rpGroup .rpItem .rpLink.CompanyA_Department_Course,
.RadPanelBar_Default .rpGroup .rpItem .rpFirst .rpLink.CompanyA_Department_Course,
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.CompanyA_Department_Course
{
border-top: none;
}

.RadPanelBar_Default .rpGroup .rpItem .rpLink.CompanyA_Department_Course:hover,
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.CompanyA_Department_Course:hover
{
border-top: none;
}

[joehankin]

what do you have as the <a href="???"> anchor link.
try kepping it blank if you have something in there at the moment…

just a thought

[Author]

Posts