I have this code (make element ".aaa" margin-bottom equal to element ".bbb" height):
$('.aaa').css( 'margin-bottom', $('.bbb').css('height'));
It works but... how to make it to work dynamically if ".bbb" elements have varying heights?
I am very sorry, but I do not know how to explain it better.
Edit: Sorry, this is a code sample to better understand what I mean: https://jsfiddle.net/d77n9ajx/1/
Should be like the first one.
Try the following code:
$('.aaa').css('margin-bottom', $('#bbb').height() + 'px');
You can use the jQuery method outerHeight() to get .bbb height.
.outerHeight( [includeMargin ] ) Returns: Number
Description: Get the
current computed height for the first element in the set of matched
elements, including padding, border, and optionally margin. Returns a
number (without "px") representation of the value or null if called on
an empty set of elements.
After you get .bbb height you assign it to .aaa margin-bottom property with .css() function.
Code Snippet:
(function() {
var a = $(".aaa"),
b = $(".bbb");
var bOuterHeight = b.outerHeight();
a.css("margin-bottom", bOuterHeight);
var aMarginBottom = a.css("margin-bottom");
console.log("bbb height:" + b.outerHeight() + " aaa margin bottom:" + aMarginBottom);
})();
* {
box-sizing: border-box;
}
div {
height: 50px;
}
.aaa {
background-color: gold;
}
.bbb {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>
This is only an example, the objective is that you add the code:
$('.aaa').css( 'margin-bottom', $('.bbb').css('height'));
in the event that resize the element bbb
function ChangeDivSize(){
$('.bbb').height(100);
$('.aaa').css( 'margin-bottom', $('.bbb').css('height'));
}
.aaa{
background-color:red;
height:100px;
margin-bottom: 10px;
}
.bbb{
background-color: blue;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>
<input type="button" value="Change Div Size" onclick="ChangeDivSize()" />
This is not very neat, but it should work.
var previousHeight = null;
setInterval(function()
{
var height = $('.bbb').height();
if (height == previousHeight)
return;
$('.aaa').css('margin-bottom', height);
previousHeight = height;
}, 10);
animate();
function animate()
{
$('.bbb').animate({ height: '0px' }, 1000, function()
{
$('.bbb').animate({ height: '100px' }, 1000, animate);
});
}
.aaa {
background: red;
height: 10px;
}
.bbb {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>
Here's a solution for your problem.
The code properly resizes aaa margin-bottom in case your bbb div changes as well.
HTML
<div class="aaa">Test the code</div>
<div class="bbb">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
jQuery
<script type="text/javascript">
$(document).ready(function(){
var bheight=$('.bbb').height();
$('.aaa').css('margin-bottom',bheight);
new ResizeSensor($('.bbb'), function() {
bheight=$('.bbb').height();
$('.aaa').css('margin-bottom',bheight);
}); //Function runs incase bbb div changes size
});
</script>
Please do include the following scripts to run your code:
<script src="js/jquery.min.js"></script>
<script src="js/ElementQueries.js"></script>
<script src="js/ResizeSensor.js"></script>
These .js files are my local versions. You do download it for yourself. You can find ElementQueries.js and ResizeSensor.js in following link:http://marcj.github.io/css-element-queries/
Hope this satisfies your concern!!
Since you have more .aaa and .bbb elements you should use each().
var calculateMargin = function(){
// Make ".aaa" margin-bottom equal to ".bbb" height
$('.aaa').each(function(){
$(this).css( 'margin-bottom', $(this).next('.bbb').css('height'));
});
};
calculateMargin();
$(window).on('resize', function() {
calculateMargin();
});
.wrap {
position: relative;
float: left;
margin: 10px;
}
.aaa {
width: 200px;
height: 200px;
background-color: pink;
}
.bbb {
position: absolute;
bottom: 0;
left: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi. Accusantium, veniam, porro voluptatum dolorem deleniti laborum sapiente...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi. Accusantium, veniam, porro...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit....
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi. Accusantium, veniam, porro voluptatum dolorem...
</div>
</div>
or if .bbb will not always be the next sibling of .aaa, but will be within the same container; than:
$('.aaa').each(function(){
$(this).css( 'margin-bottom', $(this).parent().find('.bbb').first().css('height'));
});
Both will work in your example.
Based on #mbadeveloper try this:
$( ".bbb" ).resize(function() {
$( ".aaa" ).css( "margin-bottom" , $( ".bbb" ).height());
});
Hope the syntax is correct :/
Related
I'm running into an issue with an assignment. Part of the assignment is to increase the font size of a paragraph using jQuery or JavaScript.
The console statements seem to increase +1 every mouse click (the first click counts for 1, the second for two, etc).
Thanks.
function fontUp() {
var fSize = document.getElementsByTagName('p');
$('#font-up').click(function() {
console.log('font-up clicked');
fSize++;
});
}
function fontDn() {
var fSize = document.getElementsByTagName('p');
$('#font-dn').click(function() {
console.log('font-down clicked');
fSize--;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<p id='p1'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
<br>
<p id='p2'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
</div>
<div id="selectors">
<button id="button1" class="color-button" onclick="changeColorRed()">Red</button>
<button id="button2" class="color-button" onclick="changeColorBlue()">Blue</button>
<button id="button3" class="color-button" onclick="changeColorGreen()">Green</button>
<br>
<br>
<input id="red-input" class="input-box" type="text" placeholder="red"></input>
<input id="green-input" class="input-box" type="text" placeholder="green"></input>
<input id="blue-input" class="input-box" type="text" placeholder="blue"></input>
<button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>
<br>
<br>
<button id="font-up" onclick="fontUp()">Font Up</button>
<button id="font-dn" onclick="fontDn()">Font Down</button>
</div>
</div>
I think you have to adjust your fontUp and fontDn function. It's right to get the elements with p tag, but then one of the way to achieve that is to loop all those elements, and then get each of their current font-size, and increment it by 1 on fontUp and decrement it by 1 on fontDown
Since the p elements itself doesn't have specific font-size style declared on the element, but instead in stylesheet, you can use getComputedStyle to get the font-size, here is more reference to that How To Get Font Size in HTML
function fontUp(){
var fSize = document.getElementsByTagName('p');
$('#font-up').click(function(){
for(let i = 0; i < fSize.length; i++) {
let currentSize = window.getComputedStyle(fSize[i], null).getPropertyValue('font-size');
fSize[i].style.fontSize = `${Number(currentSize.replace('px','')) + 1}px`
}
});
}
function fontDn(){
var fSize = document.getElementsByTagName('p');
$('#font-dn').click(function(){
for(let i = 0; i < fSize.length; i++) {
let currentSize = window.getComputedStyle(fSize[i], null).getPropertyValue('font-size');
fSize[i].style.fontSize = `${Number(currentSize.replace('px','')) - 1}px`
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<p id='p1'>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Qui iste deserunt voluptate unde, pariatur aliquam consequatur,
aut neque accusamus consequuntur, odit velit exercitationem non
eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
<br>
<p id='p2'>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Qui iste deserunt voluptate unde, pariatur aliquam consequatur,
aut neque accusamus consequuntur, odit velit exercitationem non
eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
</div>
<div id="selectors">
<button id="button1" class="color-button" onclick="changeColorRed()">Red</button>
<button id="button2" class="color-button" onclick="changeColorBlue()">Blue</button>
<button id="button3" class="color-button" onclick="changeColorGreen()">Green</button>
<br>
<br>
<input id="red-input" class="input-box" type="text" placeholder="red"></input>
<input id="green-input" class="input-box" type="text" placeholder="green"></input>
<input id="blue-input" class="input-box" type="text" placeholder="blue"></input>
<button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>
<br>
<br>
<button id="font-up" onclick="fontUp()">Font Up</button>
<button id="font-dn" onclick="fontDn()">Font Down</button>
</div>
</div>
First, inputs are self-closing, so you don't need the </input> at the end.
Outside that, as pointed out in comments, you're just grabbing all p elements, and trying to perform an increment or decrement operator on the array of elements, which won't do anything. You'd want to get the current font size as a number (you can either use replace(/[^0-9]/g, '') on the font size or just parseInt() to remove the px, then increment/decrement, then assign it back to the paragraphs.
function fontUp(){
//get the current font-size as an integer
var fSize = parseInt($('p').css('font-size'));
//use a pre-increment operator to add one to the font size and assign it to the paragraphs at the same time
$('p').css('font-size', ++fSize);
}
function fontDn(){
var fSize = parseInt($('p').css('font-size'));
$('p').css('font-size', --fSize);
}
https://jsfiddle.net/n2ydp458/
Edit: I answered a bit too quick and left your event listeners that were being mapped inside event listeners in there. I've removed them now.
Consider the following.
$(function() {
var fonts = [
"font-sm",
"font-md",
"font-rg",
"font-lg",
"font-xl"
];
var fSize = 2;
function findFont(i, c) {
if (c.indexOf("font") === 0) {
return c;
}
}
function changeFont(dir) {
if (dir == "up") {
fSize++;
} else {
fSize--;
}
if (fSize < 0) {
fSize = 0;
}
if (fSize >= fonts.length - 1) {
fSize = fonts.length - 1;
}
$("#content p").removeClass(findFont).addClass(fonts[fSize]);
}
function changeColor(cName) {
$("#content p").removeClass("red blue green").addClass(cName);
}
$("button[id^='font']").click(function() {
if ($(this).is("#font-up")) {
changeFont("up");
} else {
changeFont("down");
}
console.log("Font Change", fonts[fSize]);
});
$(".color-button").click(function() {
changeColor($(this).val());
console.log("Color Changed", $(this).val());
});
});
.font-1,
.font-sm {
font-size: 11px;
}
.font-2,
.font-md {
font-size: 12px;
}
.font-3,
.font-rg {
font-size: 14px;
}
.font-4,
.font-lg {
font-size: 18px;
}
.font-5,
.font-xl {
font-size: 24px;
}
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
#selectors input {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<p id='p1' class="font-rg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
<p id='p2' class="font-rg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
</div>
<div id="selectors">
<button id="button1" class="color-button" value="red">Red</button>
<button id="button2" class="color-button" value="blue">Blue</button>
<button id="button3" class="color-button" value="green">Green</button>
<input id="red-input" class="input-box" type="text" placeholder="red" />
<input id="green-input" class="input-box" type="text" placeholder="green" />
<input id="blue-input" class="input-box" type="text" placeholder="blue" />
<button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>
<button id="font-up">Font Up</button>
<button id="font-dn">Font Down</button>
</div>
</div>
This lets you control the Font Sizes via CSS. It also ensure that the User cannot decrease or increase the font size too much. You can define your own Class names or how many you want. You also get to define the sizes as you want as well.
See more:
https://api.jquery.com/removeClass/#removeClass-function
So this div doesn't respond when I click on the h3 inside it or on the span
I used flex box in the "question-title" div, I guess that what causes the problem, is there a way I can make this div showing more/less when I click on it, not specifically outside h3 and the span, because it only works when I click in the space between h3 and the span.
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e)=> {
let paragraphElement = e.target.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});
.question {
width: 60%;
margin: 0 auto;
}
.part-one h3 {
color: var(--main-color);
font-size: 30px;
margin: 0 0 20px;
}
.main-question {
margin: 20px auto;
padding: 20px;
text-align: center;
border: 1px solid rgb(207, 207, 207);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.main-question h4 {
margin: 0;
color: #607d8b;
}
.main-question h4::selection {
background-color: transparent;
}
.main-question p {
margin: 34px 0 0;
text-align: justify;
color: var(--main-color2);
display: none;
}
.main-question p.showHide {
display: block;
}
.question-title {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
height: 20%;
width: 100%;
background-color: #EEE;
padding: 20px;
}
.question-title span {
font-size: 20px;
font-weight: bold;
color: #607d8b;
letter-spacing: -3px;
}
.question-title span::selection {
background-color: transparent;
}
<!-- Start questions -->
<div class="container">
<div class="question">
<div class="part-one">
<h3>Some Frequent Questions</h3>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
</div>
</div>
</div>
<!-- End questions -->
Your issue here is this line of code:
let paragraphElement = e.target.parentNode.querySelector("p");
Since you didn't set the indentations on your HTML properly, I didn't notice this issue in the first place.
You need to use this instead:
let paragraphElement = e.target.closest(".main-question").querySelector("p")
The answer of your question in the comment is NO, but when you click h4, you also click div because they are occupying the same area, unless you added stopPropagation to your function. But "e.target" is the item you clicked directly. If it's h4, its parentNode is "question-title" and it has no "p" child.
When you work with JS, always use console.log(). You can see the problem most of the time.
//This part is not necessary because the class "showHide" will be toggled below
document.querySelectorAll(".main-question").forEach(el ...
Also change your CSS for ".question-title" => "justify-content: space-around;" to show the icon
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e) => {
let paragraphElement = e.target.parentNode.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});
I'm trying to make some animations for my application but I can't figure it out. I want the text and description to move depending on how much of the page scrolls. For the first div I managed to do it, but for the others, nothing happens. How could I do that when I scroll more than 40% to move the div according to the scroll?
Here is my code
$(window).on('scroll', function () {
let height = $('body').height();
let scroll = $(document).scrollTop();
if (scroll > height * 0.01) {
$('.div1 .title').css({
left: -350 + Math.min(350, scroll)
});
$('.div1 .description').css({
left: -350 + Math.min(350, scroll)
});
}
if (scroll > height * 0.4) {
$('.div2 .title').css({
right: -350 + Math.min(350, scroll)
});
$('.div2 .description').css({
right: -350 + Math.min(350, scroll)
});
}
});
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.div1 {
}
.div1, .div2, .div3 {
display: flex;
justify-content: center;
margin-top: 500px;
}
.left {
width: 500px;
}
.right {
width: 500px;
margin-left: 50px;
}
.right img, .left img {
width: 100%;
}
.div1 .title {
position: relative;
left: -350px;
}
.div1 .description {
position: relative;
left: -350px;
}
.div2 .title {
position: relative;
right: -350px;
}
.div2 .description {
position: relative;
right: -350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="div1">
<div class="left">
<div class="title">
<h1>Some title</h1>
</div>
<div class="description">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
dolorum
ea pariatur doloribus.
</p>
</div>
</div>
<div class="right">
<img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
</div>
<div class="div2">
<div class="left">
<img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
<div class="right">
<div class="title">
<h1>Some title</h1>
</div>
<div class="description">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
dolorum
ea pariatur doloribus.
</p>
</div>
</div>
</div>
<div class="div3">
<div class="left">
<div class="title">
<h1>Some title</h1>
</div>
<div class="description">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam iste aliquid nihil
mollitia, cum recusandae molestias quod veritatis amet odit officiis quo assumenda ullam fugiat est
dolorum
ea pariatur doloribus.
</p>
</div>
</div>
<div class="right">
<img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
</div>
Try the following function to move the title and desription in each divs depending on the scroll position:
function moveOnViewPort(el, mult) {
let scrollPos = $(document).scrollTop();
let viewPortHeight = $(window).height();
let elementScrollPos = $(el).offset().top;
if((scrollPos + viewPortHeight) > elementScrollPos) {
let moveVal = (scrollPos + viewPortHeight - elementScrollPos) * mult;
if($(el).hasClass('move-left')) {
$(el).find('.move').css({
left: -350 + Math.min(350, moveVal)
});
}
else if($(el).hasClass('move-right')) {
$(el).find('.move').css({
right: -350 + Math.min(350, moveVal)
});
}
}
}
Working demo and implementation details can you find here: https://jsfiddle.net/dat57qse/
I've got a responsive site I'm building Where I have two elements that overlap each other. THe size of the elements will change depending on the browser width as will the overlap and consequently I need to set left-padding on the right element dynamically.
I'm unsure of how to proceed with this. Have set up a Fiddle here.
html:
<div class="container">
<div class="row copy intro">
<section class="red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor illum nobis ullam neque, harum, magni. Reprehenderit veritatis in deleniti incidunt dolore dolores ex id expedita.</p>
<p>Corporis soluta ducimus ut quasi libero nesciunt, eligendi autem, consequatur error sapiente labore, officia tempora in voluptas non deleniti veniam officiis, quis vero consequuntur quia!</p>
</section>
<section class="white">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor illum nobis ullam neque, harum, magni. Reprehenderit veritatis in deleniti incidunt dolore dolores ex id expedita.</p>
<p>Corporis soluta ducimus ut quasi libero nesciunt, eligendi autem, consequatur error sapiente labore, officia tempora in voluptas non deleniti veniam officiis, quis vero consequuntur quia!</p>
</section>
</div>
</div><!--container-->
css:
/* line 3, ../build/sass/_intro.scss */
.intro {
background: #0079c2;
position: relative;
padding: 15px;
padding-bottom: 150px;
}
/* line 9, ../build/sass/_intro.scss */
.intro section {
position: relative;
padding: 100px;
width: 60%;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
border-radius: 500px;
}
/* line 26, ../build/sass/_intro.scss */
.intro section.red {
background: rgba(238, 45, 36, 0.85);
color: #fff;
z-index: 200;
}
/* line 31, ../build/sass/_intro.scss */
.intro section.red h1 {
font-size: 24px;
}
/* line 45, ../build/sass/_intro.scss */
.intro section.white {
background: #fff;
color: #0079c2;
position: absolute;
top: 150px;
right: 15px;
}
js:
// set intro sections width = height
$(document).ready(function() {
var circleWidth= $('.intro section.red').outerWidth();
$('.intro section').css('min-height', circleWidth + 'px');
$('.intro section.white').css('width', circleWidth + 'px');
});
Thank you for your time.
Use % for padding and adjust accordingly. See this revised Fiddle for an example.
The revised Fiddle comments out:
$('.intro section.white').css('width', circleWidth + 'px');
Fixing the width of the white circle means that it is not responsive any more. If you need to do that for some reason, you would have to make adjustments.
Here's a JSFiddle doing what I think you want: http://jsfiddle.net/6yro5vhx/2/
Basically I user offset() & outerWidth() on the two elements to work out the overlap, and then call calculatePadding() function on documentready & resize events.
function calculatePadding() {
var white = $('.intro section.white');
var red = $('.intro section.red');
var extraPadding = 20;
var distanceLeft = white.offset().left;
var redDistanceRight = red.offset().left + red.outerWidth();
var paddingLeft = (redDistanceRight - distanceLeft) + extraPadding;
$('.intro section.white').css('padding-left', paddingLeft + 'px');
}
Update the answer below mine is a far better way to achieve what you're looking for. CSS is a much better responsive approach than excess JQuery.
Working on a parallax effect for a site. I've gotten the parallax effect to function properly using a background image but I've decided to change things up just a bit. Rather than using a bg image for the effect I was looking to apply the effect to an entire div but I can't seem to get this working using the entire div. Looking to apply the effect to everything inside the .section div while keeping the #subpanel / scroll-pane independently scrollable.
html -
<div class="col col-100">
<div class="col col-30">
<div class="section">
<div id="subpanel" class="nav_dialog displayed" style="height: 660px; left: ; display: block;">
<div class="close_link">
Close (x)
</div>
<div class="scroll-pane" style="overflow: hidden; padding: 0px; width: 475px;">
<div class="jspContainer" style="width: 475px; height: 620px;">
<div class="jspPane" style="padding: 0px 65px 0px 20px; top: 0px; width: 396px; font-size: 15px;">
<img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack">
<div class="jspDrag">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
</div>
</div>
</div>
JS -
<script>
$(function() {
$.fn.parallax = function(options){
var $$ = $(this);
offset = $$.offset();
var defaults = {
"start": 0,
"stop": offset.top + $$.height(),
"coeff": 0.95
};
var opts = $.extend(defaults, options);
return this.each(function(){
$(window).bind('scroll', function() {
windowTop = $(window).scrollTop();
if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
newCoord = windowTop * opts.coeff;
//console.log($$)
$$.css({
"position": "0 "+ newCoord + "px"
});
}
});
});
};
$('.section').parallax({ "coeff":-0.65 });
$('.section .scroll-pane').parallax({ "coeff":2.55 });
})
</script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
Hopefully that makes some sense.
Any help would be appreciated.
it seems you changed background-position to position.
Allowed values for position are absolute,fixed,relative,static & inherit
You are probably looking for something like this to move a complete div
$$.css({
"top": newCoord + "px"
});
or
$$.css({
"margin-top": newCoord + "px"
});