scroll till active tab - javascript

This question is based on my last question.
show or make visible active tab
there were some issues that I have to fix so I have fixed. but still I can't make it work properly.
Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.
I just found don't know why but jsfiddle example doesn't work on IE.
Thank you...
Jsfiddle
$(document).on('click', '.liClicked', function () {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
$('.element').animate({
"left": "-=50px",
}, "slow")
});
$("#right").click(function () {
var calcs = ($('ul li#tab1').width());
$(".element").animate({
"left": "+=" + calcs,
}, "slow");
});
$("#left").click(function () {
$(".element").animate({
"left": "-=50px"
}, "slow");
});

Try this:
$(document).on('click', '.liClicked', function() {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
var me = $(this);
$('.element').animate({
"left": $('li#' + me.prop('id')).position().left * -1 ,
}, "slow")
});
Also, it isn't recommended to have two elements with the same ID

Related

Prepend last slide to beginning of slider before sliding

I have the following javascript object controlling my slider:
Slider = {
slideWrap: "#slider ul",
slide: "#slider ul li",
prevTrigger: "#slider a.prev",
nextTrigger: "#slider a.next",
control: "#slider a.control",
init: function() {
jQuery(this.nextTrigger).click(this.moveRight.bind(this));
jQuery(this.prevTrigger).click(this.moveLeft.bind(this));
},
moveRight: function(e) {
e.preventDefault();
jQuery(this.slideWrap).removeClass("no-transition");
jQuery(this.slide).first().clone().appendTo(this.slideWrap);
jQuery(this.slideWrap).css("marginLeft", "-100vw");
jQuery(this.control).css("pointer-events", "none");
setTimeout(function(){
jQuery("#slider ul").addClass("no-transition");
jQuery("#slider ul li").first().remove();
jQuery("#slider ul").css("marginLeft", "0px");
jQuery("a.control").css("pointer-events", "auto");
}, 500);
},
moveLeft: function(e) {
e.preventDefault();
jQuery(this.slideWrap).removeClass("no-transition");
jQuery(this.slide).last().clone().prependTo(this.slideWrap);
jQuery(this.slideWrap).css("marginLeft", "100vw");
setTimeout(function(){
jQuery('#slider ul').addClass('no-transition');
jQuery('#slider ul li').last().remove();
jQuery('#slider ul').css("marginLeft", "0px");
jQuery('a.control').css('pointer-events', 'auto');
}, 500);
}
}
Moving to the right works great as the slider slides to the right, clones the first slide, appends it to the end of the slider and then removes the original first slide in the timeout function. However, I have an issue with sliding left as the last slide needs to be prepending before the slider moves.
See my fiddle here...https://jsfiddle.net/f2hb68tn/12/
You can try this jsfiddle: https://jsfiddle.net/f2hb68tn/22/.
Here is the modified code:
moveLeft: function(e) {
e.preventDefault();
jQuery(this.slideWrap).addClass('no-transition');
jQuery(this.slide).last().clone().prependTo(this.slideWrap); // Prepend last slide
var ctlWidth = "-" + jQuery("#slider").width() + "px"; // In pixels for IE11
jQuery(this.slideWrap).css("marginLeft", ctlWidth); // Stay on current slide
jQuery(this.control).css("pointer-events", "none");
setTimeout(function () {
jQuery('#slider ul').removeClass("no-transition");
jQuery('#slider ul').css("marginLeft", "0px"); // Transition to first slide
}, 10); // Zero ms does not work well in Firefox
setTimeout(function(){
jQuery('#slider ul').addClass('no-transition');
jQuery('#slider ul li').last().remove(); // Remove last slide
jQuery('a.control').css('pointer-events', 'auto');
}, 500);
}
In IE11 (and maybe other versions of IE), ctlWidth must be given in pixels (e.g. "-524px"). If you don't need to support that browser, you can use "-100vw" instead.

JQuery stop show/hide on click

I have a code snippet that shows a div once you click the menu item, there are different divs on this space and what the menu does is hide the one that was there before and show the new one, the problem is when I click on the same menu item it shows the current div again and I want to stop that from happening, it should only show the animation if it's not the current one, if it is nothing should happen.
Here is the code snippet:
var curPage="";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide("slide");
}
curPage=$(this).data("page");
$("#"+curPage).show("slide");
});
And here is a demo of how it's occuring now: https://jsfiddle.net/Lfsvc1ta/
Just add an additional check to see whether curPage is the same as the clicked page.
var curPage;
$("#menu a").click(function () {
var page = $(this).data("page");
if (curPage && page != curPage) {
$("#" + curPage).stop().hide("slide");
}
$("#" + page).stop().show("slide");
curPage = page;
});
Demo: Fiddle
You have to check what the before page was, adding a variable.
var curPage="";
$("#menu a").click(function() {
var page=$(this).data("page");
if (curPage!=page && curPage.length) {
$("#"+curPage).hide("slide");
curPage=$(this).data("page");
}
$("#"+curPage).show("slide");
});
Like this fiddle https://jsfiddle.net/7b1wh70h/
Check what data-page is clicked first bro.
var curPage="";
$("#menu a").click(function() {
var newPage = $(this).data("page");
if (newPage !== curPage) {
$("#"+curPage).hide("slide");
$("#"+newPage).show("slide");
curPage = newPage;
}
});

jQuery: absolute pathname before hash

