Solved

HTML or jQuery help

Posted on 2012-12-28
6
397 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now