Develop Reference

Create horizontal scroll ionic/angularjs

I was trying to create following scroll navigation with ionic, but somehow navigation is not working and style is not quite right. Could anyone help/guide me on what to use?
This is want I want:
This is what I have so far, horizontal scroll-able list, but above is more like navigation bar, item moves to center when you touch/select it.
When first element is active left side of the list should stay empty. They should scroll like navigation.
So far I have horizontal list but scrolling active one to center is not working.
<ion-scroll direction="x" class="wide-as-needed">
<div ng-repeat="type in types" style='display: inline-block; margin: 5px;' >
{{type|uppercase}}
</div>
</ion-scroll>
directive is simple anchor navigation and trying to navigate to element itself so far not luck, it will navigate to itself but only makes it visible not center of navigation list: https://docs.angularjs.org/api/ng/service/$anchorScroll
Also this angular $anchorScroll is designed to vertical scrolling not horizontal...
TabbedSlideBox can also be used, but this plugin also doesn't have tab scroll to center when active

Update for future reference I will leave it here.
You can try to use this
http://demo.jankuri.com/ngSlimscroll/
but for me creating custom directive from this helped.
function center() {
var currentElement = document.getElementById("active");
currentElement.className = "center-menu";
var nav = document.getElementById("nav");
var navWidth = document.getElementById("nav2").offsetWidth;
var margin = 0;
for(var i =0; i<nav.children.length; i++){
if(currentElement == nav.children[i]){
console.log(nav.children[i]);
break;
}else {
margin += nav.children[i].offsetWidth;
}
}
nav.style.marginLeft = (navWidth/2 - margin - currentElement.offsetWidth);
}
css
nav {
background: #9df0e8;
overflow: hidden;
border-bottom: 8px solid #40b5a2;
border-top: 2px solid #40b5a2;
width: 80%;
margin: 0 auto;
}
nav ul { margin: 0 0 2em;
margin-right:-999em;
white-space:nowrap; }
nav ul li { float: left; }
nav ul li a,
nav ul li span {
display: block;
background: #9df0e8;
color: #345661;
text-decoration: none;
padding: 1em;
cursor: pointer;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
nav ul li a:hover,
nav ul li span:hover { background: #40b5a2; }
.arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #9df0e8 transparent transparent transparent;
display: none;
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.center-menu .arrow{display: block;}

How to make href link and <li> in one package

Currently im using <li> to display href link, the problem is when i click on the so called 'box'it wont direct link to another page, i have to click on href link it will just link to another page. How can i make it like whenever i click on box / href link it will direct link to another page?
My current progress : Fiddle Demo
Any help will be appreciated.

You can't make an <li> act like an <a>, but you can match their sizes.
Updated Fiddle
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:170px;
}
#colOne ul li a
{
padding: 4px 10px;
display: block;
}
By making the link a block element and moving the padding to it, instead of its wrapper, it will be exactly the same size as the <li>

You should be adding the padding to the anchor elements (<a>) instead of the list items <li>. This effectively increases the area of the link itself, instead of the area around the link.
First, get rid of the padding for the list item (the attributes I commented out):
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:150px;
}
li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
/*position: relative; */
/*display:block; */
text-align: center;
font-weight:bold;
box-shadow: 1px 3px 3px #000;
background: #7EB427;
cursor: pointer;
transition: all 0.2s;
}
Then, add it to the link:
.bg1 li a {
display: block;
padding: 4px 10px;
}
Updated jsFiddle

Hover effect disappear after calling function through button

I have the following code which works only that not as I desire:
HTML:
<div class="horizontal-ribbon">
<div class="list" id="pseudoCheckBoxes">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="button" id="but" value="next" onclick="check()">
CSS:
.horizontal-ribbon {
padding: 8px 8px 8px 8px;
background: #d6dbdf;
}
.list {
position:relative;
}
.list ul {
display:inline-block;
background:#d6dbdf;
margin:0;
padding:0;
border-radius:0px;
color:#ffffff;
}
.list ul li {
cursor: pointer;
cursor: hand;
display:inline-block;
vertical-align:middle;
border-radius: 50%;
width:14px;
height:14px;
padding:0px;
background:#fff;
border: 5px solid #d6dbdf;
color: #ffffff;
text-align:center;
font: 700 13px"Lato", Helvetica, Arial sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: background 0.2s ease-out, border-color 0.2s ease-out;
transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
.list ul li:first-child {
margin-left: 20px;
}
.list ul li:last-child {
margin-right: 20px;
}
.list ul li:hover {
background:#1abc9c;
border-color:#1abc9c;
}
JAVASCRIPT:
function check() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "#1abc9c";
items[0].style.borderColor = "#1abc9c";
setTimeout(function () {
uncheck()
}, 2000);
}
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "white";
items[0].style.borderColor = "#d6dbdf";
}
I wish to control that effect both from button press and by hovering the mouse of <li> elements.
The hover effect works well but after I click the button next the hover effect disappears and I don't know why. Please be kind and help me (http://jsfiddle.net/xfpyM/).

