How do jQuery animations start from the end?

How do jQuery animations start from the end? - javascript

I'm trying to design a small menu and I really like this code. As you normally know, menus are closed when the page is first loaded. How can I make this animation closed when the page is first loaded? How can I start this animation in reverse?
$(document).ready(function(){
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
});
.box{
float:left;
overflow: hidden;
background: #f0e68c;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
</div>
</body>
<html>

You can start with hidden .box by adding display: none:
$(document).ready(function() {
$(".slide-toggle").click(function() {
$(".box").animate({
width: "toggle"
});
});
});
.box {
float: left;
overflow: hidden;
background: #f0e68c;
display: none;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner {
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam
ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
</div>
</body>
<html>

<div class="box" style="display:none">
When the menu is closed, it adds display: none property to the .box element. You have to add this style property to the .box element in HTML to make it look trapped on boot.

Related

Rewrite jQuery easing easeInExpo function into plain javascript & css

So I have this great little nugget of code that I am trying to rewrite into plain JavaScript and CSS without jQuery.
jQuery.extend(jQuery.easing,{
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
}
});
var nset = false;
$('button#hmenu').click(function(){
if(!nset){
$('ul#nav').delay(35).slideDown(300,'easeInExpo');
$('button#hmenu').addClass('active');
nset = true;
} else {
$('ul#nav').slideUp(550);
nset = false;
$('button#hmenu').removeClass('active');
}
})
I'm looking at some CSS transitions that use easing but just wondering what the options are? In my code I have a slideDown and up easing functions. This is used in production for a mobile menu nav.

Update:
This github repo (You don't need jQuery) has a really comprehensive list of common jQuery functions, all rewritten in vanilla Javascript.
It includes animations, query selectors, ajax, events and other advanced jQuery features.
The slightly older youmightnotneedjquery.com is also very good, particularly if you need to support older IE versions.
You can achieve an easeInExpo style animation by using the following CSS, as provided by this website:
transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
The below example illustrates this easing property on the height of a div. I've updated it to match the delay you've added in jQuery when clicked (35ms), the timings (300ms and 550ms respectively), and jQuery's default easing ('swing') – as provided by this answer – when it's closed:
let expandable = document.getElementById('expandable');
let expandButton = document.getElementById('expand-button');
expandButton.addEventListener('click', () => {
expandable.classList.toggle('expanded');
});
#expandable {
background: red;
transition: all 550ms cubic-bezier(.02, .01, .47, 1);
height: 0px;
width: 100px;
transition-delay: 0ms;
}
#expandable.expanded {
height: 100px;
transition-delay: 35ms;
transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
<div id="expandable"></div>
<br />
<button id="expand-button">Toggle expand</button>

There's a little bit of magic needed here in order to get your collapsible component to expand to a variable height. If you are just expanding to the same height each time, say 100px, that's a simple as creating a single class such as "expanded" and then adding and removing that class as a boolean switch.
We'll still be using a boolean switch for variable heights, but we'll also need to get the heights of each expandable element using JavaScript, and then refresh those height values if the size of the user's window changes to account for text-wrapping, image resizing, etc.
We can achieve rather simply using custom CSS properties (variables), with a fallback value to unset, meaning that when to variable height is present, the box will expand to show all contents without an animation as a last resort, but in most if not all cases (and for all modern browsers) the custom CSS variable should be the ideal solution for unique values per section.
Here it is in action (below), with both a toggle and accordion example, with a cubic bezier easing function used to closely match the easeInExpo function you supplied in your original question. I pulled this easing function cubic-bezier(0.95, 0.05, 0.795, 0.035) from easings.net/en#easeInExpo where they have a pure CSS easing for easeInExpo and many others.
Simple Example
const expandables = document.querySelectorAll('.expandable');
const setInnerHeights = () => {
for (const expandable of expandables) {
expandable.style.setProperty('--inner-height', Array.from(expandable.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px');
}
};
setInnerHeights();
document.addEventListener('click', e => {
if (e.target?.matches('.expand-trigger')) {
const expandable = e.target.nextElementSibling;
expandable.classList[expandable.classList.contains('expanded') ? 'remove' : 'add']('expanded');
}
});
window.addEventListener('resize', setInnerHeights);
html {
height: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
min-height: 100%;
padding: 20px;
}
.expandable {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);
text-align: left;
}
.expandable > p {
margin: 0;
padding: 10px 0;
}
.expandable.expanded {
--content-height: calc(var(--inner-height) + 20px);
max-height: var(--content-height, unset);
}
<button class="expand-trigger">Expand #1</button>
<div class="expandable">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<button class="expand-trigger">Expand #2</button>
<div class="expandable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
</div>
<button class="expand-trigger">Expand #3</button>
<div class="expandable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
<p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
</div>
Complex Example
const initAccordions = () => {
const getNode = selector => document.querySelector(selector),
getNodes = selector => Array.from(document.querySelectorAll(selector)),
findChildren = (node, selector) => Array.from(node.children).filter(e => e.matches?.(selector)),
findChild = (node, selector) => Array.from(node.children).find(e => e.matches?.(selector)),
_addInput = (node, position, id, checked) => node.insertAdjacentHTML(position, `<input type="radio" name="accordion-${id}"${checked ? ' checked="checked"' : ''}>`),
setInnerHeight = node => {
const height = Array.from(node.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px';
node.style.setProperty('--inner-height', height);
},
accordions = Array.from(document.querySelectorAll('.accordion'));
let accordionIndex = 0;
for (const accordion of accordions) {
const isToggle = accordion.dataset?.type === 'toggle',
panels = findChildren(accordion, '.accordion--panel');
let panelIndex = 0;
for (const panel of panels) {
const title = findChild(panel, '.accordion--panel--title'),
content = findChild(panel, '.accordion--panel--content'),
addInput = (node, position, checked) => _addInput(node, position, accordionIndex + (isToggle ? '-' + panelIndex : ''), checked);
setInnerHeight(content);
addInput(title, 'beforebegin');
addInput(title, 'afterbegin', true);
panelIndex++;
}
accordionIndex++;
}
window.addEventListener('resize', () => {
const panelContents = Array.from(document.querySelectorAll('.accordion > .accordion--panel > .accordion--panel--content'));
for (const content of panelContents) setInnerHeight(content);
});
};
initAccordions();
html {
height: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100%;
padding: 20px;
}
.accordion--panel > [type=checkbox],
.accordion--panel > [type=radio], .accordion--panel--title > [type=checkbox],
.accordion--panel--title > [type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.accordion--panel > [type=checkbox]:checked,
.accordion--panel > [type=radio]:checked, .accordion--panel--title > [type=checkbox]:checked,
.accordion--panel--title > [type=radio]:checked {
display: none;
}
.accordion--panel {
border-radius: 7px;
}
.accordion--panel--title {
background-color: #ccc;
}
.accordion--panel--content {
box-shadow: inset 0 0 0 2px #ccc;
border-radius: 0 0 7px 7px;
}
.accordion {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 500px;
}
.accordion--panel {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.accordion--panel > [type=checkbox],
.accordion--panel > [type=radio] {
z-index: 1;
}
.accordion--panel--title, .accordion--panel--content {
padding-inline: 15px;
}
.accordion--panel--title {
position: relative;
padding-block: 10px;
}
.accordion--panel--content {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
.accordion--panel--content--inner > p:first-child {
margin-top: 10px;
}
.accordion--panel--content--inner > p:last-child {
margin-bottom: 10px;
}
[type=checkbox]:checked ~ .accordion--panel--content, [type=radio]:checked ~ .accordion--panel--content {
--content-height: calc(var(--inner-height) + 20px);
max-height: var(--content-height, unset);
}
<h2>Accordion Demo</h2>
<div class="accordion" data-type="accordion">
<div class="accordion--panel">
<div class="accordion--panel--title">Title #1</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #2</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #3</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
<p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
</div>
</div>
</div>
</div>
<h2>Toggle Demo</h2>
<div class="accordion" data-type="toggle">
<div class="accordion--panel">
<div class="accordion--panel--title">Title #1</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #2</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #3</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
<p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
</div>
</div>
</div>
</div>
Other CSS easing functions are available at easings.net.
You can also customize your easing function visually using Chrome's DevTools by adding either the transition or transition-timing-function properties to any element with the value of ease, then clicking the square curve icon next to the word ease and dragging either of the circular handles.

Using CSS to wrap text around image and have it behave like a background image

I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only issue is that I can't figure out how to make it so the text in one column (left) sets the height not the image (right).
Take this example:
https://jsfiddle.net/kvzmw0sy/22/
Or the raw code
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
CSS:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width:100%;
height:50px;
border: 2px solid green
}
What I get is this:
But, what I want is this (see how the image goes behind the footer):
Essentially I want it to work like a background image.
I tried position absolute but it breaks the text wrapping. I don't think i can do this with a background image. And so the only solution I have so far is to use JS to get the height on the left and apply it to the container with an overflow:hidden which I'd really like to avoid.

the new overflow:clip applied to the container will do the job
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
/* .text{
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
} */
.container {
overflow: clip;
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
For better support you can rely on clip-path instead:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
.container {
clip-path: inset(0);
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>

Scroll function called automatically when modal open and close

I have bootstrap modal which contains scrollable div id=moreContent and modal is open when a button is clicked. but the problem if I close the div with the scroll bar and then I try to reopen the modal the scroll function is also called. what am I doing wrong here.
$(document).ready(function() {
$("#buttonId").click(function() {
$('#myModal').openModal();
});
$("#moreContent").scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this[0].scrollHeight) {
console.log("this should be called only if manually scrolled ??");
}
}
});
});
#myModal {
max-height: 700px;
height: 700px;
min-height: 700px;
max-width: 912px;
min-width: 912px;
width: 912px;
}
#moreContent {
overflow-y: auto;
max-height: 300px;
min-height: 300px;
}
<div id="myModal" class="modal confirm-dialog">
<div class="modal-content">
<div id="moreContent">
<div id="moreSupervisorContent"></div>
<div id="moreSubordinateContent" class="hidden"></div>
</div>
</div>

This is because your modal is changing the size of the document. When the document changes size, the scroll position changes, thus triggering a scroll event.
This is most likely due to the fact that your modal has a fixed height. Setting fixed sizes is typically a bad idea in web development since you can't predict how big someone's screen or browser will be.
To solve it, you should style your modal an absolute or fixed position, set it to 100% height and have it handle the overflow instead of #moreContent. The position will keep the document from growing and the modal will only show scrollbars if its content gets larger than it is.
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
overflow: auto;
}
.modal__content {
height: 700px;
width: 60%;
margin: 30px auto;
padding: 30px;
background: #CCC;
}
<div class="modal">
<div class="modal__content">
<h3>This is the modal content</h3>
<p>This is some content inside the modal and it is fixed to 700px height</p>
</div>
</div>
<h1>This is the page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>

Equal heights of columns in a row with jquery

I'm trying to set the columns in my row to have equal heights and it seems that this script is not working. It is making my columns equal BUT setting the heights to 0px.
JS
var EqualColumnHeight = {
equalizeColumnHeights: function() {
if ($( window ).width() > 720) {
//$('.row .equal-height').equalHeights();
$('.equals .equal-height').each( function () {
$(this).css('height', $(this).parent().height()+'px');
});
} else {
$('.equals .equal-height').each(function() {
$(this).css('margin-bottom', '40px');
});
}
}
};
$(window).load(function () {
EqualColumnHeight.equalizeColumnHeights();
});
CSS
.dark-box {
background: rgba(9,31,38,.8);
color: #fff;
padding: 30px;
}
HTML
<div class="row equals">
<div class="five columns dark-box equal-height">
<h2>Proin commodo metus id aliquam egestas</h2>
<p>Donec lobortis elit nunc, vitae tristique odio dictum in. Curabitur risus dui, porta non malesuada id, dapibus et ex. Suspendisse euismod nec risus ac vehicula. Cras lobortis tellus id maximus laoreet. Sed sit amet aliquam ex, ut malesuada justo. Aliquam id lacus at leo faucibus interdum vel nec urna.</p>
</div>
<div class="five columns dark-box equal-height">
<h2>Ut sed urna in elit consectetur laoreet</h2>
<p>Etiam finibus dapibus urna, in eleifend lorem molestie a. Nulla tincidunt quis lectus sit amet tincidunt. Nunc vehicula feugiat leo, at pretium erat lacinia posuere. Mauris posuere odio non urna suscipit, vel imperdiet dolor fermentum. Etiam finibus scelerisque molestie. Aenean bibendum est lacus, ac sollicitudin est cursus ut. Nam sed ante vel nulla mollis tincidunt. Phasellus nec massa lacinia, accumsan velit sit amet, cursus mauris. Pellentesque ligula nulla, elementum ac risus in, volutpat efficitur odio. Nullam ut arcu venenatis, molestie mauris sit amet, egestas metus.</p>
</div>
</div>

I did a jsFiddle of this: http://jsfiddle.net/xpdg5ov2/5/
I was getting an error when doing $(window).load I had to change it to $(document).ready
I also noticed that the parent height changed through each loop
EDIT: in that one, the divs were indeed the same height, but the parent height changed after it changed the children. so I just made it vertically align to the top:
http://jsfiddle.net/xpdg5ov2/5/
Also notice, your window has to be over 720 pixels. due to your code. here is a jsfiddle without the window limit http://jsfiddle.net/xpdg5ov2/6/
FULL code just incase jsfiddle doesnt work for you:
jQuery:
$(document).ready(function () {
var parentHeight = $('.equals .equal-height').parent().height();
$('.equals .equal-height').each( function () {
$(this).css('height', parentHeight+'px');
});
});
CSS:
.dark-box {
background: rgba(9, 31, 38, .8);
color: #fff;
padding: 30px;
width: 45%;
box-sizing: border-box;
display: inline-block;
vertical-align: text-top;
}

anchor link to multiple classes instead of id's with jquery

I have a page with up and down arrows that are links that float on the left. I want them to navigate between div's on the page as a scrolling anchor links. Here is what I have so far.....I know the jquery is far from complete but I think im going in the right direction. Any help would be great.
JSFIDDLE: http://jsfiddle.net/t8uaQ/
HTML:
<ul id="et-float-menu">
<li class="et-float-menu-item1">
<span><img></span>
</li>
<li class="et-float-menu-item2">
<span><img></span>
</li>
</ul>
<div class="jumptosection" id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section4">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
MY CSS:
#section1 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section2 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#section3 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section4 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#et-float-menu {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #000;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#et-float-menu a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
color: #fff;
}
#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }
#et-float-menu li {
display: block;
margin-left: 0;
}
.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }
JQUERY:
jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
return false;
});
});

