I am trying to change the size of the image for the ui slider handler to increase as you move the scroller to the right and to decrease in size as you scroll it to the left. I will be using a SVG of course so the scale remains accurate! any ideas? :(
Ye can check out the code here:
http://jsfiddle.net/userdude/3teR3/
or here:
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
<div id="slider"></div>
$(function() {
$("#slider").slider();
});
You can make the size of the .png dependent from width and height and change these with the slider-value:
HTML:
<div id="slider"></div>
CSS:
html,
body {
width: 100%;
}
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
background-size:100%; /*this is the importent thing!*/
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
Javascript:
$(function() {
$("#slider").slider({
min:0, max: 10,
slide: function(event,ui){
$(".ui-slider-handle").css('width',28*(1+(ui.value)));
$(".ui-slider-handle").css('height',28*(1+(ui.value)));
},
});
});
And here as jsFiddle: http://jsfiddle.net/1Blerk/3teR3/20/
Maybe it is still usefull for you.
Related
I'm trying to make it when the users mouse enters the .container the #facial will slide to the left, pause for a second, and then increase it's width to fill the width of it's container.
Right now the #facial slides properly, but when i try to have #facial fill the entire width it pops out of it's container. Also i'd like it to pause for a moment to show the transition slower from when it enters the middle to when it increases it's width.
Here is my code.
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '122px'});
// #facial expands it's width to fit .container.
$('#facial').width(400);
});
});
Here is my Demo
$(document).ready(function() {
$('.container').mouseenter(function() {
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({
right: '122px',
position: 'absolute'
}).delay(500).animate({
right: '0px',
width: '478px'
});
// #facial expands it's width to fit .container.
$('#facial').width(250); // .width(400) causes it to pop-out
});
});
body {
background-color: #d6d6d6;
}
.container {
margin: 200px auto;
background-color: red;
width: 478px;
height: 200px;
}
img {
float: left;
width: 239px;
height: 200px;
}
.image {
position: absolute;
}
#facial {
position: relative;
float: right;
width: 239px;
height: 200px;
background-color: #008aaf;
}
#facial h1,
#facial h2 {
text-align: center;
margin-top: 30px;
color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
<img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" alt="Facial - Marketing Material" />
</div>
<div id="facial">
<h1>Facial</h1>
<h2>Marketing Material</h2>
</div>
</div>
Changed to use percentages and to use absolute positioning.
https://jsfiddle.net/sy4pv8z3/
Javascript:
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
.delay(500)
.animate({right: 0, width: '100%'});
});
});
CSS:
body {
background-color:#d6d6d6;
}
.container {
position: relative;
margin: 200px auto;
background-color:red;
width:478px;
height:200px;
}
img {
float:left;
width:239px;
height:200px;
}
#facial {
position:absolute;
right: 0;
width:239px;
height:200px;
background-color:#008aaf;
}
#facial h1, #facial h2 {
text-align:center;
margin-top:30px;
color:#FFFFFF;
}
$('#facial').animate({right: '122px'}).delay(1000).animate({width: '400px'});
I want to make the div 30% of the height of the window and then on click make it 90%. The thing is I'm only being allowed to specify widths in percentages but with height it breaks unless its px. Any thoughts? Here's a link:
http://codepen.io/chris86/pen/avvWwJ
Here's the html:
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<div id="button" class="banner" value="Switch Class"></div>
Here's the CSS:
.banner {
background-color: #c3c3c3;
height: 100px;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 200px;
width: 80%;
padding: 0;
margin:0 auto;
}
And the jQuery:
$(function() {
$('#button').click(function(){
$(".banner").switchClass("banner","bannerbig",'fast');
$(".bannerbig").switchClass("bannerbig","banner",'fast');
return false;
});
});
The reason your code breaks is because using percentage as the value for height or width is dependent on the height of the parent. As far as the DOM is concerned, the only element that has absolute height / width by default is the document object.
So, you have to specify the first DOM elements which don't have absolute height by default as a percentage of the document's height, like so:
html, body {
height: 100%;
}
Then use the appropriate percentage heights for your .banner and .bannerbig classes in CSS:
.banner {
background-color: #c3c3c3;
height: 30%;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 90%;
width: 80%;
padding: 0;
margin:0 auto;
}
Hope this helps.
Why is it that even though I have this animation's duration set to 2 seconds, shrinking the window results in there being a greater delay at first, and a faster animation?
See Bootply.
JS:
function animateit() {
$('.wrapper .water').animate({
'height': '350px',
'top': 0
}, 2000, function () {
$('.wrapper .water').animate({
'height': 0,
'top': '350px'
}, 2000, animateit);
});
}
animateit();
CSS:
.wrapper {
position: relative;
height:auto;
width: 100%;
max-width: 350px;
overflow:hidden;
}
.img-responsive {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.glass {
position:absolute;
left:0px;
top:0px;
z-index:5;
}
.hide-image {
display: block;
opacity: 0;
width: 100%;
}
.water {
position:absolute;
left:0px;
right: 0;
top:350px;
background-color:#67d9ff;
height:0px;
display:block;
}
HTML:
<div class="wrapper">
<img class="hide-image" src="http://www.videsignz.com/testing/images/water-front2.png">
<img class="glass img-responsive" src="http://www.videsignz.com/testing/images/water-front2.png">
<div class="water"></div>
</div>
I noticed that for the second part of the animation's JS, changing 'top': '350px' to 'top': '100%' caused the it's duration to be relatively consistent regardless of window size, but applying that code to the filling of the glass doesn't yield the same result - and it also alters the animation in normal view nonetheless.
I want to center an absolute positioned image horizontally in a relative positioned container. I tried to do with css. But I could't and i did in Jquery
http://jsfiddle.net/CY6TP/ [This is i tried to do in Jquery]
**Guys can anyone help me to do this in CSS.**
Thanks in advance
try this:
var width=$('.main').width();
var height=$('.main').height();
$('a').css(
{
"position":"absolute",
"bottom":"50%",
"margin-top":(height/2),
"left":(width/2)-50
});
DEMO
UPDATE
In CSS
.main a{
bottom:50%;
margin-top:-150px;
position:absolute;
left:75px;
}
DEMO
You can set all in css like this :
a{
position : absolute ;
height : 10px;
width : 100px;
top : 50%;
margin-top : -5px;
left : 50%;
margin-left : -50px;}
Demo
try this to make it horizontally center
a{
position: absolute;
text-align: center;
width: 100%;
}
OR this to make it horizontally and vertically both center
a {
height: 100%;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.main img { top:50%; left:50%; margin: -11px 0 0 -50px; position: absolute;}
Is this you want?
If your height is fixed, you could use something like this maybe?
CSS:
#div1 {
width:100%;
height:100px;
text-align:center;
}
#div1 img {
line-height:100px;
}
HTML:
<div id="div1">
<img src="yourimage.jpg" />
</div>
When the page is first loaded, and the image is hovered over for the first time, the sliding panel slides down from the top to the bottom. But ever time you hover over it after that, it slides up from the bottom - which is what I want. I don't want it to slide down from the top the first time it's hovered over. Is there any way to make it just slide up every time it's hovered over? I'm sure there's some simple solution but I'm not very familiar with javascript.
<div class="boxgrid captionfull">
<img src="http://s17.postimage.org/arxuilf9r/jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/>http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
</div>
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
$(document).ready(function(){
$('.cover').hide();
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}).show();
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
});
http://jsfiddle.net/scottm29/NUpfz/1/
Define a startup css to your element:
Here is jsFiddle.
.boxcaption{
...
top:260px;
}