Bootstrap Collapse over an element - javascript

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.

You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Related

"Priority Nav" breaks when div is floated

I'm using the "Priority Navigation" design pattern. For those who aren't quite sure what this is, basically when the viewport width is reduced and there isn't enough space for all the list-items to fix horizontally, they're moved into another nested list so they can still be accessed. This is within a "more" link at the end of the list.
At a basic level, this works fine in my example (below):
http://codepen.io/moy/pen/RrRJBe
The problems I'm having are:
1) Because I have another item alongside the navigation, which is floated (and of unknown width), I needed to set overflow:hidden; on the nav. This means when the width of the container changes, the nav stays alongside the other content rather than dropping onto the next line. It's fixes that ...the problem is it also means the dropdown on the end isn't visible as it's displayed below the navigation and overflow: hidden; is set.
Any alternative (CSS) fixes for this?
2) Another issue is the nav links need to be positioned to the right. No problem, just float the div right, yeah? Unfortunately it doesn't like this and the page almost crashes - must be something to do with the script trying to calculate the widths? As soon as the nav or it's parent is floated, it breaks!
The list-items are floated left so they display horizontally. Instead I tried using display: inline-block and text-align: right;. This positions the text correctly but when there's not enough horizontal space the items either wrap or all collapse into the "more" link rather than one-by-one.
-
Browser requirements: It's worth noting that my browser support is IE8+, so flexbox is unfortunately out the window. Even if it worked, it would mean that I'd have to find a fix for IE8/9.
Is anyone able to help with this, or maybe there's a plug-in I should take a look at. This script works great when the nav is isolated but as soon as another item is in it's path it becomes a bit tricky. On a previous attempt I got the width of the item which was in the way and subtracted it for the available space. But that isn't that flexible/scalable - but that again, maybe there isn't another way?
Thanks, hope someone can help!
Part 1
You can use clearfix instead of overflow: hidden.
Add the following to the parent element containing nav:
.wrap:before, .wrap:after {
content: '';
display: table;
clear: both;
}
But if you need to support IE8, you can just add element like below to the bottom of the parent element containing nav
html
<div class="clear"></div>
.clear {
clear: both;
}

How to use angularjs $anchorScroll on div only if div is hidden?

I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.
If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.

Footer will not position itself at the bottom of page

I have this footer that will not stick to the bottom of the page.
I think the issue is with my HTML and body not spanning the entire site but I just cannot find the exact place to correct this. I know its a big no-no to link to my page but I simply don't know what code to post here.
I cannot set the content to static instead of absolute because then my menu items will start pushing the content divs around when they open.
To fixed position into bottom you can try this code
Html:
<div class="tofix">
<p>Fixed this div into bottom</p>
</div>
Css:
.tofix{
width:300px;
position:fixed;
bottom:0;
}
The problem occurs because of your #content. You just try to change its position as following:
#content{
position : static;
}
Or you just simply remove it because the position is set as static by default.
Remove the position:absolute from your #content.
Also It worked when I first opened the link, please don't change the live code while asking the question.

Draggable divs from accordion

I have created a pop out sideBar. In that sideBar I have a accordion which contains divs. Those divs are draggable. The user can drag those divs and position them main page.
The problem that I am experiencing is that when the divs are dragged they are not visible outside the accordion. This can been seen in This video.
I can see that it is to do with the overflow being set to hidden however when I remove this the accordion content is shown when it should be hidden.
overflow: hidden;
JSFiddle to further show my problem.
How could I possibly fix this / what are possible ways to get around it.
Try adding this to your css
.accordion-heading + div.accordion-body {
position: static;
}
Is this what you are looking for? Updated fiddle http://jsfiddle.net/gNAFY/3/
If this solved your problem, it seems that inside bootstrap.css file, at line 5245, "position: relative" rule makes your divs not appearing outside the accordion. So you need to "reset" position to static.
For "el + el" css selector to work in IE8 and earlier, don't forget the <!DOCTYPE>.

Relocating a div

I am trying to relocate a div - the expandable panel with the header 'Why Bother', so it appears where you see it now in the display (at the bottom). But in the HTML, I want it to appear at the top of the 8 panels.
(These panels are located all down the RH side of the content area. And I am doing this to retain the current sites SEO, which is where the guy who I am building this for makes 99% of his money).
http://dev.assessmentday.co.uk/index.htm
I have tried using bottom:0; but this will not work with the expandable panels. Is there a way to do this using CSS or JS?
If you you want it to appear at the top for SEO reasons, then you are going to have to move it to the top in your HTML code. Moving it after the DOM loads (with either JS or CSS) will have no effect on it's SEO, as the SEO spiders will read the DOM the way it appears in the original HTML.
Once you have moved it to the top, you can then move it to the bottom using javascript, so that it appears to be at the bottom.
Assuming it is the first div element in <div class="contentLeft" with the class dropdownPanel , You could use the following jQuery:
$(document).ready(function(){
$('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});
Here is a working example:
http://jsbin.com/ezizix/1/edit
I noticed on your site you have the $ shortcut for jQuery disabled, so be sure to replace it with jQuery:
jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');
You can achieve what you want with absolute positioning. I don't know if the dropdowns will work after this, but it is worth a try.
Add this to the existing contentLeft css rules
.contentLeft {
padding-bottom: 90px;
position: relative;
}
Add this to the "special" div
.specialdropdownPanel {
bottom: 20px;
position: absolute;
}
Use jQuery before to do this Example on fiddle
$(".contentLeft .dropdownPanel").eq(0).before($(".contentLeft .dropdownPanel").eq(7));​​​​

Categories