I've got a highslide gallery in my page http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html
However, the page also contains a bootstrap affix at its top, which appears when you scroll down the page a bit.
If you open the page and wait (without performing scrolling) until the gallery fully loads, the gallery is placed just the way it should.
However, if after that you scroll down so that the affix gets shown, and click to view the next image, the whole gallery moves up so that it actually overlays the previous layout block containing the article text.
It seems like upon the bootstrap affix appearance some kind of a gallery 'refresh' should be fired so that highslide recalculates the gallery position. How do I achieve that?
Thanks.
When affix kicks in, the affixed div is removed from the normal flow of the page which causes the parent div div to collapse.
Fix:
Wrap the affixed div in a new div. Give this dix two different height, or hide it, based on the break point of the affixed div (the menu) - which seems to be 1199px and 979px.
HTML:
<div class="affix-wrapper">
<div data-spy="affix" data-offset-top="250" class="your classes here">
<!-- content of the div -->
</div>
</div>
CSS:
.affix-wrapper {
height: 70px;
}
#media (max-width: 1199px){
.affix-wrapper {
height: 139px;
}
}
#media (max-width: 979px){
.affix-wrapper {
display: none;
}
}
Related
A seemingly simple issue to which I can find no useful answer.
I have a web page with a long piece of text (Terms and Conditions). To make things easier for users I have broken the Ts & Cs into sections, each with a heading2 element and an opeinging paragraph into which I have inserted anchor jump to links. Above this, is a sliding sidenav element which is only visible below certain screen sizes and which is toggled using a javascript function:
<div id="mySidenav" class="sidenav">
home
shop
notes
info
</div>
<!-- CONTENT -->
<div class="content" id="elemToSlide">
<div class="generallayout">
<h1>Terms and Conditions</h1>
<p>
Welcome to Dermot's Wine Shop. Our Terms and Conditions are set out
below, and cover Purchases,
Deliveries, Returns.... etc
The CSS for the sidenav element is here:
/* SLIDING SIDENAV */
/* This element is only visible when the screen size is less than 460px */
/* It slides in from the left, displacing the main page to the right as it slides */
/* Taken and adapted from W3Schools https://www.w3schools.com/howto/howto_js_sidenav.asp*/
.sidenav {
height: 14em;
width: 0;
position: fixed;
z-index: 1;
top: 25vh;
left: 0;
overflow-x: hidden;
transition: 0.9s;
}
Along the page I have anchors to which the links in the opening paragraph should direct:
<h2 id="purchase">Purchases</h2>
<br />...lots of boring text
<h2 id="delivery">Deliveries</h2>
<br />...lots of boring text
However, if I click on any of these links the page scrolls to a position below the anchor text - this is where it ends up if I click Deliveries in the opening para (...href="#delivery">Deliveries):
Whereas it should be positioned at ...h2 id="delivery">Deliveries:
Now, the sticky header takes up 25vh of screen, but I cannot see why that should matter as I assume the page should move to the position of the linked text?
Perhaps my assumption is wrong, in which case how does one offset the page scroll to allow for this?
All the best,
Dermot
Thanks to Chase and Monica J, who both identified the sticky header as being the issue.
Following some of the links I ended up seeing this question on SO offsetting an html anchor to adjust for fixed header and I took the idea suggested there by Jan and JohanChopin and added an anchor class to my CSS:
.anchor {
display: block;
position: relative;
top: -30vh;
visibility: hidden;
}
and then added anchors in the HTML as shown here:
<h2>refunds</h2>
<a class="anchor" id="refund"></a>
<br />
This anchor is hidden on-screen but is where the screen scrolls to when an anchor link:
Refunds
is clicked.
These modifications worked perfectly.
Thanks to all concerned,
dermot
Without being able to see the entire screen, it sounds like your header could be the issue. The anchors are working but with a sticky header, the content will always be behind it. Padding may correct this. The padding is added to the content to account for the height of the sticky header or as Chase mentioned, using scroll padding.
I am not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (https://trello.com). Where you can add cards, delete cards, etc.
I have this background problem where the background does not cover the whole page when I scrolled horizontally,
Here is the problem I have:
As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.
Here, the background is white when I scrolled horizontally. It does not cover the whole page.
Here is my Html code:
<div class="container" id="amethystBackground2">
<!-- contents here -->
</div>
Here is my Css code:
#amethystBackground2
{
position: relative;
background-color:#9B59B6;
//This is needed to remove white space on top of page
margin: 30px 0 0 0;
//This is needed to for the background cover the whole page when scrolled verticallly
//(when you have too much cards, you need to scroll down)
min-height: 100vh;
min-width: 100vw;
//This is needed give space on top of page
margin: 50px 0 0 0;
}
I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.
I also tried width:100% and 'height:100%', But it does not work.
Please help me, Thank you in advance.
The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.
First solution
Set your background-color to your body instead of your container div.
Just move background-color:#9B59B6 to
body {
background-color:#9B59B6;
}
Second solution
The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.
<div class="container-fluid" id="amethystBackground2">
<!-- contents here -->
</div>
More about container-fluid here.
You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:
<div id="amethystBackground2">
<div class="container">
</div>
</div>
Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.
I have a navigation bar which does not scroll after display in responsive mode.
I will provide you with a link to my website: WebSite Link with navigation bar example
Just resize the window to a maximum of 500px and click the navigation to open menu.
Click the submenu's and you will see that it will not display all of the navigation content and also displaying over the website's content.
I want to make it show all its height and push down content also.
Well, the submenus are too long to be displayed, so the people who created the theme/template made these dropdown containers 200px high and enabled scrolling in them (you CAN scroll down in them). This is written in the following CSS rule:
.menu > ul > li > ul {
position: relative;
overflow: scroll;
height: 200px !important;
}
You can take out the last part, which will show the fill length. However, this will go beyond the bottom of the screen and NOT scroll, so you'll be better off with the given situation. You can also change the pixel value in height: 200px !important; - this will make the submenus a bit higher, but that doesn't make it much better.
I would leave it as it is and maybe add an icon that makes it more obvious that the content of the dropdowns can be scrolled.
I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE