CODEWITHSUNDEEP
jqueryhtmliframewidth
GrimPanda
GrimPanda

Reputation: 53

Determine Pragmatically the width of a div inside an iFrame via jQuery

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!

https://i.sstatic.net/vvkdd.jpg
https://i.sstatic.net/Z09Pt.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.

Upvotes: 0

Views: 386

Answers (3)

GrimPanda
GrimPanda

Reputation: 53

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!

Upvotes: 0

joao
joao

Reputation: 342

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.

Upvotes: 1

user1596138
user1596138

Reputation:

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.

Upvotes: 0

Related Questions