Open Url inside HTML DIV on Menu item click using jQuery

Last Reply one year ago By dharmendr

Posted one year ago

Dear All, I want to open the hyperlink web brower link to the right side of Leftsidebar.when i will clcik on any menu then menu url will open inside the page (will cover area to the Right side of Leftsidebar)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>retina - a free css template</title>

<link rel="stylesheet" href="styles.css" type="text/css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!--
retina, a free CSS web template by ZyPOP (zypopwebtemplates.com/)
Download: http://zypopwebtemplates.com/
License: Creative Commons Attribution
//-->

</head>

<body>
    <section id="body" class="width">
        <aside id="sidebar" class="column-left">
            <header>
		<h1><a href="#">CNN NEWS18 WEB LINKS</a></h1>

	        <h2>Welcome to my website!</h2>
				
	    </header>
            <nav id="mainnav">
  	        <ul>
                    <li class="selected-item"><a href="https://www.google.co.in/" target="_blank">GOOGLE</a></li>
                    <li class="selected-item"><a href="https://www.linkedin.com/" target="_blank">LINKEDIN</a></li>
                    <li class="selected-item"><a href="https://www.facebook.com/" target="_blank">FACEBOOK</a></li>
                    <li class="selected-item"><a href="https://www.gmail.com/" target="_blank">GMAIL</a></li>
                   </ul>
                </nav>
	    </aside>
        <div class="clear"></div>
    </section>
</body>
</html>
Posted one year ago Modified on one year ago

Hi ROHIT,

To open url inside the page within a div you need to use iframe.

Check this example. Now please take its reference and correct your code.

<div>
    <section id="body" class="width">
    <aside id="sidebar" class="column-left">
        <header>
            <h1><a href="#">ASPSnippets.com</a></h1> 
            <h2>Welcome to AspForums!</h2>                 
        </header>
        <nav id="mainnav">
            <ul>
                <li class="selected-item"><a href="http://www.aspforums.net" >ASPForums</a></li>
                <li class="selected-item"><a href="http://www.aspsnippets.com" >ASPSnippets</a></li>
            </ul>
        </nav>
    </aside>
    <div class="clear"></div>
</section>
</div>
<div id="dvDisplay">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('li a').on("click", function () {
            var url = $(this).attr('href');
            $('[id*=dvDisplay]').html('<iframe frameborder="1" src="' + url + '" />');
            return false;
        });
    });
</script>

Demo