Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>
    Last edited by wowdavid2002; 12-05-2012 at 10:47 PM. Reason: posting code

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how would i assign it to open into a specific div?

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Change "div" to what ever you want? Update it in the css.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •