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

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,698
Reaction score
2,807
Points
1,053
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:
You do not have permission to view link Log in or register now.


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:
You do not have permission to view link Log in or register now.


Thank you and have a nice day,
@CabCon
 

Matt

Web Developer
Messages
246
Reaction score
215
Points
603
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
210
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:
You do not have permission to view link Log in or register now.


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:
You do not have permission to view link Log in or register now.


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
4,698
Reaction score
2,807
Points
1,053
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
4,698
Reaction score
2,807
Points
1,053
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
210
Points
163
Thank you! :smile:
Here is a live example:
You do not have permission to view link Log in or register now.

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
4,698
Reaction score
2,807
Points
1,053
Here is a live example:
You do not have permission to view link Log in or register now.

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
4,698
Reaction score
2,807
Points
1,053
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