<header class="layer-bottom">
<div class="container">
<div class="row">
<div class="col-md-2"
style="padding: 0;">
<img src="resources/logo.png"
style="width: 60%;">
</div>
<div class="col-md-8 navBar">
<span ng-click="ads();" style="color: #fff;">
Ad on bill
</span>
<span class="divider">|</span>
<span ng-click="visibilityMessages();" style="color: #fff;">
Messages
</span>
<span class="divider">|</span>
<span ng-click="visibility();" style="color: #fff;">
Visibility
</span>
<span class="divider">|</span>
<span ng-click="pricePromotions()" style="color: #fff;">
Price Promotions
</span>
</div>
<div class="col-md-2" style="margin-top: 1.5%">
<!--<i class="fa fa-2x fa-bars" aria-hidden="true">-->
<span ng-bind="userObj.companyName"></span>
<button type="button" class="btn btn-default" ng-click="logout();">
<span class="glyphicon glyphicon-log-out"></span> Log out
</button>
</div>
</div>
</div>
</header>
I have a doubt in highlighting a text.Initially all the headings have the color specified it the style.When i click AdOnBill , color or font-size has to be changed.How can I do that?
Controller
scope.ads = function() {
location.path("/dashboard/messages");
};
scope.visibilityMessages = function() {
location.path("/dashboard/visibility_messages");
};
You can use ng-class or ng-style for this case, such as (ng-class):
<span ng-click="ads();" class="default" ng-class="{'change': isChangeStyle}">
Ad on bill
</span>
Controller:
$scope.isChangeStyle = false;
//
$scope.ads = function () {
$scope.isChangeStyle = true;
};
CSS:
.default {
color: #fff;
}
.change {
color: #000;
font-size: 20px;
}
You can use ng-class:
<span ng-class="{className: condition}">Ad on bill</span>
This JSFiddle demo shows well the use you want to make of it in your specific case.
<a ng-click="setRed()">Set "Ad on bill" red!</a>
<span ng-class="{red: isRed}">Ad on bill</span>
Where setRed() just do:
$scope.setRed = function() {
$scope.isRed = true;
}
You can use ng-style for this
The ngStyle directive allows you to set CSS style on an HTML element conditionally.
https://docs.angularjs.org/api/ng/directive/ngStyle
<span ng-click="ads();" style="color: #1ff;" ng-style="myObj">
Ad on bill
</span>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<span ng-click="ads();" style="color: #1ff;" ng-style="myObj">
Ad on bill
</span>
<br><br><br><br>
<span ng-click="visibility();" style="color: black" ng-style="myObj">
Remaining Tabs
</span>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.ads = function(){
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "30px",
"padding" : "20px"
}
}
$scope.visibility = function(){
$scope.myObj = {
"color" : "black",
}
}
});
</script>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
HERE IS THE WORKING DEMO
EDIT:
In the remaining methods,add
$scope.myObj = {
"color" : "#fff",
}
<span ng-click="visibility($event);" class="headerTabs" id="visibility">
Visibility
</span>
<span ng-click="pricePromotions($event);" class="headerTabs" id="pricePromotion">
Price Promotions
</span>
scope.visibility = function($event){
var tabs = document.getElementsByClassName("headerTabs");
for(var i = 0;i < tabs.length;i++) {
if($event.target.id === tabs[i].id)
$event.target.style.color = "#fff";
else
tabs[i].style.color = "";
}
};
This one worked :)
Related
<h2>Your TO DOs</h2>
<div class="list-group" ng-repeat="i in tasks track by $index">
<div href="#" class="list-group-item" style="overflow:auto;">
<span id={{$index}} style="background:{{i.priority}};padding:1%; border:#bfb9b9; border-style:dotted;">{{i.note}} </span>
<h5 style="float:right;">
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue;" ng-disabled = '{{i.priority==="red"}}' ng-click = 'impTask(i)' >Imp</button>
ng-disabled = '{{i.priority==="red"}}' this line in the code isn't functioning though on inspection through DOM, its value is being displayed "true".
Here is the complete code
https://gist.github.com/7a3c7fd977c115638d386097f7c48b72.git
You should not use annotation with ng-disabled
Change
FROM
ng-disabled = '{{i.priority==="red"}}'
TO
ng-disabled = 'i.priority==="red"
DEMO
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.tasks = [{note:"Do the laundry", priority:'yellow'},{note:"Meeting at 10.00", priority:'yellow'}];
$scope.removeTask = function(task) {
var removedTask = $scope.tasks.indexOf(task);
$scope.tasks.splice(removedTask, 1);
};
$scope.addTask = function(){
if($scope.newTask!= null && $scope.newTask!= "" )
$scope.tasks.push({note:$scope.newTask,priority:'yellow'});
$scope.newTask= "";
};
$scope.impTask = function(task) {
var editedTask = $scope.tasks.indexOf(task);
$scope.tasks.splice(editedTask, 1);
task.priority= "red";
$scope.tasks.unshift(task);
};
});
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="personCtrl" style="margin:5%;">
<div>
<form ng-submit="addTask()">
<input type="text" onClick="this.select()" placeholder="enter the task" ng-model="newTask"/>
<input type="submit" value="Add a new task" />
</form>
</div>
<h2>Your TO DOs</h2>
<div class="list-group" ng-repeat="i in tasks track by $index">
<div href="#" class="list-group-item" style="overflow:auto;">
<span id={{$index}} style="background:{{i.priority}};padding:1%; border:#bfb9b9; border-style:dotted;">{{i.note}} </span>
<h5 style="float:right;" >
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue;" ng-disabled = 'i.priority==="red"' ng-click = 'impTask(i)' >Imp</button>
</span>
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue; " ng-click = 'strikeTask(i)'>Done</button>
</span>
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue;" ng-click = 'editTask(i)' >Edit</button>
</span>
<a ng-click="removeTask(i)" style="padding-left:5px; padding-right:5px; color: red; font-weight: 800; background:#dad4d4";>X</a>
</div>
</div>
</body>
</html>
I have list of stories with images , content and title in ng-repeat.
When I click on particular story , I need a bootstrap model to open and values to be displayed . I am doing it by calling a function showStories(); But I couldnt do it . I am getting empty value since its globally declared as
$scope.selectedStoryPreview = "";
$scope.selectedStoryContent = "";
$scope.selectedStoryTitle = "";
Html :
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storyPreview">
<button><span>{{item.title}}</span>
</button>
</div>
JS:
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
Modal :
<div class="modal fade" id="storyPreview" role="dialog" data-keyboard="false" data-backdrop="static" style="padding-top: 8em;">
<div class="modal-dialog">
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;">close</button>
</div>
</div>
$scope.model is undefined. Set it as $scope.model = {} This way
you can dynamically add properties to it at compile time.
Moreover, you could use data-toggle="modal"
data-target="#viewdetails" as the action event to point to correct
modal.
Also, no need to pass individual properties as arguments in the
method showStories(item), you could send out complete object and
obtain its properties.
DEMO:
Click on the image to open modal.
function MyCtrl($scope) {
$scope.filteredStories = [{
id: 1,
images: 'sample1.png',
title: "sample1",
content: "content here..."
}, {
id: 2,
images: 'sample2.png',
title: "sample2",
content: "content here..."
}, {
id: 3,
images: 'sample3.png',
title: "sample3",
content: "content here..."
}, {
id: 4,
images: 'sample4.png',
title: "sample4",
content: "content here..."
}]
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body ng-app ng-controller="MyCtrl">
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storypreview">
<button><span>{{item.title}}</span>
</button>
</div>
<div class="modal fade" id="storypreview" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
If modal controller is different. Then send the value using resolve method. If the controller is same. Then I think it should display the values.
And provide the id of modal here :
<div class="modal-content" id="storyPreview" style="text-align: center;">
I'm applying two css classes onto my html, when I click on my span element.
right now I have a border and looks fine, I want keep this.
but:
so If I click in the Icon I said in the icon <i> the Icon color change for blue.
but I don't want remove the functionality of the span who contains the border.
thanks.
html + angular
<div ng-app>
<div>
<br>
<i ng-class='{"gamepad-red":tog==1}' class="fa fa-lg fa-gamepad"></i>
<span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span>
</div>
<div>
<br>
<i ng-class='{"gamepad-red":tog==2}' class="fa fa-lg fa-gamepad"></i>
<br/><span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span>
</div>
</div>
css:
.myclass {
border: dotted pink 3px;
}
.gamepad-red {
color: red;
}
.gamepad-blue {
color: blue;
}
jsfiddle: http://jsfiddle.net/zvLvg/286/
I have moved the effect of the span click to the wrapping div and used parent-child CSS to apply the red to the i element.
On click of the icon it triggers a separate boolean that controls a local class
iTog1 and iTog2 can be made to behave similar to tog if there can only be one selected
.selected-gamepad > span {
border: dotted pink 3px;
}
.selected-gamepad > i {
color: red;
}
.gamepad-blue,
.selected-gamepad .gamepad-blue{
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div ng-app>
<div ng-class="{'selected-gamepad':tog==1}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog1}" ng-click="iTog1 = !iTog1"></i>
<span id='1' ng-click='tog=1'>span 1</span>
</div>
<div ng-class="{'selected-gamepad':tog==2}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog2}" ng-click="iTog2 = !iTog2"></i>
<span id='2' ng-click='tog=2'>span 2</span>
</div>
</div>
I have been struggling with an angular-js problem, I am unable to figure out why my ng-click is not sending through any values to the jquery function that is hooked up to it. It triggers the jquery fine, but when it comes into the jquery no variables comes with it!
So some information first of all:
I am using angular-bootstrap-calendar Link to Project (This is what I am having issues with)
Using angular-bootstrap-calendar I have implemented a custom day template using instructions from github Instruction Page
The ng-click triggers my code correctly though no information is passed from the click to my customer event.
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(day)">
</mwl-calendar>
vm.dateClicked = function (day) {
alert("Do Something");
};
Results
day = undefined
Versions:
"angular-bootstrap-calendar": "0.19.3",
"angular": "1.5.0",
"font-awesome": "4.5.0",
"moment": "2.12.0",
"interact.js": "1.2.6",
"angular-bootstrap": "1.2.4",
"angular-touch": "1.5.0",
"angular-animate": "1.5.0",
Full Code Examples
ManRoster.cshtml
<div class="col-lg-12">
<div class="col-lg-12 panel panel-default">
<div ng-app="UserCal" class="textfix">
<script id="calendarWeekView.html" type="text/ng-template">
<div class="cal-week-box" ng-class="{'cal-day-box': vm.showTimes}">
<div class="cal-row-fluid cal-row-head">
<div class="cal-cell1"
ng-repeat="day in vm.view.days track by $index"
ng-class="{
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-today': day.isToday,
'cal-day-future': day.isFuture}"
mwl-element-dimensions="vm.dayColumnDimensions"
mwl-droppable
on-drop="vm.eventDropped(dropData.event, day.date)">
<div id="resourcescount">
{{ day.events.length }}
</div>
<span ng-bind="day.weekDayLabel">
</span>
<br>
<small>
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
</small>
</div>
</div>
<div class="cal-day-panel clearfix" ng-style="{height: vm.showTimes ? (vm.dayViewHeight + 'px') : 'auto'}">
<mwl-calendar-hour-list day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
day-width="vm.dayColumnDimensions.width"
view-date="vm.viewDate"
on-timespan-click="false"
ng-if="vm.showTimes">
</mwl-calendar-hour-list>
<div class="row">
<div class="col-xs-12">
<div class="cal-row-fluid"
ng-repeat="event in vm.view.events track by event.$id">
<div ng-class="'cal-cell' + (vm.showTimes ? 1 : event.daySpan) + (vm.showTimes ? '' : ' cal-offset' + event.dayOffset) + ' day-highlight dh-event-' + event.type + ' ' + event.cssClass"
ng-style="{
top: vm.showTimes ? ((event.top + 2) + 'px') : 'auto',
position: vm.showTimes ? 'absolute' : 'inherit',
width: vm.showTimes ? (vm.dayColumnDimensions.width + 'px') : '',
left: vm.showTimes ? (vm.dayColumnDimensions.width * event.dayOffset) + 15 + 'px' : ''
}"
data-event-class
mwl-draggable="event.draggable === true"
axis="vm.showTimes ? 'xy' : 'x'"
snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: 30} : {x: vm.dayColumnDimensions.width}"
on-drag="vm.tempTimeChanged(event, y)"
on-drag-end="vm.weekDragged(event, x, y)"
mwl-resizable="event.resizable === true && event.endsAt && !vm.showTimes"
resize-edges="{left: true, right: true}"
on-resize-end="vm.weekResized(event, edge, x)">
Shift
<strong ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true" ng-show="vm.showTimes"></strong>
<a href="javascript:;"
ng-click="vm.onEventClick({calendarEvent: event})"
class="event-item"
ng-bind-html="vm.$sce.trustAsHtml(event.title)"
uib-tooltip-html="event.title | calendarTrustAsHtml"
tooltip-placement="left"
tooltip-append-to-body="true">
</a>
</div>
</div>
</div>
</div>
<div id="ResourceInfo">
This will be the select panel
</div>
</div>
</div>
</script>
<!-- This is the end of the testing script -->
<div ng-controller="Cal as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(date)">
</mwl-calendar>
<br />
</div>
</div>
</div>
</div>
ManRoster.js
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal);
function populateCal($http, calendarConfig) {
var resultset = [];
var userID = 1;
var vm = this;
calendarConfig.templates.calendarWeekView = 'calendarWeekView.html';
vm.calendarView = 'week';
vm.viewDate = new Date();
vm.events = [];
vm.isCellOpen = true;
vm.toggle = function ($event, field, event) {
$event.preventDefault();
$event.stopPropagation();
event[field] = !event[field];
};
vm.dateClicked = function (day) {
alert("Do Something");
};
}
Plunker As Requested
Let's try this one. I've created a custom directive to capture click events, it seems to be capturing the date consistently for me.
http://plnkr.co/edit/1XlQkgj5eJeuy728bEwI?p=preview
Add a directive (i just called it testDirective):
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal)
.directive('testDirective', testDirective);
emphasized text
function testDirective() {
return {
link: function(scope,elem,attrs) {
angular.element(elem).on('click', function (evt) {
alert('You clicked on: ' + scope.vm.viewDate)
});
}
};
}
Add it to the mwl-calendar element:
<mwl-calendar test-directive events="vm.events"
Initial Idea:
Alright, I think I have it now. In index.html, change
on-view-change-click="vm.dateClicked(date)"
to
on-view-change-click="vm.dateClicked(this.vm.viewDate)"
It should look like this:
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(this.vm.viewDate)">
</mwl-calendar>
Plunker: http://plnkr.co/edit/kKpjoCFvaR6xBjQL1bT6?p=preview
This is source code that viewing from my web page :
<div id="webcontainer">
<div id="webheader"></div>
<div id="webbody">
<div id="webbodycontainer"></div>
</div>
<div id="webfooter"></div>
</div>
Here is the view :
var RegisterView = Backbone.View.extend({
el : $("#webbodycontainer"),
initialize : function(){
},
events : {
'click #register' : 'registerUser'
},
registerUser : function(){
alert("hi");
},
render : function(){
$("#webheader").html(headerTem);
$("#webfooter").html(footerTem);
var _registerDes = _.template(RegisterDescriptionTem);
this.$el.append(_registerDes);
}
});
return RegisterView;
_registerDes content is shown in the webpage but not in a DOM, So click event on a #register button is not fired. Have I missed something?
Here is RegisterDescriptionTem template :
<div class="registerleftpanel">
//....
</div>
<div id="rightpanel" style="float:right; padding-right:10px;">
<div id="registerPanel" style="width: 528px;">
<div class="cartheadertitle loginheadertitle">Register New Account</div>
<br>
<form id="registerForm" style="margin-bottom: 10px;">
//......
<div style="position: relative; float: left; left: 90px; top: -3px;">
<input type="button" value="Register" class="btn" id="register">
</div>
</form>
</div>
</div>