Draggable in left and top % - javascript

$(function() {
$('.dragElement').draggable({
containment: "parent"
}).filter('.dragElement').draggable("option", "axis");
});
.one {
width: 500px;
height: 500px;
border: 2px solid;
}
.dragElement {
width: 50px;
height: 50px;
border: 5px solid white;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<div class="one">
<div class="dragElement">
</div>
</div>
Please tell me, is there such a code. When you move an element, left and top are written in px. How to make this position be recorded in % relative to the parent.

First, you can get the height and width of the parent (you can also use an event to recalculate them when resizing the window).
Then, using the drag method to get the left and top of the position, you can use a function to convert it to percentage using the current position and the parent height or width.
$(function() {
$('.dragElement').draggable({
containment: "parent",
drag: function(event, ui) {
console.log(
"top: " + calcPerc(parentHeight, ui.position.top),
"left: " + calcPerc(parentWidth, ui.position.left)
);
}
}).filter('.dragElement').draggable("option", "axis");
function calcPerc(par, child) {
return (100*child)/par;
}
});
var parentEl = $(".one");
var parentHeight, parentWidth;
window.addEventListener('resize', recalcParent);
function recalcParent() {
parentHeight = parseInt(parentEl.css('height'));
parentWidth = parseInt(parentEl.css('width'));
}
recalcParent();
.one {
width: 500px;
height: 500px;
border: 2px solid;
}
.dragElement {
width: 50px;
height: 50px;
border: 5px solid white;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<div class="one">
<div class="dragElement">
</div>
</div>

Related

progress bar animation is not working

I'm doing progress bar the problem is bar animation is not working. I want bar track moves left to right simultaneously % also moves I try but not working animation is not working properly.
can anyone suggest.
thanks.
$(document).ready(function() {
function ProgressBar() {
$('.progress-bar').each(function() {
var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
$(this).find('.progress-bar--barTrack').css('width', percent + '%');
$(this).find('.progress-bar--label').append(percent + '%');
$('.progress-bar--barTrack').animate({
width: $(this).percent,
}, 5000);
});
}
ProgressBar();
});
.progress-bar {
position: relative;
}
.progress-bar-s1 .progress--barTitle {
padding: 1% 1% 3% 0;
width: 15%;
}
.progress-bar-s1 .progress-bar--inner {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
background-color: #ebebeb;
}
.progress-bar-s1 .progress-bar--barTrack {
position: relative;
display: block;
padding: 20px 0;
width: 0;
background-color: #F7CA18;
}
.progress-bar-s1 span.progress-bar--label {
position: absolute;
top: 35%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
<div class="progress--barTitle">Integrity</div>
<div class="progress-bar--inner">
<span class="progress-bar--barTrack" data-width="60"></span>
</div>
<span class="progress-bar--label"></span>
</div>
Don't set the width of barTrack using .css() method and use correct variable i.e. percent instead of $(this).percent to set width in the animate method.
As per comment i want to move 60% also simultanously
You need to animate .progress-bar--label also and also modify its CSS rules.
$(document).ready(function() {
function ProgressBar() {
$('.progress-bar').each(function() {
var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
$(this).find('.progress-bar--label').text(percent + '%');
$(this).find('.progress-bar--barTrack, .progress-bar--label').animate({
width: percent + '%'
}, 5000);
});
}
ProgressBar();
});
.progress-bar {
position: relative;
}
.progress-bar-s1 .progress--barTitle {
padding: 1% 1% 3% 0;
width: 15%;
}
.progress-bar-s1 .progress-bar--inner {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
background-color: #ebebeb;
}
.progress-bar-s1 .progress-bar--barTrack {
position: relative;
display: block;
padding: 20px 0;
width: 0;
background-color: #F7CA18;
}
.progress-bar-s1 span.progress-bar--label {
position: relative;
text-align:right;
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
<div class="progress--barTitle">Integrity</div>
<span class="progress-bar--label"></span>
<div class="progress-bar--inner">
<span class="progress-bar--barTrack" data-width="60"></span>
</div>
</div>

Trouble changing css `top` value to fixed element with js

Trying to move a position:fixed div on scroll by changing the top: css value in javascript. The div won't move though, not sure why.
html:
<div id="red">
<div id="blue"></div>
</div>
css:
#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}
js:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(document.body.scrollTop / 10));
//console.log("yPos = " + yPos); //output is correct
document.getElementById('blue').style.top = yPos + 'px';
//document.getElementById('blue').setAttribute('top',yPos); //also tried this
});
https://jsfiddle.net/akzx43yL/
Why isn't the top css value changing and how can I get it to do so? No jquery please.
Two things:
Instead of document.documentElement.scrollTop, you should use window.pageYOffset (scrollTop doesn't play nicely in Chrome).
You need to add a unit of measurement after you update top; values other than 0 should have px appened to them.
This can be seen in the following:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(window.pageYOffset / 10));
document.getElementById('blue').style.top = yPos + "px";
// Optionally log the `top` value
//console.log(document.getElementById('blue').style.top);
});
#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: absolute;
top: -10px;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}
<div id="red">
<div id="blue"></div>
</div>
Hope this helps! :)
If you check your console, you will be see your console.log("yPos = " + yPos) is always 0 you most update your code as follow:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(document.documentElement.scrollTop / 10));
console.log("yPos = " + yPos);
document.getElementById('blue').style.top = yPos + "px";
});
Tip:
Ways to get srollTop (pure js):
var top = window.pageYOffset || document.documentElement.scrollTop;
This is what worked for me:
document.getElementById('blue').style.top = yPos + "px";