I'm currently experiencing some conflict between a hashchange function I have set up and jQuery mobile (used for sliding page transitions).
To demonstrate here's an isolated demo on my server: http://nealfletcher.co.uk/transition/
Click on transition click which slides the relevant page in, as it should and appends the url accordingly: /transition/news.
This is where the problem lies, click on news hash click and this will fire my hashchange function and load in the relevant div, BUT instead of the url being like so: /transition/news/#news-01 the url is being rendered like so /transition/#news-01 which causes problems when navigating to the url.
Is there anyway to force the /news/ to be added before the hash, so I get /transition/news/#news-01 instead of /transition/#news-01?
The relevant jQuery is below, is it at all possible to append /news/ before the hash?
Any suggestions would be greatly appreciated!
jQuery:
$(document).ready(function () {
$(window).hashchange(function () {
var hash = location.hash;
if (hash) {
var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
if (element) showDetail(element);
}
});
$(document).ready(function () {
$(document).hashchange();
var $container = $('#main-grid, #news-grid');
$(function () {
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.grid-block, .grid-break, .hidden',
animationEngine: 'best-available',
filter: '*:not(.hidden), .grid-block',
masonry: {
columnWidth: 8,
gutterWidth: 25
}
});
});
});
$(".click-block").click(function () {
document.location.hash = $(this).attr('data-hook');
});
});
function showDetail(element) {
var newHeight = $('#post-' + element.attr('data-hook')).height();
$('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
$('#post-' + element.attr('data-hook')).css('height', newHeight);
element.children('.up-arrow').fadeIn('slow');
setTimeout(function () {
$('html, body').animate({
scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
}, "slow");
}, 1500);
$('#main-grid').isotope();
$('#news-grid').isotope();
}
Just add the section in your data-hook attribute. So for your news links they will be prefixed by news/ like so data-hook="news/news-01"
Now, I would reccomend you to consider using something like http://backbonejs.org/#Router for what you'r doing. Or atleast take a look at https://github.com/browserstate/history.js/

Problems with Page slide

could you help me to figure this out?
I'm trying to use this page slide method from this
http://jsfiddle.net/XNnHC/942/
$(document).ready(function()
{
var slider_width = $('.pollSlider').width();//get width automaticly
$('#pollSlider-button').click(function() {
if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width});
}
else
{
if(!$(this).is(':animated'))//perevent double click to double margin
{
$('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width});
}
}
});
});
and this is what I've been trying
http://jsfiddle.net/ejkim2000/f7DVK/
but I'm having some problems.
First problem I have is trigger button place gets margin so the sentence after place is being pushed. I deleted #pollSlider-button in this code
$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width}); }
to disable the margin from button but ended up having the slide page keep sliding to the right. Is there any way that I can make the slide page work without having margin on a button?
Another problem is I input another button in slide page for closing action but It simply doesn't work and I can't even understand why. Hope somebody can help to make this closing button work.
Just your information, I'd like to use width and height with css because it'll be easier for me to make slide page responsive and I also would like to apply this method for other directions too.
Thanks a million!
Try this
Working DEMO1
This is with same button to close and open the slider
$(document).ready(function () {
var slider_width = $('.pollSlider').width(); //get width automaticly
$('#pollSlider-button').click(function () {
if ($('.pollSlider').css("margin-right") == 0 + "px") {
$('.pollSlider').animate({
"margin-right": '-=' + slider_width
});
} else {
$('.pollSlider').animate({
"margin-right": '+=' + slider_width
});
}
});
});
Try this
Working DEMO2
This is with separate button for open and close
$(document).ready(function () {
var slider_width = $('.pollSlider').width();
$('#pollSlider-button').click(function () { //open button
if ($('.pollSlider').css("margin-right") == "-" + slider_width + "px") {
$('.pollSlider').animate({
"margin-right": '+=' + slider_width
});
}
});
$('#pollSlider-button2').click(function () { //close button with different id
if ($('.pollSlider').css("margin-right") == 0 + "px") {
$('.pollSlider').animate({
"margin-right": '-=' + slider_width
});
}
});
});
Hope this helps,Thank you

jQuery show() and hide() aren't working

I'm working on sliding old questions to the left and new questions in from the right. You can see what I'm doing in this jsFiddle:
jsFiddle
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});
But when I'm working outside of jsFiddle (mostly because it won't load the roundabout.js file from GitHub correctly) I can't seem to get the show() and hide() to work correctly. I have the exact same code (with a reference to roundabout.js uncommented), and it will completely ignore the first hide and show references, then skip the next hide command and show the next question.
Any ideas on why it wouldn't be firing the hide() and show() functions in the click event?
EDIT: Editted with most current jsFiddle. It works there, but not outside of that environment.
Bind the event inside the DOM ready event
If you inspect the source in jsFiddle, you see all your code enclosed in the DOM ready event . So it looks like it works here and not on your local version.
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});
This approach doesn't use jQuery UI and is also different than yours, but you'll still get the same end result. Note that the HTML/CSS are also different in this approach.
Working example: JSFiddle.
$(document).ready(function () {
var x = 1,
distance = $('.container').width(),
qNumber = $('.question').length;
$('.questionList').width(distance*qNumber);
$("input[type='radio']").change(function () {
alert( "Radio button selection changed. Selected: " + $(this).val() );
$('.questionList').animate({'margin-left':'-='+distance+'px'}, 500);
});
});

Categories

Resources