I'm having a problem with Sly scrollbars.
I want to set up a timline in which I cann scroll by dragging with the mouse and with a scrollbar. Scrolling with the mouse works fine but I can't get the scrollbar to work and there is no proper documentation.
Also there are no errors on the console.
this is my scrollbar:
<div id="scrollbar">
<div class="handle"></div>
</div>
this is the css:
#scrollbar {
width: 100%;
height: 30px;
background: #f00;
margin-top: 10px;
line-height: 0;
}
#scrollbar .handle {
width: 50px;
height: 30px;
background: #00f;
position: absolute;
}
and the javascript call to initate the scrolling
$("#timeline").sly({
dragSource : '.frame',
horizontal : 1,
itemNav: 'basic',
smart : 1,
activateOn : 'click',
mouseDragging : 1,
touchDragging : 1,
releaseSwing : 1,
scrollBy : 1,
activatePageOn : 'click',
speed : 50,
easing : 'easeInOutBounce',
swingSpeed : 0.07,
elasticBounds : 1,
dragHandle : 1,
dynamicHandle : 1,
clickBar : 1,
scrollbar : '$("#scrollbar")',
dragHandle : 1
});
I need this for a university project, so it would be really cool if somebody has a solution to my problem.
There are two little mistakes.
Change the line
scrollbar : '$("#scrollbar")'
to
scrollBar : $("#scrollbar")
and everything should work as expected.
Related
I'm new with Jquery and I try to do something too difficult for me.
I try to create a menu with animated links : when you hover a link, a other one'll appear and hide the first link.
I try with a simple menu and 2 links : one with an id="link" and the other with id="hover".
When a mouse is on #link (the first link), the #hover (the second one) will appear, grow up and hide #link.
But, when I put the mouse on #link : nothing !!! I test to change CSS and I use Chrome for searching the matter without success.
$("document").ready(function() {
$("#link").hover(function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 500);
},function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 300);
});
});
#link {
display : block;
position : absolute;
border : 1px solid black;
height : 30px;
width : 100px;
}
#hover{
display : none;
position : absolute ;
background-color : orange;
color : blue;
height : 0px;
width : 100px;
}
nav{
position : relative;
height : 100px;
width :100px;
border : 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id="link">A</div>
<div id="hover">A</div>
</nav>
thanks for your help.
I'm looking to create a horizontal timeline and avoid one extremely performance price issue.
suppose we have 3 events represented as 3 divs.
<div class="timeline">
<div id="Ev1">
Event 1
</div>
<div id="Ev2">
Event 2
</div>
<div id="Ev3">
Event 3
</div>
now I want them to display each in its required time according to the horizontal axis i have tried to use margin for that but sure did not work because they are not set to float:left;
the issue is i don't want them to float left i want to control which event is displayed where on the horizontal axis either by using margin or left:##px or any other means that can be converted to a time calculation.
so here is the CSS:
body {
background: #AAA;
}
.timeline {}
.timeline div {
height: 30px;
}
#Ev1 {
background: #e10b1f;
width: 600px;
margin-left: 231px
}
#Ev2 {
background: #fb7d29;
width: 230px;
}
#Ev3 {
background: #96cf67;
width: 460px;
}
I know i could use JS to calculate how many events i have in parallel and fix the top property according to the offset and so on but this is exactly what i am trying to avoid because it causes a sever performance hit when we are looking at hundreds of events on the timeline.
I am looking for an elegant way to tell the browser that if there is enough room on a single line display the DIVs one after the other but if not then stack them one on top with there respective offset according to the event time.
CodePen: http://codepen.io/arthurv/pen/WwbmRr
I'm not sure I got what you are trying to do.
Does this work?
.timeline div {
display: inline-block;
}
1. The CSS architecture
Use percentage based widths + floats for your indidivual events :
body {
background : #AAA;
}
.timeline {
width : 100%;
}
.timeline div {
float : left;
height : 30px;
}
#Ev1 {
background : #e10b1f;
width : 41.51%;
}
#Ev2 {
background : #fb7d29;
width : 17.82%;
margin-left : 5%;
}
#Ev3 {
background : #96cf67;
width : 27.66%;
margin-left : 8%;
}
#Ev4 {
background : #ffc901;
width : 17.82%;
}
#Ev5 {
background : #88aaff;
width : 67%;
margin-left : 12%;
}
<div class="timeline">
<div id="Ev1">
Event 1
</div>
<div id="Ev2">
Event 2
</div>
<div id="Ev3">
Event 3
</div>
<div id="Ev4">
Event 4
</div>
<div id="Ev5">
Event 5
</div>
</div>
2. Generating the values for your widths
To dynamically calculate the actual percentages for the widths of #Ev1, #Ev2, #Ev3, you could use eg. PHP, Less or Sass.
For example, if you'd use Sass, you could using this code to generate the CSS shown in #1 :
$events : (
1 : (0, 41.51%, #fb7d29),
2 : (5%, 17.82%, #fb7d29),
3 : (8%, 27.66%, #96cf67),
4 : (0, 17.82%, #ffc901),
5 : (12%, 67%, #88aaff)
);
#mixin generate-events() {
#each $key, $value in $events {
#Ev#{$key} {
background : nth($value, 3);
width : nth($value, 2);
$margin-left : nth($value, 1);
#if $margin-left != 0 {
margin-left : $margin-left;
}
}
}
}
body {
background : #AAA;
}
.timeline {
width : 100%;
}
.timeline div {
float : left;
height : 30px;
}
#include generate-events();
If I assume that the background position will always be in the format:
0px 0px; or 10px 11px; So, *number*px *number*px.
How can I get both the x position and the y position in Javascript?
Given the following HTML:
<div id="demo"></div>
And CSS:
div {
height: 500px;
width: 500px;
margin: 0 auto;
background: #fff url(http://placekitten.com/300/300) 50% 50% no-repeat;
}
The following JavaScript works:
var demo = document.getElementById('demo'),
_tmp = window.getComputedStyle(demo,null).backgroundPosition.trim().split(/\s+/),
positions = {
'left' : _tmp[0],
'top' : _tmp[1]
};
console.log(positions, positions.left, positions.top);
JS Fiddle demo.
The above approach does require a browser that supports window.getComputedStyle() (obviously), and trim() (though that could be replaced with a replace(/^\s+|\s+$/g,'')).
To get access to the units, and numbers, independently I'd suggest creating other objects within the overall object to hold those numbers, and units:
var demo = document.getElementById('demo'),
_tmp = window.getComputedStyle(demo,null).backgroundPosition.trim().split(/\s+/),
positions = {
'left' : _tmp[0],
'top' : _tmp[1],
'numbers' : {
'left' : parseFloat(_tmp[0]),
'top' : parseFloat(_tmp[1])
},
'units' : {
'left' : _tmp[0].replace(/\d+/,''),
'top' : _tmp[1].replace(/\d+/,'')
}
};
console.log(positions, positions.left, positions.top, positions.numbers.left, positions.numbers.top, positions.units.left, positions.units.top);
JS Fiddle demo.
As to what would happen if there was no background-position set? Well, why not try that, with the following CSS:
div {
height: 500px;
width: 500px;
margin: 0 auto;
background-color: #fff;
background-image: url(http://placekitten.com/300/300);
background-repeat: no-repeat;
}
In Chromium it seems that you get the default background-position of 0% 0% (and corresponding numbers and units): JS Fiddle demo.
References:
JavaScript Regular Expressions.
String.parseFloat().
String.replace().
String.split().
String.trim().
window.getComputedStyle().
I've got a Caroufredsel slider working fine using the "custom" settings from the samples:
<script type='text/javascript'>
$(document).ready(function() {
// Using custom configuration
$("#random_selections").carouFredSel({
items : 3,
direction : "up",
/*wrapper: {
margin:0px,
},*/
scroll : {
items : 1,
easing : "elastic",
duration : 1000,
pauseOnHover : true
}
});
});
</script>
However, the image at the top is not flush with the top border of the container. If I check the debugger, I see that there is CSS styling at the level from within the .js library:
<div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 400px; height: 1387px; margin: 16px 0px; overflow: hidden;">
I have discovered that this particular element is controlled by the margin attribute. How can I adjust this attribute to reflect "margin: 0px 0px" without altering the code in the library? Is there a way to do this externally?
There is little activity in the Caroufredsel support forums, and it's not clear from the configuration pages how to adjust this.
You could locate the class that controls that element in the stylesheet(s), see if it's generated there. Maybe there's some child elements of your class that are overwriting your inline CSS
As you can see there is a slide to the left and the with decreases from 100% to 0 at the same time.
I want to get this same effect but from left to right.
I can't get it right!
jQuery('#target').animate({ width: '0', left: '-25%' }, 1500, 'swing');
Example Fiddle: http://jsfiddle.net/RsBNk/
That is pretty simple. Align the image to the right and then decrease it by 25% using jQuery like below:
jQuery:
jQuery('#target').animate({ width: '0', right: '-25%' }, 1500, 'swing');
CSS:
.box {
width: 100%;
position: absolute;
top: 0;
right: 0; /* Modified this line */
height: 200px;
background-image: url('http://images.icnetwork.co.uk/upl/uxbridgegazette/jul2012/0/4/marc-mccarroll-image-2-304314157.jpg');
background-position: right; /* EDIT: This property needs to be set */
}
Updated Demo
May be this helps you
$('#target').animate({
width : '0',
marginLeft: parseInt($('#target').css('marginLeft'),10) == 0 ?
$('#target').outerWidth() : 0
}, 1500, 'swing');
check demo