CODEWITHSUNDEEP
jqueryhtmlajaxjquery-ui
user780092
user780092

Reputation: 115

Open html link in a div using jquery

I am trying to drag and drop html link into a div element. My requirement here is to open the link in within that div element. I have 2 divisions on my page "left-panel" and "canvas".

Idea here is on my left panel I'll have multiple links, when I drop any of these link in canvas div it should open that html link within the canvas. One thought is to use iframe but I would like to know if this is possible with divs instead of iframe. I tried $.ajax() and load() but none of those seem to work. I'll appreciate your help in this regard.

This is what I have done so far:

<head> 
        <link rel="stylesheet" href="../css/jquery-ui.css" type="text/css"  /> 
        <script type="text/javascript" src="../scripts/jquery-1.6.js"></script>
        <script type="text/javascript" src="../scripts/jquery-ui.min.js" ></script> 


    <style>     
            #canvasWrapper {
                border: 1px solid #DDDDDD;
                height: 100%;
                vertical-align:top;
                margin-left: auto;
                margin-right: auto;
                width:  90%; 

            }
            .Frame {
                border: 1px solid #DDDDDD;
                height: 500px;
                margin-left: auto;
                margin-right: auto;
                width:  100%; 
            }
            .hFrame {
                border: 1px solid #DDDDDD;
                height: 50%;
                width:  100%; 
                position:relative;
            }

            .nonSelectable {
                border: 1px solid #DDDDDD;
                height: 50%;
                width:  100%; 
                position:relative;
            }

            .vFrame {
                border: 1px solid #DDDDDD;
                height: 100%;
                width: 50%; 
            }

            div.vFrame {
                display:block;
                float:left;
            }

            .buttonBar {
                position: relative;
                margin-left: auto;
                margin-right: auto;
                width:90%;
            }
    </style>


</head>
<body>
    <div id="wrapper"> 
        <div id="banner"></div>
        <div id="content-wrapper">
            <div id="content">
                    <table class="layout-grid" cellspacing="0" cellpadding="0" style="height:100%;">
                        <tbody>
                            <tr>
                                <td class="left-nav">
                                    <dl class="left-nav">
                                        <dt>Available Widgets</dt>
                                        <dd>
                                            <a href="../modules/1.html">I am no. 1</a>
                                        </dd>
                                        <dd>
                                            <a href="../modules/2.html">I am no. 2</a>
                                        </dd>
                                        <dd>
                                            <a href="../modules/3.html">I am no. 3</a>
                                        </dd>
                                    </dl>
                                </td>
                                <td class="normal">                                             
                                    <div id="canvasWrapper">
                                        <div id="canvasFrame" class="Frame">
                                    </div>

                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>

        </div>
        <div id="footer"></div>
    </div>  

    <script>
        var lnk="",fullLink;
        $(function() {
            $( ".left-nav dd" ).draggable({
                        start: function (event,ui) {
                                var module= $(ui.draggable).html();
                                lnk= $(this).children().attr("href");
                        },
                        revert: "invalid",
                        helper: "clone"

                    });
            $( "#canvasFrame" ).droppable({
                drop: function( event, ui ) {
                    $( this ).addClass( "ui-state-highlight" ).html(lnk);
                }
            });
        });
    </script>

</body>

Upvotes: 0

Views: 3270

Answers (3)

Carmen Nuccio
Carmen Nuccio

Reputation: 81

I know this is an old question, but I've messed around and here's a basic solution. Change your html to the following:

<a href="#" class="drag_link" data-id="modules/1.html">I am no. 1</a>

Change your div to hold an object so there's something to drop a link into initially:

<div id="canvasFrame" class="Frame">
<object width="600" height="400">Drag and drop stuff here</object>
</div>

And finally the JQuery:

var lnk1="";

 $(function() {
    $( ".drag_link" ).draggable({
        start: function (event,ui) {
            var lnk1 = $(this).data('id');
            //var module= $(ui.draggable).html();
            $( this ).addClass( "ui-state-highlight" );
            $( "#canvasFrame" ).droppable({
            drop: function( event, ui ) {
            $( this )
            .load(lnk1);
            }
        });
        }
    });
});

When each link is dropped over the canvas, it loads the appropriate page and highlights the link. What it doesn't do is return the link to it's original position, but that could be done easily I'm sure by someone with more knowledge than me.

Upvotes: 0

Rakesh Sankar
Rakesh Sankar

Reputation: 9415

Use any Javascript framework to meet this:

one is:

http://jqueryui.com/demos/slider/ - to implement the slider.

Then, have your script to create dynamic iFrame to load the dragged links.

// Create an iframe element
$(‘<iframe />’);

// You can also create it with attributes set
$('<iframe id="myFrame" name="myFrame">');

// Finnaly attach it into the DOM
$('<iframe id="myFrame" name="myFrame">').appendTo(<div>);

// Setting iframe's source
$('<iframe />').attr('src', 'http://www.google.com');

Upvotes: 1

Rohan Verma
Rohan Verma

Reputation: 445

I don't think that should be done. People associate iFrames with embedded websites. Try using iFrames and you could easily do what you want to. The dragging opening could be easily implemented using js or jquery try to google for that.

Example: http://jsfiddle.net/CDtcq/3/

Upvotes: 0

Related Questions