?
Solved

HTML or jQuery help

Posted on 2012-12-28
6
Medium Priority
?
441 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

777 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