javascript - change src in iframe which depend on viewport size -
i'm quite new in website area
i'm trying change src in iframe src content table along width , height make not responsive
i'm trying change src depend on size of viewport
here code
<iframe width="100%" height="410" scrolling="yes" frameborder="0" scrolling="no" allowtransparency="true" src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082f60"></iframe> <div id="fxempire_link" style="width:500px;font-size: 11px;"> free charts powered by <a rel="nofollow" style="text-decoration: underline;" target="_blank" href="http://www.fxempire.com">fxempire.com</a> - leading financial portal</div> i'm trying change following width inside src automatically
src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082f60" but don't idea it
is there way it??what found in internet using either link or button change src
well because of access-control-allow-origin can not ajax, php, dont know legal/illegal be.
by using iframe works way, sluggish cause iframe needs lot time load...:
$(window).bind('load resize',function(){ var windowh = $(window).height(), windoww = $(window).width(); $('#iframe').attr('src','//tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width='+windoww+'&height='+windowh+'&text_color=333&text_hover_color=082f60'); $('#iframe').css({'height':windowh+'px', 'width':windoww+'px'}); }) http://jsfiddle.net/ebjsd8xx/3/
edit: changed code little bit better performance but, - graph still loads freaking slow, it's same on preview..
var resizetimer; $(window).load(function(){ $(window).trigger('resize'); }); $(window).resize(function(e){ var windowh = $(window).height(), windoww = $(window).width(); cleartimeout(resizetimer); resizetimer = settimeout(function() { $('#iframe').attr('src','http://tools.fxempire.com/sidebar- quotes.php?instruments=5,10,1,2,4,3&width='+windoww+'&height='+windowh+'&text_color=333&text_hover_color=082f60'); $('#iframe').css({'height':windowh+'px', 'width':windoww+'px'}); }, 250); })
Comments
Post a Comment