I would like to find a way to left align <p> with centered <img> in the top.
As images are centered and my page contains different images with different widths, it seems to be a bit challenging.
Here is my html structure:
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 my-auto">
<div class="d-flex flex-row justify-content-center">
<img class="img-fluid d-flex flex-wrap align-items-center" id="image-id">
</div>
</div>
<div class="col-md-8">
SOME CONTENT
</div>
</div>
<div class="collapse collapse-information">
<div class="row row-collapse m-0">
<!--What I want to be left aligned with img tag-->
</div>
</div>
</div>
</div>
A way to do it would be to get the distance between image's div and border of centered image and to report this measure as a left-margin on the element I want to be aligned.
To solve it, I tried to use margin measurments based on window width but it as not working.
While working to have a clean question, I went through https://developer.mozilla.org/en/docs/Web/API/HTMLElement/offsetLeft.
The interresting part is that, javascript allows a dynamic measurement I can also dynamically attribute to other elements.
// get left offset
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
// assing as margin to the following element
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
Last interesting point, this code should wait until the end of page loading (otherwise offet will be equal to 0), so I called it in a structure like:
window.addEventListener("load", function (event) {
setTimeout(() => {
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
}, 0);
});
Related
I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element.
I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.
My code when the image is there
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
<img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" /> <!--This Image
element is comming dynamically-->
</div>
</div>
</div>
My code when I dont have image
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
</div>
</div>
Have you tried with min-height ?
For example:
#myhorizontalbanner {
min-height: 150px;
}
Hi i am trying to make a div remain fixed after some scroll in parent div?
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="fw ofndr-box">
<div class="ofndr-box-half add-here">
Header 1
</div>
<div class="ofndr-box-half2 add-here">
+New
</div>
<div class="fw ofndr-box-in">
</div>
</div>
</div>
here is my working fiddle i want to fix header and +new button after scroll of blue colored div.
https://jsfiddle.net/pavansn/tvg3d709/1/
As your scroll is on ofndr-box instead of window so in Js you can try
var scroll = $('.ofndr-box').scrollTop();
and change :
$(".add-here").addClass(".fixed"); to $(".add-here").addClass("fixed");
I have the following HTML:
<div class="container-fluid">
<div class="row wrapper">
<div class="col-8 left-side">
#if(count($dreams) > 0)
#foreach($dreams as $dream)
<p class="dream-body">{{$dream->dream}}</p>
#endforeach
#endif
</div>
<div class="col-4 right-side">
<div class="d-flex justify-content-between">
<span></span>
?
+
</div>
<p class="blue-text float-right position-absolute rotate position-vertical-text">asd</p>
<p class="position-absolute position-percentage blue-text">23%</p>
</div>
</div>
</div>
The site stand from to sides, left and right. The right side is static, not moving at all. But in the left side, I'm inserting a lot of text. The left side should move up by itself, without the user scrolling, so the user van read the texts there.
I have the following javascript to achieve this:
function startScrollDown() {
let leftSide = $('.left-side');
leftSide.stop().animate({
scrollTop: leftSide[0].scrollHeight
}, 100000);
}
The problem with this, is that it start slow, but after the scrollTop and scrollHeight values change, and according to scroll distance, the scrolling becomes faster and faster, after a point it's just super fast.
How should I modify this, to achieve a same speed scrolling?
Add linear to the arguments for a linear animation.
function startScrollDown() {
let leftSide = $('.left-side');
leftSide.stop().animate({
scrollTop: leftSide[0].scrollHeight
}, 100000, 'linear');
}
I have a bootstrap row, that contains a table__tabs and a table__info, and looks like this:
<div class="row">
<div class="table__tabs col-md-2">...</div>
<div class="table__info col-md-9 col-md-offset-1">...</div>
</div>
What I wanted to do is to pin it while I scroll for the duration that equal .table__info height, which is dynamic.
How am I able to 'unpin' the div when the bottom of the screen touches the end of the .table__info?
Hi i would like to change the value of a div width, based on the outside div width
I am new in jquery and javascript and tried this code:
if ($('col-md-4 col-sm-6').width() <= 320 ){
$('.card-info').width(120px)
};
but it didn't work...
the html is:
<div class="col-md-4 col-sm-6">
<div class="card-info">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card-info">
</div>
</div>
(...)
Could some one help me to find out how to do that, change div "card-info" to 120px width if the div "col-md-4 col-sm6" is 320px or less.
thanks a lot.
You're not selecting the col-md-4 and col-sm-6 class in jQuery. You missed the dot(.) before $('col-md-4 col-sm-6') col-md-4 here and then a comma(,) and the another dot before col-sm-6.
The solution would be
if ($('.col-md-4, .col-sm-6').width() <= 320 ) {
$('.card-info').width(120);
}
or
if ($('.col-md-4, .col-sm-6').width() <= 320 ) {
$('.card-info').css('width', '120px');
}