Announcement

Collapse
No announcement yet.

jQUERY DRAGGABLE WORKS BUT NOT IN ANOTHER WEBPAGE..

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQUERY DRAGGABLE WORKS BUT NOT IN ANOTHER WEBPAGE..

    I have a grabbable iframe that is grabbable using jquery in my own webpage.... I then embed the iframe / app - into another webpage and i got no responce. Draggable not defined error. But its not the order of the jquery-min.js - it has something to do with the addition of the further webpage, somehow the webpage being added - kills the function... Any body have any ideas of why...

    Here's the code...


    This on its own works fine and the iframe is draggable and contqained within the webpage..


    <HTML>
    <TITLE>WWW.LINKMYWEBSITE.CO.UK - MULTILINKED ADVERTISEMENT APPLICATION</TITLE>
    <head>
    <style type "text/css">
    #frame1position{
    position:absolute;
    top:100px;
    left:1050px;
    z-index:999
    }
    </style>
    </head>
    <!--[if (gt IE 9)|!(IE)]><!-->
    <body>
    <embed src="phone.wav" type="audio/wav" hidden="true" autostart="true" volume="100" width="0" height="0"></embed>

    <link rel="stylesheet" type="text/css" href="iframe.css">
    <div id="draggable-element">
    <div id="frame1position"; style="z-index:999;">
    <div id="frame1">

    <script src="jquery-3.2.1.js"></script>

    <script src="jquery-ui.js"></script>



    <font face="impact" size="2">
    <CENTER> 99p ADZ</CENTER></font>
    <iframe name="frame1" src="DEMO.html?interframe=true" style="border:0; draggable="true" width="169" height="295" scrolling="no" horizontalscrolling="no" verticalscrolling="no" frameborder="transparent";"></iframe>
    <font face="impact" size="2">
    <CENTER>LINKMYWEBSITE.CO.UK</CENTER></font>

    <script src="jquery-ui-drag.js"></script>

    ----------------------- this file -----------
    $(document).ready(function(){
    $('#frame1').draggable( {containment: "document" } );
    });
    --------------------jquery-ui-drag.js------------------

    </div>
    </div>
    </div>
    </body>
    </html>
    <!--<![endif]-->
    <!--[if lt IE 9]>
    <body>

    </body>
    </html>
    <!--<![endif]-->


    BUT AS SOON AS I ADD THE WEBPAGE (AT BOTTOM OF SCREEN) - I LOOSE FUNCTION AND GET THE ERROR- NOT DEFINED AS BELOW

    jQuery.Deferred exception: $(...).draggable is not a function TypeError: $(...).draggable is not a function

    at HTMLDocument.<anonymous> (file:///C:/Users/rossdraper/Desktop/cleanup/linkmywebsiteAPP/jquery-ui-drag.js:2:14)
    at mightThrow (file:///C:/Users/rossdraper/Desktop/cleanup/linkmywebsiteAPP/jquery-3.2.1.js:3583:29)
    at process (file:///C:/Users/rossdraper/Desktop/cleanup/linkmywebsiteAPP/jquery-3.2.1.js:3651:12)
    undefined jQuery.Deferred.exceptionHook @ jquery-3.2.1.js:3860
    process @ jquery-3.2.1.js:3655


    jquery-3.2.1.js:3869 Uncaught TypeError: $(...).draggable is not a function
    at HTMLDocument.<anonymous> (jquery-ui-drag.js:2)
    at mightThrow (jquery-3.2.1.js:3583)
    at process (jquery-3.2.1.js:3651)
    (anonymous) @ jquery-ui-drag.js:2
    mightThrow @ jquery-3.2.1.js:3583
    process @ jquery-3.2.1.js:3651

    THIS IS THE WEBPAGE I AM EMBEDDING THE ABOVE CODE INTO - WHEN I EDD THIS FOLLOWING CODE BELOW THE LATTER I GET THE ABOVE ERROR'S



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="description" content="Animated Wallpaper Download Portal: The most popular animated wallpapers and award-winning animated desktop backgrounds are available for Windows" />
    <title>Animated Wallpaper and Desktop Backgrounds</title>
    <link rel="alternate" type="application/rss+xml" href="http://feeds.feedburner.com/aw7" title="RSS: New Animated Desktop Wallpaper">
    <link rel="stylesheet" href="http://animatedwallpaper7.com/css/style.css" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="http://animatedwallpaper7.com/css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="http://animatedwallpaper7.com/admin/test/css/style.ie7.css" type="text/css" media="screen" /><![endif]-->
    <script type="text/javascript" src="http://animatedwallpaper7.com/js/script.js"></script>
    <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-208823-13']);
    _gaq.push(['_setDomainName', 'none']);
    _gaq.push(['_setAllowLinker', true]);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script></head>
    <body>

    <----DELETED FOR CERTAIN ISSUES - BUT THERE IS NO OTHER JQUERY LOADS UNTIL HERE AT THE END OF THE CODE ANYWAY...

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://awallpapermill.com/js/jquery.sharrre-1.3.4/jquery.sharrre-1.3.4.min.js"></script>
    <script type="text/javascript" src="http://awallpapermill.com/js/custom.js"></script>
    </body>
    </html>


    I PRESUME IT HAS SOMETHING TO DO WITH THE FURTHER JQUERY LOADS WITHIN THE ADDITIONAL WEBPAGE YES.... BUT IF SO WHAT IS THE WORK AROUND....THANK YOU
Working...
X