My menu will display based on the My SQL DATABASE using ul li. Currently there are six menus visible in the website. while I increase my menu more than six, It has to show in scroll like image slider with previous and next button options. So that the menu will get scrolled horizontally.
One important point is, next button should be visible only if the menu increases more than six. Otherwise next or previous button should not show.
Let me know if i can able to get any script or html code for this.
hope this should be help you see link
DEMO
$(document).ready(function () {
$('.right').click(function () {
var position = $('.container').position();
var r=position.left-$(window).width()
$('.container').animate({
'left': ''+r+'px'
});
});
$('.left').click(function () {
var position = $('.container').position();
var l=position.left+$(window).width()
if(l<=0)
{
$('.container').animate({
'left': ''+l+'px'
});
}
});
});
SEE THE FIDDLE LINK
Related
I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)
basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.
$(document).ready(function(){
var orig = $(".dropDown").outerHeight(); // 104
var top = $(".dropDown").css("top");
if(top == "0px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "-100px"}, 400,
function(){
var top = $(".dropDown").css("top");
alert(top);
})
})
}
// else{
// $(".selector").on("click", function(e){
// $(".dropDown").animate({top : "0px"}, 400);
// $("body").css({"background-color" : "green"})
// })
// }
if($(".dropDown").css("top") == "-100px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "0px"}, 400);
$("body").css({"background-color" : "green"})
})
}
});
logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.
Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.
while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.
You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300 value just specifies how fast you want it to slide.
Example:
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
});
updated jsFiddle
Edit
Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.
I have a accordion menu with very lengthy content. So I need to implement slide effect when accordion content is opened up.
Currently if you open up the first two menu items then the last item shows up the content below the viewport so I need to have the slide up effect for the accordion menu items.
Here is my code
$(document).ready(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
});
});
DEMO
Explanation:
See there will be N number of accordion menu items with very long table data. And it should allow us to open multiple tabs open up.
Currently it is working fine but the problem is when u click on the menu item which is in the bottom of the page, it is showing up the content down so you wont be able to see it unless you scroll down manually.
This is why I need menu to auto slide scroll to the top of the browser so that content will be seen at a single glance.
I would calculate the clicked button offset and scroll the whole page to that position
minus some amount of pixels (100) just for beauty:
DEMO
$(function () {
//Accordion
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
var thisPOsTop = $(this).offset().top - 100;
$(this).next(".menu_body").slideToggle(400);
var plusmin = $(this).find(".plusminus").text();
$(this).find("span.down-arrow").toggleClass("up-arrow");
$('html, body').stop().animate({scrollTop: thisPOsTop});
});
});
How about trying to auto scroll to the specific element? This 'method' could fire whenever you select an accordian element.
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
The code above will complete the animation in 2 seconds (2000 ms), but you could change that to anything.
This JS Bin seems like exactly what you are looking for.
$('.menu_head').click(function() {
$('html, body').animate( { scrollTop:$(this).offset().top }, 400);
});
Here is my updated jsbin which works fine.
code as below:
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(400);
var plusmin;
plusmin = $(this).children(".plusminus").text();
$(this).children("span.down-arrow").toggleClass("up-arrow");
var scrollvalue = $(this).offset().top;
console.log(scrollvalue);
setTimeout(function(){
$(window).scrollTop( scrollvalue );
},500);
});
I've never asked a question here, but I've made use of many answers so am hoping that the effect I'm hoping to achieve will also help others looking to achieve the same effect.
I'm currently working on a client's website and have uploaded it to my dropbox for this question:
http://dl.dropboxusercontent.com/u/62164771/stage/cw/index16042013.html
It currently uses a few different scripts to achieve the following:
(this script is in the head area)
The navigation menu is fixed, and when you click on a menu link, the page scrolls to the relevant section.
When the page scrolls to the relevant section (after being clicked on), a class (.act) is added to the active menu link. The .act class is also added when the user scrolls up and down in the page with their mouse/track pad or whatever.
(this script is at the bottom of the page)
Another effect is also added to the nav bar links:
When you hover over a nav item, a nav menu indicator arrow (a div with a background image of an arrow) slides across to the hovered link.
So this is what I want to happen
Currently the nav menu indicator arrow only slides on hover. I want it to slide to the active link when it is clicked and stay there until the user hovers on another link. My current script is a little buggy with the menu indicator not always sliding to the active link.
I also want the nav menu indicator arrow to slide to the active link when the user scrolls through the page.
Is this achievable?
Relevant Scripts
Script 1 - scroll smoothly to section and activate 'act' class when scrolling:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]')
.offset().top + 1;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('#wrap section').each(function(i) {
if ($(this).position().top <= windscroll + 200) {
$('nav a.act').removeClass('act');
$('nav a').eq(i).addClass('act');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a.act').removeClass('act');
$('nav a:first').addClass('act');
}
}).scroll();
})
</script>
Script 2 - For sliding the main-menu-indicator to the position of the hovered and active links
<script type="text/javascript">
$('#header')
.css('position', 'relative')
.append(
$('<div>').attr('id', 'main-menu-indicator')
)
menuHover = function(which){
if(which==null)
which = $('ul#main-menu a.act')
$('#main-menu-indicator')
.stop(true, false)
.animate({
left: ($(which).offset().left - $('#header').offset().left +
$(which).width()/2 + parseInt($(which).css('paddingLeft')) -
$('#main-menu-indicator').width()/2 )
}, 500)
}
$('ul#main-menu a')
.hover(
function(){
menuHover(this)
},
function(){
menuHover(null)
}
)
</script>
You can use Bootstrap ScrollSpy to get the desired effect, it might be easier to implement than writing your own solution. You could start the animation using the activate event.
In your case you could set <a href="#top">, you currently have a section and an article with the same id, you should get rid of one of those as it is invalid html to have more than one element with the same id, and it might break things. For example keep the id on the article: <article class="top area" id="top">. Include the ScrollSpy script on the page and add:
$('.header').scrollspy({activate: function() {
// Add your logic here.
}
});
Inside the activate function $('nav li.active') will give you the currently active li, with that info you should be able to work out where to move your arrow, and you can then run your smooth scrolling arrow code to move the arrow to the right place.
Now ScrollSpy takes care of calling activate when the user scrolls somewhere, and you react on that by moving the arrow to the right place.
I'm using Tiny Scroll Bar from here http://baijs.nl/tinyscrollbar/.
My problem is that when I toggle the folder (i.e: http://prntscr.com/tqf3j), the scroll bar is jumping to the top. I want to stay at a fixed position.
Part of my JavaScript code:
$(document).on('click', '#TreeView a', function() {
CloseFolderOptions();
$('#TreeView a').removeClass('selected');
$(this).addClass('selected');
if ($(this).next('.sub').find('li').length > 0) {
$(this).next('.sub').slideToggle();
oScrollbar5.tinyscrollbar_update();
}
I don't know the position of folders because every user can add a folder.
Try this:
oScrollbar5.tinyscrollbar_update('relative');