I have a slide left/right and right/left transition between two divs that occurs simultaneously.
Fiddle : https://jsfiddle.net/n8jyzys2/
However the current transition looks somewhat like this
(The divs are at different rows during the transition):
Slide Transition 1
The transition I would like to achieve is similar to this (Have both divs at the same row simultaneously during transition) :
Slide Transition 2
Any ideas?
JS Credit
jQuery.fn.extend({
slideRightShow: function() {
return this.each(function() {
$(this).show('slide', {direction: 'right'}, 1000);
});
},
slideLeftHide: function() {
return this.each(function() {
$(this).hide('slide', {direction: 'left'}, 1000);
});
},
slideRightHide: function() {
return this.each(function() {
$(this).hide('slide', {direction: 'right'}, 1000);
});
},
slideLeftShow: function() {
return this.each(function() {
$(this).show('slide', {direction: 'left'}, 1000);
});
}
});
$("#slide_two_show").click(function () {
$("#slide_one_div").slideLeftHide();
$("#slide_two_div").slideRightShow();
});
$("#slide_one_show").click(function () {
$("#slide_one_div").slideLeftShow();
$("#slide_two_div").slideRightHide();
});
HTML Code
<div>
<div id="slide_one_div">
<br>
<div class="mydiv">
<h1>Slide 1 (Left Slide)</h1>
<p>...</p>
<button id="slide_two_show">Show Slide 2</button>
</div>
</div>
<div id="slide_two_div" style = "display:none">
<br>
<div class="mydiv">
<h1>Slide 2 (Right Slide)</h1>
<p>...</p>
<button id="slide_one_show">Show Slide 1</button>
</div>
</div>
</div>
Style
.mydiv {
background: green;
width: 100%;
height: 100px;
outline: 1px solid #f93;
}
Add this CSS to your page:
#slide_one_div {
position: absolute;
width: 100%;
}
Hope I helped ;)
Related
Still a noob but I am slowly getting there.
I have a series of divs, all the same class and I have previous and next buttons that scroll to the top of the next or previous div when clicked. I would like to set an offset so that my header won't hide the div that scrolls underneath of it and I am unsure how to go about this. Code below.
<button class="prev link js-prev js-scroll-to">Previous</button>
<button class="next link js-next">Next</button>
<script>
$('.js-scroll-to').click(function(e) {
target = $($(this).attr('href'));
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-next').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(next);
$(selected).removeClass("js-current-panel");
$(next).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-prev').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(prev);
$(selected).removeClass("js-current-panel");
$(prev).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
</script>
For your case, I think you could just add the offset right into your animated scroll code (subtracting the height of the nav bar plus a little margin):
$('html, body').animate({scrollTop: target.offset().top - 54 + 'px'}, 1000);
I usually do this without a JS scroll by adding a span class to use as the anchor instead of anchoring on the div itself. This will work if someone links directly to the anchor point as well.
That way I can use position relative on the anchor to set an offset for the height of the nav bar.
In this case, I think you probably have some divs like this:
<div class="js-list-item js-current-panel">
content
</div>
<div class="js-list-item">
content
</div>
<div class="js-list-item">
content
</div>
I'd change it to:
<span class="anchor js-list-item js-current-panel"></span>
<div class="content">
content
</div>
<span class="anchor js-list-item"></span>
<div class="content">
content
</div>
<span class="anchor js-list-item"></span>
<div class="content">
content
</div>
With some CSS to position those new anchors (top depends on nav bar height):
.anchor {
position: relative;
top: -54px;
}
Example with some extra CSS to show how the anchors are positioned:
<style type="text/css">
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 44px;
background: black;
}
.main {
margin-top: 54px;
}
.js-list-item {
display: inline-block;
width: 5px;
height: 5px;
background: blue;
position: relative;
top: -54px;
}
.content {
background: red;
width: 100%;
height: 500px;
margin-bottom: 25px;
}
</style>
<div class="nav">
<button class="prev link js-prev js-scroll-to">Previous</button>
<button class="next link js-next">Next</button>
</div>
<div class="main">
<span class="js-list-item js-current-panel"></span>
<div id="one" class="content">content</div>
<span class="js-list-item"></span>
<div id="two" class="content">content</div>
<span class="js-list-item"></span>
<div id="three" class="content">content</div>
<span class="js-list-item"></span>
<div id="four" class="content">content</div>
<span class="js-list-item"></span>
<div id="five" class="content">content</div>
<span class="js-list-item"></span>
<div id="six" class="content">content</div>
<span class="js-list-item"></span>
<div id="seven" class="content">content</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$('.js-scroll-to').click(function(e) {
target = $($(this).attr('href'));
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-next').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(next);
$(selected).removeClass("js-current-panel");
$(next).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
$('.js-prev').click(function(e) {
var selected = $(".js-list-item.js-current-panel");
var anchors = $(".js-list-item");
var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);
target = $(prev);
$(selected).removeClass("js-current-panel");
$(prev).addClass("js-current-panel");
if (target.offset()) {
$('html, body').animate({scrollTop: target.offset().top + 'px'}, 1000);
}
e.preventDefault();
});
</script>
I have 2 scripts which can't work parallel. The first one is for scrolling to the search bar when it's focused, the other one removes focus when youre scrolling (to remove keyboard on mobile).
Is there a way to combine these scripts, to have it scrolling first to the search bar and then have the second script get activated if you scroll again for removing the keyboard? Because right now it's scrolling to the search bar and then it loses focus.
To scroll it to the search bar:
$("#myInput").click(function () {
$("html, body").animate({ scrollTop: $("#osb").offset().top }, 300);
return true;
});
To remove focus when scrolling again:
document.addEventListener("scroll", function() {
document.activeElement.blur();
});
Thanks already!
Example:
$("#myInput").click(function() {
document.removeEventListener("scroll", blurElement);
$("html, body").animate({
scrollTop: $("#b").offset().top
}, 300, function() {
document.addEventListener("scroll", blurElement);
});
return true;
});
function blurElement() {
document.activeElement.blur();
}
document.addEventListener("scroll", blurElement);
#a {
height: 100px;
background: #aaa;
}
#b {
background: #bbb;
}
#c {
height: 1000px;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>
<div id="b">
<input type="text" id="myInput" placeholder="search.." title="">
</div>
<div id="c">
^ need this stay focused untill I scroll again
</div>
Maybe using a flag to prevent "blurring" while your animation is running;
var allowBlur = true;
$("#myInput").click(function () {
allowBlur = false;
$("html, body").animate({ scrollTop: $("#osb").offset().top }, 300, function() {
allowBlur = true;
});
return true;
});
document.addEventListener("scroll", function() {
if(!allowBlur) return;
document.activeElement.blur();
});
Attempt #2
$("#myInput").click(function () {
document.removeEventListener("scroll", blurElement);
$("html, body").animate({ scrollTop: $("#osb").offset().top }, 300, function() {
document.addEventListener("scroll", blurElement);
});
return true;
});
function blurElement() {
document.activeElement.blur();
}
document.addEventListener("scroll", blurElement);
Attempt #3
It appears that for some reason the "scroll" event is still being sent even when the animation is done. So based on this answer https://stackoverflow.com/a/8791175/1819684 I used a promise but I still needed a setTimeout to give the "scroll" time to end.
$("#myInput").click(function() {
document.removeEventListener("scroll", blurElement);
$("html, body").animate({
scrollTop: $("#b").offset().top
}, 300).promise().done(function() {
setTimeout(function() {
document.addEventListener("scroll", blurElement)
}, 100);
});
return true;
});
function blurElement() {
document.activeElement.blur();
}
document.addEventListener("scroll", blurElement);
#a {
height: 100px;
background: #aaa;
}
#b {
background: #bbb;
}
#c {
height: 1000px;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>
<div id="b">
<input type="text" id="myInput" placeholder="search.." title="">
</div>
<div id="c">
</div>
I have this fullscreen background that I'm using and it works correctly on my laptop and big screens. The problem is when I enter the website from a mobile device. The background image (and the buttons above it) move to the side. I do not know why is this. I think it has to be with the bootstrap.min.
The HTML:
<!-- Intro Section -->
<section id="intro">
<!-- Hero Slider Section -->
<div class="flexslider fullscreen-carousel hero-slider-1 ">
<ul class="slides">
<!--Slide-->
<li data-slide="dark-slide">
<div class="slide-bg-image overlay-light dark-bg parallax" data-background-img="images/connexion_background.jpg">
<div class="js-Slide-fullscreen-height container">
<div class="intro-content">
<div class="intro-content-inner">
<br />
<div><a class="btn btn-md btn-white" href="contact.php">Request a Quote</a><span class="btn-space-10"></span><a class="btn btn-md btn-white " href="research-solutions.html">View Our Solutions</a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- End Hero Slider Section -->
</section>
<div class="clearfix"></div>
<!-- End Intro Section -->
The JS:
var pageSection = $('.slide-bg-image, .bg-image');
pageSection.each(function (indx) {
if ($(this).attr("data-background-img")) {
$(this).css("background-image", "url(" + $(this).data("background-img") + ")");
}
});
function fullScreenSlider() {
if ($('.fullscreen-carousel').length > 0) {
$('.fullscreen-carousel').flexslider({
animation: "slide",
// startAt: 0,
animationSpeed: 700,
animationLoop: true,
slideshow: true,
easing: "swing",
controlNav: false,
before: function (slider) {
//Slide Caption Animate
$('.fullscreen-carousel .intro-content-inner').fadeOut().animate({ top: '80px' }, { queue: false, easing: 'easeOutQuad', duration: 700 });
slider.slides.eq(slider.currentSlide).delay(400);
slider.slides.eq(slider.animatingTo).delay(400);
},
after: function (slider) {
//Slide Caption Animate
$('.fullscreen-carousel .flex-active-slide').find('.intro-content-inner').fadeIn(2000).animate({ top: '0' }, { queue: false, easing: 'easeOutQuad', duration: 1200 });
// Header Dark Light
headerDarkLight_with_flexslider();
},
start: function (slider) {
$('body').removeClass('loading');
// Header Dark Light
headerDarkLight_with_flexslider();
},
useCSS: true,
});
};
// Header Dark Light
function headerDarkLight_with_flexslider() {
var color = $('.fullscreen-carousel').find('li.flex-active-slide').attr('data-slide');
if (color == 'dark-slide') {
$('#header').addClass('header').removeClass('header-light');
$('#header').removeClass('header-default');
}
if (color == 'light-slide') {
$('#header').addClass('header-light').removeClass('header-dark');
$('#header').removeClass('header-default');
}
if (color == 'default-slide') {
$('#header').removeClass('header-dark');
$('#header').removeClass('header-light');
$('#header').addClass('header');
}
};
// "fullscreen-carousel" height
fullScreenCarousel();
function fullScreenCarousel() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if ($(window).width() > 767) {
$('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", windowHeight);
}
else {
$('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", '400px');
}
};
$(window).resize(function () {
fullScreenCarousel();
});
};
This is the result in mobile:
The buttons and the background image are moved to the right. They are not centered and the background picture repeat itself.
I can see this on the development tool of Mozilla:
Any help would be appreciated.
Thank you.
center the images in your slides add this in your css
.flexslider img { margin: 0 auto; }
OR
.flexslider .slides > li{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
can you try to add following css at last of the css document
.flexslider ul.slides {
padding: 0 !important;
}
Your flex slider left position is not right , You can simply fix this with left property, try with the below code
.fullscreen-carousel .slides li {
height: 100%;
left: -40px; /* newly added */
overflow: hidden;
position: relative;
}
can you try this also , remove the left:-40px and add this jquery to the page
$(window).load(function() {
$('.flexslider').flexslider();
$(window).trigger('resize');
});
My code looks like this:
<div id="arrow">
<a class="next"></a>
<a class="previous"></a>
</div>
<section id="first">
...
</section>
<section id="second">
...
</section>
<section id="third">
...
</section>
The element #arrow has position: fixed, and I'm trying to make the window scroll to the next section when a.next is clicked.
Ex: The first time a.next is clicked, the window scrolls to section#first, the second time, the window scrolls to section#second, etc. The same thing happens to a.previous.
Does someone know how to solve this problem?
Thanks a lot!
EDIT
My JS code:
$('#arrows a.previous').click(function() {
$.scrollTo($(this).closest('section').prev(),800);
});
$('#arrows a.next').click(function() {
$.scrollTo($(this).closest('section').next(),800);
});
You will need to handle to 3 events in this case:
Current page position - updated each time.
User scrolls manualy the page.
User clicks the prev or next button.
2, 3 need to use the current page position and update him according to the direction that the page is scrolling.
My quick demos : Vertical Version jsFiddle --- Horizontal Version jsFiddle
Vertical Version snippet :
$(function(){
var pagePositon = 0,
sectionsSeclector = 'section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#arrow a').click(function(e){
if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
section { min-height:800px; }
#arrow {
position:fixed;
right:0;
top:0;
background-color:black;
color:white;
}
#arrow a{
display:inline-block;
padding:10px 20px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="arrow">
<a class="next">next</a>
<a class="previous">prev</a>
</div>
<section style="background-color:green">...</section>
<section style="background-color:blue">...</section>
<section style="background-color:red">...</section>
All you need, to allow the user to use both arrows and scrollbar:
var $sec = $("section");
$(".prev, .next").click(function(){
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().bottom > 0;
})[$(this).hasClass("next")?"next":"prev"]("section").offset().top;
$("html, body").stop().animate({scrollTop: y});
});
*{margin:0;padding:0;}
#arrow{
position:fixed;
width:100%;
text-align:center;
}
#arrow a{
display:inline-block;
background: tomato;
padding:6px 15px;
border-radius:3px;
cursor:pointer;
}
section{
height:1200px;
border:3px solid #444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrow"><a class="prev">↑</a><a class="next">↓</a></div>
<section>1</section>
<section style="height:500px;">2</section>
<section>3</section>
<section style="height:600px;">4</section>
<section>5</section>
To explain the jQuery a bit:
// Cache your selectors
var $sec = $("section");
// On any of both arrows click
$(".prev, .next").click(function(){
// We need to get current element
// before defining the `.next()` or `.prev()` element to target
// and get it's `offset().top` into an `y` variable we'll animate to.
// A current element is always the one which bottom position
// (relative to the browser top) is higher than 0.
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().bottom > 0;
})[$(this).hasClass("next")?"next":"prev"]("section").offset().top;
// (Line above:) if the clicked button className was `"next"`,
// target the the `.next("section")`, else target the `.prev("section")`
// and retrieve it's `.offset().top`
$("html, body").stop().animate({scrollTop: y});
});
i have tried to do with .closest("section") but it only works when the section is a parent of the element you clicked so this is the best way i got
sections=$("section");
s=0;
$(".next").click(function() {
if(s<sections.length-1){
s++;
$('html, body').animate({
scrollTop: sections.eq(s).offset().top
}, 500);
}});
$(".previous").click(function() {
if(s>0){
s--;
$('html, body').animate({
scrollTop: sections.eq(s).offset().top
}, 500);
}});
section{
background-color:#bbb;
width:100%;
height:700px;
border-bottom:2px solid #eee;
}
#arrow{
position:fixed;
}
#first{
background-color: red;
}
#second{
background-color:green;
}
#third{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrow">
<a class="next">next</a>
<a class="previous">prev</a>
</div>
<section id="first">
...
</section>
<section id="second">
...
</section>
<section id="third">
...
</section>
I have some divs that appear on click of a link, but i am trying to make it so that when you click on a 2nd link to popup, any open ones will be closed before the new one opens. there should only be one open at a time.
the js...
<script>
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
width: 'toggle'
}, "fast", easing, callback);
};
$(function () {
function select($link) {
$link.addClass('selected');
$($link.attr('href')).slideFadeToggle(function () {});
}
function deselect($link) {
$($link.attr('href')).slideFadeToggle(function () {
$link.removeClass('selected');
});
}
$('.contact').click(function () {
var $link = $(this);
if ($link.hasClass('selected')) {
deselect($link);
} else {
select($link);
}
return false;
});
$('.close').live('click', function () {
deselect();
return false;
});
});
</script>
the divs...
<div id='did_{$page_trackid}' class='arrow_box pop_{$page_trackid}' style=''> <img src='".$info4['Image']."' class='subtext_img'>
<h2 class='subtext'><a href='http://www.xxxxxxx.co.uk/dnb/".$info2['username']."'>".$info2['username']."</a></h2>
<p class='subtext'>".$info3['user_title']."</p>
<p class='subtext'><a href='".$info3['website_link']."' target='_blank'>".$info3['website_link']."</a>
</p>
</div>
<div id='did_2_{$page_trackid}' class='arrow_box2 pop_stats_{$page_trackid}' style=''>
<h2 class='subtext'>Stats</h2><br />
<p class='subtext'>Plays: 1m <br />
Downloads: 527, 046
</p>
</div>
the links...
<div style='position: absolute; z-index: 2; padding-top: 30px; padding-left: 699px;'>
<a href='#did_{$page_trackid}' class='contact' ><img style='height: 20px;' alt='Posted by' src='http://www.xxxxxxxxxx.co.uk/play1/skin/user-profile2.png' style=''></a>
</div>
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='#did_2_{$page_trackid}' class='contact'><img style='height: 20px;' alt='Track stats' src='http://www.xxxxxxxx.co.uk/play1/skin/stats.png' style=''></a>
</div>
I have tried replacing the first function with
function select($link) {
$link.addClass('selected');
$('.arrow_box:visible').slideFadeToggle(function () {});
$($link.attr('href')).slideFadeToggle(function () {});
}
but that bugs out, with one pop over lapping the other. I have 2 classes for the divs(1 for each) so i attempted to add
$('.arrow_box2:visible').slideFadeToggle(function () {});
but that too doesnt work.
Am i going about it the right way to close any open arrow_box or arrow_box2 when clicking a link to open a new pop up??
thanks
I copied your html and js into a jsfiddle and modified the select method. Try it out here:
http://jsfiddle.net/mchail/wHyfK/1/
I believe this now does what you asked for. The key is to toggle any shown panes (to hide them) before toggling the new "selected" pane (to show it).
Hope this helps.