I have a project.in that project i need a loading animation. So i created one. but the problem is i can't hide the scroll bar. if i give overflow hidden to my body by css and when loading animation finished i gave overflow auto by js. it will create another problem. (.inner-menus goes down of .puller. and it doesn't goes left properly, it takes space of scroll bar.)the reason I detected: when window loads there is no scroll bar and js take window width and minus .puller width from window width and set the value as .inner-menu width and there is no window's scroll bar width.(chrome scrollbar width is 17px.but other browser's scroll bar width is nor 17px) . if i go full page it just OK because it re take window width and minus .puller width from window width and set the value as .inner-menu width(this time there is scroll bar).
so i just want that the animation div goes overly scroll. Is it possible? if not please try to give another solution.
thanks
without body overflow hidden.
$(window).load(function() {
$(".loaderBg").delay(5000).fadeOut("slow");
})
$(document).ready(function() {
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('.inner-menu').width($(window).width() - (pullerDimensions +2));
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
(function($) {
$(".puller").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 50
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 50));
}
});
}(jQuery));
});
* {
margin: 0px;
padding: 0px;
outline: 0;
}
body {
background: #3F51B5;
color: #FFF;
font-family: arial;
}
.content {
height: 200vh;
}
.menu {
background: #FFF;
color: #333;
display: block;
width: 100%;
left: calc(-100% + 49px);
height: 150px;
font-size: 20px;
border-bottom: 1px solid #A09E9E;
right: 0px;
position: absolute;
width: 100%;
}
.inner-menu {
display: inline-block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #333;
color: #fff;
height: 150px;
}
.loaderBg {
height: 100vh;
width: 100vw;
width: 100%;
position: fixed;
z-index: 1000;
background: #333;
overflow:hidden;
}
.puller {
font-size: 20px;
position: absolute;
top: 0;
right: 0px;
border-left: 1px solid #A09E9E;
border-right: 1px solid #A09E9E;
left: auto;
text-align: center;
width: 50px;
height: 150px;
line-height: 150px;
cursor: hidden;
}
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loaderBg">
<div class="loader"></div>
</div>
<div class="content">
<div class="menu">
<div class="inner-menu">
menu item-1<br>
menu item-2
</div>
<div class="puller">
>
</div>
</div>
</div>
With overflow hidden
$(window).load(function() {
$(".loaderBg").delay(5000).fadeOut(1000, function(){
$("body").css("overflow", "auto");
});
})
$(document).ready(function() {
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('.inner-menu').width($(window).width() - (pullerDimensions +2));
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
(function($) {
$(".puller").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 50
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 50));
}
});
}(jQuery));
});
* {
margin: 0px;
padding: 0px;
outline: 0;
}
body {
background: #3F51B5;
color: #FFF;
font-family: arial;
overflow: hidden;
}
.content {
height: 200vh;
}
.menu {
background: #FFF;
color: #333;
display: block;
width: 100%;
left: calc(-100% + 49px);
height: 150px;
font-size: 20px;
border-bottom: 1px solid #A09E9E;
right: 0px;
position: absolute;
width: 100%;
}
.inner-menu {
display: inline-block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #333;
color: #fff;
height: 150px;
}
.loaderBg {
height: 100vh;
width: 100vw;
width: 100%;
position: fixed;
z-index: 1000;
background: #333;
overflow:hidden;
}
.puller {
font-size: 20px;
position: absolute;
top: 0;
right: 0px;
border-left: 1px solid #A09E9E;
border-right: 1px solid #A09E9E;
left: auto;
text-align: center;
width: 50px;
height: 150px;
line-height: 150px;
cursor: hidden;
}
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loaderBg">
<div class="loader"></div>
</div>
<div class="content">
<div class="menu">
<div class="inner-menu">
menu item-1<br>
menu item-2
</div>
<div class="puller">
>
</div>
</div>
</div>
Make this change in your JS.
var calcWidth; // declare calc width as global
$(window).load(function() {
$(".loaderBg").delay(2000).fadeOut(1000, function(){
$("body").css("overflow","auto");
calcWidth(); // call here
});
});
$(document).ready(function() {
calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('.inner-menu').width($(window).width() - (pullerDimensions +2));
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
(function($) {
$(".puller").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 50
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 50));
}
});
}(jQuery));
});
Related
I'm trying to make a landing page comparison slider that reacts on the mouseX position,
but I want the slider to move the opposite direction of the mouse position.
Any suggestions on how I can make that happen?
Demo:
https://jsfiddle.net/uw5v94qf/
So basically, like the demo shows, in my case the slider follows the mouse position.
But I want it to kind of do the opposite(?), that is revealing the current slide that the mouse is hovering. The more the mouse moves towards the edge, the more it shows that particular slide.
(function($){
$(function(){
$('.before-wrapper').on( "mousemove", function(e) {
var offsets = $(this).offset();
var fullWidth = $(this).width();
var mouseX = e.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
$(this).parent().find('.comparison-slider').css({
left: mouseX,
transition: 'ease-out'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'all 1s'
});
$(this).find('.after-image').css({
transform: 'translateX(' + (-1*mouseX) + 'px)',
transition: 'all 1s'
});
});
$('.slider-wrapper').on( "mouseleave", function() {
$(this).parent().find('.comparison-slider').css({
left: '50%',
transition: 'all .3s'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all .3s'
});
$(this).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all .3s'
});
});
});
})(jQuery);
body{
margin:0;
font-family: open sans;
}
.slider-wrapper {
width: 100%;
height: 100vh;
position: relative;
}
.slider-wrapper:hover { cursor: crosshair;; }
.comparison-slider {
}
.before-wrapper {
display: block;
overflow: hidden;
width: auto;
height: 100%;
position: relative;
background: url("#") no-repeat center center #111111;
background-size: cover;
}
.before-wrapper:before {
display: block;
content: '';
width: 100%;
height:100%;
}
.after-wrapper, .after-image {
}
.after-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.after-image {
display: block;
width: auto;
height: 100%;
position: relative;
-webkit-transform: translateX(-50%);
61
transform: translateX(-50%);
background: url("#") no-repeat center center #efefef;
background-size: cover;
}
.past, .future{
padding: 40px;
color:#fff;
text-transform:uppercase;
font-size:20px;
/* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); */
font-weight:800;
z-index:10;
}
.past {
position: absolute;
display: block;
bottom: 0px;
left:0px;
color:#111;
}
.you {
width: 200px;
height: 200px;
position: absolute;
display: block;
right:0px;
left: 0px;
z-index:999;
background: red;
}
.future {
position: absolute;
display: block;
bottom: 0px;
right:0px;
}
<body>
<!-- partial:index.partial.html -->
<div class="slider-wrapper">
<div class="past">Interior</div>
<div class="future">3D</div>
<div class="before-wrapper">
<div class="after-wrapper">
<div class="after-image"></div>
</div>
</div>
<div class="comparison-slider"></div>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script><script src="./script.js"></script>
</body>
</html>
Actually this small adjustment does the trick
var mouseX = $(window).width() - e.pageX ;
You're assigning the mouseX to be it's normal value (e.pageX) subtracted from the window's width
https://jsfiddle.net/kinglish/fb28Lmzg/5/
;
(function($) {
class Popup {
constructor(options, elem) {
var self = this;
var defaultPopupMenu = `<div>
<i id="faInfo" class="fa fa-info"></i>
<i id="faQuest" class="fa fa-question"></i>
<i id="faLink" class="fa fa-external-link"></i>
</div>`;
this.defaultOptions = {
content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show
position: "top", //where the popup will show by default- top. Other options: right, bottom, or left
theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead
style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom
animation: "standard", //Standard animation by default. Other options: flip, grow, bounce
event: "click", //Default set to "click", can also be set to hover
hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it
zIndex: 100, //Individual z-index can be set for each menu for layering if necessary
//function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur
popItemClick: function(globalthis) {
//Default actions
var twentyEightSpaces = `
`;
var twentyFourSpaces = `
`;
var eightSpaces = ` `;
var sixteenSpaces = `
`;
var content;
var container = $(event.target).attr("id");
switch (container) {
case "faInfo":
content = {
type: "info",
heading: "Information",
text: `<p>To set a new menu when calling .popup() on an element,
you must set a variable that holds a string with the html for that menu, then
pass that variable through as the "content" part of the options. For example: </p>
<p>var myMenu = '<div>\ <br />
${twentyEightSpaces}<a href="#''><i id="faInfo" class="fa fa-info"></i></a>\<br />
${twentyFourSpaces}</div>'; </p>
<p>would create a menu with one item, and just add more '<a>' tags with icons inside the '<div>' tags to add more menu items. </p>
<p>Then add it to the content when calling the popup: </p>
<p>$("#myPopUp").popup({ <br />
${eightSpaces}content: myMenu, <br />
${eightSpaces}popItemClick(globalthis) { <br />
${sixteenSpaces}...new actions here... <br />
${eightSpaces}} <br />
});</p>
<p>You must set new actions in the "popItemClick" function for your menu
in the options you pass or it will throw an error.</p>`
}
globalthis.alertBox(content);
break;
case "faQuest":
content = {
type: "info",
heading: "Question",
text: `<p>Why is this being shown?</p>
<p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p>
<p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p>
<p>Click the "i" button for more info.</p>`
}
globalthis.alertBox(content);
break;
case "faLink":
window.open("http://example.com/");
break;
default:
content = {
type: "danger",
heading: "Error",
text: `<p>Error! You have set a new menu without changing the 'popItemClick' function.
The 'popItemClick' function must be set to new menu actions.</p>`
}
globalthis.alertBox(content);
}
}
}
this.elem = elem;
this.$elem = $(elem);
this.options = $.extend({}, this.defaultOptions, options);
if (!this.$elem.hasClass(this.options.theme)) {
this.$elem.addClass(this.options.theme);
}
this.init();
}
init() {
this.popup = $('<div class="pop-cont" />')
.addClass('pop-' + this.options.position)
.addClass('popupTheme' + this.options.style)
.append('<div class="pop-items" />')
.appendTo('body').css("opacity", 0).hide();
this.setContent();
this.setTriggers();
}
setContent() {
var self = this;
var location = this.popup.find(".pop-items");
var content;
if ((this.options.position == 'top') || (this.options.position == 'bottom')) {
content = $(this.options.content).find("a").addClass("pop-item");
location.html(content);
this.popup.find("i").first().addClass("leftBorder");
this.popup.find("i").last().addClass("rightBorder");
} else if ((this.options.position == 'left') || (this.options.position == 'right')) {
content = $(this.options.content).find("a").addClass("pop-item").addClass('item-side');
location.html(content);
this.popup.find("i").first().addClass("topBorder");
this.popup.find("i").last().addClass("bottomBorder");
}
//popItemClick callback****************************************
location.find('.pop-item').on('click', function(event) {
event.preventDefault();
self.options.popItemClick.call(this, self);
});
}
setTriggers() {
var self = this;
if (this.options.event === 'click') {
this.$elem.on('click', function(event) {
event.preventDefault();
if (self.$elem.hasClass('pressed')) {
self.pophide();
} else {
self.popshow();
}
});
}
if (this.options.event === 'hover') {
this.$elem.on('mouseenter', function(event) {
setTimeout(function() {
self.popshow();
self.popup = $(self.popup[0]);
}, 250);
});
$(this.popup).on('mouseleave', function(event) {
setTimeout(function() {
self.pophide();
}, 1000);
});
}
if (this.options.hideOnClick === true) {
$('html').on('click.popup', function(event) {
if (event.target != self.elem && self.$elem.has(event.target).length === 0 &&
self.popup.has(event.target).length === 0 && self.popup.is(":visible")) {
self.pophide();
}
});
}
}
pophide() {
var self = this;
var animation = {
opacity: 0
};
this.$elem.removeClass('pressed');
switch (this.options.position) {
case 'top':
animation.top = '+=20';
break;
case 'left':
animation.left = '+=20';
break;
case 'right':
animation.left = '-=20';
break;
case 'bottom':
animation.top = '-=20';
break;
}
this.popup.animate(animation, 200, function() {
self.popup.hide();
});
}
popshow() {
this.$elem.addClass('pressed');
this.setPosition();
this.popup.show().css({
opacity: 1
}).addClass('animate-' + this.options.animation);
}
setPosition() {
var self = this;
this.coords = this.$elem.offset();
var x = this.coords.left;
var y = this.coords.top;
var popWidth = this.popup.width();
var popHeight = this.popup.height();
var adjLeft = popWidth / 2;
var adjTop = popHeight / 2;
this.testy = $('<div class="test" />')
.css({
display: 'inline-block',
margin: '0px',
padding: '0px'
})
.appendTo('body');
var measure = this.$elem.clone().css({
padding: "0px",
margin: "0px"
});
var loc = this.testy;
loc.html(measure);
var textWidth = this.testy.width();
var textHeight = this.testy.height();
this.testy.remove();
var adjMenuWidth = textWidth / 2;
var adjMenuHeight = textHeight / 2;
var up = y - (popHeight + 7);
var down = y + textHeight;
if (this.popup.hasClass('pop-top')) {
this.popup.css({
top: up + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-bottom')) {
this.popup.css({
top: (down + 7) + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-left')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x - popWidth - 2) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-right')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x + textWidth + 12) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
}
alertBox(content) {
var self = this;
var myAlert = `<div id="alertBox" class="alert">
<div class="alert-content">
<div class="alert-header">
<h2></h2>
</div>
<div class="alert-body"></div>
<div class="alert-footer">
<button class="alert-close">OK</button>
</div>
</div>
</div>`;
$('body').append(myAlert);
this.alert = $('#alertBox');
this.header = this.alert.find('div.alert-header');
this.heading = this.header.find('h2');
this.alertBody = this.alert.find('div.alert-body');
this.footer = this.alert.find('div.alert-footer');
this.close = this.footer.find('button.alert-close');
this.heading.append(content.heading);
this.alertBody.append(content.text);
switch (content.type) {
case "info":
this.header.addClass("info");
this.footer.addClass("info");
this.close.addClass("info");
break;
case "success":
this.header.addClass("success");
this.footer.addClass("success");
this.close.addClass("success");
break;
case "danger":
this.header.addClass("danger");
this.footer.addClass("danger");
this.close.addClass("danger");
break;
case "warning":
this.header.addClass("warning");
this.footer.addClass("warning");
this.close.addClass("warning");
break;
default:
break;
}
this.alert.show();
var closeBtn = $("button.alert-close");
closeBtn.on("click", function() {
self.alert.remove();
});
$(document).on("click", function(event) {
event.preventDefault();
if (event.target == self.alert[0]) {
self.alert.remove();
}
});
}
};
//Set $.fn.popup so it returns an instance of the Popup class when called*******************************
$.fn.popup = function(options) {
return this.each(function() {
var popobject = new Popup(options, this);
});
};
}(jQuery));
/*jshint multistr: true */
//this is a sample .js file that shows how you might set up the popup menus
;
(function($) {
$(document).ready(function() {
$('#defaultTest').popup();
});
}(jQuery));
/*Default theme**************/
.popupTheme {
background-color: #333;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 5px 5px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
.popupTheme i,
.popupThemeRed i,
.popupThemeBlue i,
.popupThemeGreen i,
.popupThemeCustom i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {
background-color: #4d4d4d;
}
.pop-cont.pop-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: #333 transparent transparent transparent;
z-index: 100;
}
.pop-cont.pop-bottom::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #333 transparent;
z-index: 100;
}
.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
.pop-cont.pop-right::before {
content: "";
position: absolute;
top: 50%;
left: -14px;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent #333 transparent transparent;
z-index: 100;
}
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 5px 5px 3px #888;
}
.pop-cont,
.pop-item,
.popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {
float: none !important;
}
.pop-item i {
margin: -10px 0 0 -10px;
}
.pop-top {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
}
.pop-bottom {
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
}
.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.pop-right {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.animate-standard {
animation: animateStandard 0.3s 1 ease;
-webkit-animation: animateStandard 0.3s 1 ease;
}
#-webkit-keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.animate-grow {
animation: animateGrow 0.4s 1 ease;
-webkit-animation: animateGrow 0.4s 1 ease;
}
#-webkit-keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
#keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
.animate-flip {
animation: animateFlip 0.4s 1 ease;
-webkit-animation: animateFlip 0.4s 1 ease;
}
#-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
#keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.hidden {
display: none !important;
}
.clear {
clear: both;
}
/* The Alert Box (background) */
.alert {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1001;
/* Sit on top */
padding-top: 250px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
}
.alert-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 700px;
min-width: 300px;
/*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
width: fit-content;
/*works in chrome and opera*/
width: -moz-fit-content;
/*works for firefox */
width: -webkit-fit-content;
/*works for Edge v79 and up*/
width: -ms-fit-content;
width: -o-fit-content;
}
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.alert-header,
.alert-header.info {
padding: 2px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
.alert-header.success {
background-color: #00cc1b;
}
.alert-header.danger {
background-color: #ff0000;
}
.alert-header.warning {
background-color: #f7931e;
}
.alert-body {
padding: 2px 16px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #000;
min-height: 40px;
}
.alert-footer,
.alert-footer.info {
padding: 15px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 0px 0px 5px 5px;
text-align: center;
}
.alert-footer.success {
background-color: #00cc1b;
}
.alert-footer.danger {
background-color: #ff0000;
}
.alert-footer.warning {
background-color: #f7931e;
}
.alert-close,
.alert-close.info {
padding: 5px 15px;
border-radius: 3px;
border: 0;
background-color: #fff;
color: #02baf2;
font-weight: bold;
box-shadow: 5px 5px 10px #666;
}
.alert-close.success {
color: #00cc1b;
}
.alert-close.danger {
color: #ff0000;
}
.alert-close.warning {
color: #f7931e;
}
.alert-close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.alert-close:focus {
outline: none;
}
body {
font-family: Helvetica, sans-serif;
}
.displayBox {
background-color: #efefef;
padding: 0px 0px 30px 0px;
display: inline-block;
width: 100%;
}
.header {
text-align: center;
font-size: 12px;
border-bottom: 1px solid #fff;
width: 100%;
color: #fff;
background-color: #130e5a;
}
.header h1 {
margin: 0px;
padding: 5px 0px;
}
div.icon-box-top {
margin: 50px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
div.icon-box {
margin: 25px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
p.icon-text,
p.menuText {
display: block;
margin-left: 45px;
margin-bottom: 0px;
float: left;
}
p.menuText {
margin-left: 20px !important;
margin-top: 0px;
}
.textPopup {
/*When attaching popups to text menus, style text menu separately*/
display: block;
font-size: 28px;
font-weight: bold;
color: #130e5a;
margin: 0px 0px 0px 75px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
float: left;
z-index: 1;
}
p.textPopup.pressed {
color: #02baf2 !important;
}
div#myPopUp,
div#myPopUp2,
div#myPopUp3,
div#myPopUp4 {
margin-left: 75px;
display: inline-block;
}
i.swIcon {
font-size: 208px !important;
margin: 10px;
}
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
I have an example I'm working from which works fine. When I duplicate that code in my app, the icon looks too small and off center.
Here is how it is supposed to look, per example:
Here is how it looks when I enter the same code:
It is smaller and the cog is off center.
Here is the example's html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here is my html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here are the example's dependencies:
<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>
Here are my dependencies:
<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>
The only difference that I can see is he stores his javascript in scripts folder and mine is in js folder. And he stores his css in styles folder whereas mine is in css folder.
The javascript is the same too:
$('#defaultTest').popup();
Any ideas?
I finally found the problem. There was a bootstrap css library that was interfering with the Popup-plugin css. But now my bootstrap tabs don't work and I'll have to spend additional time looking at different versions of it, or replacing the tabs with something else. I figured there was a css conflict somewhere but it took me all day to find it. This has happened to me before and it is a painful and time-consuming process to isolate the problem and fix it. If anyone has suggestions of tools or techniques for speeding up this process, please leave comments below for everyone reading this to benefit.
I've picked a slider from codepen.io and made some changes in the code and when I paste it in the embed code of Weebly (the software where I'm working) it doesn't work, because it doesn't stop resizing and getting bigger and bigger. How can I stop it? P.S. I noticed it starts doing that when I insert the JavaScript code...
$(document).ready(function() {
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width(viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function() {
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight() {
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function() {
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function() {
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width(viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function() {
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) {
--indexPos;
} else {
indexPos = childrenNo - 1;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo - 1) {
indexPos = 0;
} else {
++indexPos;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function() {
$(".slider").fadeIn(500);
}, 500);
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav>div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav>div:hover {
opacity: 1;
}
.slider-nav>div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
Thanks,
Tom
You forgot a </script> in your code and that is probably the issue here. I tried this myself and it worked great.
Try the following:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
$(document).ready(function(){
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width( viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function(){
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight(){
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function(){
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function(){
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width( viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function(){
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) { --indexPos;
} else { indexPos = childrenNo-1; }
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo-1) { indexPos = 0;
} else { ++indexPos; }
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function(){
$(".slider").fadeIn(500);
}, 500);
});
</script>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
</style>
</body></html>
I'm working on a project that calls for a circular progress bar. i want to change data-percent (%) mark size , im try to using % tag, but not working , how can i change it? im use this tutorial Jquery Progress bar
(function($) {
$.fn.loading = function() {
var DEFAULTS = {
backgroundColor: '#b3cef6',
progressColor: '#4b86db',
percent: 75,
duration: 2000
};
$(this).each(function() {
var $target = $(this);
var opts = {
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
};
// console.log(opts);
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');
$target.find('.background').css('background-color', opts.backgroundColor);
$target.find('.left').css('background-color', opts.backgroundColor);
$target.find('.rotate').css('background-color', opts.progressColor);
$target.find('.right').css('background-color', opts.progressColor);
var $rotate = $target.find('.rotate');
setTimeout(function() {
$rotate.css({
'transition': 'transform ' + opts.duration + 'ms linear',
'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
});
}, 1);
if (opts.percent > 50) {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.right').css({
animation: animationRight,
opacity: 1
});
$target.find('.left').css({
animation: animationLeft,
opacity: 0
});
}
});
}
})(jQuery);
$(".progress-bar").loading()
.progress-bar {
display: block;
margin: 0 auto;
text-align: center;
height: 0px;
width: 200px;
font-size: 12px;
font-family: sans-serif;
line-height: 20px;
color: #fff;
margin-top: 55px;
background-color: white;
}
.progress-bar div {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
text-align: center;
margin-top: -52px;
margin-left: -27px;
}
.progress-bar data-percen {
font-size: 8px;
}
.progress-bar div span {
position: absolute;
font-family: sans-serif;
font-size: 60px;
line-height: 175px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 183px;
width: 185px;
left: 8.5px;
top: 8.5px;
text-align: center;
border-radius: 50%;
background-color: #f9f7f7;
color: black;
}
.progress-bar .background {
background-color: #b3cef6;
}
.progress-bar .rotate {
clip: rect(0 100px 200px 0);
background-color: #4b86db;
}
.progress-bar .left {
clip: rect(0 100px 200px 0);
opacity: 1;
background-color: #b3cef6;
}
.progress-bar .right {
clip: rect(0 100px 200px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756">
</div>
The span is positionned absolute and is the element making the center of the circle.
To have a second span for the percent sign,
like this: <span>' + opts.percent + '</span><span>%</span> is not a bad idea...
But you have to play with the CSS a little.
In the below snippet, notice that I changed .progress-bar div span by removing two lines defining the font-size and the background-color.
Those must now be applyed to the right span.
So I made two new CSS rules: .progress-bar div span:nth-of-type(1) and .progress-bar div span:nth-of-type(2).
The second one id the CSS for you percentage sign.
(function($) {
$.fn.loading = function() {
var DEFAULTS = {
backgroundColor: '#b3cef6',
progressColor: '#4b86db',
percent: 75,
duration: 2000
};
$(this).each(function() {
var $target = $(this);
var opts = {
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
};
// console.log(opts);
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '</span><span>%</span></div>');
$target.find('.background').css('background-color', opts.backgroundColor);
$target.find('.left').css('background-color', opts.backgroundColor);
$target.find('.rotate').css('background-color', opts.progressColor);
$target.find('.right').css('background-color', opts.progressColor);
var $rotate = $target.find('.rotate');
setTimeout(function() {
$rotate.css({
'transition': 'transform ' + opts.duration + 'ms linear',
'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
});
}, 1);
if (opts.percent > 50) {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.right').css({
animation: animationRight,
opacity: 1
});
$target.find('.left').css({
animation: animationLeft,
opacity: 0
});
}
});
}
})(jQuery);
$(".progress-bar").loading()
.progress-bar {
display: block;
margin: 0 auto;
text-align: center;
height: 0px;
width: 200px;
font-size: 12px;
font-family: sans-serif;
line-height: 20px;
color: #fff;
margin-top: 55px;
background-color: white;
}
.progress-bar div {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
text-align: center;
margin-top: -52px;
margin-left: -27px;
}
.progress-bar data-percen {
font-size: 8px;
}
.progress-bar div span {
position: absolute;
font-family: sans-serif;
/*font-size: 60px;*/
line-height: 175px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 183px;
width: 185px;
left: 8.5px;
top: 8.5px;
text-align: center;
border-radius: 50%;
/*background-color: #f9f7f7;*/
color: black;
}
.progress-bar div span:nth-of-type(1) {
font-size: 60px;
background-color: #f9f7f7;
}
.progress-bar div span:nth-of-type(2) {
font-size: 12px;
text-align:right;
padding-right:4em;
}
.progress-bar .background {
background-color: #b3cef6;
}
.progress-bar .rotate {
clip: rect(0 100px 200px 0);
background-color: #4b86db;
}
.progress-bar .left {
clip: rect(0 100px 200px 0);
opacity: 1;
background-color: #b3cef6;
}
.progress-bar .right {
clip: rect(0 100px 200px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756">
</div>
On my website I have a hover bar at the top left that when you hover over it, it transitions outward and displays a button which you can press to display more options, but when you suddenly mouse over and go away again, it doesn't look smooth as the button doesn't fade with the div and the button kind of turns square when it the div fades back in. How could I fix it?
function myFunction() {
for (var i = 0; i < 500; i++) {
var x = Math.random() * screen.width;
var y = Math.random() * screen.height;
var star = document.createElement('div');
star.className = 'star';
star.style.left = x + 'px';
star.style.top = y + 'px';
document.body.appendChild(star);
}
}
$(document).ready(function() {
$("button").click(function() {
$('.mercury-lines').toggle();
});
});
$(document).ready(function() {
$("#fade").hover(function() {
$("button").fadeToggle(1500);
});
});
html {
background-color: #000;
overflow-x: hidden;
overflow-y: hidden;
}
#fade {
width: 20px;
height: 100px;
background: #848484;
transition: width 2s;
-webkit-transition: width 2s;
/* Safari 3.1 to 6.0 */
position: absolute;
border-radius: 10%;
top: 10px;
left: -8px;
opacity: 0.6;
filter: alpha(opacity=60);
}
#fade:hover {
width: 200px;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
/*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/
}
#button-change {
position: absolute;
top: 3px;
left: 3px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: none;
display: none;
}
.mercury {
position: absolute;
height: 18px;
/*25px for both*/
width: 18px;
margin-left: 25px;
border-radius: 50%;
/*box-shadow: green 0 0 25px;*/
}
.mercury-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -101px;
margin-top: -101px;
-webkit-animation: spin-left 30s linear infinite;
}
.mercury-lines {
display: none;
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
height: 225px;
width: 225px;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -34px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-left 4s linear infinite;
}
#-webkit-keyframes spin-left {
100% {
-webkit-transform: rotate(-360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body onload="myFunction()">
<img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png">
<div class="mercury-lines">
</div>
<div class="mercury-orbit ">
<img class="mercury" src="http://astronomyandlaw.files.wordpress.com/2013/03/mercury.jpg" />
</div>
<div id="fade">
<button id="button-change">Toggle Orbits</button>
</div>
</body>
</html>
add this for each of your #fade and #button-change in your css
#fade{
overflow:hidden;
}
and spacify the width to button
#button-change{
width: 100px;
}
but let me say that's not a good solution .. you can margin left your #fade and animate it .. I think it will be better
DEMO HERE Using js
in css
#fade{
margin-left :-180px;
}
in js
$(document).ready(function(){
$('#fade').on('mouseenter',function(){
$(this).stop().animate({'margin-left':'0px'},2000);
});
$('#fade').on('mouseleave',function(){
$(this).stop().animate({'margin-left':'-180px'},2000);
});
});
and use all of your code inside just one $(document).ready no need to repeat that
DEMO HERE Using css you can do that with pure css
#fade{
margin-left :-180px;
transition-duration: 2s;
}
#fade:hover{
margin-left: 0px;
transition-duration: 2s;
}
i know this is not the best answer but solves the problem,hope it helps
$(document).ready(function() {
$("#fade").mouseover(function() {
$("button").fadeIn(1500);
});
$("#fade").mouseout(function() {
$("button").hide();
});
});
Demo