How to set jQuery draggable min/max-left and min/max-right

I made a copy of JSbin for practice, JSbin link here, actual site link here.
This is just a practice for making the front-end of websites as I just started learning web dev little over a week ago. You can put in html, css and javascript in the editboxes, and a page spit out in Output just like the actual JSbin.
But the problem is that you can resize the divs pass other divs.
My idea to prevent this from happening is:
1. get the editboxes' current positions
2. store the left/right position of the editbox if resized to 10% window width
3. set the min/max left and right for the draggable div
And hence the question. How do I set the max-left/right for the draggable.
Also, any idea on why the draggable before Output div is diificult to drag to the right.
Edit: How the site is structured. When you drag the .drag (.resize in my JSbin code), it changes its left and right div's left and right. And the draggables are contained in the #main's div.
<div id="main>
<div id="HTML"></div>
<div class="drag"></div> //drag this left and right to change the right of the HTML and left of CSS
<div id="CSS"></div>
<div class="drag"></div> //drag this left and right to change the right of the Css and left of JavaScript
<div id="JavaScript"></div>
<div class="drag"></div> //drag this left and right to change the right of the JavaScript and left of Output
<div id="Output"></div>
</div>
By taking advantage of jQuery Ui's built in draggable event which gives us position information and also allows us to set position on drag.
I came up with the following solution:
var dragDistance = 100;
$(".resize").draggable({
axis: "x",
containment: "parent",
drag: function( event, ui){
ui.position.left = Math.min( ui.position.left, ui.helper.next().offset().left + ui.helper.next().width()-dragDistance);
ui.position.left = Math.max(ui.position.left, ui.helper.prev().offset().left + dragDistance);
resize();
}
});
I removed your onDrag function in the process so it wouldn't interfere.
See the bin here:
JSBin
NOTES:
I haven't looked into it and maybe its just a JSBin issue because I can't reproduce it in your live site. But if the boundary lines disappear while you are dragging the code won't work. You'll probably have to increase the drag distance to the point where the lines don't disappear while dragging.
You may notice you have difficulty dragging the Output box that seems to be caused by the Iframe you have inside. If I comment out the IFrame I can drag it just fine. I haven't looked for a solution but perhaps experiment with some padding or margins so that the Iframe is not pegged so closely against the border. Or maybe if you detached it from the DOM while dragging that would fix it.
Use containment
Constrains dragging to within the bounds of the specified element or
region.
For Eg:
$( ".selector" ).draggable({
containment: "parent"
});
Click Here For a Demo
You could manually keep track of the position of each of the windows in the dragging() function, and only call the resize() method if they don't overlap:
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
Here's the complete example - I also refactored/simplified your "resize" function.
var codeboxWidth = $("#codebox").width();
$(document).ready(function() {
$("#codebox").height($(window).height() - $("#topbar").height());
$(".content").height($("#codebox").height());
$(".editbox").height($(".content").height() - $(".contentheader").height());
$("#HTML").css("left", 0);
$("#HTML").css("right", "75%");
$("#CSS").css("left", "25%");
$("#CSS").css("right", "50%");
$("#JavaScript").css("left", "50%");
$("#JavaScript").css("right", "25%");
$("#Output").css("left", "75%");
$("#Output").css("right", 0);
});
function resize(event) {
if ($(event.target).is("#1")) {
$("#CSS").css("left", event.clientX);
$("#HTML").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#2")) {
$("#JavaScript").css("left", event.clientX);
$("#CSS").css("right", codeboxWidth - event.clientX);
}
if ($(event.target).is("#3")) {
$("#Output").css("left", event.clientX);
$("#JavaScript").css("right", codeboxWidth - event.clientX);
}
}
$(".resize").draggable({
axis: "x"
});
function dragging(event) {
var CSS_left = parseInt($("#CSS").css("left"));
var JavaScript_left = parseInt($("#JavaScript").css("left"));
var Output_left = parseInt($("#Output").css("left"));
var offset = 100;
var checkOverlap1 = $(event.target).is("#1")
&& event.clientX + offset <= JavaScript_left
&& event.clientX >= offset;
var checkOverlap2 = $(event.target).is("#2")
&& event.clientX + offset <= Output_left
&& event.clientX - offset >= CSS_left;
var checkOverlap3 = $(event.target).is("#3")
&& event.clientX - offset >= JavaScript_left
&& event.clientX <= codeboxWidth - offset;
if (checkOverlap1 || checkOverlap2 || checkOverlap3) {
resize(event);
}
}
body {
margin: 0;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
background: #F7F7F7;
font-family: Arial;
}
#topbar {
margin: 0;
padding: 0;
width: 100%;
height: 35px;
background: #EEEEEE;
position: relative;
}
h2 {
margin: 2px 0 0 0;
padding: 0;
float: left;
position: absolute;
}
#control {
width: 100%;
margin: 8px 0 0 0;
padding: 0;
position: absolute;
text-align: center;
}
.option {
margin: 0 -5px 0 0;
padding: 5px 10px 5px 10px;
text-align: center;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
text-decoration: none;
font-size: 0.9em;
color: black;
}
.option:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.option:last-child {
border-right: 1px solid #CCC;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.option:hover {
background: #dee5e5;
}
.opactive {
background: #EBF3FF;
}
.opinactive {
background: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
#codebox {
margin: 0;
padding: 0 width: 100%;
position: static;
top: 35px;
background: white;
}
.content {
margin: 0;
padding: 0;
min-width: 10%;
max-width: 100%;
position: absolute;
float: left;
color: #6DCAFC;
background: #F7F7F7;
overflow: hidden;
}
.resize {
top: 35px;
bottom: 0px;
width: 1px;
margin-left: 0;
height: 100%;
right: auto;
opacity: 0;
position: absolute;
cursor: ew-resize;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgba(218, 218, 218, 0.498039);
z-index: 99999;
background: #666;
}
.contentheader {
margin: 0;
padding: 0;
background: transparent;
position: relative;
}
.selectedcontent {
background: white;
}
.contentbox {
width: 100%;
height: 100%;
background: transparent;
position: relative;
box-sizing: border-box;
border-right: 1px solid darkgrey;
overflow: hidden;
}
.editbox {
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
}
.textareabox {
background: transparent;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
border: none;
outline: none;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Project 04</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="topbar">
<h2>Code Runner</h2>
<div id="control">
HTML
CSS
JavaScript
Output
</div>
</div>
<div id="codebox">
<div id="HTML" class="content active">
<div class="contentbox">
<div class="contentheader">HTML</div>
<div class="editbox" id="HTMLeditbox">
<textarea id="HTMLcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="1" style="left: 25%" ondrag="dragging(event)"></div>
<div id="CSS" class="content active">
<div class="contentbox">
<div class="contentheader">CSS</div>
<div class="editbox" id="CSSeditbox">
<textarea id="CSScode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="2" style="left: 50%" ondrag="dragging(event)"></div>
<div id="JavaScript" class="content active">
<div class="contentbox">
<div class="contentheader">JavaScript</div>
<div class="editbox" id="JavaScripteditbox">
<textarea id="JavaScriptcode" class="textareabox"></textarea>
</div>
</div>
</div>
<div class="resize active" id="3" style="left: 75%" ondrag="dragging(event)"></div>
<div id="Output" class="content active">
<div class="contentbox">
<div class="contentheader">Output</div>
<div class="editbox" id="Outputbox">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jscript.js"></script>
</body>
</html>
Here's a JSBin based on your example.

How to attach div to mouse pointer so it will work properly during scrolling

I'm trying to attach some kind of tips above buttons and show them on hover so they will appear directly aside to mouse pointer. I want to store text for those tips in data-attributes of buttons and create them dynamically using jquery. I use .pageX .pageY stuff to find coordinates of cursor, but it's working fine only in certain point of scroll.
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.pageY-230,
left: e.pageX+15
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.pageY-230,
left: e.pageX+15
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>
You better watch it: http://jsfiddle.net/millerJr/ps8vf8ce/
So, how to attach those tips to pointer directly, regardless to scroll position? Thanks!
You need to use e.clientX and e.clientY in this manner
top: e.clientY+$(this).height() and left: e.clientX+$(this).width()/2 for bottom center of this element in scope. You can add anything else wrt the current element hovered upon
e.clientX and e.clientY will provide the exact mouse co-ordinates
Snippet Below
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>

Trouble with the CSS to change start position on a slider

I'm very new to CSS and Javascript, and as a sort of project have been working on a slider that moves in two directions, both horizontally and vertically. I've used this guide as a model, and have something that is mostly serviceable.
However, I'd like for the slider to 'begin' not at the standard point of origin (that is, the left-most and upper-most slide) but at a different, customizable point--for instance, the horizontal and vertical centermost of the available slides--and nothing I try helps me to do this. I've played around with margins, positions and padding, but everything only messes the slider up. Does anyone have an idea for how I can change the slide that is showing on pageload?
Here's the CSS that I have so far:
.testprojbody
{
background-color: black;
padding: 0;
overflow: hidden;
}
.slider-holder
{
width: 98%;
height: 665px;
border: 2px black solid;
background-color: white;
float: center;
margin-left: 9px;
}
.slider
{
width: 987px;
height: 610px;
overflow: hidden;
float:center;
margin-top: 25px;
border: 2px black solid;
margin-left: 35px;
}
.holder
{
width: 200%;
height: 200%;
position: relative;
}
.slide
{
float: left;
width: 987px;
height: 610px;
position: relative;
}
.slider-navright
{
text-align: center;
margin: 310px 0 0 1030px;
position: absolute;
}
.slider-navright a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #999;
}
.slider-navleft {
text-align: center;
margin: 310px 0 0 12px;
position: absolute;
}
.slider-navleft a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #999;
}
.slider-navtop {
text-align: center;
margin: 2px 0 0 501px;
position: absolute;
}
.slider-navtop a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 20px solid #999;
}
.slider-navbot {
text-align: center;
margin: 642px 0 0 501px;
position: absolute;
}
.slider-navbot a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 20px solid #999;
}
Here's the Javascript, which allows for nav & animation and so on:
<script type="text/javascript">
var positionH = 0
var positionV = 0
$(document).ready(function(){
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNavRight: $(".slider-navright"),
sliderNavLeft: $(".slider-navleft"),
sliderNavTop: $(".slider-navtop"),
sliderNavBot: $(".slider-navbot"),
},
timing: 400,
slideWidth: 987,
slideHeight: 610,
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// nav code
this.el.sliderNavRight.on("click", "a", function(event) {
slider.handleNavRightClick(event, this);
});
this.el.sliderNavLeft.on("click", "a", function(event) {
slider.handleNavLeftClick(event, this);
});
this.el.sliderNavTop.on("click", "a", function(event) {
slider.handleNavTopClick(event, this);
});
this.el.sliderNavBot.on("click", "a", function(event) {
slider.handleNavBotClick(event, this);
});
},
handleNavRightClick: function(event, el) {
positionH+=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavLeftClick: function(event, el) {
positionH-=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavTopClick: function(event, el) {
event.preventDefault();
positionV--;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
handleNavBotClick: function(event, el) {
event.preventDefault();
positionV++;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
};
slider.init();});
</script>
<script type="text/javascript">
//arrow functions
$(document.documentElement).keydown(function(event){
if (event.keyCode == 39){
//go right
event.preventDefault();
$('.slider-navright a')
.click();
} else if (event.keyCode == 37){
//go left
event.preventDefault();
$('.slider-navleft a')
.click();
} else if (event.keyCode == 38){
//go up
event.preventDefault();
$('.slider-navtop a')
.click();
} else if (event.keyCode == 40){
//go down
event.preventDefault();
$('.slider-navbot a')
.click();
}
});
// makes slider unselectable AND makes arrow nav work better
$(".slider").disableSelection();
</script>
and here's the relevant HTML:
<body class="testprojbody">
<div class="slider-holder">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-x0y0"></div>
<div class="slide" id="slide-x1y0"></div>
<div class="slide" id="slide-x0yA"></div>
<div class="slide" id="slide-x0y0"></div>
</div>
</div>
<nav class="slider-navright">
Move Right
</nav>
<nav class="slider-navleft">
Move Left
</nav>
<nav class="slider-navtop">
Move Up
</nav>
<nav class="slider-navbot">
Move Down
</nav>
</div>
</body>
</html>
Hope this is comprehensible, as I said, I'm very new (only picked up javascript about two weeks ago, and html maybe a month and a half ago), so I'm sure this is very sloppy, roundabout code. Still, if anyone could help, it would be much appreciated!
Thanks.
Looks like the first lines on your JavaScript could be what you're looking for.
Have you tried changing the values of
var positionH = 0
var positionV = 0
to the positions you want?
EDIT
Okay so following on you can use those variables you'll just need to add a little more code to your init method...
init: function() {
this.bindUIEvents();
this.el.slider.scrollLeft(positionH);
this.el.slider.scrollTop(positionV);
}
Then change the positionH and positionV variables.

Categories