positionned correctly the search box - its position is now calculated in function popcorn-port
authorhamidouk
Wed, 16 Nov 2011 17:19:30 +0100
branchpopcorn-port
changeset 261 7e7a44d82a81
parent 260 6603758fe69b
child 262 dfac630f82db
positionned correctly the search box - its position is now calculated in function of the position of the search button.
src/js/widgets/playerWidget.js
src/templates/search.html
--- a/src/js/widgets/playerWidget.js	Wed Nov 16 17:18:11 2011 +0100
+++ b/src/js/widgets/playerWidget.js	Wed Nov 16 17:19:30 2011 +0100
@@ -12,10 +12,7 @@
   var width = this.width;
 	var height = this.height;
 	var heightS = this.height-20;
-	
-  var searchBox = Mustache.to_html(IriSP.search_template);
-  this.selector.append(searchBox);
-  
+	  
 	var Player_templ = Mustache.to_html(IriSP.player_template, {"share_template" : IriSP.share_template});
   this.selector.append(Player_templ);		
     
@@ -58,6 +55,11 @@
   }).click(function() { self.muteHandler.call(self); } );
 
   this.selector.find(".ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
+  
+  var searchButtonPos = this.selector.find(".ldt-CtrlSearch").position();
+  var searchBox = Mustache.to_html(IriSP.search_template, {margin_left : searchButtonPos.left + "px"});
+  this.selector.append(searchBox);
+  
 };
 
 /* Update the elasped time div */
@@ -128,7 +130,7 @@
     var self = this;
 
     /* show the search field if it is not shown */
-  	if ( this._searchBlockOpen == false ) {
+  	if ( this._searchBlockOpen == false ) {      
       this.selector.find( ".ui-icon-search" ).css( "background-position", "-144px -112px" );
       
       this.selector.find(".LdtSearch").show(100);
--- a/src/templates/search.html	Wed Nov 16 17:18:11 2011 +0100
+++ b/src/templates/search.html	Wed Nov 16 17:19:30 2011 +0100
@@ -1,6 +1,6 @@
 {{! template for the search container }}
 <div class='LdtSearchContainer'
-	style='margin-left: 445px; position: absolute; margin-top: -26px;'>
+	style='margin-left: {{margin_left}}; position: absolute; margin-top: -60px;'>
 	<div class='LdtSearch'
 		style='display: none; background-color: #EEE; width: 165px; boder: 1px; border-color: #CFCFCF; position: absolute; text-align: center;'>
 		<input class='LdtSearchInput'