[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Select choice bind

Posted on 2013-06-03
5
Medium Priority
?
237 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
  • 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 60

Accepted Solution

by:
Julian Hansen earned 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses
Course of the Month19 days, 2 hours left to enroll

834 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