I need to set the background property of a label for the css property in a angular controller.js file.
I am using jquery to update the background.
Below is my code: Here if $scope.isInside is true I need one color and if false I need another. This .norow is applied to a DIV in HTML.
The issue is it doesn't work consistently. Sometime the backgound color gets set and sometimes it doesn't.
angular.element(document).ready(function () {
if ($scope.isinside){
$(".norow label").css("background-color","#ffffdd");
}
else{
$(".norow label").css("background-color","#ffffff");
}
});
Try ng-style:
<label ng-style="{'background-color': isinside ? '#ffffdd': '#ffffff'}" > something </label>
You can also use ng-class:
<label ng-class="{'grey-bg': isinside, 'white-bg': !isinside}"> something </label>
Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,
adding a new class defined in external style sheet
modifying its own class of stripe-button in external style sheet
and editing it inline with style=""
But I cannot get the button to change its style.
It looks like it might be possible with the custom integration instead of the simple integration (source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.
Button with default style:
Does anyone have experience with this?
(I'm integrating into Ruby on Rails if that makes any difference.)
None of those worked for me. I ended up hiding the button in javascript and making a new one.
<form action="/your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-amount="999"
data-name="zzz"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="yourCustomClass">Buy my things</button>
</form>
Search for this class:
.stripe-button-el span
I think this is where you have to modify your own button's style.
You may overwrite it within your own external css file.
Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;
.stripe-button-el { display: none }
This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.
The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.
button.stripe-button-el,
button.stripe-button-el>span {
background-color: #EB649C !important;
background-image: none;
}
You should use data-label its part of the regular stripe Checkout API:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
data-amount="10000"
data-label="Proceed to Pay with Card"
...
...
data-locale="auto">
</script>
Using jQuery, you can also simply scale the button like this:
<script>
$(function() {
$(".stripe-button-el").css({'transform': 'scale(2)'});
});
</script>
Or replace it by a button with any image you want, like this:
<script>
$(function() {
$(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
});
</script>
You can remove the button styles with Jquery and add your own. Worked a charm for me:
<script type="text/javascript">
$(document).ready(function(){
$(".stripe-button-el span").remove();
$("button.stripe-button-el").removeAttr('style').css({
"display":"inline-block",
"width":"100%",
"padding":"15px",
"background":"#3fb0ac",
"color":"white",
"font-size":"1.3em" }).html("Sign Me Up!");
});
</script>
The .stripe-button-el span actually works.
But you need to add !important in CSS to overwrite the default CSS.
You can try this,
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Pay with card is inside a span.
For those of you who want to change the background color of the button, make sure you do something like
.stripe-button-el span {
background: #5e366a !important;
background-image:none !important;
background-color: #5e366a !important;
}
in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.
I have a simple example at plunker. I have an ng-show on one element and a select as another element. The select should toggle showing/hiding the other (input) element. Initially setting the select to Yes shows the other input element as expected. Then setting the select to No does toggle the scope value to false as expected, but does not hide the input element.
I've scoured the other posts related to this and the ones I found are around having or not having {{}} on the ng-show (I don't as it should be) or not having the value on $scope (which I do). I thought is may be a $scope.apply() issue, but then why does the 1st change to Yes work? Also adding the apply still does not make the No(false) work. What am I missing?
TIA!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.conf = {};
});
You need to check ng-show="conf.is_ieee=='true'" instead of ng-show="conf.is_ieee". Check this plunker.
<div class="col-md-4" ng-show="conf.is_ieee=='true'">
<label class="form-label">IEEE Conference ID:</label>
<input type="text" class="form-control" name="ieee-id" ng-model="conf.ieee_id"/>
</div>
http://plnkr.co/edit/MXvuhSPB0ChJyDrvPI55?p=preview
There seems to be a bug in Firefox (which has been marked as resolved but fails on my FF12) that causes <select> elements to work incorrectly when their position has been altered with -moz-transform. This can be replicated with this simple test case:
<style type="text/css">
div {
-moz-transform:translate(380px,140px);
}
</style>
<div>
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
This causes the select box to be rendered in the correct position, but all of the options are unselectable with the mouse. Selecting them using the keyboard works fine.
Is there any other workaround for this problem than removing all the transformations? The problem does not exist for any other browser.
I've had problems like this before with elements that have been transformed, and I solved it with some JavaScript and extra CSS.
document.addEventListener("transitionend", function(event) {
var style = event.target.style;
if (event.propertyName.substr(-14) == "transitionend") {
style.position = "absolute";
style.left = "200px";
}
});
You need to bind mozTransitionEnd, webkitTransitionEnd, etc.
I currently have an asp form that uses jquery for two elements: an image upload and a datapicker.
The code that implements the image upload is
$(function() {
$("#wcpImage").makeAsyncUploader({
upload_url: "/Business/ImageUpload",
flash_url: '../../Scripts/swfupload.swf',
button_image_url: '../../Content/images/blankButton.png',
disableDuringUpload: 'INPUT[type="submit"]'
});
});
With an input element <input type="file" id="wcpImage" name="wcpImage" />.
The code that implements the Datepicker using the JQueryUI DatePicker widget is
$().ready(function() {
$('#Business_Work_Cover_Expiry_Date').datepicker({ dateFormat: 'dd/mm/yy' });
});
With an input element generated by <%= Html.TextBoxFor(m => Model.Business.Liability_Expiry_Date) %>
The datepicker pops up when users enter the text box for the expiry date. The issue I'm having is that the buttons for the image upload are appearing over the top of the datepicker.
Can I use CSS z-index to fix this and how?
The use of the CSS z-index is most likely the only way to hand these types of issues.
This might do it:
<style type="text/css">
#ui-datepicker-div {
z-index: 9999999;
}
</style>
Turns out that it was because the buttons were flash objects being drawn with a wmode of Window, which means that z-index will have no effect as the button is rendered over the top of everything. Set the wmode to Transparent in the javascript and now it works.
Found the answer here.