i've found a pen:
http://codepen.io/rhernando/pen/vjGxH
html
<div id="mainWrap">
<div class="cardCont">
<div class="cardBack"></div>
<div class="cardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack"></div>
<div class="cardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack"></div>
<div class="cardFront"></div>
</div>
</div>
<div style="clear:both;"></div>
<div id="mainWrap" style="margin-top:10px;">
<div class="cardCont">
<div class="cardBack playcardBack"></div>
<div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack playcardBack"></div>
<div class="cardFront playcardFront"></div>
</div>
<div class="cardCont">
<div class="cardBack playcardBack"></div>
<div class="cardFront playcardFront"></div>
</div>
</div>
css
body
{
background:#444;
}
.cardCont
{
width:250px;
height:400px;
float:left;
margin-right:10px;
position:relative;
/*border:solid 2px #fff;*/
}
.cardFront, .cardBack
{
position:absolute;
width:250px;
height:400px;
background:url('http://s.cdpn.io/33073/lorempixel.jpg');
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.cardBack
{
background:url('http://s.cdpn.io/33073/lorempixe1l.jpg');
}
.playcardFront
{
background:url("http://unlimitedpotentialnow.com/wp-content/uploads/2012/01/Bouquet-cs.jpg");
}
.playcardBack
{ background:url("http://i203.photobucket.com/albums/aa158/Comic1111/ACe.png");
}
js
CSSPlugin.defaultTransformPerspective = 1000;
//we set the backface
TweenMax.set($(".cardBack"), {rotationY:-180});
$.each($(".cardCont"), function(i,element) {
var frontCard = $(this).children(".cardFront"),
backCard = $(this).children(".cardBack"),
tl = new TimelineMax({paused:true});
tl
.to(frontCard, 1, {rotationY:180})
.to(backCard, 1, {rotationY:0},0)
.to(element, .5, {z:50},0)
.to(element, .5, {z:0},.5);
element.animation = tl;
});
$(".cardCont").hover(elOver, elOut);
function elOver() {
this.animation.play();
}
function elOut() {
this.animation.reverse();
}
that displays a nice effect with greensock.
The problem is that is not cross-browser beacuse it doesn't work on safari.
Could someone help me to understand why?
Thanks
Related
I'm trying to pass my javascript value (a percentage) into the css 100% width line which is currently at 30%. This currently creates a table that populates outward, starting at 0 and then going out to 30%, I want to be able to implement my Javascript value (c2_percent) instead of the 30% value. If anyone can help that would be great. Thanks
<div class="bar-graph bar-graph-horizontal bar-graph-one">
<div class="bar-one">
<span class="rating-a1">A1</span>
<div class="bar" id="rating-a1" data-percentage=""></div>
</div>
<div class="bar-two">
<span class="rating-a2">A2</span>
<div class="bar" data-percentage="11%"></div>
</div>
<div class="bar-three">
<span class="rating-a3">A3</span>
<div class="bar" data-percentage="7%"></div>
</div>
<div class="bar-four">
<span class="rating-b1">B1</span>
<div class="bar" data-percentage="10%"></div>
</div>
<div class="bar-five">
<span class="rating-b2">B2</span>
<div class="bar" data-percentage="20%"></div>
</div>
<div class="bar-six">
<span class="rating-b3">B3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-seven">
<span class="rating-c1">C1</span>
<div class="bar" data-percentage="9%"></div>
</div>
<div class="bar-eight">
<span class="rating-c2">C2</span>
<div class="bar" id="c2-rating" data-percentage=""></div>
</div>
<div class="bar-nine">
<span class="rating-c3">C3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-ten">
<span class="rating-d1">D1</span>
<div class="bar" data-percentage="5%"></div>
</div>
</div>
#-webkit-keyframes show-bar-eight {
0% {
width: 0;
}
100% {
width: 30%;
}
}
<script>
for(let i = 0; i < 1; i++) {
const c2_security_values = Array.from(document.querySelectorAll('.security-value-c2'));
const c2_security_values_inner = c2_security_values.map((element) => element.innerText);
const c2_summed_values = c2_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));
const total_security_values = Array.from(document.querySelectorAll('.individual-market-value'));
const total_security_values_inner = total_security_values.map((element) => element.innerText);
const total_summed_values = total_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));
const c2_percent = c2_summed_values / total_summed_values
}
</script>
Out of the top of my head, I would add this line after calculating c2_percent in the script (make sure to have your c2_percent defined outside of the loop, and set it as a variable, not a constant).
document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');
As you don't provide any other data about the rest of the page, the styles, etc. I cannot tell if this would even work.
Do you pretend to modify the width of the c2-rating?
This only modifies the value of the data-percentage attribute.
To modify the css width attribute, you can try
document.getElementById('c2-rating').setAttribute("style","width:" + (c2_percent * 100) + '%');
I have made a snippet that shows that it would work, it all will depend on the rest of the page in your project.
<html>
<head>
<style>
.bar-graph {
font-family: Arial, Helvetica, sans-serif;
}
.bar-graph div {
padding: 5px 0px;
}
.bar-graph div span {
display: inline-block;
font-weight: 600;
margin: 5px 5px;
float: left;
}
.bar-graph .bar {
border: 1px solid #ccc;
background-color: #eee;
height: 30px;
}
#-webkit-keyframes show-bar-eight {
0% {
width: 0;
}
100% {
width: 30%;
}
}
</style>
</head>
<body>
<div class="bar-graph bar-graph-horizontal bar-graph-one">
<div class="bar-one">
<span class="rating-a1">A1</span>
<div class="bar" id="rating-a1" data-percentage=""></div>
</div>
<div class="bar-two">
<span class="rating-a2">A2</span>
<div class="bar" data-percentage="11%"></div>
</div>
<div class="bar-three">
<span class="rating-a3">A3</span>
<div class="bar" data-percentage="7%"></div>
</div>
<div class="bar-four">
<span class="rating-b1">B1</span>
<div class="bar" data-percentage="10%"></div>
</div>
<div class="bar-five">
<span class="rating-b2">B2</span>
<div class="bar" data-percentage="20%"></div>
</div>
<div class="bar-six">
<span class="rating-b3">B3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-seven">
<span class="rating-c1">C1</span>
<div class="bar" data-percentage="9%"></div>
</div>
<div class="bar-eight">
<span class="rating-c2">C2</span>
<div class="bar" id="c2-rating" data-percentage=""></div>
</div>
<div class="bar-nine">
<span class="rating-c3">C3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-ten">
<span class="rating-d1">D1</span>
<div class="bar" data-percentage="5%"></div>
</div>
</div>
<input type="range" min="0" max="100" value="0" class="slider" id="c2RatingSlider" value="43" onchange="updateC2()">
<script>
updateC2();
function updateC2() {
var c2_percent = document.getElementById("c2RatingSlider").value / 100;
document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');
document.querySelectorAll('.bar').forEach((bar) => {
const percentage = bar.getAttribute('data-percentage');
bar.setAttribute("style", "width:" + percentage);
});
}
</script>
</body>
</html>
I have this solution for simple slider, but I need to preserve class .active like as the first class .row
And the buttons will switch .active class like as the first class .row
Currently, it only switches to the .row class but I need to switch to the .first and .second class.
Here is my actual solution:
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length)
activeelement.removeClass('active').next(".row").addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active');
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active');
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next
Thanks.
Use children()
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length-1){
activeelement.removeClass('active').next(".row").addClass('active').children().addClass('active').parent().prev(".row");
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length-1){
activeelement.removeClass('active').prev(".row").addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next
I have a div with a link inside of it. as you see in snippet when the link is clicked it appends a new div beside. it is working!
but what i want is when every time link is clicked a new seperative class should be dynamically adding to 'project-list'.
$(".click").click(function () {
$(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
if it is not clear ask me below.
var i=0;
$(".click").click(function () {
i++;
var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
$(".container").append(toAppend);
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
I would like to have a background blur on scroll. It works but everything inside the section gets a blur. I would like to only have the background image as a blur. Can anyone help?
My code:
<section class="block clearfix z-index background--image text--white blurme" style="background-image: url(<?php echo $image_src ?>);">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
And my javascript
$(window).scroll(function(e) {
var distanceScrolled = $(this).scrollTop();
$('.blurme').css('-webkit-filter', 'blur(' + distanceScrolled/60 + 'px)');
});
Cheers!
You can achieve it by doing below code
<section class="block clearfix z-index background--image text--white blurme" style="z-index: -1; height: 100%; width: 100%; position: absolute; background-image: url(<?php echo $image_src ?>);"></section>
<section class="block clearfix z-index background--image text--white blurmeNot" style="background-color: transparent">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
Please set height, width of first section according to your need.
Best of luck :)
Try to blur before or after "selector".
https://jsfiddle.net/xrnk08n4/
<div class="blurme">
<div class="no-blur">
banner
</div>
</div>
.blurme {
position: relative;
height:600px;
}
.blurme:before {
content: "";
position:absolute;
z-index: -1;
top:0;
bottom:0;
left:0;
right:0;
background: url("https://thumb7.shutterstock.com/display_pic_with_logo/2502094/402146209/stock-photo-sample-rubber-stamp-text-on-white-background-402146209.jpg");
-webkit-filter: blur(20px);
}
Is it possible via css to have a square and a rectangle with the same height within a row in bootstrap?
I need javascript to achieve this goal or I can with only css?
something like this http://codepen.io/mp1985/pen/VvrWbQ but as you can see the 2 elements haven't the same height.
<div class="col-sm-8">
<div class="rect-responsive">
<div class="content">
Hello rectangle
</div>
</div>
</div>
<div class="col-sm-4">
<div class="square-responsive">
<div class="content">
Hello square
</div>
</div>
</div>
I saw a similar problem somewhere here. You might find it useful.
Not an exact solution but you can also try something like this:
<style type="text/css">
div[class*="col-"] > .square-responsive,
span[class*="col-"] > .square-responsive,
ol[class*="col-"] > .square-responsive,
ul[class*="col-"] > .square-responsive,
li[class*="col-"] > .square-responsive{
padding-bottom:100%;
}
div[class*="col-"] > .rect-responsive,
span[class*="col-"] > .rect-responsive,
ol[class*="col-"] > .rect-responsive,
ul[class*="col-"] > .rect-responsive,
li[class*="col-"] > .rect-responsive{
padding-bottom:50%;
}
.square-responsive,
.rect-responsive{
position:relative;
overflow:hidden;
background-color: red;
}
.square-responsive > *,
.rect-responsive > *{
position:absolute;
}
.square-responsive > .content,
.rect-responsive > .content {
width:100%;
height:100%;
}
</style>
<div class="row">
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
Hello
</div>
</div>
</div>
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
Hello
</div>
</div>
</div>
</div>
check this
CSS:
.rect-responsive {
background-color: red;
}
.square-responsive {
background-color: yellow;
}
JS:
$(window).ready(function(){
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function () {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
DEMO:
JSFIDDLE
$(window).ready(function() {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function() {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
.rect-responsive {
background-color: red;
}
.square-responsive {
background-color: yellow;
}
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8 col-xl-8 col-xs-8">
<div class="rect-responsive">
<div class="content">Hello rectangle</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-xl-4 col-xs-4">
<div class="square-responsive">
<div class="content">Hello square</div>
</div>
</div>
</div>
</div>
</body>
</html>