Solved

help with CSS/Javascript DIV display

Posted on 2014-03-29
2
296 Views
Last Modified: 2014-03-29
Hi friends. I need some help with a script on this page:

http://toughlikeyou.com/pages/Athletes.cfm

What is supposed to happen: when you click on an athlete's name on the left, the athlete's statement and biography is supposed to appear on the right.

Currently, only the first athlete's biography displays on the right.

This was working previously, then someone broke into this web site using an XSS vulberability, and I have needed to essentially rebuild this web site.

Any ideas what I can do to make this work? Thank you for your advice.

Here is what I have so far:

Javascript:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'> 

function show_article(index) {
    var articles = document.querySelectorAll('div.article');
    var i=0;
    for (i=0; i<articles.length; i++) {
        if (i == (index-1)) {
            articles[i].style.display = 'block';
        }
        else {
            articles[i].style.display = 'none';
        }
    }
}
</script>

Open in new window


CSS:
 #menu, #content {
    float: left;
}

#content {
    width: 360px;
	margin-top:30px;
}
.article {
    display: none;
}
.show {
    display: block;
}

Open in new window


menu HTML:
<div id="menu">
<h2>click name for excerpt:</h2>
<p><a href="#">Silas Baxter-Neal, Pro Skateboarder</a></p>
<p><a href="#">Brian Kachinsky, Pro BMX</a></p>
<p><a href="#">Patrick Melcher, Legendary Skateboarder</a></p>
<p><a href="#">Kevin Porter, Pro BMX</a></p>
<p><a href="#">Jerimiah Smith, Skateboarder</a></p>
<p><a href="#">Timmy Johnson, AM Skater</a></p>
<p><a href="#">Ray Lang, Snowboarder</a></p>
<p><a href="#">Matt Frankland, Skateboarder</a></p>
<p><a href="#">Mary Mills, Surfer</a></p>
<p><a href="#">Stoyan Angelov, Climber/Instructor/Triathlete</a></p>
<p><a href="#">Ariel Ries, Downhill Longboarder</a></p>
</div> 

Open in new window


