Bootstrap:Fixed nav-static-top on top but scrollable nav-collapse - javascript

I am using bootstrap to design my site.
Base on this fiddle
I made the nav-static-top to fixed on top. Now the nav-collapse has to many contents and i can't browse to the last menu because the nav-static-top is fixed on top. Is there a way that the
nav-static-top is fixed on top and the nav-collapse content is scrollable so i can scroll to choose on the content?
i've than something like this but i doesn't look good
and i think android devices don't support overflow:scroll

Found a better way. Tested on iphone 4 only.
#media (max-width: 767px) {
.body-container {
padding-top: 50px;
margin-left:10px;
margin-right:10px;
}
.navbar-static-top{
position:fixed;
width:100%;
z-index:1000;
}
.navbar-responsive-collapse{
max-height: 350px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}

This doesn't completely fix your problem, but it definitely looks better if you do this:
<div class="nav-collapse collapse navbar-responsive-collapse" style="overflow-y: scroll;max-height:400px">
<ul class="nav">
instead of
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav" style="overflow: scroll;max-height:400px">
I don't know about doing it on Android, but if it really doesn't work this way, you'll probably have write some JS or something.

Related

Mobile navigation bar disappears on desktop

I am trying to make a sidebar navigation that is static on desktop and collapsed on mobile devices. The problem is that when I press the toggle button on mobile, the navbar stays toggled and is not visible on desktop. Here is my code below:
HTML
<div class="d-flex" id="wrapper">
<div class="bg-light" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="heading-img" src="./images/logo.png"></div>
<div class="list-group list-group-flush nav-group nav-items">
<img class="nav-img" src="./images/home.svg">Home
<img class="nav-img" src="./images/settings.svg">Settings
<img class="nav-img" src="./images/exit.svg">Exit
</div>
</div>
CSS
#menu-toggle{
display: none;
}
#media (max-width: 768px){
#menu-toggle{
display: unset;
}
}
JS
<script>
$("#menu-toggle").click(function(e) {
$("#wrapper").toggleClass("toggled");
});
</script>
Is there a way to detect that it's resized and remove the "toggled" text
i've experienced such issue in the past and i solved it by just adding an !important attribute to the css styling for tablets and desktop mode
for example
#media only screen and (min-width: 750px){
#navigation{
display: initial !important;
}
}
the !important attributes makes the navigation always visible on desktop mode even after toggling the button in mobile mode.
A question similar to this has been asked in the past, you can check out the link below
link to the question

Stop Body Scrolling under a certain div

So My situation is this, I have a lot of divs... A LOT (over 300) and im using them as part of an interactive background. EDIT:(they all have the same class btw)
The Problem?
Since on mobile I need more divs to fill the page than on desktop, I have too many divs on desktop, meaning you can scroll wayyyyyy more than I want to.
How can I have it so Divs Below a certain point are deleted or (more usefully) how to stop scrolling after a certain amount of pixels.
I literally have no idea how to do this, I've tried experimenting with margins, padding, overflow, position: fixed; but I haven't found a solution so don't pester my "lack of effort"
(some of my accounts have been blocked because I had no legitimate idea what to do and you "cool kids" decided to downvote me enough to get blocked (thanks for that!))
Anyway enough blabbing. Help would be appreciated! Thanks in advance.
You can do 2 things for this:
Wrap all your content in a div and set height to it and overflow-y: hidden.
.wrapper{
height: 1000px; overflow-y: hidden
}
With CSS you can hide the elements after certain number. Like if you want to hide all div after 100
.container .className:nth-child(n+101) {
display: none;
}
This will hide all the divs after 100.
Put all your divs inside a container div and use this css
.container{
max-height:900px; // Set this value to the no of pixel you want to scroll
overflow:hidden;
}
I have set the max-height to 900px cause i want to show only 9 div each div is off height 100px.
SNIPPET
.item {
width: 100%;
height: 100px;
background-color: red;
}
.item:hover {
background-color: yellow;
}
.container {
max-height: 900px;
overflow: hidden;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<!--You cant scroll after that-->
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>

Make nav div sit exactly in the middle between an image and the right side of the viewport

I'm trying to get a navigation div to sit in the middle between an image and the right page but also in a way that if the browser is resized, will still maintain the relation. I'm quite positive I know how to do it with a relative positioning but I would like to have the navigation fixed.
[img] nav |right side of viewport
#wrapperNav {
position: fixed;
top: 45%;
right: 50%;
z-index:999;
}
Code: http://jsfiddle.net/LLtnZ/3/
Flexbox has support in most newer desktop and mobile browsers and really dispenses with a lot of the hackiness involved in trying to maintain alignment and positioning with varying screen sizes; it flexes.
For the carousel you describe I would start with the below HTML, based on what you provided in your fiddle:
<div id="wrapper">
<nav class="nav nav--ready">
<div class='nav__center'>
<div class="nav__link nav__link--active">
<a class="nav__link-bullet" href="#one">1</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#two">2</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#three">3</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#four">4</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#five">5</a>
</div>
</div>
</nav>
<div class='carousel'>
<img src="" alt=""/>
</div>
</div>
#wrapper is a flexbox, .nav is too, so is .nav__center. #wrapper is set to flex-direction: row-reverse; so as to display navigation on the right, if we added another element to #wrapper it would display to the right of .nav. .nav itself is set to flex-direction: row;, though it only has one child: .nav__center, its flexbox styles of justify-content: space-around; and align-items: center; keep the nav buttons aligned at its center no matter what. Within .nav, .nav__center is set to flex-direction: column; so its contents display top to bottom, and these styles align-self: stretch; justify-content: space-around; distribute each .nav__link element evenly from top to bottom.
Here is a fiddle. Notice that navigation stays glued to the right side of the carousel. I set a minimum width on .nav so that it won't disappear even when the display is really tiny.
Here is a quick guide you can probably get through in ten minutes with a cup of coffee.
You need to add position: relative; to your container which in this case is the nav html element.
http://jsfiddle.net/LLtnZ/4/
This might help. So if your image is is 90% width and centered, that will leave 10% left of pagespace, 5% on either side of the image.
If I understand your drawing correctly, the that would mean you'd want the container your nav is in to be
width: 5%
position:fixed;
top: 50%;
right:0;
margin-top -150px; // half the height
height: 300px;
text-align:center;
The 5% width will take up the entire space to the right, but using text-align:center will get items in the middle, as per your "equal" annotation on your drawing.
If you need a jsFiddle let me know
Here's a fiddle: http://jsfiddle.net/47Q9p/

