Develop Reference

AngularJS v1 material md-subheader bounces badly when scrolling on mobile devices

Hi All fellow programmers and geniuses,
I am using md-subheader of angularmaterial v1 demo at:
https://material.angularjs.org/latest/demo/subheader
I am building a page in mobile device using this and the problem is that the subheader bounces badly when it should not move a bit. This problem was addressed already in the link below (with proper demo) but I could not find any solution.
https://github.com/angular/material/issues/5862

I had the same issue and after searching for a while, I had to abandon md-subheader and instead I put a div above an md-content that would act as a stationary header when the md-content scrolled. Then I conditionally applied a style to the div that would bump it over the width of a scrollbar if there was enough content to scroll so the header would line up with the content.
I did that by defining this style:
.invisible-scrollbar {
overflow-y: scroll;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: white;
scrollbar-base-color: white;
scrollbar-darkshadow-color: white;
scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
}
.invisible-scrollbar::-webkit-scrollbar {
opacity: 0;
}
And then applying it to the header div with this:
ng-class="{'invisible-scrollbar':vm.resultsCanScroll}"
And finally, I check if the content has a scrollbar in the controller which was a little tricky with an md-virtual-repeat:
// Wait until the next digest so the content is bound before checking the scroll height.
$timeout(function () {
var scroller = angular.element('#searchResultList .md-virtual-repeat-scroller');
vm.resultsCanScroll = scroller[0].scrollHeight > scroller.height();
});
Of course this won't help you if you have multiple md-subheader tags, but it depends what you're trying to do.

Jquery click menu working but completely transparent in Safari and most mobile browsers

I have a link that, once clicked, reveals a menu. It is designed for smaller browser windows at a convenient breakpoint in the website design (965px). Here is how it is behaving in different browsers:
Firefox (desktop), Opera (desktop), Puffin (mobile):
Works perfectly.
Safari (desktop & mobile), Opera Mini, Google Chrome (mobile), Dolphin (mobile), Mercury (mobile), Coast by Opera (mobile):
Doesn't show at all - however, if I click (or tap) the menu and then click where the dropdown should be, it triggers the links - so the menu is there, just completely transparent!
Google Chrome (desktop):
Exact same transparent-but-still-functioning behavior as above but only when it is sitting over the image gallery I have at the top of the page; when I scroll past the gallery it appears and functions normally.
I'm a little perplexed as to why this would be. So far seems to be a CSS issue but I can't seem to nail it down; I'm adding notes to go along with the code below.
I also have tried enabling/disabling the entire image gallery but again, it had no effect.
Here is a link to the site thusfar:
http://www.evinulrichpohl.com/trenholmetest
And here's some snippets of the code relevant to the click menu:
HTML:
<div id="hammenushowbio" class="viewmenu">MENU</div>
<div id="hammenu">
<div class="hammenulinks">
<ul>
<li data-slide="2" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">FIRM PROFILE</div></li>
<li data-slide="3" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CLIENT SERVICES</div></li>
<li data-slide="4" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">OUR TEAM</div></li>
<li data-slide="5" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CONTACT US</div></li>
</ul>
</div>
</div>
</div>
CSS:
.viewmenu{
display:none;
float:right;
font-size:13px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#FFFFFF;
letter-spacing:1.5px;
cursor:pointer;
}
#hammenu{
position:fixed;
z-index:99; //enabling/disabling has no effect
width:100%; //enabling/disabling has no effect
margin-top:55px;
left:0; //enabling/disabling has no effect
}
//enabling/disabling from here downward has no effect
#hammenu:after{
content:"";
position:absolute;
display:block;
width:0;
height:0;
}
.hammenulinks{
display:inline-block;
float:left;
width:100%;
font-size:16px;
}
.hamtext{
margin-left:30px;
letter-spacing:1.5px;
}
.hammenulinks li{
background-color:#FFFFFF;
color:#1E2129;
display:block;
text-align:left;
padding-top:20px;
padding-bottom:20px;
border-bottom:1px #eeeeee solid;
}
.hammenulinks li:hover{
cursor:pointer;
background-color:#eeeeee;
}
Jquery (It doesn't appear to be a JS issue as I have utilized the exact same click functions more than a dozen other times on the site and they are all working correctly in all desktop and mobile browsers. However, my knowledge of JS is quite limited at this point so I can't rule it out for sure):
$(document).ready(function () {
var $slides = $('#hammenu').hide();
$('div#hammenushowbio').show().click(function () {
var $slider = $(this).next("#hammenu");
if (!$slider.length){
$slider = $(this).closest("#hammenu");
}
$slides.not($slider).stop(true, true).slideUp();
$slider.stop(true, true).slideToggle(0);
});
});
Mediaq (enabling or disabling has no effect):
#media (max-width : 965px){
.viewmenu {
display:inline-block;
}
#hammenu {
display:inline-block;
}
}
#media (min-width : 966px){
#hammenu {
display:none !important;
}
.viewmenu {
display:none !important;
}
}

