I want to know how to set background color on the dates in a datePicker; I followed a lot of tutorials but I didn`t get any result.
I have this datePicker:
<div id="datepicker"></div>
Just in case Mongoose's link goes bad someday it is best to post full answers here on StackOverflow:
Here is a working code snippet and screenshot of what the datepicker looks like using the beforeShowDay function of the jQueryUI datepicker:
$(document).ready(function() {
var SelectedDates = {};
SelectedDates[new Date('04/05/2016')] = new Date('04/05/2016');
SelectedDates[new Date('05/04/2017')] = new Date('05/04/2017');
SelectedDates[new Date('06/06/2018')] = new Date('06/06/2018');
$('#txtDate').datepicker({
beforeShowDay: function(date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
}
else {
return [true, '', ''];
}
}
});
});
body
{
font-family:Arial;
font-size : 10pt;
padding:5px;
}
.Highlighted a{
background-color : Green !important;
background-image :none !important;
color: White !important;
font-weight:bold !important;
font-size: 12pt;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<input type='text' id='txtDate' />
fiddle: http://jsfiddle.net/jquerybyexample/cqf9d/?utm_source=website&utm_medium=embed&utm_campaign=cqf9d
Documentation: Jquery ui documentation on beforeShowDay
Related
I'm working on my portfolio and need to switch between to stylings states of an element. Currently, I'm trying to make it work on the following example. In this particular case, my goal is to click the button and switch between green and red background with every click. But something won't work. I can switch from green to red, but not from red to green. What am I missing?
<button id="button">Toggle</button>
<div class="test" id="test"></div>
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.background = "green") {test.style.background = "red";} else {test.style.background = "green";}};
Codepen Demo https://codepen.io/yanniksturm/pen/rNVmqJe
Thanks a lot!
In if condition there should be double (==) equal sign and also check by backgroundColor instead of background because of some browsers has more properties with background like background: green none repeat scroll 0% 0%; so condition will not execute.
I recommend use backgroundColor instead of background.
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.backgroundColor == "red") {
test.style.backgroundColor = "green";}
else {
test.style.backgroundColor = "red";
}
}
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
<button id="button">Toggle</button>
<div class="test" id="test"></div>
I'm using templates in my view and I'd like to direct the user to a print template. Common usage:
<div data-bind="template: { name: 'print' }"></div>
but I want this script to appear alone and not with other content.
Is it possible to go to my print script instead of pulling the script into a div, which is what the code above does. Thank you.
You could put a boolean around the "normal" content that hides everything else whenever the print template is active.
<div data-bind="visible: noprint()">main site</div>
Redirect to a different file that holds the print layout with its own styling.
Create your page as such that the print-css actually renders the page as expected. Make sure the print styles are always at the bottom of your css
#media print {
body {
color: #000;
background-color: #fff;
}
}
A bit more advanced is working with components, you could use the same data for displaying everything you need but when the user expects a printable view just switch out the screenlayout-component to the printlayout-component
screen
print
<div data-bind="component: layoutType"></div>
Here's what I ended up doing...
var viewModel = {
selectedTemplate: ko.observable('ViewContent'),
subTemplate: function (item) {
this.selectedTemplate(item);
},
goBack: function () {
this.selectedTemplate('ViewContent');
},
printLandscape: function () {
this.selectedTemplate('PrintContent');
alert("Please change page orientation to Landscape");
javascript: window.print();
},
}
ko.applyBindings(viewModel);
.print {
margin: 0px;
padding: 0px;
width: 900px; /* or width: 9.5in; */
height: 670px; /* height: 7in; */
clear: both;
page-break-after: always;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="getContent" type="text/html">
<!-- ko if: ($root.selectedTemplate() == "ViewContent") -->
<div data-bind="template: { name: 'viewContent' }"></div>
<!-- /ko -->
<!-- ko if: ($root.selectedTemplate() == "PrintContent") -->
<div data-bind="template: { name: 'printContent' }"></div>
<!-- /ko -->
</script>
<script id="viewContent" type="text/html">
<div>Here's the view or display content</div>
Print
</script>
<script id="printContent" type="text/html">
<div>Print | Back</div>
<div class="print">Here's the print content</div>
</script>
<div data-bind="template: { name: 'getContent' }"></div>
I'm really stuck in this subject and maybe someone can help me out. I can always generate a token with stripe successfully but somehow my charge function doesn't wan't to work. I'm using the stripe element from their official documentation.
How can I find out where I have to search for the mistake because I don't get any error from the code. In the stripe dashboard I can see the generated tokens, that's why I think until this point there is everything right but I guess my mistake is in the view function. More precise I think the view function doesn't get the generated token from the javascript. Many thanks for your help in advance!
stripe_form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'css/stripe.css' %}">
<title>Document</title>
</head>
<body>
<div id="collapseStripe" class="wrapper">
<script src="https://js.stripe.com/v3/"></script>
<form action="" method="post" id="payment-form">
{% csrf_token %}
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="StripeElement StripeElement--empty">
<div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame4" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-bfbabea0af3ed365b5fe9ce78692fd3c.html#style[base][color]=%2332325d&style[base][fontFamily]=%22Helvetica+Neue%22%2C+Helvetica%2C+sans-serif&style[base][fontSmoothing]=antialiased&style[base][fontSize]=16px&style[base][::placeholder][color]=%23aab7c4&style[invalid][color]=%23fa755a&style[invalid][iconColor]=%23fa755a&componentName=card&wait=false&rtl=false&keyMode=test&origin=https%3A%2F%2Fstripe.com&referrer=https%3A%2F%2Fstripe.com%2Fdocs%2Fstripe-js%2Felements%2Fquickstart&controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; height: 19.2px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div>
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div>
<div id="stripe-token-handler" class="is-hidden">Success! Got token: <span class="token"></span></div>
{% load static %}
<script src="{% static 'js/stripe.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function toggleDisplay() {
var x = document.getElementById("collapseStripe");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
</script>
</body>
</html>
views.py
import stripe
stripe.api_key = settings.STRIPE_SECRET_KEY
def charge (request):
publishKey = settings.STRIPE_PUBLISHABLE_KEY
if request.method == 'POST':
try:
token = request.POST['stripeToken']
charge = stripe.Charge.create(
amount=999,
currency='usd',
description='Example charge',
source=token,
)
return redirect(request, 'registration/stripe_form.html')
except stripe.CardError as e:
message.info(request, "Your card has been declined.")
return render(request, 'registration/stripe_form.html')
stripe.js
var stripe = Stripe('pk_test_');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
var successElement = document.getElementById('stripe-token-handler');
document.querySelector('.wrapper').addEventListener('click', function() {
successElement.className = 'is-hidden';
});
// Not in demo.
function stripeTokenHandler(token) {
successElement.className = '';
successElement.querySelector('.token').textContent = token.id;
}
Looking through http://foundation.zurb.com/docs/components/section.html, is there anyway I can add horizontal scroll for Section headers ( Tabs) . I am looking something like http://www.seyfertdesign.com/jquery/ui.tabs.paging.html in foundation sections with horizontal scroll and continue to use accordion in small screen
I found a solution for those interested : https://codepen.io/gdyrrahitis/pen/BKyKGe
.tabs {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
.tabs-title {
float: none;
display: inline-block;
}
}
if someone needs an angularjs with jquery implementation, below code can help you, for pure jquery replace angularjs directive method with a native js method with respective attributes.
I tried to search for similar implementation but found nothing, so I have written a simple angular directive which can transform a foundation CSS tabs to scrollable tabs
angular.module("app.directives.scrollingTabs", [])
.directive("scrollingTabs", ScrollingTabsDirective);
//#ngInject
function ScrollingTabsDirective($timeout, $window) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if(attr.scrollingTabs == "true"){
element.addClass('scrolling-tabs-container');
element.find('.nav-buttons').remove();
element.append('<div class="scrolling-tabs nav-buttons nav-buttons-left"></div>');
element.append('<div class="scrolling-tabs nav-buttons nav-buttons-right"></div>');
let scrolledDiv = $(element).find('.tabs');
let scrolled;
let scrolling;
let scrollFn = (step, animationTime, cb) => {
scrolled = Math.max(scrolled + step, 0);
scrolledDiv.animate({
scrollLeft: scrolled
}, animationTime, ()=>{
if (scrolling) {
scrollFn(step, animationTime, cb)
}else{
if(cb){cb()}
}
});
};
let checkActiveNavButtonsClasses = () => {
scrolled = scrolledDiv.scrollLeft();
let scrollWidth = scrolledDiv.get(0).scrollWidth;
let scrolledDivWidth = scrolledDiv.get(0).clientWidth;
if(scrollWidth > scrolledDivWidth){
element.addClass('nav-active');
scrollWidth = scrolledDiv.get(0).scrollWidth;
if(scrolled == 0){
element.removeClass('nav-active-left').addClass('nav-active-right')
}else if(scrolled > 0 && scrolled + scrollWidth < scrolledDivWidth){
element.addClass('nav-active-left').addClass('nav-active-right');
}else if(scrolled > 0 && scrolled + scrollWidth >= scrolledDivWidth){
element.addClass('nav-active-left').removeClass('nav-active-right');
}else{
element.removeClass('nav-active-left').removeClass('nav-active-right')
}
}else{
element.removeClass('nav-active-left').removeClass('nav-active-right').removeClass('nav-active');
}
};
let scrollToActiveTab = () => {
let activeDD = scrolledDiv.find('dd.active');
let tabsOffset = scrolledDiv.offset();
let activeTaboffset = activeDD.offset();
let activeTabwidth = activeDD.width();
let scrolledStep = activeTaboffset.left - tabsOffset.left - scrolledDiv.width() + activeTabwidth;
scrollFn(scrolledStep, 100, checkActiveNavButtonsClasses);
};
element.find(".nav-buttons.nav-buttons-left")
.off("click.scrolling")
.on("click.scrolling", (event)=>{
event.preventDefault();
scrolling = false;
scrollFn(-100, 100, checkActiveNavButtonsClasses);
})
.off("mouseover.scrolling")
.on("mouseover.scrolling", function (event) {
scrolling = true;
scrollFn(-2, 1, checkActiveNavButtonsClasses);
})
.off("mouseout.scrolling")
.on("mouseout.scrolling", function (event) {
scrolling = false;
});
element.find(".nav-buttons.nav-buttons-right")
.off("click.scrolling")
.on("click.scrolling", (event)=>{
event.preventDefault();
scrolling = false;
scrollFn(100, 100, checkActiveNavButtonsClasses);
})
.off("mouseover.scrolling")
.on("mouseover.scrolling", function (event) {
scrolling = true;
scrollFn(2, 1, checkActiveNavButtonsClasses);
})
.off("mouseout.scrolling")
.on("mouseout.scrolling", function (event) {
scrolling = false;
});
$timeout(()=>{
checkActiveNavButtonsClasses();
scrollToActiveTab()
},1000);
$($window).off('resize.scrolling').on('resize.scrolling', _.debounce(()=> {
checkActiveNavButtonsClasses();
}, 500));
scope.$on('$destroy', function() {
$($window).off('resize.scrolling');
});
}
}
}}
css:
.scrolling-tabs-container {
position: relative;
.tabs {
overflow-x: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
display: block;
margin-right: 18px;
dd {
display: inline-block;
float: none;
margin: 0px -3px 0px 0px;
}
.tabs-title {
float: none;
display: inline-block;
}
}
.scrolling-tabs {
&.nav-buttons {
display: none;
position: absolute;
width: 19px;
height: 38px;
border: 1px solid #c1c1c1;
top: 1px;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0.4;
cursor: pointer;
&:hover {
opacity: 1;
&:before {
color: #444;
}
}
&:before {
position: absolute;
left: 7px;
top: 8px;
color: #777;
}
&.nav-buttons-left {
left: 0;
&:before {
content: '<';
}
}
&.nav-buttons-right {
right: 18px;
&:before {
content: '>';
}
}
}
}
&.nav-active{
.tabs{
margin-right: 36px;
margin-left: 18px;
}
.scrolling-tabs {
&.nav-buttons {
display: inline-block !important;
}
}
}
&.nav-active-left{
.scrolling-tabs{
&.nav-buttons-left{
opacity: 0.8;
}
}
}
&.nav-active-right{
.scrolling-tabs{
&.nav-buttons-right{
opacity: 0.8;
}
}}}
HTML: Foundation Tabs template.
<tabset class="list-tabs" scrolling-tabs="true">
<tab heading="tab1"></tab>
<tab heading="tab2"></tab>
<tab heading="tab2"></tab>
</tabset>
Before you start you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. These come with foundation package so just uncomment them in your footer or include them accordingly.
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
The foundation documentation has all of the information for this :
http://foundation.zurb.com/docs/components/section.html#panel2
This will get you your section tabular headers. You then want to manage the content to be scrollable.
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
This content here will be the area to work on, try adding a new class called .scrollable
Within this class use something like:
.scrollable{
overflow:scroll;
}
You may want to add some more to this however this will get you started. Your HTML should now look like this :
<div class="content scrollable" data-section-content>
<p>Content of section 1. This content will be scrollable when the content has exceeded that of the div size. </p>
</div>
This this is what you are looking for.
I just got started with Raphael, but I don't get it right to make multiple canvases in ScaleRaphael
(I#m using this to make the site after responsive > are there alternatives for that?
Multiple ScaleRaphael Canvases: http://jsfiddle.net/karo/gMyP5/13/
or full view: http://jsfiddle.net/karo/gMyP5/13/embedded/result/
A strange thing happens here.
The red circle should be in the 2nd div but if you look in the code with eg. firebug in the fullview then you see that both svgs are in the inside a Why is that?
Do you have any idea for me?
Thanks Kaor
my code:
HTML
<div id="wrapper">
<div id="paper"></div>
<br>
<div id="paper2"></div>
</div>
JavaScript:
var paper = new ScaleRaphael("paper",200,200);
var circle = paper.circle(100, 100, 60).attr({fill:'red'});
var paper2 = new ScaleRaphael("paper2",200,200);
var circle2 = paper2.circle(50, 50, 30).attr({fill:'black'});
function resizePaper(){
var win = $(this);
paper.changeSize(win.width(), win.height(), true, false);
paper2.changeSize(win.width(), win.height(), true, false);
}
resizePaper();
$(window).resize(resizePaper);
CSS
#wrapper
{
position:relative;
}
#paper {
background-color: lightgray;
width:100%;
height:200px;
position:relative!important;
}
#paper2
{
background-color: orange;
width:100%;
height:100px;
position:relative!important;
}
svg
{
position:absolute!important;
top:0;
left:0;
}
ScaleRaphael only supports one canvas. In the code you can see it re-referencing the first existing svggroup or vmlgroup element.
You do not need ScaleRaphael to do what you are doing. Since version 2 Raphael has included Paper.setViewBox and it always included Paper.setSize, which together do this already.
I found an issue and a workaround how it works....
Have a look here: http://jsfiddle.net/karo/r4qvt/12/
I have first the paper div and then the red div
<div id="paper"></div>
<div id="red"></div>
</div>
</div>
And if I make the redpaper for the div "red" and the rectangle in it before I make the paperGrey and "talk to the" first div. THEN IT WORKS
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
If I do it the OTHER WAY ROUND IT DOESNT WORK
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
...strange, but I found a solution ;)