I'm using Bootstrap 3. I have this menu which works ok only when is not a touch (mobile) device:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Ayuda</li>
<li>Metodología<span></span>
<div class="nav-sub-menu">
<ul class="text-submenu">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</div>
</li>
<li>Glosario</li>
<!--<li>Link de Interés</li>-->
<li>Contacto</li>
</ul>
</div>
In the css, the hover that give the style to the elements have this code:
.nav li > a {
display: table-cell;
}
.nav>li>a:hover {
background: none;
color: #ff7113;
}
.nav > li > ul {
display:none;
list-style:none;
position:relative;
}
.nav > li:hover > ul {
display:block;
}
I've read some posts about making menus for both desktop and touch without hover, with javascript or even using external libraries. Is there are more simple way to use this menu in mobiles devices?
I made a Jsfiddle with the menú working:
https://jsfiddle.net/esqkx349/
You have to open it in a wide screen to see it, like this:
in case, anyone still finding solution to this problem,
Add onclick="void(0)" in <div class="navbar-collapse collapse"> to make mobile device recognise an element as an element with a hover.
like <div class="navbar-collapse collapse" onclick="void(0)">
Well, I made it:
https://jsfiddle.net/pmiranda/bwkyocpa/1/
I had to put some javascript and css:
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
$(document).ready(function(){
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(isTouchDevice()) {
// 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
$(".navbar-nav > li > a").click(function(event) {
// Perform a reset - Remove the "clicked" class on all other menu items
$(".navbar-nav > li > a").not(this).removeClass("clicked");
$(this).toggleClass("clicked");
if ($(this).hasClass("clicked")) {
event.preventDefault();
}
});
}
});
CSS:
.hover-hack {
position: fixed !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
#media only screen and (max-width:1024px) {
.hover-hack {
background: rgba(0, 0, 0, 1) !important;
z-index: 10;
}
}
And the html:
<li>Metodología<span></span>
<ul class="text-submenu hover-hack">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</li>
<li>Glosario</li>
It's possible to make a clickable dropdown without Js.
The hover method is sketchy because some touch devices will treat the first click like a hover action.
It can be done using a checkbox html element. Then, css can detect wether or not the checkbox is current checked.
I created a component that does the job using this link. It works fairly well on mobile because click events work just fine.
Pure CSS clickable dropdown?
Problem is, this solution is slightly hacky and pure HTML, CSS implementations can't work outside of the HTML heirarchy.(so if your button and your dropdown menu exist in different branches of the html heirarchy it won't work.)
I think the most appropriate solution is to use a little bit of JS and handle the element on click.
Related
I have the following code
<div class="wrapper">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="navhead">My Title</li>
<li> Introduction</li>
<li>
First Category
<ul class="collapse list-unstyled" id="firstCategory">
<li>Intro</li>
<li>First Item</li>
...
<a id="firstItem"></a>
<div id="firstItemDiv" class="internal">
...
I used to hide the internal class in my $(document).ready(function () with $('.internal').hide(); if a URL parameter was specified. However, this caused DOM/Page flicker, so I added .internal {display: none} to my .css file and now call $('.internal').show(); in my ready when the parameter is specified.
In other words, Intro always shows, but First Item should only show when the URL parameter is specified.
This works great for my firstItemDiv, but my sidebar internal li element (First Item) still shows. How can I get it not to show by default?
(true confessions: I was able to peek at the actual page with the issue)
The issue here was that there was a more "specific" rule that was overriding the "internal" class rule.
There was a rule with "id" specificity:
#sidebar ul li a {
display: block;
}
and another with class specificity:
.internal {
display: none;
}
changing the second one to:
#sidebar .internal, .internal {
display: none;
}
should fix it.
You should attach css also. If I understand correctly you change .internal ( hiding or showing ) and it works for id='firstItemDiv' and doesnt work for class="sidebar internal" because it uses some javascript propably...
Try to use
$(".internal').css("display" , "none!important") instead of $(".internal").hide() and
$(".internal').css("display" , "block!important") instead of show().
So i was looking into Pagination dependency in ReactJS. My code is working fine but the formatting of pagination is quite out of order. How can i improve my pagination outlook. It's currently showing as bullets
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={18}
totalItemsCount={this.state.totalBooks}
pageRangeDisplayed={3}
onChange={this.handlePageChange} />
It's showing in the browser as the attached image
From the docs of react-js-pagination:
The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.
So if you are using Bootstrap, it should just work.
If not the package provide some props to set classes to different elements, and then you should style them :
innerClass, activeClass, activeLinkClass, itemClass, itemClassFirst, itemClassPrev, itemClassNext, itemClassLast ...
You have to acquire some notion about DOM scaffolding and CSS:
ul {
list-style: none;
padding: 0;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration:none;
color: #999;
}
ul li a:hover, ul li a.active {
color: #333;
}
<ul>
<li><a href="#" /><</a></li>
<li><a href="#" class="active"/>1</a></li>
<li><a href="#" />2</a></li>
<li><a href="#" />></a></li>
</ul>
So i found the Mobile Stepper of material-ui helpful in this case. I imported import MobileStepper from '#material-ui/core/MobileStepper';
I just had to make a simple updatePage(i) function that took +1 or -1 depending upon the next or previous page and corresponding any other function calls can be done in update page function. Hence easily pagination can be done and new information can be rendered accordingly. Although this is not the exact correct method, but it helped me with my functionality.
<MobileStepper steps='5' position='static' activeStep='1' nextButton={<Button size='small' onClick={this.updatePage.bind(this,1)}/>Next</Button>} backButton={ <Button size='small' onClick={this.updatePage.bind(this,-1)} disabled={this.props.match.params.pageNo <= 1}>Prev</Button>} />
I am creating a navigation structure. I tried to use AngularStrap and Bootstrap, but as soon as I injected them into my app, Angular failed. I found this link and constructed my navigation tab-bar. I like how easy it is to customize. My problem is, I don't know how to apply the css for the selected tab in angular. I can't apply an id to an element conditionally, and when I try and break up the css into multiple classes, the tabs don't display the same way.
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);">
{{tab.title}}
</li>
</ul>
vs.
<ul class="tablist">
<li id="selectedTab">Admin</li>
</ul>
What is the best way to apply the selected formatting? See this Fiddle for a more fleshed out example.
Updated: http://jsfiddle.net/dLemh/6/
to have background color change use css important on the class
ng-class="{selected: isSelected(tab)}"
$scope.currentSelectedTab = {};
$scope.setSelectedTab = function(tab){
$scope.currentSelectedTab = tab
}
$scope.isSelected = function(tab){
if(tab == $scope.currentSelectedTab){
return true;
}
return false;
}
Please let me know if anything
I found this SO Post that I was able to use and fix the CSS formatting with regards to their priority.
.tablist li.selectedTab a {
background: none;
border: 2px solid #6B74C6;
border-bottom: 0px;
background-color: #F3F3F3;
color: #0378D9;
text-decoration: none;
}
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);" ng-class="{ selectedTab: $index === selected}">
{{tab.title}}
</li>
</ul>
The affect I'm going for is something I can only compare to Google+ top navigation effect and through some parallax into that. That is, when you scroll down, the search bar disappears and your left with a small "toolbar". I found some jQuery to help me out and I will mess with after I figure this out.
What I'm trying to do first, is get a background image to scroll from below the bar (see the jfiddle) and scroll up to the bar where it will eventually stay put. This is what I've got so far:
<section id="account-bar" class="shelf navbar-fixed-top">
<div class="navbar-header">
more...
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Links</li>
</ul>
</div>
</section>
with the associated css:
section#account-bar {
background-color:#111;
color:#ccc;
font-size:1.1em;
height:3.6em;
line-height:3.4em;
text-align:right
}
section#account-bar:after {
content:'';
width:267px;
height:46px;
background:url('http://lorempixel.com/267/46/') no-repeat 0 0 scroll;
background-size:267px 46px;
top:0;
left:0;
position:absolute;
}
EDIT: Here's that jsFiddle
Although this is not currently possible in pure CSS, by using window.onscroll, scrollTop, and a couple if statements, you can create a lovely state change effect that is similar to what you're looking for
Looking at the Google Plus page, there was some content above the navigation. As a result, I set up my HTML as follows
<div class='topContent'>Top Content</div>
<nav>
<div class='googleSlide'></div> <!--The image that slides in from the left-->
<div class='navContent'>Nav bar content</div> <!-- Everything else in nav -->
</nav>
Here are my important CSS lines to get it functioning
.topContent { height:75px; /* Arbitrary but necessary value */ }
nav { height:44px; width:100%; }
nav div { float:left; }
.googleSlide {
background-image: url(//ssl.gstatic.com/s2/oz/images/sprites/ribbon-nav-1x-69dd561f4c55d6702aadda4e3b4ce787.png);
background-position:0 -100px;
height: 44px; /* More arbitrary but necessary values */
width: 44px;
margin-left:-55px;
transition: all 0.200s; /* To smooth the transition to the new state */
}
And finally, we have the javascript that gets it all working
window.onscroll = function() { // Fires whiles the page scrolls
var navigation = document.getElementsByTagName('nav')[0],
slide = document.getElementsByClassName('googleSlide')[0];
// Conditional to check whether scroll is past our marker, second conditional
// to make sure that it doesn't keep firing when scrolling inside of the range
if(document.body.scrollTop > 75 && navigation.style.background != 'white') {
navigation.style.background = 'white';
navigation.style.border = '1px solid black';
navigation.style.position = 'fixed';
slide.style.marginLeft = '0px';
}
// Same as above but toggles back to the original state
if(document.body.scrollTop < 75 && navigation.style.background != 'grey') {
navigation.style.background = 'grey';
navigation.style.border = 'none';
slide.style.marginLeft = '-55px';
navigation.style.position = 'static';
navigation.style.top = '0px';
}
}
Demo
I'm not sure exactly what you mean by scrolling the background, but a similar approach as this one can get you what you want
OK, I added a universal style to my main.css that says:
a:active {
top:1px;
position:relative;
}
This gives me a nice little "nudge" effect when anything is clicked. Consequently, I had to go around to all of my absolutely positioned <a> elements and fix them from jumping up to top:1px and manually give them the proper nudge.
Although I have run into this one case that has thrown me for a loop on a couple levels. I think I got the positioning all sorted out, but what's happening when I click the anchor is that the <span> element that comes next in the containing <li> disappears while the anchor is being clicked.
I did try setting the <span> to float:left but instead of disappearing it just began lining up beside the anchor and hanging outside the containing <li>.
Here's the page: http://beta.helpcurenow.org/media/videos/
What I'm referring to on this page are the thumbnails that sit below the main video window. There are thumbnail feeds from vimeo with a video screenshot and the meta data. The video screen shot has a hidden span in the anchor so that when you hover over the thumbnail it appears. This is what is causing the meta data to disappear when clicked.
And if you'd like to just see the markup here, it is below:
<ul id="video-gallery">
<li>
<a class="video-thumbnail" href="#">
<img src="http://ats.vimeo.com/775/137/77513796_200.jpg" alt="Amy Fann Interview"/>
<span class="play-arrow"></span>
</a>
<span class="video-metadata" id="video-13466402">
<span class="video-title">Amy Fann Interview</span>
<span class="video-likes meta">Likes <span class="value">0</span></span>
<span class="video-views meta">Views <span class="value">2</span></span>
<span class="video-duration meta">Duration <span class="value">01:48</span></span>
<span class="video-post-date meta">Posted 1 day and 7 hours ago</span>
<span class="video-url hidden-data">http://vimeo.com/13466402</span>
<span class="video-description hidden-data">Amy Fann talks about her upcoming trip to Zambia as part of a CURE GO Team.</span>
</span>
</li>
</ul>
And the CSS...(obviously there are several other style rules for this section, but I'm going to try to include only the relevant ones)
li a.video-thumbnail span.play-arrow {
display:none;
}
li:hover a.video-thumbnail span.play-arrow {
display:block;
width:122px;
height:86px;
background:url(/img/media/play-arrow.png) no-repeat center top;
position:absolute;
top:40px;
left:50px;
}
li:hover a.video-thumbnail:active span.play-arrow {
position:absolute;
top:30px;
left:40px
}
li a.video-thumbnail:active {
position:absolute;
top:auto;
}
li.added-video {
display: none;
}
This CSS should fix your problem (at least it did for me in firebug):
li a.video-thumbnail:active {
position: static;
}
li:hover a.video-thumbnail:active span.play-arrow {
top: 40px;
left: 50px;
}
I don't know exactly why your meta was being hidden on :active, but the above prevents the position type of the thumbnail link from changing and keeps everything in place.