mouseover - news headlines

WDH · #1 Dec 8th, 2007, 16:15

Hi,
I am trying to create a news headlines section for on my website so that you can mouseover the headline and then the story will appear to the side of it with no clicking involved.

http://s121.photobucket.com/albums/o...t=SANY0023.flv

Here is a video showing the type of thing i am looking for. Any help with code appreciated.

Rakuli · #2 Dec 8th, 2007, 16:41

Well this is a reasonably simply thing to do

first start by defining some css

Code: Select all

.newsDivs
{
    display: none;
}

then a small script in the top of your document

Code: Select all

var currentNews = false; // will hold reference to last opened news item so it can be closed for a new one

function toggleNews (id) // function takes an element id that will be toggled
{
       var newsItem = document.getElementById (id);
       // close the old news item if there is one
       if (currentNews)
           currentNews.style.display = 'none';
        
       // now display the new div
           newsItem.style.display = 'block';
       // store it as current item
           currentItem = newsItem;
}

Okay so that's your javascript, now all you need to do is put the news content into divs in your html and give them the class "newsDivs" and a unique id. Then on the links that you want to toggle the displays, put onmouseover="toggleNews('divId')";

EG

HTML: Select all

<a href="#" onmouseover="toggleNews('div1')">Show div1</a>
<a href="#" onmouseover="toggleNews('div2')">Show div2</a>

<div class="newsDivs" id="div1"> Hello, I am some random content created by rakuli to show this script</div>
<div class="newsDivs" id="div2">No! <em>I</em> am the aforementioned random content</div>

That should sort ya out

WDH · #3 Dec 8th, 2007, 16:47

Cheers, So top code goes in .css 2nd code goes at the top of my html document and the last is the usual page code where i want it?
I will give it a try now.

edit **
Ive tried out your code but i cant get it to work on my site. Whenever the code is placed at the otp of the html doucument it appears as text on the site and isnt hidden. Would you be able to help?

Rakuli · #4 Dec 8th, 2007, 16:52

Quote:

--------------------------------------------------------------------------------

Cheers, So top code goes in .css 2nd code goes at the top of my html document and the last is the usual page code where i want it?
I will give it a try now.

yup that's right

Rakuli · #5 Dec 10th, 2007, 05:18

Quote:

Ive tried out your code but i cant get it to work on my site. Whenever the code is placed at the otp of the html doucument it appears as text on the site and isnt hidden. Would you be able to help?

You need to make sure your CSS is set up correctly and that each div inherits the .newsDivs class. In doing so it will ensure that the default display for the divs is none

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
need help with JS mouseover/popup	stevemtno	JavaScript Forum	9	May 8th, 2008 15:50
Mouseover buttons help!	JIM_genius5	Web Page Design	4	Jan 24th, 2008 16:30
Image link mouseover QUIRK	fuzzee	Web Page Design	3	Jun 14th, 2007 15:08
How to make flash news headlines	marcusharun	Flash & Multimedia Forum	7	Oct 30th, 2006 21:15
News Ticker Headlines Keep Rolling	zymurgy	JavaScript Forum	0	May 19th, 2006 14:03

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
mouseover - news headlines