I'm pretty sure that the "click" event is a "mouse" left-click event only. Tablets and smartphones and other touch-based devices won't trigger it. They will, however, trigger javascript that's coded in the href of an anchor tag. Ex:
<div class="viewmenu">MENU</div>
A much more elegant alternative IMO would be to use the jQuery Mobile plugin to support both desktop AND mobile devices. Get rid of the anchor tag around the MENU div and bind the TAP event directly to the DIV itself:
$('div.viewmenu').on('tap', function() {
var $slider = $(this).next("#hammenu");
if (!$slider.length){
$slider = $(this).closest("#hammenu");
}
$slides.not($slider).stop(true, true).slideUp();
$slider.stop(true, true).slideToggle(0);
});
Just a quick word of caution though. Mobile devices tend to have far more limited amount of resources than desktops (CPU, Memory, etc), so when using the jQuery mobile plugin, just download the components you need to keep the javascript file as small as possible. They provide a great resource for this in the downloads section. Take advantage of it. :)

Figured it out! It's now working across the board.
Thanks to fastsol over at codingforums.com
I had overflow:hidden; as a property of my .navigation div... yeah...
A left-over bit of code from an earlier experiment for the drop-down menu.
Serves me right for not tidying up properly!

JQuery Mega Menu Full Width Menu Item

I am new to css and jquery and have a problem with a menu item. I have a Jquery Mega Menu and I want to have the Attorney Profile menu item be 1 single row instead of the two it is now. Normally I would post code but there just is to much. So I am going to post a link to the actual working site.
I tried adding fullwidth but no success.
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '1',
speed: 'fast'
fullWidth: true
});
});
I also tried to modify the css here:
.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
width: 130px;
height: 165px;
margin: 0 2px 7px 2px;
border: 3px solid #ccc;
}
But that just modifies that actual inside menu.
Here is the active site: http://gdisinc.com/barker/default.php
Notice if you roll your mouse over Attorney Profiles it will show two rows. How can I make that one row that matches the width of the site which is 960px. Thank you!
PS: I used this menu system: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

You can change the padding on this style
.dcjq-mega-menu ul.menu li a
to
padding:12px 20px;
The elements in the have a width based on their content, so reducing font-size for navigation items would work as well. Fixes for such problems are easily found using Chrome's Web Inspector / Firefox's Firebug etc.
Would be probably good to not have the small divider after contact us tab as well. You could achieve this by adding a :last-child class like this:
.dcjq-mega-menu ul.menu li:last-child a { background:none; }
The problem is that the CSS selector here is not very readable and can lead to very annoying problems later on. If you can, always change such long declarations to a single class:
.last-menu-item { background:none; }
As well, keep in mind that :last-child is not supported on Internet Explorer < 9.
http://caniuse.com/#search=last-child
Welcome to the world of CSS ... :)

