Display two Frames side by side on LinkButton Click using jQuery in ASP.Net

suhaas12...

SOLVED CLOSED ACTIVE ANSWERED
User: suhaas121
Posted: on Sep 28, 2020 12:25 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 1856

I have link button in html. When i click on it image and text should appear like this but i get like this.

Please help. Code attached.

<style type="text/css">
#frameB {
    height: 99% !important;
    width: 100%;
}
 .rightSideScreen {
    float: right;
    width: 50%;
    max-width: 1500px;
    top: 0;
}
 .fullScreen {
    width: 100%;
    top: 0;
    left: 0;
}
.smallScreen {
    width: 50%;
    float: left;
    top: 0;
    left: 0;
}
</style>

<iframe allowfullscreen="true" webkitallowfullscreen mozallowfullscreen oallowfullscreen
        msallowfullscreen id="frameB" draggable="true" runat="server" scrolling="yes" style="width: 69%;
        max-width: 1500px; height: 495px;margin-top:-675px"></iframe>

<script>
    function hideFrame() {
        $('#frameB').hide();
        document.getElementsByTagName("iframe")[0].className = "fullScreen";                
    }
    function showFrame(data) {
        document.getElementsByTagName("iframe")[0].className = "smallScreen";
        document.getElementsByTagName("iframe")[1].className = "rightSideScreen";
        $('#frameB').show();
        var iframe = $('#frameB');
        iframe.attr('src', data);
    }

    hideFrame();
</script>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 7

Reply
ANSWER
User: dharmendr
Replied: on Sep 30, 2020 02:33 AM
Report

Hi suhaas121,

Check this example. Now please take its reference and correct your code.

HTML

HtmlPage

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .rightSideScreen {
            float: right;
            width: 50%;
            max-width: 1500px;
            top: 0;
        }

        .smallScreen {
            width: 49%;
            float: left;
            top: 0;
            left: 0;
            border: 1px solid #FF0000;
            min-height: 99%;
            height: 100px;
        }

        .fullScreen {
            width: 100%;
            top: 0;
            left: 0;
            border: 1px solid #FF0000;
            min-height: 99%;
            height:100px;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        function hideFrame() {
            $('#dvFrame').hide();
        }
        function showFrame() {
            if ($('#dvFrame').attr('style') == "display: none;") {
                $("#dvDetails")[0].className = "smallScreen";
                $("#dvFrame")[0].className = "rightSideScreen";
                $('#dvFrame').show();
            } else {
                $("#dvDetails")[0].className = "fullScreen";
                $("#dvFrame")[0].className = "";
                $('#dvFrame').hide();
            }
        }
        $(function () {
            hideFrame();
        });
    </script>
</head>
<body>
    <div id="dvDetails" class="fullScreen">
        <a href="#" onClick="showFrame(); return false;">View</a>
    </div>
    <div id="dvFrame">
        <iframe allowfullscreen="true" webkitallowfullscreen mozallowfullscreen oallowfullscreen
                msallowfullscreen id="frameB" draggable="true" scrolling="yes" style="width: 99%;
                max-width: 1500px; height: 100px;" src="HtmlPage2.html"></iframe>
    </div>
</body>
</html>

HtmlPage2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        Test Frame
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display two Frames side by side on LinkButton Click using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us