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
Solved

Select choice bind

Posted on 2013-06-03
5
229 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 55

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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

808 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