You are applying :hover effect using CSS hover and adding inline style after clicking the next button.
You can try doing it by adding class.
Here is the demo
JS
function check(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className ="active";
setTimeout(function(){uncheck()}, 2000);
}
function uncheck(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className=" ";
}
CSS
.list ul li.active,
.list ul li:hover{
background:#1abc9c;
border-color:#1abc9c;
}

Your uncheck function have some error. Instead of removing style attribute you are adding different styels. So the actual hover style not applying.
Instead of this
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "white";
items[0].style.borderColor = "#d6dbdf";
}
Use like this.
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].removeAttribute("style");
}
DEMO

DropKick.js Menu - Always open when page loads

I have a problem with my dropkick menu for my responsive website. When the site enters iphone size it changes to this dropkick menu using dropkick.js, it's a dropdown.
My HTML:
<div id="mobilemenu">
Menu
</div>
This above code is only visible if you view the site in 320px width.
My Javascript:
<script type="text/javascript">
$(function () {
var pull1 = $('#pull');
menu1 = $('ul.menuresponsive');
menuHeight = menu1.height();
$(pull1).on('click', function (e) {
e.preventDefault();
menu1.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu1.removeAttr('style');
}
});
});
</script>
I don't really know much about Javascript, this was taken from a tutorial.
My CSS for when the site is in 320px:
/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }
/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }
As it looks now, the menu is constantly open as shown below, I would very much like it to be closed by default but I can't seem to find a solution.
My menu is rendered as a <ul> and <li> dynamically inside the <div id="mobilemenu">

In the tutorial you link to the demo example has two media queries - one for 515px and one for 320px.
The css for the 515px will be inherited by the 320px one and it contains the code you need to close the menu I think.
Try adding this code into your media query:
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}

How to remove the "Dotted Border" on clicking?

As you can see
I want to somehow remove the dotted lines after the button has been clicked.Any ideas how ?
Thanks
GUYS : This is the current status of my CSS ansd HTML but still no USE:
.myButton input {
position:absolute;
display:block;
top: 5%;
left:87%;
height: 44px;
border:none;
cursor:pointer;
width: 43px;
font: bold 13px sans-serif;;
color:#333;
background: url("hover.png") 0 0 no-repeat;
text-decoration: none;
}
.myButton input:hover {
background-position: 0 -44px;
color: #049;
outline: 0;
}
.myButton input:active {
background-position: 0 -88px;
color:#fff;
outline: 0;
}
input:active, input:focus {
outline: 0;
}
<div class="myButton">
<input type="submit" value="">
</div>
Nothing seems to be happening !!

You have to style the <a> like:
a {outline: none}

use the below code
a:active
{
outline: none;
}
try for other browsers also
a:focus
{
-moz-outline-style: none;
}
a:focus { outline:none }

Possible with pure HTML as well:
...
And with JavaScript you can do that on all links:
window.onload = function WindowLoad(evt) {
//hide focus:
var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
arrLinks[i].hideFocus = "true";
}

Despite my comment on your question,
You should keep them for
accessibility.
You can find your CSS-trick here for this
(Anyway, you should keep them.)

#myElement { outline: 0; }
Try this on your element, i dont now if is an image, div, button, link. But it works

If you want to keep the outline on active and on focus, but hide it on clicking a link, you can add in css:
A.No-Outline {outline-style:none;}
and use script:
$('A').hover(function() {
$(this).addClass('No-Outline');
},function() {
$(this).removeClass('No-Outline');
});
you must be hover befor clicking, so it does the job.