Jump to content

How to load page in div compatible with all device?


Maxilboss93

Recommended Posts

I have a problem with .load() of jquery, or use of frame;

I need to load in a div a page that loads its data dynamically through javascript, in particular I have my html page which through a js in a function uses the .load of jquery:

this is an example of my problem:

 

<!doctype html>
<html lang="it">

<head>
    <script defer class="sezioni"></script>
    <script src="assets/js/jquery.js"></script>

    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div#ese_div_book {
            position: absolute;
            width: 100px;
            height: 100px;
            background: midnightblue;
        }
    </style>
</head>

<body>
    <div id="ese_div_book" class="ese_button ese_quiz ese_colorBT2">
        <img id="ese_book" class="myButton" src="assets/img/Bt_Book.svg">
    </div>
    <div id="contenitore_libro" style="position: fixed;width: 100%;height:100%;top: 0%;left: 0%;z-index: 999999999;visibility: hidden;">
        <iframe id="frame" src="" style="width: 100%;height: 100%;">
        </iframe>
        <button id="button_book" class="ese_button ese_quiz ese_colorBT1 ese_norm" style="visibility: hidden;position: fixed;top: 95%;width: 5%;height: 5%;left: 95%;background-color: lightskyblue;">
            <img id="ese_back" class="myButton" src="assets/img/menu/IndietroW.svg">
        </button>

    </div>

</body>

<script>
    $("#ese_div_book").click(function() {
        $("#contenitore_libro").css("visibility", "visible");
        $("#button_book").css("visibility", "visible");
        // console.log("ARRIVA VALORE", _nQuest);
        $("#frame").attr("src", "../librohtml/index.html?id=" + _nQuest.Libro3 + "&=yes&lis=AB");

    });
    $("#button_book").click(function() {
        $(this).css("visibility", "hidden");
        $("#contenitore_libro").css("visibility", "hidden");
        return false
    })
</script>

</html>

 

with Frame not function correctly in Apple device; if I try to use the .load() of jquery not load the div sezioni that was a js loaded dinamically by 

 <script defer class="sezioni"></script>

and other file .js,

Any ideas to load the page in a div with all his js?? 

Link to comment
Share on other sites

That is a terrible idea. The <object> tag is not very good at displaying websites, while the <iframe> is designed for that purpose.

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...