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

CabCon

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,093
Reaction score
2,881
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

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

thahitcrew

Modder
Messages
219
Reaction score
211
Points
163
CabCon said:
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
Click to expand...
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

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,093
Reaction score
2,881
Points
1,103
Matt said:
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.
Click to expand...
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

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,093
Reaction score
2,881
Points
1,103
thahitcrew said:
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)
Click to expand...
Ok thank you could you write very simple a example? :grinning: That would be awesome!
 
thahitcrew

thahitcrew

Modder
Messages
219
Reaction score
211
Points
163
CabCon said:
Thank you! :smile:
Click to expand...
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

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,093
Reaction score
2,881
Points
1,103
thahitcrew said:
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:
Click to expand...
Thank you :smile:
 
CabCon

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,093
Reaction score
2,881
Points
1,103
thahitcrew said:
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>
Click to expand...
Yeap, thank you!
 
Top