Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Select choice bind

Posted on 2013-06-03
5
Medium Priority
?
235 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 59

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article will show, step by step, how to integrate R code into a R Sweave document
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

609 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