Slide some contents of a page on load - javascript

I am totally new to jQuery and starting out basically so please forgive if this question sounds amateurish or stupid. Any how I want to the header and footer of the page to remain static but the center contents of the page to slide in from the right side when page loads. Here is the page which does exactly that :
flooring-by-design.com
I have looked into slide down function of jQuery and animate function but slidedown slides from top-bottom and I don't want that. What should I do?
My content goes like this:
<div class="container">
<h1 class='logo'>Site Name</h1>
<div class='bcontent'>
<div id="one">One Content</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
<footer>Copy rights</footer>
</div>
Div one two and three are the ones which I want to slide in nicely on page load. Just like the example link.

You can do this using jQuery.
Basically the content is set at an offset of 800px from the left initially using CSS. Then using jQuery animate, we slide-in the contents till the offset from left is 0px. You can increase or decrease the duration to alter the speed of the slide-in.
jQuery
$(document).ready(function() {
$("#one").animate({left: "0"}, {
duration: 2000
});
$("#two").animate({left: "0"}, {
duration: 2250
});
$("#three").animate({left: "0"}, {
duration: 2500
});
});
CSS
.bcontent > div{
position: relative;
display: inline-block; /* to display the 3 div's in same line */
height: 200px; /* height, width and border just added for demo, not mandatory */
width: 100px;
border: 1px solid black;
left: 110%; /* Added to avoid the width issue pointed out by DRP96 */
}
.bcontent{
width: 100%;
overflow: hidden; /* added to make the content hidden initially and avoid scroll-bar */
}
$(document).ready(function() {
$("#one").animate({
left: "0"
}, {
duration: 2000
});
$("#two").animate({
left: "0"
}, {
duration: 2250
});
$("#three").animate({
left: "0"
}, {
duration: 2500
});
});
footer {
bottom: 0px;
font-size: 20px;
}
.bcontent {
width: 100%;
overflow: hidden;
}
.bcontent > div {
position: relative;
display: inline-block;
height: 200px;
width: 100px;
left: 110%;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="row">
<h1 class='logo'>Site Name</h1>
<div class='bcontent'>
<div id="one" class="span4">One Content</div>
<div id="two" class="span4">Two</div>
<div id="three" class="span4">Three</div>
</div>
<footer>Copy rights</footer>
</div>

<div class="container">
<h1 class='logo'>Site Name</h1>
<div class='bcontent'>
<div id="one">One Content</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
<footer>Copy rights</footer>
</div>
for the above html you can refer to the **demo

Related

getting the difference between the top of a container a clicked element

I am trying to create a container that has children inside it all with the same class.
I'm trying to get the difference between the clicked div and the top of the container then animate that clicked div to the top of the container.
I have gotten mixed results.. when it worked it would animate then reanimate the position of the container back to its original position.
Can anyone give me some insight into why this is not functioning correctly?
Code below.
<style>
#contact-list-scroller {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: Silver;
overflow:scroll;
width: 200px;
}
#contact-list-scroller div {
background: white;
width: 150px;
height: 150px;
border: 1px solid Gray;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:150px; height:100vh;">
<div id="contact-list-scroller">
<div class="test" id="contact_8965">stuff1</div>
<div class="test" id="contact_8966">stuff2</div>
<div class="test" id="contact_8967">stuff3</div>
<div class="test" id="contact_8968">stuff4</div>
<div class="test" id="contact_8969">stuff5</div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
<script>
$('.test').click(function(){
var contactTopPosition = $(this).offsetTop;
var containerTop = $('#contact-list-scroller').scrollTop();
var heightDifference = containerTop - contactTopPosition;
console.log(contactTopPosition + ' contactTop');
console.log(containerTop + ' containerTop');
console.log(heightDifference + ' heightDifference');
//$("#contact-list-scroller").scrollTop(contactTopPosition);
$("#contact-list-scroller").animate({scrollTop: heightDifference,
complete: $(this).unbind()
});
});
</script>
Is there a reason for giving every <div> inside of the container class="test"? If every child is a div, and has the same class, you can just use the cascading part of CCS, to target them. I also noticed you have a $(this).unbind() after the transition - you want each element to only be clickable once?
I've put together a snippet, assuming there's no specific need for the same class on all children, and commented out the unbind(). It uses element.position().top to find the visible distance between the element and its parent's top, then adds the parent's current scroll value.
$('#contact-list-scroller > div').click(function() {
var contactTopPosition = $(this).position().top;
var contactList = $(this).parent();
console.log(contactTopPosition + ' contactTop');
contactList.animate({
scrollTop: contactList.scrollTop() + contactTopPosition
//, complete: $(this).unbind() // Stops the function from running again after the first click, is that waht you want?
});
});
#contact-list-scroller {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: Silver;
overflow: scroll;
width: 200px;
}
#contact-list-scroller div {
background: white;
width: 150px;
height: 150px;
border: 1px solid Gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:150px; height:100vh;">
<div id="contact-list-scroller">
<div id="contact_8965">stuff1</div>
<div id="contact_8966">stuff2</div>
<div id="contact_8967">stuff3</div>
<div id="contact_8968">stuff4</div>
<div id="contact_8969">stuff5</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

How to disable scroll left?

I got a div element ("#parent") that includes multiple child elements (".item"). I want to enable scrolling the parent element just in one direction (left OR right). Otherwise nothing should happen.
See my code:
$("#parent").scroll(function() {
// >>> scroll event
// >>> console.log("SCROLLED " + new Date().getMilliseconds())
})
#container {
position: absolute;
width: 100%;
height: 100%;
}
#parent {
position: relative;
width: 90%;
height: 40%;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
background: red;
}
.child {
display: inline-block;
position: relative;
margin-left: 3%;
width: 40px;
height: 40px;
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">12</div>
<div class="child">13</div>
<div class="child">14</div>
<div class="child">15</div>
<div class="child">16</div>
<div class="child">17</div>
<div class="child">18</div>
<div class="child">19</div>
<div class="child">20</div>
</div>
</div>
So to my question: I'd like to disable scrolling the element to the right hand side (backwards). I'd like to just enable the scroll of the items to the left hand side (forward).
How can I use jQuery to implement this method? Any help would be very appreciated. Thanks in advance!
The following code should do the job1.
previousX stores the last position that the element was scrolled to on the X axis.
When the scroll event triggers, newX is set to the scrollLeft() value (this returns how far the element has been scrolled from it's left-most side, in pixels).
If this value is greater than previousX, then they have scrolled to the right, so we allow the scroll, and update previousX to the new x value.
If the value is lesser than previousX, they have scrolled to the right - so we need to cancel the scroll. To do this, we can use the scrollLeft() function again - but this time, we provide a value to it - this allows us to set the scroll position; rather than retrieve it. By setting it to previousX, we can prevent the scroll.
Note that if the value is equal, we do nothing.
let previousX = -1;
$("#parent").scroll(function(e){
let newX = $("#parent").scrollLeft();
if (newX>previousX) {
previousX = newX;
}
else if (newX<previousX) {
$("#parent").scrollLeft(previousX);
}
})
#container {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
}
#parent {
position: relative;
width: 90%;
height: 40%;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
background: red;
}
.child {
display: inline-block;
position: relative;
margin-left: 3%;
width: 40px;
height: 40px;
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">12</div>
<div class="child">13</div>
<div class="child">14</div>
<div class="child">15</div>
<div class="child">16</div>
<div class="child">17</div>
<div class="child">18</div>
<div class="child">19</div>
<div class="child">20</div>
</div>
</div>
1: Unfortunately, it doesn't seem to work at all when I use it with my Magic Trackpad - but when dragging the scroll bars it works just fine. I haven't tested it on a touch-screen device / Windows / using a proper mouse & scroll wheel, so I don't know how it behaves in those cases either. It would definitely be worth you doing some proper testing / improving this code, as it probably will not work in all cases, or even catch all possible scroll events.

Vertical content slider - JQuery

I am trying to create vertical content slider using jQuery, I have tried creating but its not working. I am trying to change the slide on scroll, any navigation is not required, only the content have to changed on scroll.
Here is the JSfiddle of my code
function rotateImages(){
$(".slide-item").animate({top: "-100%"}, 1000).delay(4000);
$(".slide-item").animate({top: "200%"}, 1000).delay(4000);
}
$(".slider-wrapper").scroll(function() {
rotateImages();
});
.slider-wrapper {
float: left;
width: 100%;
height: 500px;
background: #dedede;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.slide-item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.item-one {
top: 0;
}
.item-two {
top: 100%
}
.slide-item > .img-block {
float: left;
width: 30%;
}
.slide-item > .img-block > img {
width: 100%;
height: auto;
}
.slide-item > .content-block {
float: right;
width: 70%;
padding: 0 20px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slider-wrapper">
<div class="slide-item item-one">
<div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
<div class="content-block">
<h1>Slider Heading 1</h1>
<p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p>
</div>
</div>
<div class="slide-item item-two">
<div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
<div class="content-block">
<h1>Slider Heading 1</h1>
<p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p>
</div>
</div>
</div>
I would suggest using jquery-mousewheel because scroll event won't work until and unless there is scrollbar.
Fiddle demo
$('.slider-wrapper').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
rotateImages();
});

