I'm trying to make some buttons work here.
http://www.sepulturaimpex.ro/portofoliu is the website.
When i click left/right buttons i'd like to move from project to project exactly
The images are random width.
How can i achieve that?
Here is the script i'm using.
$(document).ready(function () {
$(".prev").click(function () {
$(".p_horizontal_wrap").animate({
scrollLeft: "-=700"
})
}), $(".next").click(function () {
$(".p_horizontal_wrap").animate({
scrollLeft: "+=700"
})
})
}),
The answer is in your question; if the images are random width, then you cannot scroll w/ a fixed width
I think your best bet is to look ahead and find the x position of the next object, then scroll to that. Depending on your markup, you may need to keep track of the object index you're scrolling into view.
Your next button (and your next/prev could be the same) would look like this:
$(".next").click(function() {
var targ = /** find out the next item to be shown **/
var left = $(targ).position().left;
$(".p_horizontal_wrap").animate({
scrollLeft: left
});
});
Related
I want to create the same animation when scrolling, like here but using pure no 3rd library JQuery: https://codepen.io/aPenHasNoName/pen/bGEoYym
Well, I have achieved that, however it scrolls like 4 times while I am going to the next section. Here is my code:
function scrollBanner() {
$(window).on('scroll', function () {
var scroll = $(window).scrollTop();
$('.intro-home-section').css({
transform: `rotateX(${(scroll)}deg)`
})
});
}
scrollBanner();
And I want it to be scrolled only once, while I go from $('.intro-home-section') to the next section. What is my problem?
I'm using jquery on a single page web site to slide the next "page" onto the screen when the user clicks a button. I would like the current page to slide out to the left as the new page slides in from the right, so that there is no empty space shown, but currently I am only able to get the current page to disappear as the next page slides in. The code I'm using is here: http://jsfiddle.net/xoa029jz/5/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
$(nextPage).css('display', 'block');
$(currentPage).animate({left: '-100%'});
$(currentPage).removeClass('current-page');
$(nextPage).addClass('current-page');
$(nextPage).animate({left: '0%'});
}
Your CSS transitions are fighting with the jQuery animation. Until I hear which you prefer I have turned off the CSS transition.
The other fixes are to set the initial position of the elements about to animate and to wait for the panel to leave completely before removing the current-page class.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xoa029jz/8/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
currentPage.css('left', '0%').animate({
left: '-100%'
}, function () {
currentPage.removeClass('current-page');
});
nextPage.css({'display': 'block', 'left': '100%'}).addClass('current-page').animate({
left: '0%'
});
}
I also cleaned up a few redundant items (chained selectors etc).
You are better off just using jQuery animation, initially while you get it working, then adding a plugin (like velocity.js) to make the animations use CSS transitions, rather than try to mix the two.
I am building a Parallax website using SuperScrollorama which have some animation frame by frame using jquery and css3...
But after ending up doing so i am stuck in a problem, i am trying to navigate the pages using some scroll plugin...
I have tried Basic jquery using scrollTop event, using Jquery ScrollTo and using Tween Lite ScrollTo plugin to navigate through pages but nothing seems to work...
The issue i get after goggling it is if pages are pinned together as position:fixed; and pages doesnot scroll to that position and stuck between...
With Jquery ScrollTo, my code:-
$('.menus a').click(function(e){
e.preventDefault();
$.scrollTo(this.hash, 2000, {
easing:'easeInOutExpo',
offset:3000,
axis:'y',
queue:true
});
});
With basic scrollTop jquery, my code:-
$('a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
Currently my code works like this:- http://jsfiddle.net/tFPp3/6/
As you can see in my demo, the scroll stuck between before reaching the exact position through hash...
What is the solution if i have to play through the pinned elements in Superscrollorama?
You'll have to do 2 animations : one to reach the ancher offset and then, after superscrollorama added new element for animation and recalculate the document height, do the second animation to reach the correct key frame on that page (that you fixed at offset 3000 of that section).
$(function(){
var hashes = [];
$('.menus a').each(function(){
hashes.push(this.hash);
});
console.log('hashes:', hashes);
$('.menus a').click(function(e){
e.preventDefault();
var h = this.hash;
var pageTop = $(h).offset()['top'];
console.log('pageTop=',pageTop);
$.scrollTo( pageTop+1, 2000, {
easing:'easeInExpo',
axis:'y',
onAfter:function(){
setTimeout(function(){
console.log('hashes:', hashes);
var id = hashes.indexOf(h);
console.log('hashes['+(id+1)+']=', hashes[(id+1)]);
var nextPageTop = $(hashes[id+1]).offset()['top'];
console.log('nextPageTop=', nextPageTop);
var keyOffset = pageTop + 3000;
console.log('keyOffset=',keyOffset);
if(keyOffset < nextPageTop ){
$.scrollTo( keyOffset, 2000, {
easing:'easeOutExpo',
axis:'y'
});
}
},100);
}
});
});
});
Note that each section offset changes constantly so, before launching the second animation, we have to test that we are not scrolling till the next section again. We also need a little delay here to let superscrollorama make its sauce before testing respective offsets (saddly it doesn't seem to provide an event to do so).
I had the same issue as you. Here's how I went about fixing it....
First of all we know that Superscrollorama adds a spacer pin before your element, it sets the height of the element which defines how long the user has to scroll through a section (the duration)....So in theory all we have to do is add up all the pin heights that happen BEFORE the element you want to scroll to and then offset from the top of that element...
What I did was....
Find out what element you want to scroll to. Check how many supersrollorama-pin-spacers there are before that pin, work out the heights of all of the pins and then offset it to your initial scrollTo function.
pin = $('#pin-id').prev(); //find the spacer pin
prevPin = pin.prevAll('.superscrollorama-pin-spacer'); //find all the pins before this
heights = []; //create an array to store the pin heights
$.each(prevPin, function( index, value ) {
value = $(this).attr('height'); //get each height
heights.push(value); // push it to array
});
//use eval to join all the heights together
heights = eval(heights.join("+"));
Now we have the height so lets scroll to it.....
TweenMax.to($('html,body'),1, { scrollTop:heights, });
Good Luck! I hope this helps you.
I have had a similar issue and found that janpaepke on the superscrollorama project added an additional toggle to make this easier.
You can manually add the spacers so you don't need to make adjustments by setting the pushFollowers flag in your pin to false.
Example JS
controller.pin($('#pin-id'), 200, {
anim: new TimelineLite().append([TweenMax.fromTo( $('#pin-id'), 2, {css:{opacity: 1}}, {css:{opacity: 0}})]),
offset: 0,
pushFollowers: false
});
Example HTML
<div id="pin-id">
Bunch of Content
</div>
<div style="padding-top: 200px"></div>
You guys already helped me out a lot, I hope you can help me with this question to.
This is my website so far: http://stilld.nl/test/
Everything is working pretty good (need to do a lot of tidying up in my code though).
Please scroll down to the portfolio part. Click an item and the details appear beneath the portfolio. PERFECT!
PROBLEM: size you browser down to mobile format. Click a portfolio item. it doesn't scroll down far enough, because my portfolio items are now displayed beneath each other. They take up much more vertical space now!
WHAT I WANT: Is there a way to make code responsive? So something like: if screen size is smaller then 600 px THEN slide down 500px on click.
This is the code I'm using right now:
$(document).ready(function(){
$(".portfolio").click(function () {
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
});
});
You should calculate the offset with either jQuery's .offset() or jQuery's .position().
What you could do for example is:
$(".portfolio").click(function () {
var offSetTarget = $('.description').position().top;
var scrollExtra = 0;
$('body').animate({
scrollTop: offSetTarget + scrollExtra
}, 600);
});
Where you can determine how much extra you want to scroll.
For example if you want to scroll just above the .portfolio, you can add: scrollExtra = -10; . Or if you want to scroll halfway, you could do: scrollExtra = $('.portfolio').height()/2;
I prepared a working example for you HERE.
To prove that it actually works, you can play with the window size here.
I hope that answers your question. Good luck!
Update
To implement it into your example, we would have to determine where to scroll to.
For illustrational purposes, I have chosen to do this with the divs #alldescriptions and #port_img1 in this example.
The jQuery for your website would then be:
$(document).ready(function() {
$(".portfolio").click(function () {
var offSetTarget = $('#alldescriptions').position().top;
var scrollExtra = 0;
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('body').animate({scrollTop: offSetTarget + scrollExtra }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('body').animate({scrollTop: $('#port_img1').position().top }, 600);
});
});
Again, mind you that you can alter the exact scrolling location by giving var scrollExtra a different value.
You can find an implementation of this code here and a live fullscreen example here.
Please play around with the window size again so you can see it actually works with every screensize. Good luck!
You could detect the inner width of the screen and then set variables for the offset.
if(window.innerWidth <= 600) {
var offSet = 500;}
else{
var offSet = 600;}
Then replace this in your code:
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, offSet);
BUT.... if you want to simplify your code, you could use CSS Transitions. Then just use jQuery to add and remove a class that triggers the Transition, using media querys to change the offset. It would also have less overhead.
i have created a jquery onhover vertical sliding menubar now i need to implement horizontal sliding also i am facing some problem with the styling it is not coming horizontally
i have created a demo in jsfiddle link to demo
on hovering over 'manage' in the vertical slidedown menu there is lookup management menu under which there are 2 submenus(hi and hello) which i want to slide horizontally but unable to do so, it seems there is some problem with the javascript can someone help me out
the javascript is here
var menuShowDelay = 500;
var menuHoverTimer = null;
$(function () {
bindMenuSliding();
});
function bindMenuSliding() {
// Expand menu on mouse over.
$('.ulMiddleMenu li').hover(function () {
// Clear previous mouse hover timer.
if (menuHoverTimer) {
clearTimeout(menuHoverTimer);
menuHoverTimer = null;
}
var targetElement = $(this); // Get the target element.
// Display the menu after a certain time interval.
menuHoverTimer = setTimeout(function () {
targetElement.parent('ul').find('ul').stop(true, true).css('display', 'none');
targetElement.find('ul').slideDown('medium');
}, menuShowDelay);
},
function () {
// Clear previous mouse hover timer.
if (menuHoverTimer) {
clearTimeout(menuHoverTimer);
menuHoverTimer = null;
}
// Hide the menu.
$(this).find('ul').slideUp('fast');
});
}
you can copy paste this in the javascript panel of jsfiddle
Two main problems. One, you were showing all sub-menus on hover, instead of just the child. Two, you had no logic to distinguish between levels of navigation, so there was no way to expect the lower levels to behave differently at all.
// Display the menu after a certain time interval.
menuHoverTimer = setTimeout(function () {
var $parent = targetElement.parent('ul');
$parent.find('ul').stop(true, true).hide();
//test for first level nav
if( $parent.hasClass("ulMiddleMenu") ){
targetElement.children('ul').slideDown('medium');
}else{
targetElement.find('ul').width(0).show().animate({width:'100%'},1000);
}
}, menuShowDelay);
jsFiddle. This still leaves some issues for you to sort out in terms of display. You should consider scrapping your CSS and starting from scratch because it is going to get harder and harder to dig your way out of that mess.