It looks like you'll need to change the "rowitems" option here:
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '3',
speed: 'fast'
});
});
If you change it to '5' it should display all of the items on the same row. Take a look at the examples:
http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
It doesn't look like there is a way to configure this effect per menu item unless you split the menu up into separate instances of the MegaMenu.

Menubar like Wordpress admin menu

I'm trying to find a javascript library (better if can be done usiny jquery) to replicate more or less the functionality of the top menubar of wordpress once you are logged. You can add images/links on the left, on the right, or both sides.
The most javascript menus libraries that I've found are not as nice as this one, some of them only add buttons/link on one side or centered ...
See the attached image.
thanks

EDIT:
Bootstrap provides this functionality out of the box. Even if you don't need the entire Bootstrap framework, it's easy to separate what you need from the rest.
For a quick and simple sticky navigation bar (with none of the more involved extras, such as drop-down menus, etc.), you can use the following CSS:
#bar {
position:fixed;
top:0;
left:0;
right:0;
height:36px;
background: black;
}
... and then add whatever you need to it, e.g.
<div id=bar>
<img class=bar-left src=logo.png />
<div class=bar-right>Login button!</div>
</div>
and the CSS:
.bar-left {
float:left;
}
.bar-right {
float:right;
}
This works well enough. As for jQuery, you could use it to dynamically add elements to the navbar with its .append() and .prepend() methods.

Tiny scrollbar doesn't work with javascript (javascript conflict)

I'm using tiny scrollbar for my new website www.digimobjobs.com
I'm using this scrollbar in many places, but this webste is the only place that has a scrollbar problem.
This is where: http://www.digimobjobs.com/news.php.
At the twitter tab and news tab, I have to put a specific scroll height:
#newsWidget
{
font-weight:lighter;
font-size:12px;
height:2000px;
color:#333333;
text-align:left;
}
#twitter-ticker{
width:610px;
/* height:921px; */
height:1025px;
color:#4297f9;
/* display:none; */
text-align:left;
}
In the rest of the places I'm using the same code of the tiny scrollbar. I think the conflict is between javascript. Actually I don't have enough knowledge of javascript.
Could any one help me please? If you use firebug you can see my entire code.
Please help me!

I have tested your site with Google Chrome and Firefox and I don't see any problem.
Extra
However, if you are still having problems on yours, you might want to consider changing the scrollbar using CSS3.
Learn more:
Surfin' Safari Blog (harder to understand)
CSS-Tricks* (easier to understand)
In conclusion, it is basically working like this: (From the CSS-Tricks site)
::-webkit-scrollbar { /* CSS here */ } /*the whole scrollbar*/
::-webkit-scrollbar-button { /* CSS here */ } /*the scrollbar buttons*/
::-webkit-scrollbar-track { /* CSS here */ } /*the scrollbar's whole track*/
::-webkit-scrollbar-track-piece { /* CSS here */ } /*the scrollbar's track*/
::-webkit-scrollbar-thumb { /* CSS here */ } /*the scrollbar's moving piece*/
::-webkit-scrollbar-corner { /* CSS here */ } /*bottom corner piece (when no resize)*/
::-webkit-resizer { /* CSS here */ } /*bottom corner piece (when there's resizing)*/
Update
I have done a few testing, and I fixed the second tab:
// Try running this in the console when it the page is completely loaded.
$("#news_feed").tinyscrollbar();
$("#news_feed").tinyscrollbar_update();
According to the Tiny Scrollbar site, it said,
The update (.tinyscrollbar_update()) method can be used for adjusting a scrollbar to its new content.
So you will have to call it every time you change the content. For example, your XML updating needs to call it every time.
But why the problem is happening?
After a few testing, it seems like the api runs before your content is loaded.
As a result, it thought that the two <div>s are empty and has no height (so no scrollbar for you).
The first Twitter tab?
Try to fix it by yourself.
I have never used this plugin before, so I might be wrong. Fix me if you see a mistake.

Please Re Init tinyScroller bar by this mathod.
$('#scrollbar1').tinyscrollbar_update();