I have a django-qcm with sections that change when clicking on anchors and using the scroll snap type property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
html{
scroll-behavior: smooth;
}
body{
background-color: #72a9d6;
color: white;
font-family: "Mont", sans-serif;
overflow: hidden;
}
section{
overflow: hidden;
height: 100vh;
/*overflow-y: scroll;*/
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.container{
padding: 5%;
display: grid;
position: relative;
justify-items: center;
gap: 3px;
scroll-snap-align: center;
height: 100%;
}
.question_title{
height: 50px;
font-size: 25px;
font-weight: 500;
text-align: center;
}
.space_title{
height: 150px;
}
.container_reps{
max-width: 30%;
display: flex;
flex-wrap: wrap;
justify-content: center;
column-count:2;
height: 20%;
}
.rep{
display: flex;
align-items: center;
border:1px solid white;
padding: 0 5px ;
max-width: 15%;
min-width: 250px;
border-radius: 5px;
cursor: pointer;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 10px;
max-height: 40px;
}
.rep:hover{
background-color: rgba(255, 255, 255, 0.3);
}
.dot_rep{
background-color: #63c7f5;
border: 1px solid white;
color: white;
margin-right: 7px;
padding: 5px 10px;
border-radius: 5px;
}
.text_rep{
font-weight: 700;
}
.check{
margin-left: 40%;
}
</style>
<section>
<div id="1" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 1</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="2" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 2</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="3" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 3</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
<div id="4" class="container">
<div class="question_title">
<div class="space_title"></div>
<p>Question 4</p>
</div>
<div class="container_reps">
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep 1</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep"> rep 2</p>
</div>
<div class="rep">
<span class="dot_rep">1</span><p class="text_rep">rep3</p>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function scrollToAnchor(ind){
const aTag = $("#"+ind);
$('body,section').animate({scrollTop: aTag.offset().top},'slow');
}
//scrollToAnchor('2');
var container_page = document.getElementsByClassName('container')
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps,function(rep){
$(rep).click(function(){
if(! rep.querySelector('.check')){
[].forEach.call(reps,function(repToDel){
if(repToDel.querySelector('.check')){
repToDel.querySelector('.check').remove()
$(repToDel).css("border", "1px solid white")
}
})
$(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
$(rep).css("border", "2.5px solid white");
let x = parseInt($(rep).closest('.container').attr('id'))
//var y = x.toString()
console.log(x)
scrollToAnchor(x+1)
}
})
})
</script>
</body>
</html>
The first anchor works fine, but after the second nothing happens. The function scrollToAnchor(3) works fine when called in the console.
I tried to change different dom parameters to reach the container id and the int and str but nothing changes except errors.
The problem seems to be that you're getting the .container id, instead you might use the number of the clicked .rep.
Try something like this:
let x = parseInt($(rep).index()) + 1
You need to clean up your JS, in the link below you can find a solution with js and css with the same need, instagram stroies clone component. check this tutorial entire solution, well coded.
I fixed it with this code:
var container_page = document.getElementsByClassName('container')
const reps = document.getElementsByClassName('rep');
[].forEach.call(reps, function(rep) {
$(rep).click(function() {
if (!rep.querySelector('.check')) {
[].forEach.call(reps, function(repToDel) {
if (repToDel.querySelector('.check')) {
repToDel.querySelector('.check').remove()
$(repToDel).css("border", "1px solid white")
}
})
$(rep).last().append('<div class="check"><object data="{% static "img/Coin-Magpharm-V3.png" %}" width="20" > </object></div>');
$(rep).css("border", "2.5px solid white");
var x = parseInt($(rep).closest('.container').attr('id'));
document.getElementById((++x).toString()).scrollIntoView({
behavior: 'smooth'
});
Related
as you can see I have one main image and another image below the main one but when I click any of them my main image doesn't change to any of them what can be the issue, please identify. if you can edit and send me an amende code will be helpful pls.I don't see any sort of error maybe you can find out , to be honest, i am not techy doing this to learn something new
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group{
display: flex;
justify-content: space-between;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up, .down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover, .down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"]{
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked + label{
background-color: orangered;
color: white;
}
input[type="radio"]:checked + label:before{
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
</script>
<script>
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
basically your script works, you just need to move your script (the one with the images onclick functions) to the bottom of your file, that way the html dom elements load on the page before the script does allowing it to attach the onclick event functions to the dom elements.
You're trying to retrieve the img element with id "MainImg" which doesn't yet exist since your javascript code loads before your html code, so you get something like MainImg[0] is undefined... Try to put your last script (preferably all scripts) just before the closing body tag
i have created this slider separate from your code just to show you an easy way to make one
i have used tailwind here
here's an example below hope it will help
var main = document.querySelector(".main"),
big = main.querySelector(".big"),
smalls = main.querySelectorAll(".each")
big.setAttribute("src",smalls[0].getAttribute("src"))
smalls.forEach(each=>{
each.onclick = function(){
smalls.forEach(ss=>ss.classList.remove("active"))
each.classList.add("active")
big.setAttribute("src",each.getAttribute("src"))
}
})
.active{opacity:1 !important;border:3px solid gray;}
.each{opacity: 0.5;}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="main">
<img class="big w-50">
<div class="smalls flex">
<img class="each cursor-pointer w-16 active" src="https://images.unsplash.com/photo-1557673272-b16d3b6c5a58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-6ef51494f677?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1542361345-89e58247f2d5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
<img class="each cursor-pointer w-16" src="https://images.unsplash.com/photo-1439668462223-e88f0ad95063?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80">
</div>
</div>
I write a webapp using a swipe.js function to swap between the two pages. Problem is that it that i wont swipe trough the first page, if i remove the html code to the first page it will swipe back and forth without problems between the two pages. I cant load the second page when the first page is on. Anyone who knows what the problem could be?
code:
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles1</h1>
</div>
<div data-role="content">
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
</head>
<body>
<div class="colunm">
<h>
<p>
<p>
<div class="pie">
<span class="overlay"></span>
</div>
<style>
.pie {
margin: auto;
position: relative;
width: 200px;
height: 100px;
border-radius: 200px 200px 0 0;
overflow: hidden;
}
.pie::after {
transform: rotate({{temp_x}}deg); /* set rotation degree */
background: linear-gradient(to right, rgba(51,102,255,1) 50%, rgba(255,0,0,1) 100%);
transform-origin: center bottom;
}
.pie::before {
border: 2px solid black;
}
.pie .overlay{
top: 8px; /* match border width */
left: 8px; /* match border width */
width: calc(100% - 16px); /* match border width times 2 */
height: calc(200% - 10px); /* match border width times 2 */
border-radius: 100%;
background: #062F43;
z-index: 1; /* move it on top of the pseudo elements */
}
.pie *,
.pie::before,
.pie::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: inherit;
box-sizing: border-box;
}
</style>
</body>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<p id="temp_f" style="color: white;"> 0%</p>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2> </center>
<p> <center style="color: white;">14:42</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2> </center>
<p id="temp_c"> <center style="color: white;">0 C°</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2> </center>
<p id="temp_x"> <center style="color: white;">0</p> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2> </center>
<head>
<style="color=white">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head><body onload="startTime()">
<div> <center id="txt"></div> </center>
</div>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" title="default" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
<style>
.button {
background-color: #07969E;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {background-color: #008a93}
.button:active {
background-color: #008a93;
box-shadow: #666;
transform: translateY(4px);
</style>
</head>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<button class="button">Button</button>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2>
<center> <button class="button">Button</button> </center>
<style="color=white">
<div> <center id="txt"></div>
</div>
</div>
<div>
<div class="row">
</div>
<center div class="column1" align="cente">
<h2> <center style="color: #07969E;">Live graph</h2>
<h3> <center style="color: white;"> Click Me </h3>
</div>
<div id="sidebar">
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
</div>
</body>
<script>
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
</script>
</html>
You got your markup mixed up quite a tad there. There's multiple <head> and <body> tags while the standard only allows one of each.
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
You will need to reduce your code to a valid HTML document to make this work. It looks like you copied the source of multiple individual files into one, you have to combine the different elements, though.
Start off with the basic HTML structure
Copy all elements from the individual headparts into the <head>
Copy all <style> tags to the <head>
Copy all markup of each individual page into the <body> element
Copy all <script> tags to the <body>
While you do this, make sure to get rid of redundant code. The style tags look fairly close to each other, for example.
I have divs on my page. There is div .rightColumnBar and .divAttributes
HTML
<div class="mainContent">
<div class="pageContent">
<form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" name="createLead" method="post">
<div class="divEditLead sldf_columnsContainer">
<div id="hot_div">
<div id="errorBlock">
<div class="leftColumnBr">
<div class="centerColumnBr">
<div class="rightColumnBr">
</div>
<div class="createLeadButtons">
<input id="saveLeadBtn" class="bigButton redButton" name="save" value="Save" type="submit">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
<div id="specHeightIncreaser"></div>
</div>
CSS
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
How can I move (only for front, not insert as html element) rightColumnBr to divAttributes and set for divAttributes float property in left?
Thanks.
If you are aiming script, than you can do CSS changes and DOM manipulation this way:
$('.divAttributes').css({
'border-color': 'red'
}).after( $('.rightColumnBr') );
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 100px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
<div class="rightColumnBr">
RCB
</div>
<p>
Text
</p>
<div class="divAttributes frmDiv">
ATTR
</div>
</div>
Also on JSFiddle.
Is this what you want?
<div class="pageContent">
<form id="createLead" class="frmDiv clear">
<div class="divEditLead sldf_columnsContainer">
</div>
<div class="leftColumnBr">
</div>
<div class="centerColumnBr">
</div>
<div class="createLeadButtons">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
</div>
<div class="rightColumnBr">
</div>
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 0px;
width: 200px;
float:left;
}
.rightColumnBr {
border: 1px solid #d1ddd4;
float: left;
margin-top: 0px;
width:200px;
height:200px;
}
Also please go through jsfiddle link: https://jsfiddle.net/mayurdandekar/0soLrqv0/
I know there is a library called match-height.js that already does this for you but I'm trying to do it from scratch. I have row with 2 columns, the first one has a centered (horizontally and vertically) black square. The second column has a heading and a paragraph. I just want to match the heights of the columns with the class "about-wrapper".
HTML:
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
jQuery:
$(document).ready(function(){
$("#about-logo-wrapper").height = $("#about-text-wrapper").height;
});
You're using height() wrong. It's a function, not a property, and it takes a parameter when you want to use it to set height...
$(document).ready(function(){
$("#about-logo-wrapper").height($("#about-text-wrapper").height());
});
See the documentation for more info...
http://api.jquery.com/height/
I think you need first to check which height is greater: either left cell or right one:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ?
$("#about-text-wrapper").height() :
$("#about-logo-wrapper").height();
then set this height to about-wrapper
$(".about-wrapper").height(h);
Look at snippet in full page mode:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ? $("#about-text-wrapper").height() : $("#about-logo-wrapper").height();
$(".about-wrapper").height(h);
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
#about-text-wrapper {
border: 3px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
I have four boxes that are displayed in a single row (in a larger viewport). The boxes then fadeIn will going up the page. My issue is I cannot figure out how to get these boxes to go up the page without affecting the parent div and the sections of code below it (#contact-social). I want the other to divs to stay in their finished place that they are supposed to be in (after the boxes have went up the page).
How can I only change the positioning of the boxes as they go up the page without affecting anything else?
The position I have in my
function contactBox() {
$('.contact-connect-box').delay(600).animate({
'opacity' : 1,
'margin' : "0px 20px"
}, 800);
};
contactBox();
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
}
#contact-social {
width: 100%;
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>
To prevent other elements move - making a margin top smaller, you should also increase the bottom margin respectively...
Or, instead of animating the margin, add a CSS class that will transition your styles :
function contactBox() {
$('.contact-connect-box').addClass("fadeShow");
};
setTimeout(contactBox, 600);
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
transition:2s; -webkit-transition:2s; /* ADD THIS */
}
.contact-connect-box.fadeShow{ /* AND ALL OF THIS */
opacity:1;
transform:translateY(-30px); -webkit-transform:translateY(-30px);
}
#contact-social {
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>