Change hrefs of your <a> to scrollUp and scrollDown correspondingly.
Stick to some .selected class, which will be used for identifying current selected section.
Add this class to the first section in html.
Add a function that will perform selection: by adding .selected class and scrolling to newly selected div.
function changeSelection(sectionFrom, sectionTo) {
if(sectionTo.length > 0) {
sectionFrom.removeClass("selected");
sectionTo.addClass("selected");
$("body").animate({scrollTop: sectionTo.offset().top});
}
}
Attach click listeners to your anchors. Inside each of them find current selected div and div you want to be selected and call changeSelection() using these divs.
For scrollDown we want to select the next div:
$(document).on("click", "[href='#scrollDown']", function(){
var currentSection = $(".selected");
var nextSection = currentSection.next(".jumptosection");
changeSelection(currentSection, nextSection);
return false;
});
For scrollUp we want to select the previous div:
$(document).on("click", "[href='#scrollUp']", function(){
var currentSection = $(".selected");
var prevSection = currentSection.prev(".jumptosection");
changeSelection(currentSection, prevSection);
return false;
});
In case you reach the end (the first or the last .jumptosection div), nothing will be changed (it is controlled by the changeSelection function - it checks do we have sectionWeWantScrollTo)
Here is the Demo
Edited (for http://94co.com/client3/about/)
See this answer about WordPress and jQuery. Use jQuery instead of
$ in your script
It is better to use id instead of href on anchor
Make sure you wrap JavaScript of click listeners in
jQuery(document).ready(function(){
/*scrollUp and scrollDown click listeners should be here*/
});
(JSFiddle makes this wrap automatically). changeSelection function doesn't need to be wrapped
Here is the updated Demo

You can set some initial var that let you know the start point like this:
var pre = $('.et-float-menu-item1'),
nex = $('.et-float-menu-item2'),
act = $('#section1');
Where act is the start
And then evaluate prev and next elements:
nex.click(function(){
pre.slideDown();
var gt = act.next('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.next('div');
})
pre.click(function(){
var gt = act.prev('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.prev('div');
})
This code can be improved but is the first aproach I can give.
Check the Demo Fiddle

Develop Reference

JavaScript is the programming language of the Web.

How do jQuery animations start from the end? - javascript

<div class="box" style="display:none"> When the menu is closed, it adds display: none property to the .box element. You have to add this style property to the .box element in HTML to make it look trapped on boot.

Related

Rewrite jQuery easing easeInExpo function into plain javascript & css

Using CSS to wrap text around image and have it behave like a background image

Scroll function called automatically when modal open and close

Equal heights of columns in a row with jquery

anchor link to multiple classes instead of id's with jquery

Categories

Resources