Answered Render a HTML site in a HTML site. How is this possible?

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,113
Reaction score
2,884
Points
1,103
Hello,
I have a simple question. I'm using the framework bootstrap and I want that I can load html pages in one page, that mean I want to replace this with html code from a other html file, like to render the html page in that.

Like here we have a bootstrap template:
Please, Log in or Register to view URLs content!


v5OAtkX.png


Now I want that this area (red marked) will replace by clicking on of the items in the navbar with a another html file which is placed somewhere, something like that here:
Please, Log in or Register to view URLs content!


Thank you and have a nice day,
@CabCon
 

Matt

Web Developer
Messages
245
Reaction score
215
Points
828
So you want the "One Page Wonder" part to be replaced with a section of the nav bar? I'm so confused - if you could explain what you want a bit more clear I could probably do this for you.
 

thahitcrew

Modder
Messages
219
Reaction score
211
Points
163
Hello,
I have a simple question. I'm using the framework bootstrap and I want that I can load html pages in one page, that mean I want to replace this with html code from a other html file, like to render the html page in that.

Like here we have a bootstrap template:
Please, Log in or Register to view URLs content!


v5OAtkX.png


Now I want that this area (red marked) will replace by clicking on of the items in the navbar with a another html file which is placed somewhere, something like that here:
Please, Log in or Register to view URLs content!


Thank you and have a nice day,
@CabCon
Very simple, all you need to do is use the <iframe> tag. Use a jQuery click event to change the url that the <iframe> is displaying (e.g. add a click event to each of the elements that are part of the nav bar)
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,113
Reaction score
2,884
Points
1,103
So you want the "One Page Wonder" part to be replaced with a section of the nav bar? I'm so confused - if you could explain what you want a bit more clear I could probably do this for you.
No, I mean that you click on one of the navbar items, than it will load a html page in the red marked area. :grinning:
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,113
Reaction score
2,884
Points
1,103
Very simple, all you need to do is use the <iframe> tag. Use a jQuery click event to change the url that the <iframe> is displaying (e.g. add a click event to each of the elements that are part of the nav bar)
Ok thank you could you write very simple a example? :grinning: That would be awesome!
 

thahitcrew

Modder
Messages
219
Reaction score
211
Points
163
Thank you! :smile:
Here is a live example:
Please, Log in or Register to view URLs content!

Here is the source:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
    $("#ChangeIframe").click(function(){
        $("#ExampleForCabCon").attr("src","http://www.ps3cfw.com");//Change Iframe
    });
});
</script>
</head>
<body>

<button id="ChangeIframe">Change Page :P</button>
<iframe src="http://www.ps3cfw.com/dashboard.php" width="500" height="500" frameborder=0 id="ExampleForCabCon"></iframe> <!-- This is the Main Page -->

</body>
</html>

Just follow the method shown above for each page :tonguewink:
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,113
Reaction score
2,884
Points
1,103
Here is a live example:
Please, Log in or Register to view URLs content!

Here is the source:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
    $("#ChangeIframe").click(function(){
        $("#ExampleForCabCon").attr("src","http://www.ps3cfw.com");//Change Iframe
    });
});
</script>
</head>
<body>

<button id="ChangeIframe">Change Page :P</button>
<iframe src="http://www.ps3cfw.com/dashboard.php" width="500" height="500" frameborder=0 id="ExampleForCabCon"></iframe> <!-- This is the Main Page -->

</body>
</html>

Just follow the method shown above for each page :tonguewink:
Thank you :smile:
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,113
Reaction score
2,884
Points
1,103
No problem :tonguewink:
Btw also make sure to add this to your header in order to use jQuery:
PHP:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
Yeap, thank you!
 
Top