jQuery, how to change HTML <object> attributes?

Fluttershy · 12-18-2011, 01:41 AM

I can't seem to change object attributes in html while using jQuery. It works on images... Can does it just not work on swf objects?

Here is my code:

HTML::

Code:

<input type="button" id="larger" value="Big" />
<input type="button" id="smaller" value="Small" />
<object id="game" width="550" height="400">
        <param name="game" value="Games/swf_games/4SecondFrenzy.swf">
        <param name="quality" value="high">
        <embed src="Games/swf_games/4SecondFrenzy.swf" quality="high" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>

jQuery:: (obviously under $(document).ready()

Code:

$('#larger').click(function(){
		$('object').attr({
			'width': '825',
			'height': '600'
		});
	});
	
$('#smaller').click(function(){
		$('object').attr({
			'width': '225',
			'height': '200'
		});
	});

Thank you very much!

mvmacd · 12-18-2011, 03:44 AM

weird.. I tried manually typing in the code on Chrome's console, and afterwards when I called the object, it said the width and height were what I had entered. But the object didn't seem to move at all. Of course, I don't have the .swf, but I added a color border and it was kind of small and rectangular and seemed like it was cut off somewhere but it still didn't seem to move.

Arnaud · 12-18-2011, 01:37 PM

Works fine using HTML5 <object> tag.

http://www.w3schools.com/html5/tag_object.asp

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script type="text/javascript">
            $(function() {
    
                $('#larger').click(function() {
                    $('object').attr({
                        'width': '825',
                        'height': '600'
                    });
                });
	
                $('#smaller').click(function() {
                    $('object').attr({
                        'width': '225',
                        'height': '200'
                    });
                });
            })
        </script>
    </head>

    <body>

        <input type="button" id="larger" value="Big" />
        <input type="button" id="smaller" value="Small" />

        <object height="400" width="400" data="http://www.w3schools.com/html5/helloworld.swf"></object>

    </body>
</html>