Content HTML
<!-- begin content -->
<div id="content">
<div id="article1" class="article show"><!-- Silas Baxter-Neal -->
<p><strong>Silas Baxter-Neal</strong><br /> Excerpt on Physical Theraphy &mdash; One thing that I found unique about these two doctors was that they were very interested in the movements I did when I skated. They had me skate around the parking lot so they could see how my body moved and what muscle groups they needed to work on. After about a year of physical therapy and finally taking two months off the board, my ankles made a serious recovery and they function close to how they used to.</p>
<iframe src="http://www.youtube.com/embed/IMdQ-aeo_hA?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article2" class="article"><!-- Brian Kachinsky -->
<p><strong>Brian Kachinsky</strong><br /> Excerpt on Injuries and Healing &mdash; I feel like I've had it all at some point. Broken bones, fake teeth, surgeries, degenerative discs, rotator cuff issues, tons of stitches and have been to emergency rooms in more than eight countries including Germany, Mexico, Netherlands, Thailand, China, Estonia, and Brazil. I've worked with countless physical therapists both standard and holistic. I have also gained a good knowledge of the human body and how it works and heals in the process.</p>
<iframe src="http://www.youtube.com/embed/ARTavjAT5Pc?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article3" class="article"><!-- Patrick Melcher -->
<p><strong>Patrick Melcher</strong><br /> Excerpt from Recalling a Time in his Career &mdash; A second turning point came when I made the move from the Midwest out to California. Meeting my skate heroes and hooking up with all the industry heads was exactly what I needed at the time. I got sponsored, filmed a video part, and was ready to turn pro when I inevitably shattered my right knee. It was a disastrous setback, tearing all the ligaments in my knee, and it took a lot of therapy and time to get it back into working order.</p>
<iframe src="http://www.youtube.com/embed/IKdD2LCGBKs?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article4" class="article"><!-- Kevin Porter -->
<p><strong>Kevin Porter</strong><br /> Excerpt on Change &mdash; I learned that I lost half of my immune system that day. It was such a detrimental problem in my life. I got into this process where I was on top of the BMX world at the place where magazines labeled me "leader of the new school." I knew that I had some sort of established position in the industry. I'm not saying that I was the best in the world but I definitely built it up in my head that I had made it to this certain point. All these injuries, one after another, made me think, "You know what? You're killing yourself out here. You're in this position. You have support. Let's just kick back and do some other things while doing this."</p>
<iframe src="http://player.vimeo.com/video/35493874?title=0&amp;byline=0&amp;portrait=0" width="360" height="203" frameborder="0"></iframe></div>
<div id="article5" class="article"><!-- Jerimiah Smith -->
<p><strong>Jerimiah Smith</strong><br /> Excerpt on an Awakening &mdash; Physical therapy was a good "training" process for me, teaching myself to take care of my body and actually getting myself back to "normal." Since this injury was a little more serious than ones in the past, it put a new light in my eyes and taught me that if you take good care of your body it will treat you right in the end. Imagine that, right?</p>
<iframe src="http://www.youtube.com/embed/YWRj69k94Sg?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article6" class="article"><!-- Timmy Johnson -->
<p><strong>Timmy Johnson</strong><br /> Excerpt on Prevention &mdash; I think stretching is important because it loosens up the muscles and gives you more rebound. Let's say you didn't stretch and your breaking point is 45 degrees. You are more likely to break something than an individual who did stretch and has a breaking point of 90 degrees. Some people can even stretch beyond that to about 200 degrees. Being a skateboarder and having a high rebound is important because we're constantly hitting the ground, bending, pushing etc.</p>
<iframe src="http://www.youtube.com/embed/8cQINo5550c?rel=0" width="360" height="274" frameborder="0"></iframe></div>
<div id="article7" class="article"><!-- Ray Lang -->
<p><strong>Ray Lang</strong><br /> Excerpt on Conditioning &mdash; I supplement my diet with a good amount of fish oil, calcium, and a multivitamin. The fish oil seems to help my joints a great deal. Before my injury, I never bothered to stretch at all. Now I am forced to stretch religiously or I tighten up quickly. I have a 30-minute yoga DVD that I practice in the laughter-free environment of my home, and it seems to keep me out there.</p>
</div>
<div id="article8" class="article"><!-- Matt Frankland -->
<p><strong>Matt Frankland</strong><br /> Excerpt on Lifestyle &mdash; I've spent over half of my life obsessing over that useless wooden plank and the feeling of stepping on it and pushing forward gets me every time. I have to warn girls when I start dating them to not interfere with my skateboar ding because, "I've known my skateboard far longer than you, and my skateboard never does me wrong."</p>
</div>
<div id="article9" class="article"><!-- Mary Mills -->
<p><strong>Mary Mills</strong><br /> Excerpt on Goals &mdash; Really, I just set a goal for when I wanted to be back on the surfboard. It wasn't a hard and fast one, but it was something I could shoot for. I think I got back on the board a week after my target day. It wasn't easy; it was just a matter of knowing I could do it.</p>
</div>
<div id="article10" class="article"><!-- Stoyan Angelov -->
<p><strong>Stoyan Angelov</strong><br /> Excerpt on the Beginning &mdash; Growing up, while most kids watched Looney Toons, a few friends and I were out in the woods with a rope, pocket knife, and a set of matches (frequently without adult supervision). I learned to tie a figure eight knot before I learned what numbers added up to eight. Luckily my parents always supported and encouraged my exploratory behavior, even when it was risky.</p>
</div>
<div id="article11" class="article"><!-- Ariel Ries -->
<p><strong>Ariel Ries</strong><br /> Excerpt on Moving Forward &mdash; At this point, it's over a year later I don't let it stop me from living the life I love. I can still feel like a dull pressure in my shoulder, but it's not painful. Since it's a newer injury, I really don't know what to expect. I have been focusing on conditioning and strength training my arms and upper body since my injury. I feel like if the muscles and tissue around the broken bone are strong, then the chances of it getting re-injured are less likely.</p>
</div>
</div>
<!-- /content-->

Open in new window

0
Comment
Question by:Eric Bourland
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39964061
Add this in the script block:
$(function(){
    $('#menu a').click(function(e){
        e.preventDefault();
        show_article($('#menu a').index(this) + 1); // to make it work with the existing function
    });
});

Open in new window

Now, this uses jQuery while the existing function does not. I'm not sure which way you want to go but since you included the jQuery reference in the code block I guess jQuery is fine. You could replace both the existing function and the new bit by:
$(function(){
    var allArticles = $('div.article');
    $('#menu a').click(function(e){
        e.preventDefault();
        var currentArticle = allArticles[$('#menu a').index(this)];
        var visibleArticle = allArticles.filter(':visible')[0];
        if (currentArticle != visibleArticle) {
            $(visibleArticle).hide();
            $(currentArticle).show();
        }
    });
});

Open in new window

0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39964107
Worked like a charm. Robert, thanks very much. This saved me a lot of time and heartache.

Hope your day is going well.

best from Eric
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

759 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

18 Experts available now in Live!

Get 1:1 Help Now