I have a bootstrap navigation menu with more than 20 items and I want to get a fixed height to navigation therefore the menus that exceed the width of the container do not breaks but are hidden.
ul.fixedHeight {
height: 50px;
overflow: hidden;
}
Then I checked with jQuery if there is a hidden menu to show the button.navbar-toggle to slidedown and show the hidden menu:
JS:
function showhidebtn(){
var element = document.querySelector('ul.navbar-nav');
if((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
$("button.navbar-toggle").removeClass("hidden");
$("button.navbar-toggle").addClass("visible");
} else {
$("button.navbar-toggle").removeClass("visible");
$("button.navbar-toggle").addClass("hidden"); }
}
CSS:
#media (min-width: 768px) {
button.navbar-toggle {
position: absolute;
bottom: 0;
margin-left: -50px;
background: #000;
}
button.navbar-toggle.hidden {
display:none;
}
button.navbar-toggle.visible {
display:block;
}
}
Lastly I run the function if the window size is greater than 768 or or when it is resized.
jsFiddle demo
The problem is that when window size is greater than 768 and I click to the button to show the hidden items the slidedown doesn't work, but it works when window size is less than 768.
Any help is appreciated! Thank you!
As said, the height is restricting it from growing when it's supposed to on the button click. However, you could fix this with javascript:
//initially the button is not clicked
clicked=false;
$('button.navbar-toggle').click(function(){
if(clicked==false)
{
//if the button isn't clicked and you click it,
//let the height grow and make the overflow property as visible
$('.nav.navbar-nav.fixedHeight').css('overflow','visible');
$('.nav.navbar-nav.fixedHeight').css('height','auto');
clicked=true;
}
else
{
//vice versa when you need to close it
$('.nav.navbar-nav.fixedHeight').css('overflow','hidden');
$('.nav.navbar-nav.fixedHeight').css('height','50px');
clicked=false;
}
});
DEMO
Related
I'm having an issue with my slick slider not showing the full first slide on load. Upon opening the content div by clicking the box title, the first slide is cut off and only about 1/3rd of it gets shown. It corrects itself after clicking the "next" button once or twice.
I'm guessing this has something to do with my jQuery function that shows/hides the content div... But I can't figure out what's going on.
Any help?
https://codepen.io/Finches/pen/jYwdKJ
// Show/hide content from clicking box title
$('.track-box-title').click(function() {
//Get height of content
var height = $(this).parent('.track-box').parent('.track-box-container').find('.track-content').height() + 250;
//Convert height to string
var heightStr = height.toString();
//Toggle height and content box display
if ($(this).parent('.track-box').parent('.track-box-container').height() == 200) {
$(this).parent('.track-box').parent('.track-box-container').animate({height: heightStr});
$(this).parent('.track-box').parent('.track-box-container').find('.track-content').show();
}
else if ($(this).parent('.track-box').parent('.track-box-container').height() == heightStr) {
$(this).parent('.track-box').parent('.track-box-container').find('.track-content').hide();
$(this).parent('.track-box').parent('.track-box-container').animate({height: "200px"});
}
});
//Slick slider
$('.project-image-slider').slick({
prevArrow: false
});
Try giving your .slick-track a float.
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
float: left;
}
Check the pen.
I can't solve one problem, but maybe someone will be able to find a solution?
On the left is content area (default width=70%). On the right is menu area (default width=30%).
When I scrolling page width of content becomes 100% and menu disappears:
.down .widget-area{
width: 0;
}
.down .container{
width: 100%;
}
It's good.
But at the beginning of the page there are links to few anchors:
GoTo Header 1
GoTo Header 2
GoTo Header 3
When I click on a link "GoTo Header 1" everything is working properly.
But if I click on the link "GoTo Header 2" moves to the wrong position (under than the header title) because the script changes the width of the content area.
Sample: http://jsfiddle.net/7uouhs6y
Please, any ideas?
document.onscroll = function(){
document.querySelector("#content").className = window.pageYOffset >= window.innerHeight ? "down" : "up";
}
According to your function above,when it's applying 100% width when you scroll down and offset is greater than innerHeight.To avoid that you should keep width to 70%.
Instead of this
.down .container{
width: 100%;
}
Use this
.down .container{
width: 70%;
}
Also don't specify height for left div,make it auto adjust according to content.
.container{
float: left;
background: red;
/*height: 300%;*/
}
I have a navbar that sticks to the top of the page when you scroll past it.
When this navbar is fixed to the top of the page, I would like a logo to appear.
The logo is inside the div #navlogo.
I currently have #navlogo set to display: none. I am thinking that when you scroll past 100px its display will need be set to display block or something similar.
I have tried a few things but i'm not very good at java and had no luck.
You can check out the JSFIDDLE here
This is the script I'm using to set my navbar to fixed
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
}
});
and a little css
#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}
As you can see it sets the nav to fixed, and compensates the page offset by adding 50px. I need something here that will set #navlogo to visible. Can anyone offer some assistance?
Thanks so much for your help!
You can set the css display property in your Javascript:
var logo = $('div#navlogo');
logo.css('display', 'block');
For example: https://jsfiddle.net/gx25ospo/3/
Try adding this style to your CSS at last:
.navbar-fixed-top #navlogo {
display:block;
}
Try this https://jsfiddle.net/gx25ospo/4/
.navbar-brand {
display: none;
}
.visible {
display: block;
}
JS
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
$('.navbar-brand').addClass('visible');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
$('.navbar-brand').removeClass('visible');
}
Would it be possible to have a DIV position: fixed, but if the content of that DIV extend beyond the viewing area of the screen then you could still scroll with the window? I've put everything I have thus far in this...
FIDDLE
This code sits inside a media query that gets triggered when the screen hits a max width and/or a max height, but I don't think that code is relevant to my question. This is the bit of code that I believe I need to modify to work correctly:
.expand {
display: block !important;
position: fixed;
-webkit-backface-visibility: hidden;
top: 50px;
left: 0;
background: rgba(31, 73, 125, 0.8);
width: 100%;
z-index: 999;
}
The reason I want this fixed is so the little hamburger menu stays statically in the upper left hand corner of the screen at all times, as at times the site I'm building could be rather lengthy, so I would like viewers to have a little more ease of access.
Thank you!
Yes, you just need to give the div a fixed height and the overflow: auto setting
(Demo)
.expand {
bottom: 0;
overflow: auto;
}
If you don't want to give it a minimum height, a simple (but not supported by old browsers) option would be to use css calc() like so
.expand {
max-height: calc(100% - 50px); // 100% viewport height minus the height of the nav.
}
I would suggest setting a fallback height before in case the browser does not support calc
JavaScript
To achieve what you really want you need javascript. Here it is.
Check to see if the menu is open, if not...
Define a check to see if the contents are larger than the viewport, if so then set bottom: 0px; and overflow: auto and remove scrolling from the body.
If so...
Remove all styles from the menu and the body that were added when opening the menu.
(Demo)
(function($) {
var menu = $('.responsive-menu'), open;
$('.menu-btn').click(function () {
if(!open) {
if(menu.height() > $(window).height()) {
open = true;
menu.css({'bottom': '0px', 'overflow': 'auto'});
document.body.style.overflow = 'hidden';
}
} else {
open = false;
menu.css({'bottom': '', 'overflow': ''});
document.body.style.overflow = '';
}
menu.toggleClass('expand');
});
})(jQuery);
I have some content that is wrapped by a div that has overflow set to scroll. Inside that div I have a rows of bootstrap drop down buttons. When you get to the drop down button closest to the bottom edge of the div the dropdown area is hidden by the div scroll bar.
Is there a way to have that dropdown show above the scrollbar? Thanks.
UPDATE:
I've added a very simple Fiddle to show what is currently happening
CSS:
div.container
{
height: 200px;
overflow: auto;
}
table#fiddleTable th
{
white-space: nowrap;
}
http://jsfiddle.net/Gnex/8GAc3/
I was trying to solve the same thing, this works for me:
$(".dropdown-toggle").click (e) ->
menu = $(this).next(".dropdown-menu")
menuPositionY = e.clientY + menu.height() + 180
#check if dropdown exceeds the Y coordinate of viewport
if $(window).height() < menuPositionY
menu.css
top: "auto"
bottom: "100%"
else
menu.css
bottom: "auto"
top: "100%"
Check the jsfiddle updated: http://jsfiddle.net/8GAc3/6/
You can use CSS to re-position the dropdown menu..
.dropdown-menu{
left:40px;
top:-10px;
}
Bootply