I have some issue with jQuery slider when I scale it with css transform: scale(x)
I understand that calculations of pixels on slider drag are not correct while it's scaled, but is there any solution?
Here is the example of my issue:
$('.slider-1').slider();
$('.slider-2').slider();
.wrapper-1,
.wrapper-2
{
padding: 25px;
width: 500px;
}
.slider-2 {
marggin-top: 50px;
transform: scale(0.6);
transform-origin: 0;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper-1">
<p>Slider normal</p>
<div class="slider-1"></div>
</div>
<div class="wrapper-2">
<p>Slider transformed (scaled)</p>
<div class="slider-2"></div>
</div>
It won't work cause the position changes as a percentage. So its moving correctly but appears to be wrong cause its not at the position of mouse cursor.
For the right result you can set width height and top of slider , handle manually
$('.slider-1').slider();
$('.slider-2').slider();
.wrapper-1,
.wrapper-2 {
padding: 25px;
width: 500px;
}
.slider-2 {
margin-top: 50px;
height: 5px !important;
width: 100px;
}
.slider-2 span {
transform: scale(0.6);
top:-9px !important;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper-1">
<p>Slider normal</p>
<div class="slider-1"></div>
</div>
<div class="wrapper-2">
<p>Slider transformed (scaled)</p>
<div class="slider-2"></div>
</div>
I don't think you can do that. I also tried using scale and it gave the same behavior. You could just change the width/height of the elements, it's easy to style.
$('.slider-1').slider();
$('.slider-2').slider();
.wrapper-1,
.wrapper-2
{
padding: 25px;
width: 500px;
}
.slider-2.ui-slider-horizontal {
marggin-top: 50px;
transform-origin: 0;
width: 60%;
height: .5em;
}
.slider-2.ui-slider .ui-slider-handle {
width: .8em;
height: .8em;
top: -0.2em;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper-1">
<p>Slider normal</p>
<div class="slider-1"></div>
</div>
<div class="wrapper-2">
<p>Slider transformed (scaled)</p>
<div class="slider-2"></div>
</div>
Related
I am trying to create a slide animation such that when a link is clicked, the current div hides and the hidden div appears. It seems to work fine however before the slide effect is complete, a white space appears. How can I avoid this white space such that the new div gives an illusion of sliding over without changing the position of the current divs.
Fiddle:
$(document).ready(function() {
$(".c-f").click(function() {
$("#home-intro").hide();
$("#cf-intro").show("slide", {
direction: "right"
}, "slow");
});
});
.left {
width: 50%;
background: red;
float: left;
height: 90vh;
}
.right {
width: 50%;
background: green;
float: right;
height: 90vh;
}
.blue {
width: 50%;
background: blue !important;
float: right;
height: 90vh;
}
#cf-intro {
background: blue;
display: none;
height: 90vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="home-intro">
<div class="left">
some text
</div>
<div class="right">
<a class="c-f" href="#">Some Link</a>
</div>
</div>
<div id="cf-intro">
<div class="left">
some text more
</div>
<div class="right blue">
Some even more text
</div>
</div>
One way is to remove it from the document flow (via position: absolute, although fixed would also work) then animate its right CSS property, like so (see JavaScript comments for further explanation):
$(document).ready(function() {
$(".c-f").click(function() {
// set here and used by both functions to ensure the speed is always the same
var animSpeed = "slow";
// remove from document flow by setting "position: absolute"
// (and ensure width is still 100%)
$("#home-intro").css({
position: "absolute",
width: "100%"
}).animate({
// "push" it from the right
right: "100%"
}, animSpeed, function() {
// hide once it's finished animating
$(this).hide();
});
$("#cf-intro").show("slide", {
direction: "right"
}, animSpeed);
});
});
.left {
width: 50%;
background: red;
float: left;
height: 90vh;
}
.right {
width: 50%;
background: green;
float: right;
height: 90vh;
}
.blue {
width: 50%;
background: blue !important;
float: right;
height: 90vh;
}
#cf-intro {
background: blue;
display: none;
height: 90vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="home-intro">
<div class="left">
some text
</div>
<div class="right">
<a class="c-f" href="#">Some Link</a>
</div>
</div>
<div id="cf-intro">
<div class="left">
some text more
</div>
<div class="right blue">
Some even more text
</div>
</div>
I want to create a navigation page where 3 images are displayed as diagonal stripes. My first approach was to use div's and to transform -webkit-transform: skew into shape. The problem is that the first and last image leaves a lot of free space.
My second approach would be to use canvas because it allows me to define the shape freely.
I'm not sure if I can use the images as buttons(onclick event) because the shape would be correct, but the div will remain rectangular. With the consequence that if for example the middle image is clicked and the middle div overlap the first div the first function of the first image is triggered.
Do you know a good way to solve this problem? Do you have a better approach?
The idea:
The stripes should have the +- the same size. Unlike my sketch
As requested here the code fragment. Unfortunately there is not much, as I haven't found a clever approach yet:
html, body{
width: 1024px;
height: 768px;
}
:root{
--preset-screen-width: 1024px;
--preset-screen-height: 768px;
--main-img-width: calc((var(--preset-screen-width) / 3) - 5px);
}
/*
.Hidden-Images {
width: 1024px;
height: 768px;
}
*/
.Hidden-Image_1{
width: 1024px;
height: 768px;
background-image: url(../img/redhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_2{
width: 1024px;
height: 768px;
background-image: url(../img/brownhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_3{
width: 1024px;
height: 768px;
background-image: url(../img/loecklihead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Image-Stripes-Holder{
width: 1024px;
height: 768px;
text-align:center;
background-color: rgb(93, 129, 39);
overflow: hidden;
}
.First-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: red 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Second-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: blue 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Third-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: green 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
<!doctype html>
<html>
<head>
<title>CH.Valette_S1.C1_2019.1850-DE</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/valette_custom.css">
<link rel="stylesheet" href="modules/essential/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="modules/noBouncing/noBouning.js"></script>
<script type="text/javascript" src="modules/fastSwipe/fastSwipe.js"></script>
<script type="text/javascript" src="modules/essential/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery-ui.min.js"></script>
<script type="text/javascript" src="modules/essential/veeva-lib/veeva-library-3.2.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/accelerator/lib/touchy.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/iscroll.js"></script>
<script type="text/javascript" src="modules/essential/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="Hidden-Images">
<div class="Hidden-Image_1">
</div>
<div class="Hidden-Image_2">
</div>
<div class="Hidden-Image_3">
</div>
</div>
<div class="Image-Stripes-Holder">
<div class="First-Image-Holder">
<!--<img class="First-Image" src="assets/img/redhead_small.jpg">-->
</div>
<div class="Second-Image-Holder">
<!--<img class="First-Image" src="assets/img/brownhead_small.jpg">-->
</div>
<div class="Third-Image-Holder">
<!--<img class="First-Image" src="assets/img/loecklihead_small.jpg">-->
</div>
</div>
</body>
</html>
You can try using a map in your HTML to define click areas. Done this in the past and it works perfectly.
Remember to use
<area shape="poly"> for the map and define coordinates for click areas.
More detailed reading with an example can be found here.
The position:relative bottom: 0 is not working for me. I need to position the button at the bottom of my well and in the center. I also have to place the facebook share link in the left side of it, but untill I don't place this right, I cannot plan for the facebook link now.
Below is my code:
$(document).ready(function() {
var content="";
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
content=key[0].content + "<p>— " + key[0].title + "</p>";
$("#quote-form").html(content);
console.log(content);
});
$("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
});
});
.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:10%;
}
.background{
background-color: rgba(245,245,245,0.2);
border-radius:10%;
padding-bottom: 10%;
}
#button-shape{
position:relative;
bottom: 0;
padding-left:48%;
padding-right: 48%;
}
.quote-shape{
border-radius: 10%;
width: absolute;
height: absolute;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
}
#page-background{
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
#share {
height:30px;
width: 80px;
position:
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="container-fluid">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<div class="row" id="button-shape">
<div id="share" class="col">
<!--<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a> -->
</div>
<div class="col">
<button type="button" id="click button-shape" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Unless you have previously set bottom to another value, using position: relative along with bottom: 0 is not going to have any visual effect.
There are multiple ways to solve your problem, one of which is using position: absolute along withtransform as shown below:
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
Also, in order for the above code to work, you need to set the position of the parent to relative.
#page {
position: relative;
}
With your current HTML structure, however, using traditional ways will fail, because you have nested the button very deep inside the container which has a padding set. You need to make some serious changes to your HTML structure in order to achieve an optimal result. Most importantly put the button as an immediate child to the well, #page.
Check out a JSFiddle here or the following snippet.
Snippet:
/* ----- CSS ----- */
div.background {
background-color: rgba(245, 245, 245, 0.1);
border-radius: 10%;
padding-bottom: 5%;
}
.quote-shape {
border-radius: 10%;
}
#page {
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
margin-bottom: 2%;
width: 1200px;
height: 450px;
max-height: 450px;
}
#page-background {
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
/*************** MY CODE ***************/
#page {
position: relative;
/* I change the dimensions to fit in the snippet. */
width: 80%;
height: 150px;
margin: 5% auto;
}
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
<!----- HTML ----->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="fixed-width">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
</div>
<button type="button" id="button-prop" class="btn btn-outline-secondary btn-circle">
<i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</body>
</html>
Notes:
Don't use space-separated ids such as click button-shape, as you're only making your life more difficult rendering the selector #click button-shape invalid, having to use [id = "click button-shape"] instead.
I have kept only the relevant parts of your code.
This is PSD(what i wanna do):
This is HTML:
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-5 bg">
</div>
</div>
Bg class is the logo section. Help
You need to adjust your structure. You have to use container-fluid (to go full width) and use row inside container like this:
.bg {
background: red;
height: 60px;
border-radius:0 50px 50px 0;
}
.content {
border:1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5 bg">
</div>
<div class="col-6 content">
the remaining content goes here
</div>
</div>
</div>
You can try :before pseudo selector like below
.bg {
background: red;
height: 60px;
border-radius: 0 30px 30px 0;
}
.container {
max-width: 360px;
}
.bg:before {
content: "";
position: absolute;
background: red;
top: 0;
bottom: 0;
left: -1000px;
right: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-5 bg">
</div>
</div>
Remove container class to get end to end result and better you use row class
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-5 bg">
</div>
</div>
I am trying to implement a draggable (drag & drop) picture using a script that is included at the header of my html file. I have 3 separated files for this project; html, css and js. However, when I upload it to my localhost, the draggable function is not working at all meanwhile it is working perfectly on Jsfiddle.
This is the html:
<!DOCTYPE HTML>
<html>
<head>
<link href="index-05.css" rel="stylesheet">
<script type="text/javascript" src="index-05.js"></script>
<!--dragonfly animation-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<script type="text/javascript" src="kinetic-v5.1.0.js"></script>
<script type="text/javascript" src="tweenmax.min.js"></script>
<!--draggable-->
<script>
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "parent", scroll: false});
</script>
</head>
<body>
<div id="container"></div>
<div class="containment-wrapper">
<div class="boxone" class="draggable ui-widget-content"></div>
<div class="boxtwo" class="draggable ui-widget-content"></div>
<div class="boxthree"></div>
</div>
</body>
</html>
Here is the css:
body {
margin:0;
height: 595px;
}
#container{
/*background-color:rgb(19,163,174);*/
background-image:url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:595px;
overflow: hidden;
}
#container .background {
width: 100px;
height: 200px;
}
/************************************draggable************************************/
.containment-wrapper {
background:khaki;
overflow: hidden;
padding: 50px;
}
.boxone {
width: 100%;
height: 200px;
background: papayawhip;
border-radius:50px;
margin-bottom: 15px;
}
.boxtwo {
width: 100px;
height: 100px;
border-radius:12px;
background: darkseagreen;
margin-bottom: 15px;
float: left;
}
.boxthree {
width: 100px;
height: 100px;
border-radius:50px;
background: lightcoral;
margin-bottom: 15px;
float: left;
}
I also included a few other kinetic animation in the same page as the drag-and-drop function. Could this be the problem? Please advice. I am very new in this. Thank you in advance.
there are two jquery-ui js files since including jQuery-ui twice can cause all sorts of issues.
<script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Please move one of them.