0

I'm trying to figure out a way to get an iframe to load with jquery toggle. I can get the iframe to toggle, but the iframe is truncated each time and only about ~20% of the iframe is displayed. The rest is cut-off.

http://jsfiddle.net/purpletenspeed/0dvdye07/2/

Any help would be greatly appreciated!!!

HTML

<ul <li> <a href="#" class="show_hide"> Toggle </a>

<div class="slidingDiv">
    <iframe title="Launch Chat" width="500" height="600" src="https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=8824e96a-2f91-4dbd-b9c0-eaf91a26bd48&bu=12" frameborder="0 </iframe>
</div>
</li>

JavaScript: 

$(document).ready(function () {

$('.show_hide').click(function () {
    $(".slidingDiv").toggle();
});

});

css

.slidingDiv {
height: 600px;
width: 300;
padding: 10px;
margin-top: 10px;
display:none
}
emmanuel
  • 9,607
  • 10
  • 25
  • 38
James D
  • 37
  • 2
  • 8
  • You have nested iframes. That's a recipe for a headache when it comes to sizing. It's the inner one that's cutting off. – isherwood Dec 03 '14 at 20:16
  • UM, the problem is not with toggle, the issue is whatever is calculating the height inside that iframe. – epascarello Dec 03 '14 at 20:20
  • Is their a better way then using an iframe? I really just want to show/hide the chat window – James D Dec 03 '14 at 20:22
  • One possible solution (you have to wait for iframe to be loaded) http://jsfiddle.net/0dvdye07/6/ See why you have this kind of issue http://stackoverflow.com/a/2786429/1414562 – A. Wolff Dec 03 '14 at 20:37
  • 1
    Sorry, this should be the fiddle: http://jsfiddle.net/0dvdye07/7/ – A. Wolff Dec 03 '14 at 20:44
  • @A.Wolff thanks for your response jsfiddle.net/0dvdye07/7 seems to be working well. One thing i noticed is that the page jumps back to the top after clicking the toggle button and I have to scroll back down again. Any thoughts? – James D Dec 03 '14 at 21:10
  • @JamesD You should prevent default behaviour on anchor click: http://jsfiddle.net/0dvdye07/8/ – A. Wolff Dec 03 '14 at 21:14

1 Answers1

0

well you have problem in your .slidingDiv css. make the width and height to match with your iframe:

.slidingDiv {
height: 600px;
width: 500px;
padding: 10px;
margin-top: 10px;
display:none
}

here is the fiddle

Ashkan Mobayen Khiabani
  • 33,575
  • 33
  • 102
  • 171