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();
});
});
});
Related
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>
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>
I have everything working in html and jquery but what I need to do is assign and append a number to make the unique id work with the Repeater field. Here is what I have when it comes the HTML CSS and jquery. Is there a way to append a unique number (such as 1 or 2...) to the end of the #expand id in the html, with jQuery?
Here is the code I have with the help from you guys here:
#expand-1 .bio-pic2, #expand-2 .bio-pic2 {
position:absolute;
top:0;
left:0;
}
#expand-1, #expand-2 {
position:absolute;
width:1000px;
border: 1px solid black;
display: none;
background-color:#ffffff;
z-index:9999;
height:323px;
}
.bio-pic2 img {
position:absolute;
top:0;
left:0;
width:323px;
}
.testimonial {
position:absolute;
top:333px;
left:0;
font-size:15px;
}
.desc {
position:absolute;
top:10px;
left:333px;
}
.bio-pic {
float:left;
cursor: pointer;
z-index:9998;
margin:0 5px 0 0;
}
<div id="expand-1">
<div class="test">
<div class="bio-pic2">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-1" class="bio-pic">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
</div>
<div id="expand-2">
<div class="test">
<div class="bio-pic2">
<img src="http://brent-ransom.com/photo2-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-2" class="bio-pic">
<img src="http://brent-ransom.com/photo2-img.jpg" />
</div>
$(".bio-pic").click(function (e) {
e.stopPropagation();
//$('.bio-pic2').toggle("slow");
var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
$(menu).show().animate({
width: 500
}, 1000);
});
$("#expand-1, #expand-2").click(function () {
$(this).animate({
width: 0
}, 1000, function () {
$(this).hide();
});
})
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/h64CZ/4/
to change an id...
var myNum = 3;
$('#expand').attr('id', 'expand' + myNum);
I have two rows of data (green) and a header (red), which should be visible at all times:
Check out the example I already have:
http://jsfiddle.net/j9C8R/33/
Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).
How can this be achieved (preferably with only CSS).
UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.
.main {
background-color: blue;
overflow: scroll;
height: 200px;
width: 400px;
}
.row {
height: 50px;
overflow: scroll;
clear: both;
width: 1000px;
background-color: yellow;
}
.sticky,
.content {
float: left;
width: 150px;
border: 1px solid black;
}
.sticky {
background-color: red;
}
.content {
background-color: green;
}
<div class="main">
<div class="row">
<div class="sticky">Sticky header A</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
</div>
<div class="row">
<div class="sticky">Sticky header B</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
</div>
<div class="row">
<div class="sticky">Sticky header C</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
</div>
<div class="row">
<div class="sticky">Sticky header D</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
</div>
<div class="row">
<div class="sticky">Sticky header E</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
</div>
</div>
UPDATE
please note the below is now a little out of date as we have css position sticky
Original Post
I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.
with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:
$('.main').scroll(function() {
$(this).find('.sticky').css('left', $(this).scrollLeft());
});
.main {
background-color:blue;
overflow:scroll;
height:200px;
width:400px;
}
.row {
height:50px;
overflow:scroll;
clear:both;
width:1000px;
position:relative;
background-color:yellow;
padding-left:150px;
box-sizing:border-box;
}
.sticky, .content {
float:left;
width:150px;
border:1px solid black;
}
.sticky {
background-color:red;
position:absolute; left:0; top:0;
}
.content {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast
The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)
Demo
CSS
.head {
background-color: #f00;
width: 300px;
position: absolute;
left: 100px;
}
.head table {
width: 100%;
}
.body {
position: relative;
left: 100px;
top: 20px;
width: 300px;
height: 50px;
overflow-y: auto;
}
.body table {
width: 100%;
}
.body td {
width: 100px;
}
.head table td {
width: 100px;
}
.left {
position: absolute;
background-color: #0f0;
width: 90px;
top: 40px;
}
I am trying to make a bar chart and the bar animates from top to bottom right now, but I want it to animate from bottom to top. How do I get it go from bottom to top?
CSS
.bar {
width:50px;
height:250px;
list-style-type:none;
}
.bar p {
background-color:#63F;
}
.bar span {
padding-left:15px;
left:100%;
}
#content ul {
list-style-type:none;
}
#content ul li {
float:left;
margin:50px;
}
HTML
<div id="content">
<ul>
<li>
<div class="bar">
<p><span>50%</span></p>
</div><br>
Freshmen
</li>
</ul>
</content>
Javascript
<script src="../../jquery-1.6.4.min.js"></script>
$(document).ready(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find("p").delay(500).animate({'height':length},3500,function(){$(this).find("span").fadeIn(1000);
});
});
});
"click here to see it in jsfiddle"
You can define position:absolute to your bar. Write like this:
.bar {
width:50px;
height:250px;
list-style-type:none;
position:relative;
}
.bar p {
background-color:#63F;
position:absolute;
bottom:0;
left:0;
}
Check this http://jsfiddle.net/6zqSS/1/
http://jsfiddle.net/t4THf/5/
CSS
.perfect
{
padding-top:30px;
width:500px;
height:300px;
position:relative;
background-color:#efefef;
}
.perfect .bar
{
float:left;
position:relative;
width:40px;
height:100%;
margin-left:5px;
}
.perfect .bar .slideup
{
position:absolute;
bottom:0px;
width:40px;
background-color:#fff000;
border:1px solid #000;
}
.perfect .bar .slideup span
{
display:block;
position:absolute;
margin:5px;
top:-30px;
}
HTML
<div class="perfect">
<div class="bar">
<div class="slideup">
<span>20%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>30%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>10%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>100%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>50%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>60%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>55%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
</div>
JS
$(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find(".slideup").delay(500).animate({'height':length},
"slow",function(){$(this).find("span").fadeIn(1000);
});
});
});
Click here for demo
You could also achieve this using css keyframes, for example for webkit http://jsfiddle.net/kudoslabs/YddaY/
css
dl{ position: relative ; height: 200px ; }
dt,dd{ position: absolute ; }
dd{ height: 70% ; width: 30px ; background: grey ; bottom: 20px ; -webkit-animation: animate-bar 1.25s 1 linear; }
dt{ bottom: 0 ; }
#-webkit-keyframes animate-bar{
0% {height: 0% ; }
}
html
<dl>
<dt>Freshman</dt>
<dd>70%</dd>
</dl>
http://jsfiddle.net/chovy/6zqSS/2/
.bar {
position: relative;
}
.bar p {
position: absolute;
bottom: 0;
}
Use keyframes to animate the css property, e.g. width
Once you set the width of your element (e.g. div) the animation will kick in
.animated-bar {
animation: animateBar 0.25s ease-in;
#keyframes animateBar {
0% {
width: 0;
}
}
}
<div class="animated-bar" style="width: 200px"><div>