I have an issue with fancybox3. If you have a bigger content width, e.g. 2500px, the display of the box proceeds not as normal. To see this fancybox you will have to scroll down.
Here is my code:
<div style="height: 800px;">
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancyBox width 500px;
</a>
<br>
<a data-fancybox data-src="#hidden-content2" href="javascript:;">
Trigger the fancyBox width 2500px;
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<div style="width: 500px;">
... some stuff ...
</div>
</div>
<div style="display: none;" id="hidden-content2">
<h2>Hello</h2>
<div style="width: 2500px;">
... some more stuff ...
</div>
</div>
I've a codepen for this issue. Any ideas?
https://codepen.io/anon/pen/EQmgjK
fancyBox uses inline-block trick for vertical and horizontal centering. This is the best option for centering in the unknown, but unfortunately there are some drawbacks. By forcing extra wide content, you are breaking it.
You have several options, for example:
Make content scrollable:
#hidden-content2 {
max-width: calc(100% - 80px);
overflow: auto;
}
https://codepen.io/anon/pen/vdmyRo
Hide pseudo element
.fancybox-slide.wide:before {
display: none;
}
(You can set custom class name by setting data-slide-class="wide" attribute)
https://codepen.io/anon/pen/vdmydo?editors=1100
Related
I have the below code:
https://codepen.io/nht910/pen/qBBOwyN
Snippet:
<div class="post-body d-flex">
<!-- content -->
<div class="post-content">
<p>...</p>
</div>
<!-- button toggle -->
<button type="button" class="btn sticky1 border-white outline-none" style="box-shadow:none;" id="toc-button">
<img src="https://i.imgur.com/NuY1GRF.png" width="25px" height="100px">
</button>
<!-- table of contents -->
<div class="post-toc">
<div class="d-block sticky-top mb-5">
<div>
<button type="button" class=" sticky-top btn outline-none" style="box-shadow:none" id="toc-button-2">
<img src="https://i.imgur.com/s1ej0s3.png" height="20px" >
</button>
</div>
<div>
<nav class="" id="toc"></nav>
</div>
</div>
</div>
</div>
My problem is that I can't make toggle button become sticky with out changing the layout. I tried to change its position to sticky but the layout will change a little bit.
So I think best way is use a Jquery script to make it become sticky. In codepen, if you click on TOC button, it will expand a table of contents, and this table of contents has perfect sticky animation that I want.
Can you please help me to make a script to make my TOC button become sticky in it's father div .post-body?
Thank you guys so much.
Make it sticky, then make absolute positioned wrapper with desired placement and height 100%: https://codepen.io/f278f1b2/pen/vYYNwpz?editors=1100#anon-signup
#toc-button {
width: fit-content;
height: 110px;
position: sticky;
/*margin-top: 30px;*/
top: 0;
margin-bottom: 130px;
}
.toc-wrapper {
right: 0;
top: 15px;
position: absolute;
height: 100%;
}
I have the following code to move a toolbar that is below a header to stick to the top of the viewport when scrolling down. The problem is when the height of the content is slightly higher than the viewport. When you attempt to scroll to the bottom, it bounces back up to just above the end of the content with a weird visual glitch. It probably has to do with the fact that when the 'sticky' class is added, it increases the height of the page, but I'm not sure how to remedy it.
Javascript/JQuery:
var enableSticky = () => {
let headerHeight = $('.toolbar').offset().top;
$(window).scroll(() => {
if ($(window).scrollTop() > headerHeight) {
$('.toolbar').addClass('sticky');
} else {
$('.toolbar').removeClass('sticky');
}
});
};
CSS:
.toolbar {
width: 100%;
height: 84px;
position: relative;
}
.toolbar.sticky {
background-color: rgba(255,255,255,0.9);;
position: fixed;
top: 0;
z-index: 5;
margin-bottom: -84px;
}
HTML:
<div id="bcmMain" style="display: block;">
<h1 id="event-title"><span class="view-table-value" data-field-name="mopId">927</span> - <span class="view-table-value" data-field-name="subject">Sample Subject</span></h1>
<div class="toolbar">
<div class="status-toolbar-group toolbar-group">
<a class="button" id="level-button">Level <span class="view-table-value" data-field-name="level">3</span></a>
</div>
<div class="toolbar-group">
<a class="button" id="status-button">Status: <span class="view-table-value" data-field-name="status">complete</span></a>
<a class="button" id="pending-button">Mark Pending</a>
</div>
<div class="edit-toolbar-group toolbar-group">
<a class="button" id="submit-changes-button">Submit Changes</a>
<a class="button" id="cancel-changes-button">Cancel Changes</a>
</div>
<div class="toolbar-group">
<a class="button" id="edit-button">Edit</a>
<a class="button" id="clone-button">Clone</a>
</div>
</div>
<div id="edit-details">
<!-- CONTENT HERE -->
</div>
</div>
I've tried doing if ($(window).scrollTop() > headerHeight + 100) to see if allowing further scrolling before the it adds the sticky class, but it just changes the height at which the window is at when the glitch occurs.
What can I do to improve the code to get rid of this glitch?
EDIT: Added HTML. I tried to include just the relevant HTML, but let me know if anything else is needed. Thanks!
NOTE 1: This is embedded in a Confluence page. Confluence page header is hidden, but not the Confluence website header or the sidebar. See the below images to see what I'm talking about. Both images are at the top of the viewport at different scroll points.
Image of Not Sticky
Image of Sticky
NOTE 2: Not sure if this is important... data is pulled from a database via API to fill the fields on this page.
Not entirely sure I get what you mean, but I think you're referring to the 'bounce' of the content caused by removing the toolbar from the flow of the page.
The content always bounces the distance of the height of the toolbar regardless of the height of the content in relation to the viewport, but maybe it's more apparent then because you see the bottom of the content bounce as well as the top.
Anyway, if that is what you're referring to, I think this is your fix:
.toolbar.sticky {
position: fixed;
top: 0;
background-color: rgba(255,255,255,0.9);
}
.toolbar.sticky + #edit-details {padding-top:84px;}
I removed z-index:5; and margin-bottom:-84px; because they weren't doing anything.
Instead I added the .toolbar.sticky + #edit-details {padding-top:84px;} rule.
What this does is, it adds padding-top to the #edit-details that directly follows the .toolbar.sticky (that's what the + is for, read about it here). In other words; the padding-top of the content is dependent on the toolbar having the sticky class.
So when the .sticky class is added to the toolbar - and thereby 84px is removed from the flow of the page (which caused the 'bounce') - that same 84px is added again just before the content in the form of padding, causing the content to stay at exactly the same place.
When the .sticky class is removed again, the padding is removed again too.
- The padding-top should have the same value as the toolbar height.
I also removed position:relative; from .toolbar, because again, it wasn't doing anything.
You can test it below in the code snippet, though it may be easier to test in the jsfiddle, because there you can adjust the height of the viewport.
$(document).ready(function() {
let headerHeight = $('.toolbar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > headerHeight) {
$('.toolbar').addClass('sticky');
} else {
$('.toolbar').removeClass('sticky');
}
});
});
.toolbar {
width: 100%;
height: 25px;
border-bottom: 2px solid blue;
}
.toolbar.sticky {
position: fixed;
top: 0;
background-color: rgba(255,255,255,0.9);
}
.toolbar.sticky + #edit-details {padding-top:25px;}
/*ONLY FOR VISUAL STYLING*/
.toolbar-group {margin-right:5px; float:left;}
.toolbar-group a {float:left; padding:1px;}
.toolbar-group .button {background:lightblue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bcmMain" style="display: block;">
<h1 id="event-title"><span class="view-table-value" data-field-name="mopId">927</span> - <span class="view-table-value" data-field-name="subject">Sample Subject</span></h1>
<div class="toolbar">
<div class="status-toolbar-group toolbar-group">
<a class="button" id="level-button">Level <span class="view-table-value" data-field-name="level">3</span></a>
</div>
<div class="toolbar-group">
<a class="button" id="status-button">Status: <span class="view-table-value" data-field-name="status">complete</span>|</a>
<a class="button" id="pending-button">Mark Pending</a>
</div>
<div class="edit-toolbar-group toolbar-group">
<a class="button" id="submit-changes-button">Submit|</a>
<a class="button" id="cancel-changes-button">Cancel</a>
</div>
<div class="toolbar-group">
<a class="button" id="edit-button">Edit|</a>
<a class="button" id="clone-button">Clone</a>
</div>
</div>
<div id="edit-details">
content - first<br>content - second<br>content - third<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content - forelast<br>content - last<br>
</div>
</div>
jsfiddle: https://jsfiddle.net/nd9etLjy/1/
I added some CSS to style the toolbar, this is not important for functionality.
I also changed your arrow-functions to regular ones, because I couldn't get the arrow-functions to work, but that's most likely due to my inexperience with them.
Please have a look at this Image.
Here I was use the Bootstrap for aligning the divs. And created only one div. The Contents are added in this div dynamically from the admin side. then it will loop the div. That's Working fine.
But here you can see only 6 Contents are available. So 2 Divs are aligned in the left. I need these div should align in the middle of the Page. If the Contents are 7 or 5 the Second row Contents should be in the Middle. How to align these Divs Middle. Please Help me to Solve this Problem.
Here Is My Code..
<div class="col-sm-6 col-md-3">
<div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms">
<img src="{{ 'assets/img/icon-services.png' |theme }} ">
<h4>{{ service['name'] }}</h4>
<p>{{ str_limit(service['description'], 100) }}</p>
Read More
</div>
</div>
Thank you in Advance.
Add display: inline to child div and text-align: center to the parent div. Don't use col-md of bootstrap because it have float: left propertive
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 24%;
border: solid 1px #123;
height: 50px;
margin: 0 auto !important;
}
<div class="parent" id="parent">
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
You can use bootstrap to set an offset for each div dynamically depending on your div's desired position or set the margin of the divs to auto. See this post for a detailed explanation.
Is it possible to modify the gutter and add a custom div inside the gutter lines div?
Example :
<div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px; height: 730px; width: 33px;">
<div class="ace_gutter-cell " style="height: 14px;">
<div class="customDIV"> </div>
</div>
</div>
no, normally you html inside gutter div will be overwritten by gutter.
am trying to make a slider, and make the text and image slide when i click on an arrow(img)
<div class="col span_12_of_12 bannerHomeHeight">
<div class="homeImage1" id="homeBannerContainer1" style="display: block">
<div class="homeImage">
<h4>HIV</h4>
<img src="/images/banner-hiv-icons.png" alt=""/>
</div>
<div class="homeBanner">
<h3>HIV support materials for healthcare professionals, paitent groups and paitents</h3>
<div class="homeArrow">
<img src="/images/arrow.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="homeImage1" id="homeBannerContainer2" style="display: none">
<div class="homeImage">
<h4>HCV</h4>
<img src="/images/banner-hep-icons.png" alt=""/>
</div>
<div class="homeBanner">
<h3>HCV support materials for healthcare professionals, paitent groups and paitents</h3>
<div class="homeArrow">
<img src="/images/arrow.png" alt=""/>
</div>
</div>
</div>
My J query is:
$(function () {
$(".homeArrow").on('click', function () {
$('.homeImage1').animate({
width: 'toggle'
});
});
});
homeImage1 is the container which i want sliding but the 2nd one goes to the bottom rather than coming in from the side.
live: thenandnow.anytimeafter9.co.uk
The problem is your bannerHomeHeight for the first slider frame is still there taking up space when you toggle its child homeImage1's display.
Try toggle bannerHomeHeight instead:
$(function () {
$(".homeArrow").on('click', function () {
$(".bannerHomeHeight").animate({
width: 'toggle'
});
});
});
[EDIT]
The problem with this is that when both elements are side by side during animation they take up > 100% and one is forced underneath. To solve this we can give .bannerHomeHeight 2 style changes (max height and width) so it is as follows:
.bannerHomeHeight {
margin-top: -16px;
min-height: 170px;
background-color: #54565b;
max-height: 170px;
width: 98%;
}
This way the height isn't seen to change to fit the content as it animates, and being 98% width is just enough to prevent the combination of the 2 becoming over 100% (I don't know whats causing this exactly, I guess something to do with padding/margins ?)