i am trying to get my to look like http://www.local10.com/ "Top Stories" section. I don't even know there to begin. I need when rollover hyperlink thet the three div's on the left side of the link change with each link. So on my right side of my page i have 12 links and on the left side I have three divs. top div is image, middle div is content bottom div is view morew, all linkable to each right side link as well as vise versa. please help.
dyboss
-3
Newbie Poster
Recommended Answers
Jump to PostI would suggest you begin by looking at the source code for websites that have the feature(s) you are interested in. for this particular site, right click in your browser, and view source. This will give you an idea on how it is set up and what additional scripts are …
Jump to PostOk, so start by putting together your HTML. I would investigate if the use jQuery's hover() method would work for the desired effect. As you hover over the links, you would change the content of the three divs. This can be achieved without jQuery (plain JavaScript), but I beleive that …
Jump to PostOk, how about JavaScript? If so, you'll just need a bit more code. As described above, you can do this with the events: mouseover and mouseleave. When the mouseover event fires, do something to the three divs. When the mouseleave fires do something else.
You'll need to start with your …
All 10 Replies
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
I would suggest you begin by looking at the source code for websites that have the feature(s) you are interested in. for this particular site, right click in your browser, and view source. This will give you an idea on how it is set up and what additional scripts are used to produce the desired effects.
If you are not familiar with CSS, JavaScript and jQuery, you are going to have a rough time analyzing the code though.
Start with the HTML and CSS. Then get into the weeds with JavaScript/jQuery.
dyboss
-3
Newbie Poster
they have to many css link the site to know, i look thru there view source, to much, spent two day trying to sort thru there code. look at every example on line, none i can use.
papabrian
0
Newbie Poster
jQuery ROCKS!
include it:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
The main concept is selectors - lots of things work, check here to learn more:
http://api.jquery.com/category/selectors/
here's an unchecked code sample off the cuff to get you started:
<a href="anotherPage.htm" id="myLink">Hover over me</a>
<div id="pane1">Some initial stuff</div>
<div id="pane2">Some other initial stuff</div>
<script>
$('#myLink').mouseover( function() {
// could set the inner HTML
$('#pane1').html('<strong>New Stuff</strong> for pane1');
$('#pane2').html('<h3>Oooh la la!</h3>');
// or ajax load from a url
$('#pane1').load('http://mydomain.com/urlForPane1Content.htm');
$('#pane2').load('http://mydomain.com/urlForPane2Content.htm');
// could also show different divs
$('#pane1').hide();
$('#pane3').show();
$('#pane1').hide();
$('#pane4').show();
});
$('#myLink').mouseleave( function() {
//to put something else back when the mouse leaves - use the same type of statements as above
});
</script>
That script can go in AFTER the html that defines all the panes. If you want it in the <head> section, wrap everything inside the <script> tag with the funky-cool jQuery document (dom) ready function syntax like this:
<script>
$( function() {
// all that stuff from inside the script tags above
});
</script>
et voila!
n.b. if you're using certain other javascript libraries you have to first call $.noConflict() then replace every occurance of $ above with jQuery - so $('#myLink') becomes jQuery('#myLink') if jQuery is the only javascript you didn't write, ignore this part.
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
Ok, so start by putting together your HTML. I would investigate if the use jQuery's hover() method would work for the desired effect. As you hover over the links, you would change the content of the three divs. This can be achieved without jQuery (plain JavaScript), but I beleive that the jQuery approach would be easier.
dyboss
-3
Newbie Poster
Thank you but I am still don't know jquery yet.
dyboss
-3
Newbie Poster
Thank you but I am still don't know jquery yet.
dyboss
-3
Newbie Poster
Thank you but I am still don't know jquery yet.
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
Ok, how about JavaScript? If so, you'll just need a bit more code. As described above, you can do this with the events: mouseover and mouseleave. When the mouseover event fires, do something to the three divs. When the mouseleave fires do something else.
You'll need to start with your HTML layout.
dyboss
-3
Newbie Poster
I only know html and css
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
I understand. It sounds like you'll need to depend on someone to write the code for you or provide you with a link to a resource that contains the code you are looking for. I do not know if you'll have too many people on this forum ready to do this for you, but you may get lucky.
I think that if you were to develop the HTML and CSS and come back with a specific question about how to do it with JavaScript, you are going to have a better chance of someone just providing you with the code that you are missing. At the moment there is nothing to work with so its kind of challanging for someone else to develop this from scratch.
Everybody has been where you are at the moment. I, myself, am in the perputal learning mode as well. At some point if you want to be able to create dynamic web sites with client side interaction, you will need to start learning JavaScript and/or server-side scripting (PHP, ASP.NET, etc..).
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.