Develop Reference

JQuery slider change background color and round handlers

So I've made a slider, but now I'm trying to style them to look like this.
How can I make handlers round?
And how can I make the sides which is out of range be greyed out, and inside green? I can't find any exampled/documentation to look at, so now I'm asking here.
$(document).ready(function() {
$("#slider").slider({
min: 1,
max: 100,
step: 1,
values: [1, 100],
slide: function(event, ui) {
if ( ui.values[0] >= ui.values[1] ) {
return false;
} else {
for (var i = 0; i < ui.values.length; ++i) {
document.getElementById("spanMin").textContent= ui.values[1];
document.getElementById("spanMax").textContent= ui.values[0];
}
}
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
});
});
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
.slidersStyle div, span {
display: inline-block;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form>
<div class="slidersStyle">
<span id="spanMax" style="display: inline-block;" class="sliderValue">1</span>
<div style="width:200px; margin-left: 15px; margin-right: 15px;" id="slider"> </div>
<span id="spanMin" class="sliderValue">100</span>
</div>
</form>

here are your solution. Basically, used newest JQuery version, newest JQuery UI. JQuery UI CSS version is the same as yours. You can tweak and use your older versions, it should work as well.
$(document).ready(function() {
$( "#slider-range" ).slider({
range: true,
min: 1,
max: 100,
values: [ 1, 100 ],
slide: function( event, ui ) {
$( "#min" ).val( ui.values[ 0 ] );
$( "#max" ).val( ui.values[ 1 ] );
}
});
});
body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
#min {
width:14px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border-radius: 50%!important;
}
.ui-slider .ui-slider-handle {
width: 1.8em!important;
height: 1.8em!important;
}
.ui-slider-horizontal .ui-slider-handle {
top: -0.45em!important;
}
.ui-widget-content {
background: #dddddd!important;
}
.ui-widget-header {
background: #9ac836!important;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form>
<input type="text" id="min" value="1" readonly style="border:0; display:inline-block;">
<div id="slider-range" style="width:200px; margin:0px 25px; display: inline-block;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<div class="ui-slider-range ui-corner-all ui-widget-header" style=""></div>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
</div>
<input type="text" id="max" value="100" readonly style="border:0; display:inline-block;">
</form>

(VUE.js) The event doesn't work when called outside the component

I'm making a small page for the product based on this tutorial. On the page I have a product component, where I keep a "add to cart" button. The card itself, however, is separated from the component and located inside index.html, that's why my cart property is being kept inside vue app (where app is an id of my root div in index.html).
Problem: I need my "add to cart" button to increment the number in the cart itself. I can't really understand how can I do this using addToCart and updateCart methods, as shown in the tutorial.
Can anyone help me out with this issue? I will appreciate any help! Thanks in advance!
Vue.component('product', {
props: {
premium: {
type: Boolean,
required: true
}
},
template: `
<div id="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ title }}</h1>
<p>Shipping: {{ shipping }}</p>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<h2>Details</h2>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<h3>Colors:</h3>
<div v-for="(variant,index) in variants" :key="variant.variantId">
<div class="color-box" :style="{ backgroundColor: variant.variantColor }" #mouseover="updateProduct(index)"></div>
</div>
<button :class="{ disabledButton: !inStock }" v-on:click="add-to-cart" :disabled="!inStock">Add to Cart</button>
</div>
</div>
`,
data() {
return {
product: "Socks",
brand: "Vue Mastery",
selectedVariant: 0,
details: ["80% cotton", "20% polyester", "Gender-neutral"],
variants: [
{
variantId: 2234,
variantQuantity: 15,
variantColor: "green",
variantImage: "./assets/vmSocks-green.jpg"
},
{
variantId: 2235,
variantQuantity: 0,
variantColor: "blue",
variantImage: "./assets/vmSocks-blue.jpg"
}
]
}
},
methods: {
addToCart() {
this.$emit('add-to-cart')
},
updateProduct(index) {
this.selectedVariant = index
}
},
computed: {
title() {
return this.brand + ' ' + this.product
},
image() {
return this.variants[this.selectedVariant].variantImage
},
inStock() {
if (this.variants[this.selectedVariant].variantQuantity > 0) {
return true
} else {
return false
}
},
shipping() {
if (this.premium) {
return "Free"
} else {
return 2.99
}
}
}
})
var app = new Vue({
el: '#app',
data: {
premium: true,
cart: 0
},
methods: {
updateCart() {
this.cart += 1
}
}
})
body {
font-family: tahoma;
color:#282828;
margin: 0px;
}
.nav-bar {
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
height: 60px;
margin-bottom: 15px;
}
.product {
display: flex;
flex-flow: wrap;
padding: 1rem;
}
img {
border: 1px solid #d8d8d8;
width: 70%;
margin: 40px;
box-shadow: 0px .5px 1px #d8d8d8;
}
.product-image {
width: 80%;
}
.product-image,
.product-info {
margin-top: 10px;
width: 50%;
}
.color-box {
width: 40px;
height: 40px;
margin-top: 5px;
}
.cart {
margin-right: 25px;
float: right;
border: 1px solid #d8d8d8;
padding: 5px 20px;
}
button {
margin-top: 30px;
border: none;
background-color: #1E95EA;
color: white;
height: 40px;
width: 100px;
font-size: 14px;
}
.disabledButton {
background-color: #d8d8d8;
}
.review-form {
width: 400px;
padding: 20px;
margin: 40px;
border: 1px solid #d8d8d8;
}
input {
width: 100%;
height: 25px;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 60px;
}
.tab {
margin-left: 20px;
cursor: pointer;
}
.activeTab {
color: #16C0B0;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=devide-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Vue app</title>
</head>
<body>
<div class="nav-bar"></div>
<div id="app">
<div class="cart">
<p>Cart({{ cart }})</p>
</div>
<product :premium="premium" #add-to-cart="updateCart"></product>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="prior.js"></script>
</body>
</html>

Change This:
<button :class="{ disabledButton: !inStock }" v-on:click="add-to-cart" :disabled="!inStock">Add to Cart</button>
To be this:
<button :class="{ disabledButton: !inStock }" v-on:click="addToCart" :disabled="!inStock">Add to Cart</button>
So addToCart: and this function will emit add-to-cart event
Also you can immediately run emmit onClick without adding function:
<button :class="{ disabledButton: !inStock }" v-on:click="$emit('add-to-cart')" :disabled="!inStock">Add to Cart</button>
Vue.component('product', {
props: {
premium: {
type: Boolean,
required: true
}
},
template: `
<div id="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ title }}</h1>
<p>Shipping: {{ shipping }}</p>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<h2>Details</h2>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<h3>Colors:</h3>
<div v-for="(variant,index) in variants" :key="variant.variantId">
<div class="color-box" :style="{ backgroundColor: variant.variantColor }" #mouseover="updateProduct(index)"></div>
</div>
<button :class="{ disabledButton: !inStock }" v-on:click="addToCart" :disabled="!inStock">Add to Cart</button>
</div>
</div>
`,
data() {
return {
product: "Socks",
brand: "Vue Mastery",
selectedVariant: 0,
details: ["80% cotton", "20% polyester", "Gender-neutral"],
variants: [
{
variantId: 2234,
variantQuantity: 15,
variantColor: "green",
variantImage: "./assets/vmSocks-green.jpg"
},
{
variantId: 2235,
variantQuantity: 0,
variantColor: "blue",
variantImage: "./assets/vmSocks-blue.jpg"
}
]
}
},
methods: {
addToCart() {
this.$emit('add-to-cart')
},
updateProduct(index) {
this.selectedVariant = index
}
},
computed: {
title() {
return this.brand + ' ' + this.product
},
image() {
return this.variants[this.selectedVariant].variantImage
},
inStock() {
if (this.variants[this.selectedVariant].variantQuantity > 0) {
return true
} else {
return false
}
},
shipping() {
if (this.premium) {
return "Free"
} else {
return 2.99
}
}
}
})
var app = new Vue({
el: '#app',
data: {
premium: true,
cart: 0
},
methods: {
updateCart() {
this.cart += 1
}
}
})
body {
font-family: tahoma;
color:#282828;
margin: 0px;
}
.nav-bar {
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
height: 60px;
margin-bottom: 15px;
}
.product {
display: flex;
flex-flow: wrap;
padding: 1rem;
}
img {
border: 1px solid #d8d8d8;
width: 70%;
margin: 40px;
box-shadow: 0px .5px 1px #d8d8d8;
}
.product-image {
width: 80%;
}
.product-image,
.product-info {
margin-top: 10px;
width: 50%;
}
.color-box {
width: 40px;
height: 40px;
margin-top: 5px;
}
.cart {
margin-right: 25px;
float: right;
border: 1px solid #d8d8d8;
padding: 5px 20px;
}
button {
margin-top: 30px;
border: none;
background-color: #1E95EA;
color: white;
height: 40px;
width: 100px;
font-size: 14px;
}
.disabledButton {
background-color: #d8d8d8;
}
.review-form {
width: 400px;
padding: 20px;
margin: 40px;
border: 1px solid #d8d8d8;
}
input {
width: 100%;
height: 25px;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 60px;
}
.tab {
margin-left: 20px;
cursor: pointer;
}
.activeTab {
color: #16C0B0;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=devide-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Vue app</title>
</head>
<body>
<div class="nav-bar"></div>
<div id="app">
<div class="cart">
<p>Cart({{ cart }})</p>
</div>
<product :premium="premium" #add-to-cart="updateCart"></product>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="prior.js"></script>
</body>
</html>

3D Card Flip: CSS scaling while maintaing image clarity

Problem
I fully understand that I cannot take a downsized image, scale it up with CSS, and not have it look blurry. But I also know I'm going about this wrong, and there is a way to do what I'm wanting.
I want to achieve this exact effect I've created, but without losing the clarity on the second (flipped / backside) card. I feel like the solution lies somewhere with the initial width/height of the backside card and transform origins, but I can't quite get it there. What am I doing wrong?
Fiddle
https://jsfiddle.net/a9dpc05t/1/
HTML
<div class="cardWrapper">
<div class="card">
<div class="cardFace front"><img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png" width="129"></div>
<div class="cardFace back"><img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png" width="129"></div>
</div>
</div>
CSS
body {
background-color: black;
margin:50px 150px;
font-family:Arial, sans-serif;
}
.cardWrapper{
width:129px;
height:200px;
position:relative;
float:left;
cursor:pointer;
}
.cardFace{
position:absolute;
width:129px;
height:200px;
overflow:hidden;
}
JavaScript
TweenLite.set(".cardWrapper", {
perspective: 800
});
TweenLite.set(".card", {
transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
rotationY: -180
});
TweenLite.set([".back", ".front"], {
backfaceVisibility: "hidden"
});
$(".cardWrapper").click(
function() {
TweenLite.to($(this).find(".card"), 1.2, {
rotationY: 180,
scale: 2.48,
ease: Back.easeOut
});
}
);

EDIT V2:
Here's another version trying to fix what you specified in the comment.
jsFiddle Version 2
CODE SNIPPET V2:
TweenLite.set(".cardWrapper", {
perspective: 800
});
TweenLite.set(".card", {
transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
rotationY: -180
});
TweenLite.set([".back", ".front"], {
backfaceVisibility: "hidden"
});
$(".cardWrapper").click(
function() {
TweenLite.to($(this).find(".card"), 1.2, {
rotationY: 180,
scale: 1,
ease: Back.easeOut
});
}
);
body {
background-color: black;
margin: 120px;
font-family: Arial, sans-serif;
}
.cardWrapper {
width: 387px;
height: 600px;
position: relative;
float: left;
cursor: pointer;
}
.cardFace {
position: absolute;
width: 387px;
height: auto;
overflow: hidden;
}
.cardFace img {
width: 387px;
}
.card {
transform: scale(0.248);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<div class="cardWrapper">
<div class="card">
<div class="cardFace front">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png">
</div>
<div class="cardFace back">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png">
</div>
</div>
</div>
<div class="cardWrapper">
<div class="card">
<div class="cardFace front">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png">
</div>
<div class="cardFace back">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png">
</div>
</div>
</div>
V1:
The trick is to initially scale the card down, then just apply the scale to 1 on flip.
jsFiddle
CODE SNIPPET:
TweenLite.set(".cardWrapper", {
perspective: 800
});
TweenLite.set(".card", {
transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
rotationY: -180
});
TweenLite.set([".back", ".front"], {
backfaceVisibility: "hidden"
});
$(".cardWrapper").click(
function() {
TweenLite.to($(this).find(".card"), 1.2, {
rotationY: 180,
scale: 1,
ease: Back.easeOut
});
}
);
body {
background-color: black;
margin: 120px;
font-family: Arial, sans-serif;
}
.cardWrapper {
width: 144px;
height: 220px;
position: relative;
float: left;
cursor: pointer;
}
.cardFace {
position: absolute;
width: 432px;
height: 660px;
overflow: hidden;
}
.cardFace img {
width: 432px;
}
.card {
transform-origin: top right;
transform: scale(0.248);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<div class="cardWrapper">
<div class="card">
<div class="cardFace front">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png">
</div>
<div class="cardFace back">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png">
</div>
</div>
</div>

You need to add margin and padding to the div. Also check for the proper size of the divs in the CSS.
For the best layout, margin should be added to .card and padding should be added to .front and .back
I also made a flipping cards layout. Check this out, it may help you. :)
http://codepen.io/aman_d1996/pen/WxJwoo
<html>
<head>
<title>Cards</title>
</head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="container" style="margin:auto;">
<div class="row" style="margin:3px;">
<div class="col-xs-3" id="card1" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #e67e22;
background: rgba(230, 126, 34, .9);">
<h4>TILE1</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-3" id="card2" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #ffc72c;
background-color: rgba(255, 199, 44, 0.901961);">
<h4>TILE2</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-6" id="card3" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #c98bdb;
background: rgba(201, 139, 219, .9);">
<h4>TILE3</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
</div>
<div class="row" style="margin:3px">
<div class="col-xs-6" id="card4" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #c98bdb;
background: rgba(201, 139, 219, .9);">
<h4>TILE4</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-3" id="card5" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #ffc72c;
background-color: rgba(255, 199, 44, 0.901961);">
<h4>TILE5</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-3" id="card6" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #e67e22;
background: rgba(230, 126, 34, .9);">
<h4>TILE6</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body>div>div>div>div>h4 {
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 17px;
font-weight: bolder;
margin-left: 12px;
color: white;
}
JS
$(function($) {
$("#card1").flip({
axis: 'y',
trigger: 'click'
});
$("#card1").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card2").flip({
axis: 'y',
trigger: 'click'
});
$("#card2").on('click', function(){
$("#card1").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card3").flip({
axis: 'x',
trigger: 'click'
});
$("#card3").on('click', function(){
$("#card2").flip(false);
$("#card1").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card4").flip({
axis: 'x',
trigger: 'click'
});
$("#card4").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card1").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card5").flip({
axis: 'y',
trigger: 'click'
});
$("#card5").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card1").flip(false);
$("#card6").flip(false);
});
$("#card6").flip({
axis: 'y',
trigger: 'click'
});
$("#card6").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card1").flip(false);
});
});

