Scrolling buttons - with jQuery - javascript

So I'm working on a list that you can scroll through by clicking on buttons. And it also needs to have a scrollbar visible and working too. But I don't know how to edit my code to get them both to function. I can either have the buttons working or the scrollbar, not both. Can someone help?
var itemsToShow = 3;
$('#scroll>li').each(function(i,k) {
var ele = $(this);
$(ele).attr('id', 'scroll' + i);
});
$('#up').bind('click', function() {
if ($('#scroll0:hidden').length > 0)
{
// This means we can go up
var boundaryTop = $('ul li:visible:first').attr('id');
var boundaryBottom = $('ul li:visible:last').attr('id');
if ($('ul li#'+ boundaryTop).prev().length > 0)
{
$('ul li#'+ boundaryTop).prev().show();
$('ul li#'+ boundaryBottom).hide();
}
}
});
$('#down').bind('click', function() {
if ($('#scroll li:last:hidden').length > 0)
{
// This means we can go down
var boundaryTop = $('#scroll li:visible:first').attr('id');
var boundaryBottom = $('#scroll li:visible:last').attr('id');
if ($('#scroll li#'+ boundaryBottom).next().length > 0)
{
$('#scroll li#'+ boundaryBottom).next().show();
$('#scroll li#'+ boundaryTop).hide();
}
}
});
.lg {
overflow-x:auto;
height:90px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="lg">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
<div id="updown">
<a class="btn btn-primary" id="up" href="#">up</a>
<a class="btn btn-primary" id="down" href="#">down</a>
</div>
What am I doing wrong? Someone please help!
Thank you!

Here is how you scroll to top and bottom:
https://jsfiddle.net/45cmhys8/
// Scroll to the top
$('a#up').on('click', function(){
$('.lg').animate({ scrollTop: 0 }, 600);
})
// Scroll to the bottom
$('a#down').on('click', function(){
$(".lg").animate({ scrollTop:$(document).height()}, 600);
})

You can use the scrollTop() function in jQuery to do this in a one-liner.
10 is the amount of pixels you want to jump up/down.
$('#up').click(function(){
$('ul.lg').scrollTop($('ul.lg').scrollTop()- 10);
});
$('#down').click(function(){
$('ul.lg').scrollTop($('ul.lg').scrollTop() + 10);
});

It looks like you are trying to literally show/hide the fields, which removes them from the flow of the browser. Rather then show/hide, you should probably set the scrollTop position of the scrollable div using javascript, rather then manipulate the elements inside of it.

Related

Hide fixed element when past another

Here is a small demo:
HTML
<body>
<div class="container-empty"></div>
<ul>
<div id="divfix"><li id="lifix">Text 1 FIXED</li></div>
<div id="divfix2"><li id="lifix2">Text 2 FIXED</li></div>
<div id="divfix3"><li id="lifix3">Text 3 FIXED</li></div>
</ul>
<div class="container-footer"></div>
</body>
JSCRIPT
var toppag=$("#lifix,#lifix2,#lifix3");
var pag=$("#divfix,#divfix2,#divfix3");
toppag.css({position:"relative"});
$(window).scroll(function () {
var scroll=$(this).scrollTop();
pag.each(function(i,n){
if(scroll < $(this).offset().top) {
toppag.eq(i).css({'position':'relative'});
}
if(scroll > ($(this).offset().top + toppag.eq(i).height())) {
toppag.eq(i).css({'position':'fixed',"top":"0"});
}
});
});
DEMO HERE: https://jsfiddle.net/Kigris/4cb0ygun/2/
I want to hide "Text 1 FIXED" when reaches "Text 2 FIXED" and so on. Also, when all reach the footer hide them all.
Try adding
var footer = $(".container-footer");
pag.css('position', 'relative'); under toppage.css etc
and
if(scroll > footer.offset().top){
toppag.hide();
}else{ toppag.show();}
and
toppag.eq(i-1).parent().css({'z-index':"0"});
in your second if(scroll)
What this does is makes sure the fixed element gets pushed to the bottom in stacking order.
DEMO: Demo

Hide dropdown div with jQuery on mouseout

I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?
Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.
you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps
<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/
In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});

scroll to the sibling element on click

Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();
You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});
There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();

Jquery menu doesnt open on touch screen devices

