Could anyone suggest how I can define whether a tab is overflowed and how I can scroll to that tab, thus it become not overflowed?
The code snippet below visualizes the problem. The "Four" tab is hidden, and if this tab would be active, the user would have no clue that the "Four" tab is selected on a small device. I'm currently using AngularJS as main framework.
.navigation {
display: flex;
margin: 10px 0;
border: 1px solid red;
border-radius: 5px;
overflow-y: scroll;
}
.navigation > a {
min-width: 200px;
flex: 1;
border-radius: 0;
padding: 5px;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.navigation > a:not(:last-child) {
border-right: 1px solid red;
}
.navigation > a:hover, .navigation > a:active {
background-color: red;
}
<div class='navigation'>
<a>One</a>
<a>Two</a>
<a>Three</a>
<a>Four</a>
</div>
We can first determine the active tab and get its offset position (from left) and apply that value to the scroll (eg: using jQuery scrollLeft) and this will force the scrollbar to scroll to the active tab.
Related
I've been following along on a Youtube tutorial cloning the Microsoft website. I've been doing good so far but now I'm literally 30 seconds away from the tutorial ending, but I can't figure out why my hamburger menu isn't showing. Basically, once your screen width is < 700px, the nav bar moves off the screen to the side and a button on the top right appears to toggle, but when I press the button, the menu doesn't come back over if that makes sense.
CSS code:
.main-nav ul.main-menu {
display: block;
position: absolute;
top: 0;
left: 0;
background: #f2f2f2;
width: 50%;
height: 100%;
border-right: #ccc solid 1px;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
}
.main-nav ul.main-menu li {
padding: 10px;
border-bottom: #ccc solid 1px;
font-size: 14px;
}
.main-nav ul.main-menu li:last-child {
border-bottom: 0;
}
.main-nav ul.main-menu.show {
transform: translateX(-20px);
}
JavaScript:
<script>
document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('main-menu').classList.toggle('show'));
</script>
"main-menu is not the correct selector in this case. Use .main-menu for class name selector."
Have a problem with the navigation when scrolling down. It puts itself behind the .post class.
Scrolled down:
Not Scrolled down:
jQuery:
var num = $('.header').height();
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed-nav');
$('.wrapper').before($('.menu'));
} else {
$('.menu').removeClass('fixed-nav');
$('.menu-menu-container').prepend($('.menu'));
}
});
CSS:
.post {
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
}
/* Navigation style */
.nav {
margin-top: 20px;
margin: 0 auto;
width: 60%;
}
.nav ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none;
font-size: 14px;
text-align: center;
background: rgba(255,255,255,0.9);
border-bottom: 1px rgba(0,0,0,0.1) solid;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
line-height: 1.7;
text-transform: uppercase;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
URL:
http://www.bradlyspicer.net
Edit:
add z-index for div#header {
}
div#header {
z-index: 999;
}
Your stacking context is broken. Inside of Div#header you have nav#navigation. Outside div#header you have div#wrapper.
You can't have div#wrapper scroll below nav#navigation but above div#header. Any element outside div#wrapper is either above or below div#wrapper and its children (without some significant modifications that change the stacking context).
Stacking order isn't as simple as "Higher Z-Index = On Top". Stacking takes into account the location of the element in the element tree, opacity, positioning, and a number of other factors.
Philip Walton wrote a good article about z-index and stacking.
As for a solution, remove nav#navigation from div#header and put it inside the body, and add "position: absolute;" to the nav#navigation element. The result should look something like this.
<body>
<div id="header">...</div>
<div id="wrapper">...</div>
<nav id="navigation" style="position:absolute;">...</nav>
</body>
I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}
You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)
I am currently working on a mobile website and I could use some help with its footer.
Here is an image of how its supposed to look:
http://i.stack.imgur.com/alH8M.jpg
It should have the following:
1) the width needs to work on different mobile devices so it cant be fixed
2) the margin to the left of home and to the right of newsletter should be equal
3) if the devices width isnt big enough for the footer to be displayed in one line, the links should be displayed in multiple "lines". What im trying to say is, there should be no horizontal scrolling
Ive been fiddling around for ages now and cant get it to work. Heres some basic code to get started:
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
Thanks in advance to anyone who can help me!
nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }
ul with text alignment to the center and li displayed as inline block.
I think this should handle.
nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}
try this
nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }
I am not sure this will help you....
But i have done some works. you can resize the window it will display in multiple "lines.
here jsfiddle: http://jsfiddle.net/thilakar/XM2qU/1/
To your curren HTML structure, you can set some CSS to achieve a replica of the provided image:
See this working Fiddle Example!
HTML
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
CSS
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: blue;
text-align: center;
}
ul {
list-style-type: none;
padding: 12px 0;
width: auto;
margin: 0 auto;
display: block;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
a {
color: #FFF;
border-left: 1px solid #FFF;
text-decoration: none;
font-family: sans-serif;
padding: 0 8px;
font-size: 12px;
line-height: 17px;
}
li:first-child a {
border-left: 0 none;
}
a:hover {
text-decoration: underline;
}
Preview:
Some relevant links that can help you learn about what is being suggested:
CSS display Property
CSS Lists
CSS Padding
CSS Tutorial, Learning CSS
I'm trying to disable the hover functionality for a menu.
I want it to be enabled only under certain conditions.
I've tried using $(".ulColor").removeClass('hover');, but that hasn't worked
The CSS code for enabling the hover is :
li:hover ul, li.over ul { display: block; }
Here is the HTML DIV inside which the menu resides -
<div id="pColorSelectorDiv" class="parentOfAll">
<ul id="colorNav" class="ulColor">
<li id="liColorNav" ><a id="colorSelected" class="firstAnchorChild">Colors</a>
<ul id="ulColorChild" class="ulColor">
<li><a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');">COLOR</a></li>
<li><a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');">COLOR</a></li>
<li><a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');">COLOR</a></li>
</ul>
</li>
</ul>
</div>
Here is the rest of the CSS code :
div[id="pColorSelectorDiv"] ul {
margin: 0;
padding: 0;
list-style: none;
width: 50px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
div[id="pColorSelectorDiv"] ul li {
position: relative;
}
.firstAnchorChild{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
li ul {
position: absolute;
left: 49px; /* Set 1px less than menu width */
top: 0;
display: none;
background: White;
}
/* Styles for Menu Items */
.anchorClass{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
.bkgColor-1 {background: #00FFFF; color: #00FFFF;}
.bkgColor-2 {background: #0000FF; color: #0000FF;}
.bkgColor-3 {background: #7FFF00; color: #7FFF00;}
I think you want
li.hover:hover ul { display: block; }
instead of
li:hover ul, li.over ul { display: block; }
Now this style will affect ul only when li is hovered and has hover class.
A simplified example.
PS You might also benefit from using 'code sample' button on edit form (the one with zeroes and ones) to format your code. Among other things, it'll preserve indentation (and thus increase readability). The key combination is ctrl+K. I've edited one of your code samples to demonstrate it.