Combine Circletype.js with jQuery animate

I want to use Circletype.js in conjunction with jQuery .animate() to cause text to curve around my logo/image as I animate the width of its container.
I am applying .circleType({fluid:true}); to the #demo4 div. This, along with the correct css, causes the text path to bend to fit its container (#resize).
Run the code snippet to illustrate:
text radius does change when container is resized manually
text radius does not change when resized via .animate(). Why not?
$(function() {
$("#resize").resizable();
$("#resize").draggable();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
});
});
$('#demo4').circleType({
fluid: true,
dir: -1
});
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>

You can try this though if you just want the end result. If you want the text to be also animated, then the below code won't work. See if it works for your requirement
$(function() {
$("#resize").resizable();
$("#resize").draggable();
circleInit();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
},400,'swing',function() { circleInit(); });
});
function circleInit() {
$('#demo4').circleType({
fluid: true,
dir: -1
});
}
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>

The code for circletype shows that the text is only reflowed when the window is resized:
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}

Why the play stop pause buttons and progressBar are not displaying at all?

This is the jsfiddler for it the issue is with the big images i wanted to add the buttons play stop pause and the progressbar on the big images: JSFiddler
When i'm doing inspect element i don't see any errors in red.
I took the code of this jquery: Automatic slideshow with a timer, play-, pause-, previous- and next-
And before it i used the coolcarousels this jquery: Cool responsive image slider with thumbnail carousel
Cool responsive image slider
And this is the code i have now:
In the html file:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script src="java_script.js"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.container {
background: rgb(170, 187, 97); /* Fallback */
background: rgba(170, 187, 97, 0.5);
}</style>
</head>
<body>
<div>TODO write content</div>
<div id="wrapper">
<div id="carousel-wrapper">
<img id="shadow" src="img/gui/carousel_shadow.png" />
<div id="inner">
<div id="carousel">
<span id="pixar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" /></span>
<span id="bugs"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif" /></span>
<span id="cars"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" /></span>
<span id="incred"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif" /></span>
<span id="monsters"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif" /></span>
<span id="nemo"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif" /></span>
<span id="radar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" /></span>
<span id="rat"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif" /></span>
<span id="toystory"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif" /></span>
<span id="up"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif" /></span>
<span id="walle"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif" /></span>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
</div>
</div>
<div id="thumbs-wrapper">
<div id="thumbs">
<img src="img/small/pixar.jpg" />
<img src="img/small/bugs.jpg" />
<img src="img/small/cars.jpg" />
<img src="img/small/incred.jpg" />
<img src="img/small/monsters.jpg" />
<img src="img/small/nemo.jpg" />
<img src="img/small/radar002665resized.jpg" />
<img src="img/small/rat.jpg" />
<img src="img/small/toystory.jpg" />
<img src="img/small/up.jpg" />
<img src="img/small/walle.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
<div class="carousel">
<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>
</div>
</body>
</html>
I added to the html file this part:
<div id="inner">
And
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
Then the javascript file:
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll',
pauseOnHover: true,
duration: 500
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
And the css file:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: url(img/gui/bg_glare.png) top center no-repeat #bcc;
}
html > body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
position: absolute;
width: 50%;
left: 25%;
top: 50px;
}
#carousel-wrapper {
padding-bottom: 10px;
position: relative;
}
#carousel, #thumbs {
overflow: hidden;
}
#carousel-wrapper .caroufredsel_wrapper {
border-radius: 10px;
box-shadow: 0 0 5px #899;
}
#carousel span, #carousel img,
#thumbs a, #thumbs img {
display: block;
float: left;
}
#carousel span, #carousel a,
#thumbs span, #thumbs a {
position: relative;
}
#carousel img,
#thumbs img {
border: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#carousel img.glare,
#thumbs img.glare {
width: 102%;
height: auto;
}
#carousel span {
width: 554px;
height: 313px;
}
#thumbs-wrapper {
padding: 20px 40px;
position: relative;
}
#thumbs a {
border: 2px solid #899;
width: 150px;
height: 100px;
margin: 0 10px;
overflow: hidden;
border-radius: 10px;
-webkit-transition: border-color .5s;
-moz-transition: border-color .5s;
-ms-transition: border-color .5s;
transition: border-color .5s;
}
#thumbs a:hover, #thumbs a.selected {
border-color: #566;
}
#wrapper img#shadow {
width: 100%;
position: absolute;
bottom: 0;
}
#prev, #next {
background: transparent url('img/gui/carousel_nav.png') no-repeat 0 0;
display: block;
width: 19px;
height: 20px;
margin-top: -10px;
position: absolute;
top: 50%;
}
#prev {
background-position: 0 0;
left: 10px;
}
#next {
background-position: -19px 0;
right: 10px;
}
#prev:hover {
background-position: 0 -20px;
}
#next:hover {
background-position: -19px -20px;
}
#prev.disabled, #next.disabled {
display: none !important;
}
In the css file i didn't change the code in the javascript file i added:
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
And
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
The first jquery of the carousel is still working fine the second link.
But the new one with the play stop pause buttons i don't see them at all.
What i mean is something like this and somehow also to change the colors of the buttons play stop pause to fit the color of the big images maybe something more light or transparent color.
And the pause stop play should handle the big images not the small ones.