[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

HTML or jQuery help

Posted on 2012-12-28
6
Medium Priority
?
450 Views
Last Modified: 2013-01-12
Hi All,

From the image below, when a link on the left side is clicked on, it filters the list on the right side.

What I want to happen is for the link that is clicked on to stay selected.  How can I do that?

Metric
Here's my code that I have so far:
<TABLE style="WIDTH: 50%">
<TBODY>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{8587EB30-CA69-497C-86F4-AC342FCEC3F4}','0');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" target=_self>ALL</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" target=_self>APC</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" target=_self>AWEC</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" target=_self>AXASC</A></P></TD></TR>
<TR>
<TD class=style1>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" target=_self>AMDW</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" target=_self>MWQSPC</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" target=_self>AQP</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" target=_self>VOE</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" target=_self>QERAF</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" target=_self>MEAFA</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" target=_self>DNEE</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" target=_self>ADUW</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" target=_self>DMKE</A></P></TD></TR>
<TR>
<TD class=style2>
<P align=center><A onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" target=_self>SDSD</A></P></TD></TR></TBODY></TABLE>

Open in new window

0
Comment
Question by:Isaac
  • 4
  • 2
6 Comments
 
LVL 13

Expert Comment

by:themrrobert
ID: 38728337
If you want the link to stay selected (using your current code) you will need to do something like this:

give the <a> tags an id.  (eg:  <a ..... id="link1"> )

It's a bit tricky for me to understand exactly what you are trying to do, but to select the link, you can use jquery to do:

$('#link1').setFocus(); and this  would setfocus (select) the link in question.
0
 
LVL 5

Author Comment

by:Isaac
ID: 38728415
Thanks!

For a better explanation, here's an example:

Let's say I have the links below, if the user clicks Link B, I want it to be selected until another link is selected.  So if they selected Link A, Link B won't be bold and underlined anymore but Link A will.

Link A
Link B
Link C

Hope that makes sense.  I will give what you have a try though.

Thanks again!
0
 
LVL 13

Expert Comment

by:themrrobert
ID: 38728761
What you describe here can be accomplished with css.

Assuming all of your links are of the class="mylinks" then in your stylesheet.css:

.mylinks {text-decoration: none; font-weight: 300; }
.mylinks:active { text-decoration: underline; font-weight: 800; }
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Comment

by:Isaac
ID: 38732332
So, I found this piece of code,

http://jsfiddle.net/VtWxF/6/

I set it up in SharePoint 2007 web part page and the problem is that when I click on the link,  it does not work.  As you can see from my initial code above, the page redirects to itself and the page refreshes.

Any ideas how to resolve this?

Thanks!
0
 
LVL 5

Accepted Solution

by:
Isaac earned 0 total points
ID: 38751106
I found a solution.

I created an html navigation and added it to a CEWP.
For the navigation, I used the links already created from the web part connection.

All I did was just added an "ALL" and the link to resolve my issue.

<li class="all">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','1');return false;" target="_self">ALL</A>
</li>
<li class="aetc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','2');return false;" target="_self">AETC</a>
</li>
<li class="afgsc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','3');return false;" target="_self">AFGSC</a>
</li>
<li class="afmc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','4');return false;" target="_self">AFMC</a>
</li>
<li class="afspc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','5');return false;" target="_self">AFSPC</a>
</li>
<li class="amc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','6');return false;" target="_self">AMC</a>
</li>
<li class="ang">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','7');return false;" target="_self">ANG</a>
</li>
<li class="pacaf">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','8');return false;" target="_self">PACAF</a>
</li>
<li class="usafa">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','9');return false;" target="_self">USAFA</a>
</li>
<li class="usafe">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','10');return false;" target="_self">USAFE</a>
</li>
<li class="afdw">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','11');return false;" target="_self">AFDW</a>
</li>
<li class="afsoc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','12');return false;" target="_self">AFSOC</a>
</li>
<li class="afrc">
  <a href="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" class="menu" onclick="javascript:SelectField('{41FEC1E4-8908-4089-9EBC-CA6E3ABB1A2A}','13');return false;" target="_self">AFRC</a>
</li>

Open in new window

0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 38769700
Resolved my own issue.
0

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In case you ever have to remove a faulty web part from a page , add the following to the end of the page url ?contents=1
When using a search centre, I'm going to show you how to configure Sharepoint's search to only return results from the current site collection. Very useful when using Office 365 with multiple site collections.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question