Solved

Select choice bind

Posted on 2013-06-03
5
231 Views
Last Modified: 2013-06-04
I want to change the size of a div that contains an html5 video tag depending on the size the user chooses from a select element

but i can't even get into the select function.... please help....
this is all i have so far still a work in progress

	<script>
	$(document).ready(function() { 
		

		$("select.select-size").change(function() {
			alert('hello');

			var theVal = $('select.select-size').val();
				alert(theVal);	
				
			switch(theVal) {
				case "90%":
					theHeight = "583px";
					theWidth = "432px";
					break;
			}
			
			$('#video').css({
				'height': theHeight,
				'width': theWidth,
			});

		});		

	});
	
	</script>
</head>
<body>
<style>
<!-- aspect ratios 
100% - 648 x 480
 90% - 583 x 432
 80% - 518 x 384
 70% - 454 x 336
 60% - 389 x 288
 50% - 324 x 240
 40% - 260 x 192
-->

#video {
	width: 648px;
	height: 480px;
}
</style>
<div id="video">
	<video id="actual-video" autoplay >
	  	<source src="grdirectfinal.m4v" type="video/mp4" poster="grdirect_final2.png">
	  	<source src="grdirect_final.ogg" type="video/ogg" poster="grdirect_final2.png">
	  	<source src="grdirect_final2.webm" type="video/webm" poster="grdirect_final2.png">
		Your browser does not support the video tag.
	</video>
</div>
<div id="select-box">
	<select name="select-size" id="select-size">
		<option value="100%">100%</option>
		<option value="90%">90%</option>
		<option value="80%">80%</option>
		<option value="70%">70%</option>
		<option value="60%">60%</option>
		<option value="50%">50%</option>
		<option value="40%">40%</option>
	</select>
</div>

Open in new window


I know next I have to create a function that will stop the video and then display and play it again with the new dimensions....but like i said im still stuck at the starting gate
0
Comment
Question by:leozayas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39218252
seems you forgot to load jQuery.

Add

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.0.min.js" type="text/javascript"></script>
before your script tags and change

$("select.select-size")
to

$("#select-size")

I would also move the style to the head
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39218265
There are quite a few things wrong with your script

1. make <script> <script type="text/javascript">
2. You are trying to select the select using its name as a class use either

$('#select-size') or $('select[name="select-size"]') - examples of both in code below

3. You are not setting theHeight and theWidth anywhere except if selection is 90% so you will get an undefined for all other values.

Here is the corrected code
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
<script type="text/javascript">
  $(document).ready(function() { 
    $("#select-size").change(function() {
      alert('hello');
      var theHeight = "100px"; // Need to set this in case the 90% is not selected
      var theWidth = "100px";
      var theVal = $('select[name="select-size"]').val();
        alert(theVal);  
        
      switch(theVal) {
        case "90%":
          theHeight = "583px";
          theWidth = "432px";
          break;
      }
      
      $('#video').css({
        'height': theHeight,
        'width': theWidth,
      });

    });    

  });
  
</script>
<style type="text/css">
<!-- aspect ratios 
100% - 648 x 480
 90% - 583 x 432
 80% - 518 x 384
 70% - 454 x 336
 60% - 389 x 288
 50% - 324 x 240
 40% - 260 x 192
-->

#video {
  width: 648px;
  height: 480px;
}
</style>
</head>
<body>
<div id="video">
  <video id="actual-video" autoplay >
      <source src="grdirectfinal.m4v" type="video/mp4" poster="grdirect_final2.png">
      <source src="grdirect_final.ogg" type="video/ogg" poster="grdirect_final2.png">
      <source src="grdirect_final2.webm" type="video/webm" poster="grdirect_final2.png">
    Your browser does not support the video tag.
  </video>
</div>
<div id="select-box">
  <select name="select-size" id="select-size">
    <option value="100%">100%</option>
    <option value="90%">90%</option>
    <option value="80%">80%</option>
    <option value="70%">70%</option>
    <option value="60%">60%</option>
    <option value="50%">50%</option>
    <option value="40%">40%</option>
  </select>
</div>
</body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39218608
Here is a corrected and cleaner version. I do not reload the videos

<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<style type="text/css">
#video {
  width : 648px;
  height: 480px;
}
</style>

<script src="http://code.jquery.com/jquery-1.10.0.min.js" type="text/javascript"></script>
<script>
var aspect_ratios = {
"100%": { "h":648, "w":480 },
"90%" : { "h":583, "w":432 },
"80%" : { "h":518, "w":384 },
"70%" : { "h":454, "w":336 },
"60%" : { "h":389, "w":288 },
"50%" : { "h":324, "w":240 },
"40%" : { "h":260, "w":192 }
} // note no comma after last item

$(function() { 
    $("#select-size").change(function() {
      var theVal = $(this).val();
      var ar = aspect_ratios[theVal] || aspect_ratios["100%"];
      $('#video').css({'height': ar.h,'width' : ar.w});
    });    
  });
  </script>
</head>
<body>
<div id="video">
  <video id="actual-video" autoplay >
      <source src="grdirectfinal.m4v" type="video/mp4" poster="grdirect_final2.png">
      <source src="grdirect_final.ogg" type="video/ogg" poster="grdirect_final2.png">
      <source src="grdirect_final2.webm" type="video/webm" poster="grdirect_final2.png">
    Your browser does not support the video tag.
  </video>
</div>
<div id="select-box">
  <select name="select-size" id="select-size">
    <option value="100%">100%</option>
    <option value="90%">90%</option>
    <option value="80%">80%</option>
    <option value="70%">70%</option>
    <option value="60%">60%</option>
    <option value="50%">50%</option>
    <option value="40%">40%</option>
  </select>
</div>

Open in new window

0
 

Author Closing Comment

by:leozayas
ID: 39219479
thank you julian....that is what i was looking for
thank you also m but i am a beginner not a dummy...lol...i left the top portion of the page code out so it wouldn't clutter the question too much but i did include it in the page...lol
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39219565
Did you try mine? I actually answered the same issues before Julian but also streamlined the script. I had not reloaded before I posted my version after lunch.

<script> is actually fine. Default is javascript anyway
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question