I've been playing around with my code, I have the Calendar set up to do what i want, now I am just trying to get the <p> and iframe lined up beside each other nicely, i have this code so far jsfiddle and here is an example of what the separation f the arrows and iframe looks like now
what i want to achieve:
200px----[ arrowLEFT ]---30px---[ Iframe ]---30px---[ arrowRIGHT
]
HTML:
<div id="miniFeed">
<p id="toggle">
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('LeftArrow','','WEBgraphics/arrowLeftROLL.png',1)">
<img src="WEBgraphics/arrowLeft.png" width="40" height="400" id="LeftArrow"></a></span>
<span> </span>
</p>
<div id="calender">
<div id="left"> <iframe src="calenderAPRIL.html" width="350px" height="400px"></iframe>
</div>
<div id="right"> <iframe src="calenderMAY.html" width="350px" height="400px"></iframe>
</div>
</div>
<p id="toggle">
<span> </span>
<span> <a href="#" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('RightArrow','','WEBgraphics/arrowrightROLL.png',1)">
<img src="WEBgraphics/arrowright.png" width="40" height="400" id="RightArrow"></a></span>
</p>
</div>
JAVASCRIPT:
window.onload=function() {
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
};
CSS:
#miniFeed {
}
#right { display:none; }
#LeftArrow {
z-index: 100;
width: auto;
float: left;
margin-left: 200px;
display: block;
}
#calender {
float: left;
z-index: -1;
}
Try this
html:
<div id="miniFeed">
<div class="arrow leftArrow">
</div>
<div class="calendars">
<div class="carousel">
<div class="calendar-1">
</div>
<div class="calendar-2">
</div>
</div>
</div>
<div class="arrow rightArrow">
</div>
css:
#miniFeed {
width: 400px;
height: 250px;
}
#miniFeed > div {
float: left;
height: 100%;
}
.arrow {
width: 100px;
background: blue;
}
.calendars {
width: 200px;
overflow: hidden; /*the magic*/
}
.carousel {
width: 400px; /* the size is number of calendars * the width per calendar */
height: 100%;
}
.carousel > div {
width: 200px;
height: 100%;
float: left;
}
.calendar-1 {
background: red;
}
.calendar-2 {
background: green;
}
js:
$('.leftArrow').click(function() {
//we move the carousel negative
//the value 200 is the width of a calendar
$('.carousel').animate({marginLeft: -200}, 300);
});
$('.rightArrow').click(function() {
//we move the carousel negative
$('.carousel').animate({marginLeft: 0}, 300);
});
We create a wrapper with overflow hidden, so inside it we have our collections of calendars.
Result:
http://jsfiddle.net/renanvalentin/kzTRz/
Related
How do I get the position of the .img class and then move .img-2 class to the same position as .img?
I know I need to get the top and left position of .img based on the window position and then apply those values to my anime.js function, but I'm not doing it correctly...
In the anime.js function I think the translateX & translateY values need to be the values of .img but I'm maybe wrong?
Codepen is here, I'm trying to make this happen when you click the 'BUTTON' link.
Any help is appreciated
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<a class="button" href="javascript:;">BUTTON</a>
</div>
<div class="col-lg-6">
<img class="img-2" src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="row bottom-row">
<div>
<img class="img" src="https://picsum.photos/200/300" alt="">
</div>
</div>
</div>
.container {
background-color: grey;
height: 100vh;
}
.container-row {
display: flex;
flex-direction: column;
width: 100%;
}
.button {
cursor: pointer;
display: block;
}
.bottom-row {
height: 100vh;
background-color: red;
}
.img {
width: 200px;
height: auto;
marign-top: 100px;
display: block;
}
jQuery(document).ready(function ($) {
const eTop = $('.img').offset().top; //get the offset top of the element
const eLeft = $('.img').offset().left; //get the offset top of the element
$('.button').on('click', function () {
alert(eTop);
alert(eLeft);
anime({
targets: '.img-2',
translateY: eTop,
translateX: eLeft,
scaleX: 1,
scaleY: 1,
});
});
});
Snippit:
jQuery(document).ready(function ($) {
const eTop = $('.img').offset().top; //get the offset top of the element
const eLeft = $('.img').offset().left; //get the offset top of the element
$('.button').on('click', function () {
alert(eTop);
alert(eLeft);
anime({
targets: '.img-2',
translateY: eTop,
translateX: eLeft,
scaleX: 1,
scaleY: 1,
});
});
});
.container {
background-color: grey;
height: 100vh;
}
.container-row {
display: flex;
flex-direction: column;
width: 100%;
}
.button {
cursor: pointer;
display: block;
}
.bottom-row {
height: 100vh;
background-color: red;
}
.img {
width: 200px;
height: auto;
marign-top: 100px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js "></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<a class="button" href="javascript:;">BUTTON</a>
</div>
<div class="col-lg-6">
<img class="img-2" src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="row bottom-row">
<div>
<img class="img" src="https://picsum.photos/200/300" alt="">
</div>
</div>
</div>
First, the top and left offsets were saved in variables before the image had fully loaded. To avoid that, move the eTop and eLeft lines inside the click handler.
Then, you are doing a translation... So you have to subtract the initial position of the "element to be moved" from the "target" one.
jQuery(document).ready(function($) {
$('.button').on('click', function() {
// Target position
const eTop = $('.img').offset().top; //get the offset top of the element
const eLeft = $('.img').offset().left; //get the offset top of the element
// Element to be moved position
const bTop = $('.img-2').offset().top; //get the offset top of the element
const bLeft = $('.img-2').offset().left; //get the offset top of the element
//alert(eTop);
//alert(eLeft);
anime({
targets: '.img-2',
translateY: eTop - bTop,
translateX: eLeft - bLeft,
scaleX: 1,
scaleY: 1,
});
});
});
.container {
background-color: grey;
height: 100vh;
}
.container-row {
display: flex;
flex-direction: column;
width: 100%;
}
.button {
cursor: pointer;
display: block;
}
.bottom-row {
height: 100vh;
background-color: red;
}
.img {
width: 200px;
height: auto;
marign-top: 100px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js "></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<a class="button" href="javascript:;">BUTTON</a>
</div>
<div class="col-lg-6">
<img class="img-2" src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="row bottom-row">
<div>
<img class="img" src="https://picsum.photos/200/300" alt="">
</div>
</div>
</div>
I have two divs in my application that seperates the screen with the content and sidemenu.
<div class="splitter-left ">
<div class="close-left-btn">
<button class="btn btn-primary" id="toggle-menu">Click me</button>
</div>
<div class="container-fluid content-close">
<div class="row">
<div class="col-4">
<p>Home</p>
</div>
<div class="col-4">
<p>About</p>
</div>
<div class="col-4">
<p>Contact</p>
</div>
</div>
</div>
</div>
<div class="splitter-right">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<strong>Header options</strong>
</div>
</div>
</div>
</div>
And this is my styling for splitter-left and splitter-right
.splitter-left {
display: inline-block;
width: 25%;
max-width: 300px;
min-width: 250px;
background-color: #fff;
margin-top: 10px;
margin-left: -35px;
vertical-align: top;
}
.splitter-right {
display: inline-block;
width: 85%;
margin-top: 10px;
position: relative;
left: 50px;
min-height: 400px;
}
I also made a JQuery function to activate the button to hide and show the splitter-left
This is my function in JQuery
$("#toggle-menu").click(function () {
if ($(".content-close").toggle()) {
$(".splitter-left").toggleClass('sidemenu-close')
$(".splitter-right").css({ width: '100%' });
else {
$(".splitter-right").css({ width: '75%' });
}
});
And this is the styling for the method toggleClass for sidemenu-close
.sidemenu-close {
width: 0% !important;
min-width: 0% !important;
}
When I click on the button Click me the splitter-right class gets a width of 100% (this is working). When I click on the button again the splitter-right doesn't go back to the default size of 75%.
How can I get the default size back when I click on the button?
I have fixed it with the following solution:
$("#toggle-menu").click(function() {
$(".content-close").toggle();
if ($(".splitter-left").hasClass('sidemenu-close')) {
$(".splitter-left").removeClass('sidemenu-close')
$(".splitter-left").css({
width: '25%'
});
$(".splitter-right").css({
width: '85%'
});
} else {
$(".splitter-left").addClass('sidemenu-close');
$(".splitter-right").css({
width: '100%'
});
}
});
I have reference image attach for description.As in figure it is having two section side by side.One is for image(mobile and tablet) and second is for is features.This whole section is below the fold.
Now when user scrolls to view it and when image reaches vertically middle of the viewport its position should remain fixed.While its position is fixed features should scroll as normally.As one feature goes out of viewport image should change. When all features are out of viewport, position of image should again become static.
I am using skrollr js plugin for this.Please help...
Here is the code
.featurenav {
margin: 0px;
padding: 0px;
list-style: none;
}
.featurenav li:before {
content: url('../images/point.png');
position: absolute;
left: 0px;
top: 5px
}
.featurenav li {
font-family: OpenSans-Light;
color: #838b80;
font-size: 30px;
margin-bottom: 90px;
padding-left: 83px;
position: relative;
}
.color {
float: left;
width: 74px;
height: 74px;
margin: 30px 25px 0px 0px;
border-radius: 5px;
}
.color1 {
background-color: #c9bda3;
}
.color2 {
background-color: #c99a32;
}
.color3 {
background-color: #838b80;
}
.color4 {
background-color: #fff;
}
.showcase img {
width: 100%;
}
.showcase img:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 padding-zero">
<div class="col-sm-6">
<ul class="featurenav">
<li class="firstli">Graphical Layout</li>
<li class="secondli">Open sans Font Used</li>
<li class="thirdli">Colors Used
<br>
<div class="color color1"></div>
<div class="color color2"></div>
<div class="color color3"></div>
<div class="color color4"></div>
<div class="clearfix"></div>
</li>
<li class="fourthli">Parallax Smooth Scrolling</li>
<li class="fifthli">Adaptable</li>
</ul>
</div>
<div class="col-sm-6 showcase">
<img src="images/mobile_tablet.png" data-bottom-top="display:block" alt="showcase" data-anchor-target=".firstli" />
<img src="images/mobile_tablet_2.png" alt="showcase" />
<img src="images/mobile_tablet_3.png" alt="showcase" />
<img src="images/mobile_tablet_4.png" alt="showcase" />
<img src="images/mobile_tablet_5.png" alt="showcase" />
</div>
<div class="clearfix"></div>
</div>
Your images aren't working, so here's a generic solution. All you have to do is change the element to position: fixed; when you scroll to wherever the image is minus half the browser viewport height
$(window).on('load', function() {
$affix = $('#affix');
$affix.attr('data-affix', $affix.offset().top);
}).on('scroll', function() {
var scrolled = $(window).scrollTop(),
vh = $(window).height(),
halfView = (vh / 2),
scrollPoint = $affix.attr('data-affix') - halfView;
if (scrolled >= scrollPoint) {
$('img').addClass('fixed');
} else {
$('img').removeClass('fixed');
}
});
* {margin:0;}
section {
height: 500vh;
}
img {
max-width: 600px;
width: 100%;
}
.fixed {
position: fixed;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<section><img id="affix" src="http://plusquotes.com/images/quotes-img/cool_cat.jpg" data-affix></section>
I'm trying to get height of a parent div using React JS.
The html structure is as follows :
<div ref="sectionSlider">
<div class="detailsOutterDiv">
<div class="swiper" style="width: 100%;">
<div class="detailsInnerDiv">
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
<div class="slide">
<img src="someURl" style="background-color: black;">
</div>
</div>
</div>
</div>
<div class="slider-thumbnails">
<div class="thumb">
<img src="someURl">
</div>
</div>
</div>
And the css-scss structure is like this :
.detailsOutterDiv{
position: relative;
width: 100%;
overflow: hidden;
}
.detailsInnerDiv{
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 10000%;
transition: all 0.5s ease;
}
.slide{
display: inline-block;
margin-right: 15px;
}
.slide img{
width: 100%;
height: auto;
}
.slider-thumbnails{
width: 100%;
padding-top: $primary-margin-xs - 5;
text-align: center;
.thumb{
display: inline-block;
width: (100% / 12);
img{
width: 100%;
height: auto;
padding: 0 2px;
}
}
}
I'm trying to get the height of the div with ref="sectionSlider".
I tried to do this on a few ways in componentDidMount like this :
componentDidMount(){
//First way
let top = this.refs["sectionSlider"].offsetHeight;
//Second way
let top = this.refs["sectionSlider"].clientHeight;
//Third way
let top = this.refs["sectionSlider"].getBoundingClientRect().height;
//Fourth way
let node = this.refs["sectionSlider"];
let nodeStyle = window.getComputedStyle(node);
let top = parseInt(nodeStyle.getPropertyValue('height').replace(/\D/g,''));
}
And in every case top is 82 what is not true.
It looks like :
Thus, the div has height of 523.
Any idea how to solve it?
If the problem is (according to your guess) that the images aren't loaded you could do something like this:
const Example = React.createClass({
getInitialState () {
return {
imagesLoaded: 0,
};
},
printClientHeight() {
console.log(this.wrapper.clientHeight)
},
updateLoadedImages() {
this.setState({ imagesLoaded: this.state.imagesLoaded + 1 })
if (this.state.imagesLoaded = 4) {
printClientHeight();
}
},
setWrapperRef(el) {
this.wrapper = el;
},
render() {
return (
<div ref={this.setWrapperRef}>
<div className="detailsOutterDiv">
<div className="swiper" style="width: 100%;">
<div className="detailsInnerDiv">
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/ >
</div>
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/>
</div>
<div className="slide">
<img src="someURl" style="background-color: black;" onLoad={updateLoadedImages}/>
</div>
</div>
</div>
</div>
<div className="slider-thumbnails">
<div className="thumb">
<img src="someURl" onLoad={updateLoadedImages}/>
</div>
</div>
</div>
);
}
});
Obviously you could clean this up quite a bit by getting the image tag count dynamically but I think you get the point...
I just made a very simple "imageslider" but it does not slide, so lets call it a "imageswapper".
Alright. My question is now, how can I make it slide in and slide out so its smooth.
JSFIDDLE
[JS]
document.getElementById('atwo').style.display = "none";
function ImgSwap(){
if(document.getElementById('one').style.display == "block"){
document.getElementById('one').style.display = "none";
document.getElementById('two').style.display = "block";
}else{
document.getElementById('two').style.display = "none";
document.getElementById('one').style.display = "block";
}
}
[HTML]
<div id="wrapper">
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a>
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a>
</div>
[CSS]
img.img
{
height: 200px;
width: 300px;
}
#one
{
display: block;
}
#two
{
display:none;
}
a:hover
{
cursor: pointer;
}
div#wrapper
{
width: 300px;
}
There are many ways to achieve this effect, one way to do this is by applying css transition to your css class. You can change the opacity and position of the image to create the slides in effect.
function ImgSwap() {
document.getElementById('one').classList.toggle('show');
document.getElementById('two').classList.toggle('show');
}
div#wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: black;
}
.img {
height: 200px;
width: 300px;
position: absolute;
top: 0;
left: -300px;
opacity: 0;
}
a:hover {
cursor: pointer;
}
.show {
left: 0;
opacity: 1;
transition: left 1s;
}
<div id="wrapper">
<a onclick="ImgSwap()" id="aone">
<img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" />
</a>
<a onclick="ImgSwap()" id="atwo">
<img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" />
</a>
</div>