selector context problem

selector context problem

Hi guys,
I am pretty new to jquery, and looking forward to use it extensively in our programs.

I have got the task to integrate jvectormap ( http://jvectormap.com/) to our crm system.
Our crm system consists of several frames and an iframe.
The javascripts are load in a frame, called "jscriptframe".
The objects shown on the browser is in an iframe called "workframe" and this iframe is in a frame called "mainframe"

I have already tried to run the jvectormap in a plain html and it works without problems:

  3. <html>
  4. <head>
  5.  <title>jVectorMap demo</title>
  6.  <link rel="stylesheet" href="jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
  7.  <script src="../jquery/jquery-1.10.2.min.js"></script>
  8.  <script src="jquery-jvectormap-1.2.2.min.js"></script>
  9.  <script src="jquery-jvectormap-world-mill-en.js"></script>
  10. </head>
  11. <body>
  12.  <div id="world-map" style="width: 600px; height: 400px"></div>
  13.  <script>
  14. $(function(){
  15.  $('#world-map').vectorMap();
  16. });
  17.  </script>
  18. </body>

  20. </html>

To integrate it to our crm system, I have tried following javascript code:
  2. $(function(){
  3.   $('#world-map').vectorMap();
  4. });
which didn't work, since I think the jscript (jquery and the jvectormap library) are loaded in a different frame than where the <div id="world-map" /> located (Which is in this case in the iframe)

Than I have tried following code:
  1. $(function(){
  2.   $('#world-map', window.document).vectorMap();
  3. });
With this code, the div is at least filled in with the background of the map, which should be shown by the jvectormap. But the map is not shown 
I have tried different thinks, but still can't understand why it doesn't work.

If I analyze the source code, the dynamically produced code is identical to the plain html.

I really appreciate your helps.

BR,
mzda