CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   on hover load content into div? (http://www.codingforums.com/showthread.php?t=283613)

wowdavid2002 12-05-2012 09:40 PM

on hover load content into div?
 
hey guys, i'm trying to figure out how to load content into content.div when you hover or click on this <a href>Link</a> instead of loading a new page. is there a way to do this?

here is the html code i have for now. i'm sure its bad.. i'm a super noob now :(

Code:

<div class="container">
  <div class="sidebar1">
            <ul id="nav">
        <li><img src="images/logo.png" name="bar" width="170" height="95" id="bar" /></li>       

                        <li> <a href="#" id="Boom">Home</a>
               
                        <li><a href="#">Projects</a>
                                <ul>
                                        <li><a href="#">Ratis Grief </a>
               
                                                <ul>
                                        </ul>
                                        </li>
                                        <li><a href="#">Construction</a>
                                                <ul>
               
                                                </ul>
                                        </li>                                <li><a href="#">Nights</a>
                                                <ul>
               
                                                </ul>
                                        </li>
                                        <li><a href="#">Portraits</a></li>
                                                        <li><a href="#">Geometry</a>
                                                <ul>
               
                                                </ul>
                                        </li>
                                        <li><a href="#">Fleets</a></li>
               
                          </ul>
                  </li>
           
               
                        <li><a href="#">Statement</a>
                                <ul>
               
                               
                                </ul>
                        </li>
                    <li><a href="#">Contact</a>
                                  <ul>
               
                               
                                </ul>
                        </li>
               
                </ul>
       
        </div><div class="content"></div>


tempz 12-05-2012 10:01 PM

Simple google search

Code:

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Code:

div {
    display: none;
}

a:hover + div {
    display: block;
}

Example of the following: http://jsfiddle.net/Vqmaw/

This method uses CSS you can do it with Jquery etc.

wowdavid2002 12-05-2012 11:17 PM

how would i assign it to open into a specific div?

tempz 12-05-2012 11:21 PM

Change "div" to what ever you want? Update it in the css.

VIPStephan 12-06-2012 12:21 AM

For more advanced interaction you need JavaScript. Loading content into the page asynchronously (i. e. at a time other than on general page load) is done with a method commonly called “AJAX”. The search engine of your choice will tell you more.

wowdavid2002 12-06-2012 03:28 AM

yea.. i was able to find a jquery that would load the divs, but then it stopped working once i used it with the mootools scripts i need for my menu. in way over my head now!

VIPStephan 12-06-2012 05:01 PM

Yeah, that’s what I wrote this sticky thead for. If you insist in using mootools I’m sure it also has some AJAX functions. But in any case, AJAX is plain old JavaScript, you don’t need jQuery or mootools at all to do that (although they make things easier).


All times are GMT +1. The time now is 03:41 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.