?
Solved

Select choice bind

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

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
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 a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

777 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