asked on

JQuery CSS script

HI

I am trying to set some CSS values om an iframe.
However it seems that my JQuery script does not execute.

Can anyone point me in the right direction. Please bare in mind that i am very new to JQuery/Javascript.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(myframe) {
    
	$ww = $(window).width();
	
	
	if(ww < '1000') {
	  wm = (ww + 1000) / 1000;
	  $('#myframe').css({
      'width': '1000px',
	  'height': '200px',
	  'position': 'relative',
	  'top': '0px',
	  '-ms-zoom': wm,
	  '-moz-transform': 'scale('+ wm + ')',
	  '-moz-transform-origin': '0px 0',
	  '-o-transform': 'scale('+ wm + ')',
	  '-o-transform-origin': '0 0',
	  '-webkit-transform': 'scale('+ wm + ')',
	  '-webkit-transform-origin': '0 0'
	  
      });
	  
    } 
    else {
	 $('#myframe').css({
      'width': '1000px',
	  'height': '200px',
	  'position': 'relative',
	  'top': '0px',
	  '-ms-zoom': '1.0',
	  '-moz-transform': 'scale(1.0)',
	  '-moz-transform-origin': '0px 0',
	  '-o-transform': 'scale(1.0)',
	  '-o-transform-origin': '0 0',
	  '-webkit-transform': 'scale(1.0)',
	  '-webkit-transform-origin': '0 0'
	  });
    }
	

}
</script>
<style>
    body{
		margin:0px;
		padding:0px;
	}
	
	#wrap { width: 1000px; height: 200px; padding: 0; position:relative; top:0px; overflow: hidden; background:#666666; }
</style>
</head>

<body>

<div id="wrap">
    <iframe id="myframe"  src="/_adv/edgetest/Untitled-1.html" frameborder="0" onload="autoResize(this);"></iframe>
</div>

</body>
</html>

Open in new window

COBOLdinosaur

It would be easier to diagnose if you post a link to the page. As a guess it looks like you are executing the scripting before the page is loaded. You probably need a $(document).ready()

Cd&

Rajar Ahmed

Try this changes,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
    function autoResize(myframe) {
        $ww = $(window).width();
        
        if ($ww < '1000') {
            wm = ($ww + 1000) / 1000;
            $('#myframe').css({
                'width': '1000px',
                'height': '500px',
                'position': 'relative',
                'top': '0px',
                '-ms-zoom': wm,
                '-moz-transform': 'scale(' + wm + ')',
                '-moz-transform-origin': '0px 0',
                '-o-transform': 'scale(' + wm + ')',
                '-o-transform-origin': '0 0',
                '-webkit-transform': 'scale(' + wm + ')',
                '-webkit-transform-origin': '0 0'
            });
        }
        else {
            $('#myframe').css({
                'width': '1000px',
                'height': '500px',
                'position': 'relative',
                'top': '0px',
                '-ms-zoom': '1.0',
                '-moz-transform': 'scale(1.0)',
                '-moz-transform-origin': '0px 0',
                '-o-transform': 'scale(1.0)',
                '-o-transform-origin': '0 0',
                '-webkit-transform': 'scale(1.0)',
                '-webkit-transform-origin': '0 0'
            });
        }
    }
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial