At the moment, I am learning how to write in javascript and jquery.I wrote a simple jquery code where you have a navigation menu which on click it is scrolling to a specific div inside an overflow container. However, the scroll function is not working. If someone can help me I am going to be really grateful. Thank you in advance.
My Code:
$(document).ready(function() {
$("#Anchor_A").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_A").offset().top
}, 'slow');
});
$("#Anchor_B").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_B").offset().top
}, 'slow');
});
$("#Anchor_C").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_C").offset().top
}, 'slow');
});
$("#Anchor_D").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_D").offset().top
}, 'slow');
});
$("#Anchor_E").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_E").offset().top
}, 'slow');
});
});
.Wrapper{
display:flex;
position:relative;
width:90vw;
height:90vh;
background-color:purple;
}
.Menu{
position:relative;
width:10vw;
height:90vh;
background-color:blue;
}
.Menu li{
position:relative;
font-size:4vw;
line-height:5vw;
text-align:center;
color:white;
cursor:pointer;
list-style-type: none;
}
.Container{
position:relative;
width:80vw;
height:90vh;
background-color:red;
overflow-y:hidden;
}
.Box{
position:relative;
width:80vw;
height:90vh;
background-color:purple;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
<div class="Menu">
<li id="Anchor_A">A</li>
<li id="Anchor_B">B</li>
<li id="Anchor_C">C</li>
<li id="Anchor_D">D</li>
<li id="Anchor_E">E</li>
</div>
<div class="Container">
<div class="Box" id="Box_A">
Box A
</div>
<div class="Box" id="Box_B">
Box B
</div>
<div class="Box" id="Box_C">
Box C
</div>
<div class="Box" id="Box_D">
Box D
</div>
<div class="Box" id="Box_E">
Box E
</div>
</div>
</div>
Best regards,
George S.
The key point here is that you need to use position() but not the offset() method. The offset() method returns coordinates relative to the document.
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.
However you are trying to scroll them inside a container. See the implementation:
Note 1: I've optimized code a bit so instead of multiple similar blocks data-target attribute is used to define which block scroll to.
Note 2: the position() method returns coordinates from left top corner of the container. Thus the coordinates are changed once the content has been scrolled. That is why we need to compensate it by adding $('.Container').scrollTop().
$(document).ready(function() {
$(".Menu li").on('click', function() {
$('.Container').animate({
scrollTop: $($(this).data('target')).position().top + $('.Container').scrollTop()
}, 'slow');
});
});
.Wrapper {
display: flex;
position: relative;
width: 90vw;
height: 90vh;
background-color: purple;
}
.Menu {
position: relative;
width: 10vw;
height: 90vh;
background-color: blue;
}
.Menu li {
position: relative;
font-size: 4vw;
line-height: 5vw;
text-align: center;
color: white;
cursor: pointer;
list-style-type: none;
}
.Container {
position: relative;
width: 80vw;
height: 90vh;
background-color: red;
overflow-y: hidden;
}
.Box {
position: relative;
width: 80vw;
height: 90vh;
background-color: purple;
cursor: pointer;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="Wrapper">
<div class="Menu">
<li id="Anchor_A" data-target="#Box_A">A</li>
<li id="Anchor_B" data-target="#Box_B">B</li>
<li id="Anchor_C" data-target="#Box_C">C</li>
<li id="Anchor_D" data-target="#Box_D">D</li>
<li id="Anchor_E" data-target="#Box_E">E</li>
</div>
<div class="Container">
<div class="Box" id="Box_A">
Box A
</div>
<div class="Box" id="Box_B">
Box B
</div>
<div class="Box" id="Box_C">
Box C
</div>
<div class="Box" id="Box_D">
Box D
</div>
<div class="Box" id="Box_E">
Box E
</div>
</div>
</div>
</body>
</html>
Related
Looking to have 100% height on two divs side by side. I want to keep each div independent in scrolling content in each but in the blue div/column, I would like to have a smooth scroll feature. It works now but you will see the red column does not retain its 100% column height.
Thanks for any insight...
$(document).ready(function (){
$('a').click(function (){
$('html, body').animate({
scrollTop: $("#sectionb").offset().top
}, 2000);
});
});
<div id="adiv" style="height: 100%; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: relative; background: blue; overflow: auto">
Click Me
<section>
Section A
</section>
<section>
<div id="sectionb">
Section B
</div>
</section>
</div>
jsFiddle
$(document).ready(function (){
$('a').click(function (event) {
event.preventDefault();
$('#bdiv').animate({
"margin-top": "-" + $("#sectionb").offset().top
}, 2000);
});
});
$(document.body).css({"overflow": "hidden"}); // No scrollbar
body, html {height: 100%; padding: 0; margin: 0;}
a {color: #FFF}
section {height: 700px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="adiv" style="height: inherit; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: absolute; left: 30%; background: blue; overflow-y: scroll; width: 70%;">
<section id="sectiona">
Section B
<br>
Section A
</section>
<section id="sectionb">
Section A
<br>
Section B
</section>
</div>
100% means 100% of the current screen's height/width so it stretches to the height of the current screen, but here is a solution to make the red area the exact same height as the blue area.
I have a set of 5 social media icons on the bottom of my website and when I try to animate them using animate(), the animation works on the hovered-over icon but all of the other icons move as well. Any ideas how to fix this?
This is my code:
$(document).ready(function(){
$('footer img').hover(function(){
$(this).animate({width:'55px', height:'55px'}, 'fast');
}, function(){
$(this).animate({width:'50px', height:'50px'}, 'fast');
});
});
This is the styling I used for the icons in the footer:
.footer img{
position: relative;
width: 50px;
margin-top: 100px;
margin-right: 1.5em;
margin-left: 1.5em;
}
Try this
$(document).ready(function(){
$('.footer img').hover(function(){
$(this).animate({width:'55px', height:'55px'}, 'fast');
}, function(){
$(this).animate({width:'50px', height:'50px'}, 'fast');
});
});
.footer div {
display:inline-block;
height:70px;
width:70px;
}
.magicClass{
display:inline-block;
height:70px;
width:5px;
}
.footer img{
position: relative;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="footer" style="height:1000px">
<div>
<img src="https://www.w3schools.com/images/colorpicker.gif"/>
</div>
<div class="magicClass"></div>
<div>
<img src="https://www.w3schools.com/images/colorpicker.gif"/>
</div>
<div class="magicClass"></div>
<div>
<img src="https://www.w3schools.com/images/colorpicker.gif"/>
</div>
</div>
</body>
What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE
Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo
You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle
please tell me what could be the problem. Slight scrollLeft to block works very strange. If connected to the body, then all is well. But if for a single div, then something strange is happening) I feel that something in css .. Example code: http://jsfiddle.net/xmocartx/ENYLW/5/
<ul class="nav">
<li>Link_1</li>
<li>Link_2</li>
<li>Link_3</li>
<li>Link_4</li>
</ul>
<div class="AA">
<div id="BB">
<div class="section black" id="section1">
1111
</div>
<div class="section white" id="section2">
2222
</div>
<div class="section black" id="section3">
3333
</div>
<div class="section black" id="section4">
4444
</div>
</div>
</div><!--AAAAAAAA-->
ul.nav{
position:fixed;
top:50px;
left:0;
z-index:999;
list-style:none;
}
ul.nav li {
display:inline;
}
.section{
width: 1250px;
float: left;
height: 100%;
}
.AA{
width: 100%;
overflow:hidden;
}
#BB{
background: #F6FFD7;
width: 10000px;
height: 100%;
float: left;
}
$(document).ready(function($){
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('.AA').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
});