At the moment I have 3 images and when hovered they have a border around them, what I want is when the user clicks the image the hovered style remains on that image, I tried using :active but to no avail.
Here is the CSS code:
.portfolio-image{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
.portfolio-image:hover{
border:1px solid #123;
box-shadow:none;
}
and the fiddle: http://jsfiddle.net/N22Jc/
:active only stays in effect when the user has the mouse pressed down on the element.
You will need to use JavaScript to accomplish this.
Try this, CSS:
fieldset{
border:0px; padding:0px;
}
img.style1{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
img.style2{
border:1px solid #123;
box-shadow:none;
}
JavaScript (head):
`function changeStyle(id, newClass){
document.getElementById(id).className = newClass;
}
function changeOther1(newClass){
document.getElementById("i1").className = newClass;
}
}
HTML:
`<fieldset class="radios"><label for="one" class="label_radio">
<img src="yourimage.jpg" id="i1" class="style1" onclick="changeStyle(this.id, 'style2');">
<input name="number" id="one" value="" type="radio" /></label></fieldset>
I didn't test the code, but you get the idea. (I used radios, because I assume you want these to be used in a form?)
If you want to give the focus on an element by clicking on it , that doesn't usually take focus unlike form elements, You need to add the tabindex attribute and set it to 0 in order to have a div or an img to be able to take the focus and use in CSS :focus.
In your fiddle , you draw a border on a div that holds a link that holds an image. the div has no tabindex.
When you click this box , this is the link that catch the click, not the div nor the image , and off you go and :focus is not usable like this.
You could use :target if structure allows you to do so via CSS, DEMO.
instead using nth-child(x) as in demo , you could use single ids on your boxes to select them clearly and not mind in wich number position they stand.
Here's a jQuery solution if you're interested and here's a FIDDLE
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
img {
width: 150px;
height: 150px;
margin: 20px;
cursor: pointer;
border: 1px solid gray;
}
.active {
border: 1px solid red;
}
<script>
(function($) {
$('.item').click(function() {
$(this).addClass('active').siblings('.item').removeClass('active');
});
/* Requires jQuery UI
$('.item').click(function() {
$(this).switchClass('item','active',300).siblings('.active').switchClass('active','item',300);
});
*/
})(jQuery);
</script>
*Note: Put script just before the </body> tag.
Of course to be able to use jQuery you must include jQuery library in the <head> section of your HTML document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- And if you want to use script above which requires jQuery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
*Note: You can also download jQuery & jQuery UI libraries and instead CDN versions you'll be able to load local versions. Download jQuery - Download jQuery UI
If you decide to use local versions. download them, put them in the root folder of your site and include them like below
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui-1.10.4.min.js"></script>
</head>
Also you can put the libraries in folder e.g. js or scripts and then just change path to your local libraries versions
<head>
<script src="scripts/jquery-1.11.0.min.js"></script>
<script src="scripts/jquery-ui-1.10.4.min.js"></script>
</head>
That's it, if you decide to use jQuery and if you have additional questions, ask ;)
Related
I would like to customise the Apple-Pay button that comes with Woocommerce/Stripe. By default the button has a 4px border-radius, which I would like to change to 0px. Additionally the button is within a wrapper and I would like to change its padding-top to 0px. I wonder if this can be amended through CSS? Below is the source HTML code (any hint as to how to progress would be greatly appreciated).
<div id="wc-stripe-payment-request-wrapper" style="clear:both;padding-top:1.5em;display:none;">
<div id="wc-stripe-payment-request-button" " class="StripeElement">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
Try adding the following CSS:
#wc-stripe-payment-request-button {
background-color: black;
border: solid black 1px;
}
Does that provide the desired appearance?
It seems like stripe for Woocommerce loads the payment request buttons through an iframe from js.stripe.com ... unfortunately it is not possible to stylize content in an iframe which comes from a different domain. I read this page on iframe style for reference. #wc-stripe-payment-request-button selector which woocommerce provides is the id to a DIV which contains the iframe (payment request buttons). Find my Pseudo element solution below:
EDIT: Here is what im using.. It has all my styles in it, so adjust them to your liking but it works great. Let me know if you have any questions.
Note: My cart background is white and my payment buttons are set to 60px height dark style in Woocommerce settings. You might possibily need to add media queries to adjust for your theme break points but its fairly responsive out of box. If you do not want the outline with "express checkout" just delete this piece of code "#wc-stripe-payment-request-button::after{CSS styles}".. Thought I would add it incase someone has an interest to "copify" Cheers.
Screen shot of the final product
#wc-stripe-payment-request-button-separator {font-size:80%; margin:10px 0px 8px 0px!important;
color:#bababa;
padding:0px!important;
}
#wc-stripe-payment-request-button{outline: 3px solid #E6E6E6;outline-offset:18px;padding:1px 5px 0px 5px;transform:scale(.8);
}
#wc-stripe-payment-request-button::before {content:'';
width:99%;
height:66px;
position:absolute;
z-index:999;
bottom:-3px;
left: calc(50% - 49.5%);
pointer-events: none;
border:7px solid #fff;
outline:4px solid #fff;
background:rgb(255,255,255,.6);
}
#wc-stripe-payment-request-button::after {content:'EXPRESS CHECKOUT';position:absolute;
background:#fff;
font-size:87%;
color:#aaaaaa;
font-family: 'Oswald', sans-serif !important;letter-spacing:.12em;
display:block;
left: calc(50% - 82px);
font-weight:400;
padding:0px 4px 0px 8px;
margin:-96px 0px 0px 0px;
}
Simple and best styling for apple pay button that is totally adjustable in all layouts(iPhone/MacBook). Its currently running on my website.
Here is the CSS
#applePay {
width: 100%;
height: 50px;
display: none;
-webkit-appearance: -apple-pay-button;
-apple-pay-button-style: black;
-apple-pay-button-type: book;
}
Here is the HTML
<div id="apple-pay-web">
<div class="col-xl-12"><label>Pay With ApplePay</label></div>
<div class="col-xl-12" style="text-align: center;padding: 0">
<button type="button" id="applePay" lang="en"></button>
<div id="got_notactive" class="alert alert-primary apw" role="alert"><?= Yii::t("app", 'ApplePay is possible on this browser, but not currently activated') ?></div>
<div id="notgot" class="alert alert-danger apw" role="alert"><?= Yii::t("app", 'ApplePay is not available on this browser') ?></div>
<div id="success" class="alert alert-success apw" role="alert"><?= Yii::t("app", 'Test transaction completed, thanks') ?></div>
</div>
</div>
I have been given the task to edit a wordpress site that I did not create. I am not that familiar with wordpress or php but I have
been able to muddle through, but now I am stuck.
The webpage has a set of links within a <ul> that when you click on the links the page auto scrolls (smoothly) to the section in the website.
The <ul> looks like this.
<ul class="main-menu" id="main-menu">
<li id="menu-about_page">About</li>
<li id="menu-energy_page">Energy</li>
</ul>
The about link navigates to the about section which looks like this.
<div id="about_page" class="page-row">
<div class="page-wrap" id="about_page-wrap" alt="home_page">
<div class="clear"></div>
<div class="clear"></div>
<div class="container">
<div class="container-inner">
<?= get_page_slider('About Slider'); ?>
</div>
</div>
<div class="page-overlay"></div>
</div>
</div>
I want to replace the menu with a row of buttons (client request) that perform the same function. The code I have so far is shown below.
<div>
<button type="button" class="transparent_btn">About</button>
</div>
This doesnt work, what am I missing. I thought there maybe some fancy javascript controlling the scroll but as far as I can see in the code there isnt any.
You have to add the id of the section you want to scroll to:
<div>
<a href="#about_page">
<button type="button" class="transparent_btn">About</button>
</a>
</div>
P.D.
I would loose the button markup and style the link to look like a button.
Why not keep the current WP menu and functionality? It sounds like all you really need to do is style the menu to look like buttons. Since the markup isn't changed you won't need to get your hands messy in the WP templates and the existing scroll-to javascript will still work.
#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
font-family: arial;
}
#main-menu li {
display: inline-block;
}
#main-menu li a {
display: inline-block;
padding: 0 1em;
line-height: 2em;
background: #2a96c3;
color: #fff;
text-decoration: none;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.5), inset 0px 1px 1px rgba(255, 255, 255, 0.5);
}
#main-menu li a:hover {
background: #ccc;
color: #000;
}
<ul class="main-menu" id="main-menu">
<li id="menu-about_page">About</li>
<li id="menu-energy_page">Energy</li>
</ul>
You have to add the id of the section you want to scroll to:
<div>
<a href="#about_page">
<button type="button" class="transparent_btn">About</button>
</a>
</div>
And use this javascript inside jquery code
$("a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
if (hash == "#top")
{
$('html, body').animate({
scrollTop: 0
}, 1000, function(){});
}else
{
$('html, body').animate({
scrollTop: $(hash).offset().top - 70
}, 1000, function(){});
}
});
In one file called first.css, there is a lot of CSS that I need in it but this is one piece of CSS that I don't need as seen here but seems to be getting applied to my input:
first.css:
.ng-invalid :not(.ng-valid)>.form-control {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.ng-invalid :not(.ng-valid)>.form-control:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
I basically do not want that CSS not to apply to my input form so I do something like this:
second.css:
.ng-invalid :not(.ng-valid)>.form-control input {
//I simply want the default CSS to apply, and not that from first.css
}
.ng-invalid :not(.ng-valid)>.form-control:focus input {
//I simply want the default CSS to apply, and not that from first.css
}
second.html:
<form style="margin-top: 10px" name="configurationForm" ng-class="{'submitted': submitted}" ng-submit="createConfiguration(configurationForm.$valid)" novalidate>
<div class="form-group row" ng-class="{'has-error': configurationForm.name.$invalid && !configurationForm.name.$pristine && submitted }">
<label for="name" class="col-xs-1 col-form-label">Name</label>
<div class="col-xs-11">
<input name="name" style="font-size: 10px; border-radius: 4px !important;" type="text" class="form-control" placeholder="Name" ng-model="configuration.name" required />
</div>
</div>
... <More form-control> ...
</form>
Is there a way to simply prevent the CSS from first.css from applying? I simply want the default configurations (whatever they are) to apply and not the above which is why I left second.css css elements empty. Any help would be appreciated. Thanks.
Load second.css after first.css
<head>
<link rel="stylesheet" type="text/css" href="first.css">
<link rel="stylesheet" type="text/css" href="second.css">
</head>
Then in second css reset those style to none . But it seems like border-color can't have none value so you may try transparent
.ng-invalid :not(.ng-valid)>.form-control input {
border-color: 'transparent';
-webkit-box-shadow: 'none';
box-shadow: 'none';
}
.ng-invalid :not(.ng-valid)>.form-control:focus input {
border-color: 'transparent';
-webkit-box-shadow: 'none';
box-shadow: 'none'
}
try to use none value for box-shadow property in second.css
Just add new properties to second.css to override CSS style of first.css
https://jsfiddle.net/vLhuowss/
.myDiv {
height: 100px;
width: 100px;
background-color: red;
}
.myDiv {
background-color: blue;
}
<div class="myDiv"></div>
Say I have a index.html with a canvas in it:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
and the canvas is showing ok this way ~~~
Now I want to put a image as background behind the canvas and I tried to add a img tag in the body:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<img src="xxx.png" alt="" />
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
but then the canvas appeared to show after the image not on top of it ...
I really know nothing about html I think it should not be that hard to get this done, hope someone can give a hand here, thanks :)
Live Demo
You just need to use z-index. I put the image and the canvas element in a container, and position them so the canvas will always be over the image.
Also another note, you shouldn't size your canvas using CSS, you should always do it via the properties directly. In my fiddle I did it via JS.
Markup
<div id="container">
<img class='img' src="http://lorempixel.com/320/480/" alt="" />
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
CSS
body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}
#container{
display:inline-block;
width:320px;
height:480px;
margin: 0 auto;
background: black;
position:relative;
border:5px solid black;
border-radius: 10px;
box-shadow: 0 5px 50px #333}
#gameCanvas{
position:relative;
z-index:20;
}
you can draw image in canvas like this , rather than putting canvas on image
var topMap = new Image();
topMap.src = "myiamge.jpeg";
function drawMap() {
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(topMap, 0, 0);
}
function init() {
drawMap();
}
topMap.onload = function() {
init();
}
You can set a background image for the canvas with background-image: url('xxx.png'); but the background won't be displayed if the user presses View image in the browser.
<canvas style="background-image: url('xxx.png');"id="gameCanvas" width="320" height="480"></canvas>
Or use JavaScript like Pranay Rana said (it's better if you have other levels or if you have to change the background later) :)
I am trying to add flipbook effect in HTML5
I have created some div tags for pages and for hard cover but problem is that 'hard' div's are not working as they should be like I am unable to turn hard pages.!
I have code this :
<html>
<head>
<!--
<style type="text/css">
body
{ overflow:hidden;}
#zoom-viewport
{
background:#E3EDFF;
}
#flipbook.shadow{
-webkit-box-shadow: 0 4px 10px #666;
-moz-box-shadow: 0 4px 10px #666;
-ms-box-shadow: 0 4px 10px #666;
-o-box-shadow: 0 4px 10px #666;
box-shadow: 0 4px 10px #666;
}
#flipbook .page-wrapper{
-webkit-perspective:2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
}
#flipbook{
background:#75A3FF;
transition:margin-left 1s;
-webkit-transition:margin-left 1s;
-moz-transition:margin-left 1s;
-o-transition:margin-left 1s;
-ms-transition:margin-left 1s;
transition:margin-left 1s;
}
</style>
-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="includes/Turn/turn.js"></script>
</head>
<body>
<div id="zoom-viewport">
<div id="flipbook" style="background-color:red;">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="double"> Page 1 </div>
<div class="double"> Page 2 </div>
<div class="double"> Page 3 </div>
<div class="double"> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</div>
<script type="text/javascript">
$("#flipbook").turn({width:800, height:500 , autoCenter:true}).bind("turning", function(event, page, view) {
alert("Turning the page to: "+page);
});
</script>
</body>
</html>
Please help to sort out this problem
Thanks in advance
Shumaila
There's a couple things to check.
Which version of Turn.js are you using?
What browser are you testing in?
It seems that the hard class wasn't released until the 4th version. There was also a bug using hard class in IE9 that wasn't fix until release 4.1.0.
Hope this helps, on a quick look the code seems pretty much like the example code.