I have a drop down menu where the user selects a location and it scrolls to the div to reveal the address (10 different locations).
This works well in a desktop browser. However on the ipad, iphone and nexus it doesnt work because of touch screen.
This is my code:-
<html>
<div class="location">
<ul>
<li>Select an Office
<ul class="officeselect">
<li><a data-emailaddress="" data-address='<span class="address">99 Walnut Tree Close</span>
<span class="address">Guildford</span>
<span class="address">Surrey</span>
<span class="address">GU1 4UQ</span><br>
<span class="address">T: +44 1483 881500</span>
<span class="address">info#petroplan.com</span>' href="">UK Head</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4 alpha">
<div class="addresstitle">
<h3>Address</h3>
</div>
<div class="address">
</div>
</div>
</html>
<script>
// Scroll down to map and address function
$(".location ul li ul a").click(updateAddressDisplay);
function updateAddressDisplay(src) {
$('.office-sel-cont .chooser').text($(this).text());
var target = $(".address");
var source;
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
if (src === null)
source = $(".black-sectors li a.adr-src:eq(0)");
else
source = $(this);
target.fadeOut();
target.html(source.data("address") + source.data("emailaddress"));
target.fadeIn();
var chooser = $(this).parent().parent().parent().find('.chooser');
if (chooser.hasClass('open')) {
chooser.removeClass('open');
chooser.next($('.black-sectors')).animate({
'top': '60px',
'opacity': 0
}, 600, 'easeOutQuint', function() {
chooser.next($('.black-sectors')).toggle();
});
return false;
} else {
}
return false;
}
</script>
And I used this below from this website, but it's still dodgy.
<script>
$('.location ul li ul a').on('click touchend', function(e) {
e.preventDefault();
var el = $(this);
var link = el.attr('href');
window.location = link;
});
</script>
Thanks for your help.
this is the fiddle:-http://jsfiddle.net/ScVs9/
For your drop down list to work on a touch screen device you need to trigger the drop-down using a javascript click event rather than the css hover. Simple way would be create a class, called something like .active and then use a function like this:
$('.location a').on('click', function(){
$('.officeselect').toggleClass('active')
});
The active class would simply have visibility set to visible:
ul.officeselect.active {visibility:visible;}
The user should then be able to select the correct link and display the address as per usual.
I hope this helps

Delaying a jQuery Dropdown Menu

I've built a jQuery dropdown menu as a fallback from the CSS3 version that's normally used. I'd like to have it delay the dropdown the same way as in the CSS, but I'm not sure how to do it.
Here's the script:
var iconWidth = 34; // default width of navigation <li>'s
var slideWidth = 200; // width of the longest slider
var slideTime = 500; // duration of the sliding animation
var dropHeight = 160; // height of tallest dropdown, should be number of <li>'s x 40
var dropTime = 500; // duration of the dropdown animation
$(function() {
// expanding
$("#nav li").not("#logo, .parent li").hover(
function(){
$(this).animate({width:slideWidth + "px"},{queue:false,duration:slideTime});
}, function(){
$(this).animate({width:iconWidth + "px"},{queue:false,duration:slideTime});
}
);
// dropdown
$("#nav li.parent").hover(
function(){
$(this).children("ul").animate({height:dropHeight + "px"},{queue:false,duration:dropTime});
}, function(){
$(this).children("ul").animate({height:"0px"},{queue:false,duration:dropTime});
}
);
});
What it currently does is expand both ways at the same time, but I would like it to expand first to the right, then down, then when contracting, first contract up, then left.
So like this:
Hover:
-->
|
v
Unhover:
^
|
<--
So basically, in steps, not at the same time. Can someone show me how to modify my script to make this work?
Also, how do I make it drop down based on the number of li's in the navigation, rather than a set height?
EDIT: Here's some example HTML:
<ul id="nav">
<li id="logo">
<p>
<img src="images/logo.png" />
</p>
</li>
<li>
<p>
<img src="images/dashboard.png" /> Go to Dashboard
</p>
</li>
<li class="parent">
<p>
<img src="images/nav-item.png" /> Nav-Item
</p>
<ul>
<li>
<p>
Create a page
</p>
</li>
<li>
<p>
View All Pages
</p>
</li>
</ul>
</li>
</ul>
I hope i understood your question correctly:
$(function() {
// expanding
$("#nav li").not("#logo, .parent li").hover(
function(){
$(this).animate({width:slideWidth + "px"},{duration:slideTime});
}, function(){
$(this).delay(slideTime).animate({width:iconWidth + "px"},{duration:slideTime});
}
);
// dropdown
$("#nav li.parent").hover(
function(){
$(this).children("ul").delay(slideTime).animate({height:dropHeight + "px"},{duration:dropTime});
}, function(){
$(this).children("ul").animate({height:"0px"},{duration:dropTime});
}
);
});

Categories

Resources