JQuery SlideUp - Background Color Behind Image

I am using JQuery slideUp/slideDown to add an overlay to an image that is hidden until mouseover and then slides up from the bottom of the image.
The div that is sliding up is given a background color, but it doesn't show up over the image, it shows up behind it (the text shows up on top of the image, but I can just see the bottom edge of the div's background color because of the margins I set). Z-index is already set to 100.
Any ideas? Thanks!
(function($) {
$(document).ready(function() {
$(".slider").attr("style", "display: none;");
if ($(".slider")) {
$('.image').mouseover(function() {
$(this).find(".slider").slideDown("400");
}).mouseout(function() {
$(this).find(".slider").slideUp("400");
});
}
});
}(jQuery));
.image{
height: 300px;
width: 300px;
background: #000000;
}
.slider {
background-color: #333333 !important;
background: #333333 !important;
background-position: 0% 100%;
color: #ffffff;
margin: -90px 0 0 0;
height: 90px;
width: 100%;
z-index: 100 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
It's better to define display: none; for slider in css rule.
Also to bind mouseenter and mouseleave to container will prevent jumping slider when mouse is leaving image and moving over slider.
$('.container').on("mouseenter", function() {
$(".slider").slideDown();
});
$('.container').on("mouseleave", function() {
$(".slider").slideUp("400");
});
.container {
width: 300px;
}
.image{
height: 300px;
width: 300px;
background: #000000;
}
.slider {
background-color: #333333;
color: #ffffff;
margin: -90px 0 0 0;
height: 90px;
width: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
If you do not define position, element will be static, as that's default position for block elements.
M.

Rendering two div in a div horizantally

I have a parent div having two child divs which are in horizantal ,Now I want to add other div such that the pagination should come.
Here is the code.
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Here, If i add other div to 'parent',It will append at last,but should not be shown and pagination should come.
Using floats, I am making the div's horizantal.I have to show only two div's,After that pagination should come.
This is just a DEMO:
HTML:
<div id="parent">
<div id="wrapper">
<div id="left">window 1</div>
<div id="right">window 2</div>
</div>
</div>
<div id="paginator"><span id="prev">Previous</span><span id="next">Next</span></div>
CSS:
#parent {
width: 850px;
overflow: hidden;
padding: 10px;
height: 320px;
border: 1px solid #f00
}
#wrapper div {
width: 400px;
border: 1px solid #ccc;
height: 300px;
display:inline-block;
margin: 10px
}
#paginator {
margin: 10px;
display: block
}
#paginator span {
width: 30px;
padding: 5px;
margin: 10px;
background: #1f1f1f;
color: #fff;
}
JQUERY:
$(function() {
$('#next').click(function() {
$('#wrapper').append($('<div>window 3</div><div>window 4</div>')); // you can add div using other way
$('#wrapper').animate({
marginLeft: '-=860px'
},
500, 'linear');
});
$('#prev').click(function() {
$('#wrapper').animate({
marginLeft: '+=860px'
},
500, 'linear');
});
});
Not sure I understand your question, but I'll give it a shot...
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
<div style="clear:both"></div>
<div id="pagination"></div>
... is this what you mean to do?

Categories