links issue on stock android browser

I'am working on mobile version of an existing site and i can't resolve the issue with links in the menu.
The problem occurs only on stock android browser. On Chrome, firefox, safari and even IE the site works fine. All other links on the site are working fine. Here is the link to the site if you would like to test it --> www.antiqpalace.com.
code description:
original site had a "main menu" and "left menu" and i moved some elements from "left menu" to "main menu". Then I redesigned the main menu to specification and hide it with display:none. If you click on menu button JS changes display to block.
What I have tried:
changing parent div position to absolute. that did not work, there were major scrolling issues.
adding JQ .click events to a elements. the result was un-changed. everything still works on chrome... but links remain unclickable in stock android browser.
i add css --> a{background-color:blue} to see what happends on phone and links are positiond fine, just un-clickable.
I have googled that there was/is issue with links and -webkit-transform but i don't have that line in my CSS.
HTML:
<div> ---> whit a fix position and display none
<ul class="menu" style="height: 644px;">
<li class="first leaf menu-mlid-808">
<a href="/about-antiq-palace-hotel-ljubljana.html" >Antiq Palace Hotel
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
<li class="expanded active-trail active menu-mlid-817">
<a href="javascript:show_sub_menu(2)" class="active-trail active">Rooms & Suites
</a>
<ul class="menu" style="height: auto; top: 70.84px;">
<li class="first leaf menu-mlid-823">
<a href="/double-bedroom-residential-suite-one-or-two.html" >Double Bedroom Residential Suite for One or Two
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
.....
</ul>
<div onclick="show_sub_menu(2)" class="A_DD_submenu">
<img class="DD_right_arrow" src="[some src]">
</div>
</li>
.....
</ul>
CSS:
ul{
margin:0 1.5%;
padding:0;
border:none;
width:97%;
height:91%;/* js adds inline height of ful win height -51 px example(height:644px;)*/
display:block;
float:left;
overflow-y:scroll;
}
ul li,
ul li.first {
padding:0;
margin:0;
height:auto;
width:100%;
background:none;
background-color:rgba(196,154,69,1);
display:block;
float:left;
border-bottom:dotted 1px rgb(214,184,124);
position:relative;
z-index:10000;
}
ul li a{
width:70%;
display:block;
font-size:11.5px;
font-weight:bold;
padding: 23px 7%;
text-decoration:none !important;
float:left;
text-align: left;
color: white !important;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif !important;
letter-spacing:2px;
line-height: 16px;
z-index: 10000000000;
position: relative;
}
ul li ul{
width: 100%;
margin: 0;
overflow-y: hidden;
display:none;
}
ul li ul li{
background-color:rgb(126,118,104) !important;
z-index:1000;
margin-bottom: 0 !important;
}
I don't know if it's ok to respond to my own question but I have solved the issue and don't know where to post the solution.
Actual error:
Actual error was an issue with position fixed and links inside that . Andriod browser displays links but are un-clickable. Visuali everything looks ok just does not work.
Fix:
I changed the position of the element to static and added com css to rewrite old css.
Design issue:
This is not a optimal fix because the menu is inserted in the page and not on top of it. I'm not sure which browsers have issues with fixed positioning so I added code to CSS file. If you have a similar problem you can indentify the browser and add code only to that browser
Here is link to css an at the bottom I added the code that fixed this problem.
http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css

Zurb Foundation 4.3.0 Orbit not showing slides

I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?

Categories

Resources