www.webdeveloper.com
Results 1 to 5 of 5

Thread: Problem with openening in IFrame

  1. #1
    Join Date
    Nov 2009
    Posts
    4

    Exclamation Problem with openening in IFrame

    Helo im workin on my own site but i have one big problem,
    ik have a scrolling navigation, in javascript. And i want to open pages in a IFrame, i tried a lot of different solutions but i wil not happen:

    this is the link: click


    this is where it has to happen (ihoud) is the Iframe name

    Code:
    //Animate the LI on mouse over, mouse out
    	$('#menu li').click(function () {	
    		//Make LI clickable
    		window.inhoud.location = $(this).find('a').attr('href');
    this is the complete code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>R-Ontwerp</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.color.js"></script>
    <script type="text/javascript">
    
    
    $(document).ready(function() {	
    
    	//Background color, mouseover and mouseout
    	var colorOver = '#31b8da';
    	var colorOut = '#1f1f1f';
    
    	//Padding, mouseover
    	var padLeft = '20px';
    	var padRight = '20px';
    	
    	//Default Padding
    	var defpadLeft = $('#menu li a').css('paddingLeft');
    	var defpadRight = $('#menu li a').css('paddingRight');
    		
    	//Animate the LI on mouse over, mouse out
    	$('#menu li').click(function () {	
    		//Make LI clickable
    		window.inhoud.location = $(this).find('a').attr('href');
    		
    	}).mouseover(function (){
    		
    		//mouse over LI and look for A element for transition
    		$(this).find('a')
    		.animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
    		.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
    
    	}).mouseout(function () {
    	
    		//mouse oout LI and look for A element and discard the mouse over transition
    		$(this).find('a')
    		.animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
    		.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    	});	
    	
    	//Scroll the menu on mouse move above the #sidebar layer
    	$('#sidebar').mousemove(function(e) {
    
    		//Sidebar Offset, Top value
    		var s_top = parseInt($('#sidebar').offset().top);		
    		
    		//Sidebar Offset, Bottom value
    		var s_bottom = parseInt($('#sidebar').height() + s_top);
    	
    		//Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
    		var mheight = parseInt($('#menu li').height() * $('#menu li').length);
    	
    		//I used this coordinate and offset values for debuggin
    		$('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
    		$('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
    			
    		//Calculate the top value
    		//This equation is not the perfect, but it 's very close	
    		var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
    		
    		//Animate the #menu by chaging the top value
    		$('#menu').animate({top: top_value}, { queue:false, duration:500});
    	});
    
    	
    });
    	
    </script>
    
    </head>
    
    <body>
    
    
    
    <div id="content">
    <div class="style1" id="apDiv1"><a href="http://www.conquistadesign.com/" target="inhoud">Portfolio</a> | <a href="http://www.conquistadesign.com/concept" target="inhoud">Blog</a> | <a href="http://www.myriaddesign.com/" target="inhoud">About</a> | <a href="http://www.r-ontwerp.nl/" target="inhoud">Contact</a> | <a href="http://www.conquistadesign.com/" target="inhoud">Links</a></div>
    
    <hr style="border: 1px solid #ccc; margin-top: 30px;" />
    <div id="sidebar">
    
    <ul id="menu">
    <li><a href="#">Nederland op de fiets <span> / 2009</span></a></li>
    <li><a href="#">Pensioen fonds Metalelektro<span> / 2009</span></a></li>
    <li><a href="#">Stage verslag (Myriad Design)<span> / 2009</span></a></li>
    <li><a href="#">Girl of the city<span> / 2008</span></a></li>
    <li><a href="pages/slider.html">City Campus Max<span> / 2009</span></a></li>
    <li><a href="#">MENU SIZE LONG 6 <span> / 2007</span></a></li>
    <li><a href="#">MENU 7 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 8 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 9 <span> / 2007</span></a></li>
    <li><a href="#">MENU 10 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 11 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 12 <span> / 2007</span></a></li>
    <li><a href="#">MENU 13 <span> / 2007</span></a></li>
    <li><a href="#">MENU MENU SIZE 14 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 15 <span> / 2007</span></a></li>
    <li><a href="#">MENU 16 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 17 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 18 <span> / 2007</span></a></li>
    <li><a href="#">MENU 19 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 20 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 21 <span> / 2007</span></a></li>
    <li><a href="#">MENU 22 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 23 <span> / 2007</span></a></li>
    <li><a href="#">MENU 24 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 25 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 26 <span> / 2007</span></a></li>
    <li><a href="#">MENU 27 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 28 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 29 <span> / 2007</span></a></li>
    <li><a href="#">MENU 30 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 31 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 32 <span> / 2007</span></a></li>
    <li><a href="#">MENU 33 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
    </ul>
    
    </div>
    
    <div id="showblock"><iframe name="inhoud" width="698px" height="480px" frameborder="0" src="http://www.google.nl/"> </iframe></div>
    
    <hr style="border: 1px solid #ccc;" />
    
    </div>
    
    </body>
    
    </html>
    Last edited by Kor; 11-27-2009 at 07:57 AM. Reason: JQuery prefix

  2. #2
    Join Date
    Nov 2009
    Posts
    6
    Hmm, maybe try to add 'id' to the iframe like <iframe id="iframe_uniq_id" src="" ...>

    then try this:

    Code:
    $('#menu li').click(function () {	
      $('#iframe_uniq_id').attr( 'src' , $(this).find('a').attr('href') );
    }
    probably there will be sobe problems in IE (as usual...;])

  3. #3
    Join Date
    Nov 2009
    Posts
    4
    No didn't work, even less as before.
    if you click the empty links it works :S because then it loads the complete page in the IFrame (Name: "inhoud")

    its very frustrating!

    :P

  4. #4
    Join Date
    Nov 2009
    Posts
    4
    i found a way,!

    i used the code of iwosz in de javascript part
    Code:
     $('#iframe_uniq_id').attr( 'src' , $(this).find('a').attr('href') );
    !!And!!

    in the HTML code i added
    Code:
    target="Iframe_name"

  5. #5
    Join Date
    Nov 2009
    Posts
    4
    Still if anybody has a better solution, i would like to hear it!!

    Thnx

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles