0

I have a div. That div lives inside an iframe. That div has a width. I would like to get this width via jQuery. Attached are some of my adventures in doing so. Please enjoy!

http://i.imgur.com/AXdfU61.jpg
http://i.imgur.com/Y9MB6Sg.jpg

EDIT - Also why does my console throw errors if I start any line with a $ ?

EDIT 2 - Simplified the question to bare bone basics.

Ahmad Alfy
  • 12,332
  • 6
  • 62
  • 95
GrimPanda
  • 53
  • 5
  • the item you are trying access is in an iframe. you might be experiencing this => http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe – PlantTheIdea May 16 '13 at 17:38
  • @PlantTheIdea from my understanding of that article, it's talking about loading cross domain content. In my example I changed the URL, but the both parent and child are in the same domain. – GrimPanda May 16 '13 at 17:42
  • you shouldn't have stopped after the first answer, because the second is valuable. its the same as the one @joao answered. – PlantTheIdea May 16 '13 at 17:44
  • You say your console throws errors when you start a line with $. I suspect you either don't have jQuery loaded on the page, or you have another framework bound to $ aswell. Try running just '$' and post the results, also try running just 'jQuery' and post the result. –  May 16 '13 at 18:58
  • $ - undefined | jQuery - function (e,t){return new v.fn.init(e,t,n)} – GrimPanda May 16 '13 at 20:08

3 Answers3

1

In jquery you can do something like this:

$("#iframeId").contents().find('#divId').width();

Since your iframe don't have a id, either change that or find it by other means, you can use $('iframe') to list all iframes in your document. In relation to your tries if you use $('.span9') this will find all elements with this class, so you also need to find another way to get your element.

joao
  • 334
  • 2
  • 9
  • If you need more help on this issue just ask :P – joao May 16 '13 at 17:45
  • I tracked down the code and added an ID to the iframe called "gameframe" and an ID to the span9 called "gamebox" http://i.imgur.com/Y9MB6Sg.jpg – GrimPanda May 16 '13 at 18:07
  • your frame have jquery included? this code is correct you must be doing something else wrong, – joao May 16 '13 at 18:17
  • I do think something else is afoot. In the meantime I just used PHP to lookup the size of the swf on the server, and then threw that into the echo'd javascript. Works. Not as I intended for it to, but it works. Thanks for all the help buddy. – GrimPanda May 16 '13 at 18:39
  • try to type only $('#frameID') and see what object is returned in console... i am sure this is the correct code. And if you can check the scipt tags in your header for jquery – joao May 17 '13 at 09:47
0

Using $("#IDofDIV").width(); You will need to use an ID instead of a class for the element you want to resize/get the width of. Classes house many elements, there could even be hundreds of elements with the same class. You need to specify which element, not a group of elements.

So using an ID would be the easiest thing although there are many other ways.

Here is a link to .width(); documentation.

Also you are using an iFrame so you may have trouble just running scripts from the console. See the first comment under your question where @PlantTheIdea has given an explanation for this.

  • 1
    Let me have a stab at this. I'm using a Wordpress plugin (lighbox plus colorbox) to achieve the iframe, so I'll have to hack up their code to add an ID. I'll be back ASAP. – GrimPanda May 16 '13 at 17:42
  • I have tried accessing it via ID now, and still same errors. (see comment above) – GrimPanda May 16 '13 at 18:10
0

I have solved it. Although my workaround for this issue is working, I had several other issues with jQuery on my site. Namely, the $ not working in the console. I knew I had jQuery referenced, yet $ wasn't a valid object.

It turns out that when jQuery is running in non-conflict mode, the $ is not available in the standard use case. Instead you pass it the document ready function like so:

jQuery(document).ready(function ($){

Now it is a valid object and can be used as normal. This allows jQuery to run in non conflict mode and still have access to the $

You can read about this HERE: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

(jQuery noConflict Wrappers section)

Hope this helps someone!

GrimPanda
  • 53
  • 5