I am trying to apply animation jquery effect to div having list of category which is at center of page.when i am clicking on 1st category then that initial div should move to left from center and new div should appear from right to left.when clicked on 2nd category 1st div having content should move to right and 2nd content div should appear.
effect mostly same like http://livedemo00.template-help.com/wt_47602/index.html
I am able to use viewport to implement div moving from right to left but 1st transition of div having category list from center to left is not achieved.
Thank u
JS
var navClick = function() {
$viewport = $('#viewport');
$targetElem = $('#content' + $(this).data('target'));
$active = $viewport.find('.active');
$active.animate({'right': '-' + $active.width() + 'px'}, function() {
$(this).removeClass('active');
});
$targetElem.animate({'right': '100px'}, function() {
$(this).addClass('active');
});
};
$(function() {
$('nav span').on('click', navClick);
});
JSFiddle
Related
I think I've been overthinking this all day long. It shouldn't be this hard...
I have a div with the main menu it's child with the submenu. My initial problem was wanting to show the submenu horizontal instead of vertial with absolute positioning on the screen so I could put it where I want it. Now I have this mess, and I think overthinking the situation has lost me on it.
I just want to separate the submenu from the parent after hovering over parent, then keep it up as long as you're on the parent or submenu, and fade it out when you leave either, putting the submenu appended back to the parent. The logo gets faded out when hovering over a parent that has a submenu, and faded back in when the submenu fades out. What its doing now is fading back in the logo pretty much no matter what, and its really buggy when hovering on submenu, along with it just plain not staying when hovering over it sometimes.
If there's a better way to position this so I don't have to go through this mess, or just a better way overall, please point it out.
<script type="text/javascript">
jQuery(document).ready(function($){
var inEle = false;
var hideTimer;
$('.sub-menu li a').css('display', 'inline-block');
// do hover on main menu
$('.uk-navbar-nav li a').hover(
function() {
// reset everything on new hover
clearTimeout(hideTimer);
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(2000);
inEle = true;
// save the id if there is one to hide
var subID = $('body').children('ul[class*="sub-menu"]').attr('id');
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('body').children('ul[class*="sub-menu"]').appendTo($(this).parent().parent().find('div[id*="'+subID+'"]')).removeAttr('id');
// fade out the ul submenu
$(this).parent().parent().find('div[id*="'+subID+'"]').find('ul').fadeOut(100);
// find the div holding the ul submenu and take out its placeholder id
$(this).parent().parent().find('div[id*="'+subID+'"]').removeAttr('id');
//show submenu
if ($(this).parent().find('div').hasClass('uk-dropdown')) {
$('.logoimgcontainer img').stop(true, true).fadeOut(150);
$(this).parent().find('div').find('ul').appendTo('body').css({
'display' : 'inline-block',
'position' : 'absolute',
'left' : '0',
'right' : '0',
'top' : '90px',
'margin' : 'auto',
'width' : '300px',
'text-align' : 'center',
'z-index' : '150'
}).attr('id', $(this).text());
$(this).parent().find('div').attr('id', $(this).text());
$(this).parent().find('div').find('ul').fadeIn(1000);
}
}, function() {
// do nothing here mkay
}
);
// do hover out on main menu
$('.uk-navbar-nav li').hover(
function() {
// do nothing here k
},function() {
// check if this item has a submenu
if ($(this).find('div').hasClass('uk-dropdown')) {
// clear out the timer
clearTimeout(hideTimer);
var aID = $(this).find('a').text();
// go ahead and set it not in sub since it hovered out here
inEle = false;
// reset the timer
hideTimer = setTimeout(function() {
// make sure its not in the submenu
if (!inEle) {
//var checkUL = $('ul[id*="'+aID+'"]');
//if (!checkUL.is(":hover")) {
// hideTimer = setTimeout(function() {
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(2000);
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('ul[id*="'+aID+'"]').appendTo('div[id*="'+aID+'"]').removeAttr('id');
// fade out the ul submenu
$(this).find('div[id*="'+aID+'"]').find('ul').fadeOut(500);
// find the div holding the ul submenu and take out its placeholder id
$(this).find('div[id*="'+aID+'"]').removeAttr('id');
//}, 1000);
}else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu
}, 1000);
}
}
);
// do hover in the submenu
$('.sub-menu').hover(
function() {
// set were in the submenu now
inEle = true;
// take out the timer for the main menu
clearTimeout(hideTimer);
}, function() {
// dont need the timeout anymore, not in submenu or main menu item
clearTimeout(hideTimer);
var ulID = $(this).attr('id');
// set were out of the submenu
inEle = false;
hideTimer = setTimeout(function() {
//var checkUL = $('.uk-navbar-nav li a:contains("'+ulID+'")');
//if (!checkUL.is(":hover")) {
if (!inEle) {
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(3000);
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('body').find('ul[id*="'+ulID+'"]').appendTo($('.uk-navbar-nav li').find('div[id*="'+ulID+'"]')).removeAttr('id');
// fade out the ul submenu
$('.uk-navbar-nav li').find('div[id*="'+ulID+'"]').find('ul').fadeOut(500);
// find the div holding the ul submenu and take out its placeholder id
$('body').find('div[id*="'+ulID+'"]').removeAttr('id');
}else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu
}, 1000);
}
);
});
</script>
I recommend going with clicks instead of hovers, because hovers don't work on mobile devices (aka touch screens). Rolling your own menu is kind of like reinventing the wheel these days. I can recommend some good bootstrap based templates that already have menus built in and they even "magically" change into hamburgers on mobile devices. However, maybe you are trying to learn and I have written some menus myself and one piece of advice on can give you is that you should use jquery and use mouseLeave instead of mouseOut. mouseOut won't even let you get to your drop down list.
I am working on a project and I have an array of elements that are displayed one under each other.
When I press an arrow, I want to find the div closest to the bottom and scroll up to the top of that div.
This is what I have when I click the arrow:
$(".my-elements").each(function(i){
var divTopPosition = $(this).offset().top;
var scrollTop = $(window).scrollTop();
var difference = -Math.abs(scrollTop - divTopPosition);
if(/* this is the div closest to the bottom */)
{
$("body").animate({scrollTop: difference}, 2000);
return false;
}
});
if you know parent, you can use this selector:
$( "<parent>:last-child" )
I have a parent .slider-wrap div at 100% width, with 3 .slider-slide-wrap child divs inside, each at 680px width. You can scroll horizontally inside the .slider-wrap div.
I've also created 2 .slider-nav divs, #slider-left sitting on the left, and #slider-right sitting on the right, the idea being, you can scroll as you wish using the scrollbar, but if you clicked the #slider-right div at any time, it would slide you across to the next instance of .slider-slide-wrap divs. Thus, the 2 .slider-nav divs will take you left and right to the next / previous instance of .slider-slide-wrap div.
jsFiddle demo: http://jsfiddle.net/neal_fletcher/rAb3V/
HTML:
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
jQuery:
$(document).ready(function () {
var n = $(".slider-slide-wrap").length,
width = 680,
newwidth = width * n;
$('.slide-wrap').css({
'width': newwidth
});
});
$(document).ready(function () {
$(".slider-slide-wrap").each(function (i) {
var thiswid = 680;
$(this).css({
'left': thiswid * i
});
});
});
If this is at all possible? Any suggestions would be greatly appreciated!
First of I think you need to have an indicator to identify which slide the user has scrolled to, or which slide is currently on the viewport in order for this scroll left & right to work properly.
/*on scroll move the indicator 'shown' class to the
most visible slide on viewport
*/
$('.slider-wrap').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
});
});
/* on left button click scroll to
the previous sibling of the current visible slide */
$('#slider-left').click(function () {
var $prev = $('.slide-wrap .shown').prev();
if ($prev.length) {
$('.slider-wrap').animate({
scrollLeft: $prev.position().left
}, 'slow');
}
});
/* on right button click scroll to
the next sibling of the current visible slide */
$('#slider-right').click(function () {
var $next = $('.slide-wrap .shown').next();
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 'slow');
}
});
See it working of this jsfiddle.
PS. You also don't need a lot of $(document).ready(), one will do just fine and a best practice to do.
I want to add a menu to my application screens. The menu will have the menu icons which are horizontal scroll-able one menu at a time when left or right arrow pressed. Based on the menu screen the menu should be scrolled to that menu icon for that menu screen.
Ex.:
< menu1 | menu2 | menu3 >
Say there are 6 menu icons and 3 are visible at a time. on press of right arrow, it should scroll one item at a time.
and if my screen is related to menu 4, the menu4 has to be positioned.
< menu4 | menu5 | menu6 >
And also each menu item should be clickable.
Please let me know, How I can achieve this.
Update
Have js for MouseOver
<script type="text/javascript">
$(function () {
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
ulPadding = 15;
var divWidth = div.width();
div.css({ overflow: 'hidden' });
var lastLi = ul.find('li:last-child');
div.mousemove(function (e) {
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
div.scrollLeft(left);
});
});
</script>
JSFiddle
Check here
Update3
Update 4
This is dynamic menu retreived from db build with ul & li's. If there is more Li than screen width, I simply want an arrow to left & right side to scroll extra li's, if any.
See this fiddle:
http://jsfiddle.net/kzQFQ/49/
$(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'
});
}
});
});
Good article about horizontal scrollable menu here
And DEMO (Note: Reduce the size of the browser)
hop this should be help you see link
http://jquery.malsup.com/cycle/int2.html
see Non-Image Content at the last of page
see this fiddle: http://fiddle.jshell.net/vac9x/1/
I have trouble with this jQuery function cause it doesn't work what it should and that is >>get the first list item and put it after the last list item (that's how the infinite effects is made) ' , i cannot make that infinite effects
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
//move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
//jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last'));
//when user clicks the image for sliding right
jQuery('#right_scroll img').click(function(){
//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
var item_width = jQuery('#carousel_ul li').outerWidth() + 10;
//calculate the new left indent of the unordered list
var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - item_width;
//make the sliding effect using jquery's anumate function '
jQuery('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){
//get the first list item and put it after the last list item (that's how the infinite effects is made) '
jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first'));
//and get the left indent to the default -210px
jQuery('#carousel_ul').css({'left' : '-210px'});
});
});
//when user clicks the image for sliding left
jQuery('#left_scroll img').click(function(){
var item_width = jQuery('#carousel_ul li').outerWidth() + 10;
/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
var left_indent = parseInt(jQuery('#carousel_ul').css('left')) + item_width;
jQuery('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){
/* when sliding to left we are moving the last item before the first item */
jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last'));
/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
jQuery('#carousel_ul').css({'left' : '-210px'});
});
});
});
</script>