jQuery Load External Webpage into Div Layer

Some jQuery developers like to load external web pages into Div layers when visitors click on a link or button. The main advantage of loading external web pages may be that it can make the web page clean, simple and not congest.

This can be achieved by using the jQuery load() method which can load contents of external web page into a Div layer even without refreshing the current web page.

The following is a very simple example of loading external web pages into a Div layer when a button is clicked:

The jQuery codes are very simple:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Div Layer From Left To Right</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
                                     
        $(".loadPage1").click(function() {
                                        
            if ( $(this).is(".loadPage1") ) {
                
                // Load web page 1
                $("#pageContent1").load('example-1.html');
                
                // Toggle the class
                $(this).toggleClass("loadPage1 loadPage2")
                
            } else {
                
                // Load web page 2
                $("#pageContent1").load('example-2.html');
                
                // Toggle the class
                $(this).toggleClass("loadPage1 loadPage2")
            }
            
        });                        
            
    });
</script>
</head>

<body>

<h1>jQuery Animate Div Layer From Left To Right</h1>

<div id="frame">
    <div id="pageContent1"></div>
</div>

<div style="width:282px; text-align: center; margin-bottom:10px;">
    <input type="button" value="Click Here to Load Web Page" />
</div>

<div style="width:282px; text-align: center"></div>
</body>
</html>

This jQuery post discuss how to load external web page into a Div layer.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>