iscroll / iscrollview custom scrollbar - jquery-mobile

i read the documentation, tried to comprehend the demo but still no custom scrollbar.
Basically i copied the demo-code from iScroll-Custom-Scrollbar:
HTML
<div class="demo-page" data-role="page" id="test-page">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-iscroll="" data-role="content" id="wrapper">
<div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->
<ul data-role="listview" id="thelist">
<li>Item 1 culpa aut nam qui</li>
<li>Item 2 minima quam temporibus quidem</li>
<li>Item 3 commodi sint facilis numquam</li>
</ul>
</div><!--wrapper-->
</div><!--page-->
Script
<script type="text/javascript">
var myScroll;
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
</script>
Actually a class-attribute should be added to the scrollbar's div but it doesnt.
After trying to squeeze the bar to the death ;) i found out that the class is added as soon as the screen's height is very small and disappears when it gets bigger again. Pretty funny to watch...drives me crazy :D

It looks like you are initializing the iscrollview improperly.
Try this instead
<div class="demo-page" data-role="page" id="test-page">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-role="content" data-iscroll='{"scrollbarClass": "myScrollbar"}'>
<div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->
<ul data-role="listview" id="thelist">
<li>Item 1 culpa aut nam qui</li>
<li>Item 2 minima quam temporibus quidem</li>
<li>Item 3 commodi sint facilis numquam</li>
</ul>
</div><!--wrapper-->
</div><!--page-->
Now ditch the code in the script tags, it is unneeded.
The whole point of using the iscrollview is so you don't need to do anything in javascript. You can setup a simple iscroller by just including the data-iscroll attribute to a div. If you want to add more customized iscroll features, include it in quotes after data-iscroll=
You also don't need to specify a wrapper element because the iscrollview plugin will automatically create one for you.

Related

Bootstrap's "tab-content" not working in Asp.Net MVCP

I am creating a tabbed login page, so that the user can either log-in or click on other tabs for other info. Here's the code:
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Log-in</a></li>
<li><a data-toggle="tab" href="#aboutus">What's HooHit?</a></li>
<li><a data-toggle="tab" href="#howworks">How it works!</a></li>
<li><a data-toggle="tab" href="#blog">Blog</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="aboutus" class="tab-pane fade">
<h3>HooHit Logo</h3>
<p>HooHit Pets is an online community...</p>
</div>
<div id="howworks" class="tab-pane fade">
<h3>Steps picture</h3>
<p>You simply upload a picture or video ...</p>
</div>
<div id="blog" class="tab-pane fade">
<br />
<p>...</p>
Click here!
</div>
</div>
</div>
</div>
</div>
The issue I am having is that when I run the code, the tabs don't work. So when I click on the blog tab as an example, the URL on the browser changes to http://localhost:43345/Account/Login2#blog but the tab doesn't change in the view. I can guess the reasoning (i.e. routing in MVC) but am not sure how to fix it. Any ideas?
Code is correct.
You might be missing a Jquery reference needed by boostrap in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Bootstrap 4 Grid System

Having trouble implementing Bootstrap Grid System on Rails
I created a partial for sidebar so I wouldn't have to copy it to all of my views. The solution I went for in my
application.html.erb
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-8"><%= yield %></div>
<div class="col-md-4"><%= render 'layouts/sidebar' %></div>
</div>
<!-- /.row -->
</div>
index.html.erb (start)
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div>
<h1 class="my-4">Page Heading
<small>Secondary Text</small>
</h1>
<!-- Blog Post -->
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
Start Bootstrap
</div>
</div>
_sidebar.html.erb
<div>
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Current Problem
What it should look like--
https://blackrockdigital.github.io/startbootstrap-blog-post/
Solved it by replacing row-fluid from my application.html.erb with just row. If someone could explain to me why that was happening that would really help me a lot on my journey in learning web application development. Thanks!

Collapsible listview in a jquery mobile external panel not displaying correctly

Can anyone please help me?
I'm trying to create a menu inside an external jquery mobile panel. This is JQM 1.4.0 that supports external panels.
I have a collapsible listview inside the external panel. There is some kind of inset applied that I don't seem to be able to get rid off for submenu3 and inside it as well.
Please check out my fiddle: http://jsfiddle.net/UHYz9/2/
Here's the html:
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h3>Menu</h3>
<ul data-role="listview" style="padding-right: 8px">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Submenu 3</h2>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Submenu 4</li>
<li>Submenu 5</li>
</ul>
</div>
Here's the js:
$(function() {
$("body>[data-role='panel']").panel();
$("#externalpanel ul").listview();
$("#externalpanel").trigger("create");
});
For this to work, please include the following css and js links:
http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css
http://demos.jquerymobile.com/1.4.0/js/jquery.js
http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js
Thanks a lot!
You need to wrap contents on panel in <div data-role="content"> or `.
To enhance content of panel or any other div, use .enhanceWithin().
$(function () {
$("body>[data-role='panel']").panel().enhanceWithin();
});
Demo

jqm iscrollview scroller "min-height" to high

I have an jqm page with an header and an div block who will be always visible. After this block I have added a listview in an new div and enabled iscroll via data-iscroll="".
If it has to scroll, the iscroll-div gets an to high height value. Some Content is not Visible and Scrollable (see Screenshot the Red Circle).
My shorted Code is following:
<div data-role="page" id="pageId">
<div data-role="header" data-position="fixed">
{title}
</div>
<div data-role="content">
<div class="details-header">
<img src="{url}" />
{some text}
</div>
<div data-iscroll="">
<ul data-role="listview">
<li>
<h2>Lorem Ipsum</h2>
<p style="white-space:normal">Lorem ipsum dolor sit amet[..]</p>
</li>
<li>
<h2>Lorem Ipsum</h2>
<p style="white-space:normal">Lorem ipsum dolor sit amet[..]</p>
</li>
[...]
</ul></div>
</div>
</div>
It seems that the min-height is calculated by the device-height - header-height. Is there a way to to recalculate the iscroll divs height?
I have found the solution: data-iscroll-fixed="" for containers outside the data-iscroll element do the job.

Creating basic portfolio website using Locomotive CMS (Ruby on rails, haml)

I've been trying to create a basic portfolio such as this one (www.tommyblue.it) using Locomotive CMS,
I've managed to set up all the needed gems and required programs, mongodb, homebrew etc...
However due to the extreme difficulty of finding decent haml or Locomotive CMS documentation (for a newbie) online I'm stuck with it. My goal would be to have running app before the end of the month, crazy uh?
Any help is truly appreciated.
Basically this is what I'm stuck with atm:
{{ 'js.js' | javascript_tag }}
{{ 'main.js' | javascript_tag }}
{{ 'custom.js' | javascript_tag }}
{{ 'jquery-1.7.1.min.js' | javascript_tag }}
{{ 'jquery.easing.1.3.js' | javascript_tag }}
{{ 'jquery.masonry.min.js' | javascript_tag }}
{{ 'jquery.prettyPhoto.js' | javascript_tag }}
{{ 'jquery.quicksand.js' | javascript_tag }}
{{ 'jquery.tweet.js' | javascript_tag }}
{{ 'modernizr.js' | javascript_tag }}
{{ 'style.css' | stylesheet_tag }}
{{ 'font.css' | stylesheet_tag }}
{{ 'prettyPhoto.css' | stylesheet_tag }}
{{ 'reset.css' | stylesheet_tag }}
{{ 'typography.css' | stylesheet_tag }}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
{{ Design.Diverso }}
</head>
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<div class="body-inside">
<!-- begin header -->
<header id="header">
<!-- begin slider -->
<div id="f_slider">
<div class="slider">
<ul>
<li>
<div class="row">
<h5>HELLO,</h5>
<h2>WELCOME TO <span class="h_black">NONAME</span></h2>
</div>
<div class="row">
<h4>
Enjoy our company For the design & production of all manner of digital creative.
</h4>
</div>
</li>
<li>
<div class="row text-center">
<h2>Enjoy <span class="h_black"> our </span>company </h2>
</div>
<div class="row one-half text-right">
<h4>Who we are</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<div class="row one-half last">
<h4>What we've done</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<span class="clear"></span>
</li>
<li>
<div class="row one-half text-right">
<h2> we make </h2>
<h2> it <span class="h_black">better</span></h2>
</div>
<div class="row one-half last">
<h4>Lorem ipsum dolor</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec.
<div>
{{ 'html5_logo.png' | theme_image_tag }}
{{ 'css3_logo.png' | theme_image_tag }}
{{ 'jquery_logo.png' | theme_image_tag }}
</div>
<span class="clear"></span>
</li>
</ul>
</div>
</div>
<!-- end slider -->
<!-- begin navigation -->
<nav id="top_menu">
<div class="inside">
<!-- logo -->
<a href="#" class="logo">
{{ 'logo.png' | theme_image_tag }}
</a>
<!-- begin menu -->
<ul class="menu">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="works.html">
Works
</a>
</li>
<li>
<a href="blog.html">
Blog
</a>
<ul>
<li>Single Post</li>
</ul>
</li>
<li>
<a href="services.html">
Services
</a>
</li>
<li>
About Us
</li>
<li>
<a href="#">
Features
</a>
<!-- begin sub menu -->
<ul>
<li>
<a href="typography.html">
Typography
</a>
</li>
<li>
<a href="columns.html">
Columns
</a>
</li>
<li>
<a href="elements.html">
Elements
</a>
</li>
<li>
<a href="team.html">
Our Team
</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
<!-- end menu -->
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- begin main -->
<article id="main">
<!-- Begin ajax menu -->
<nav id="to-top-menu">
<span></span>
</nav>
<!-- end ajax menu -->
<ul class="fast_link">
<li class="">
<div class="link_wrap" data-link="works">
<div class="link_title">
<h2>OUR WORKS</h2>
<p>Recent Projects</p>
</div>
{{ 'a_works.png' | theme_image_tag }}
{{ 'a_works_hover.png' | theme_image_tag }}>
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="blog">
<div class="link_title">
<h2>BLOG</h2>
<p>From the Blog</p>
</div>
{{ 'a_blog.png' | theme_image_tag }}
{{ 'a_blog_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="services">
<div class="link_title">
<h2>SERVICES</h2>
<p>What we do</p>
</div>
{{ 'a_service.png' | theme_image_tag }}
{{ 'a_service_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="team">
<div class="link_title">
<h2>THE TEAM</h2>
<p>Meat the team </p>
</div>
{{ 'a_team.png' | theme_image_tag }}
{{ 'a_team_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="last">
<div class="link_wrap" data-link="contact">
<div class="link_title">
<h2>CONTACT</h2>
<p>Get in touch</p>
</div>
{{ 'a_contact.png' | theme_image_tag }}
{{ 'a_contact_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
</ul>
<span class="clear"></span>
<!-- home page title -->
<nav class="page_title displaynone">
<h2>
<span class="title">PLACE SELECT A PAGE</span>
<span class="loading_link"></span>
</h2>
</nav>
<!-- callback ajax content -->
<section id="content">
</section>
<span class="clear"></span>
</article>
<!-- end main -->
</div>
<!-- end body inside -->
<!-- begin footer -->
<footer id="footer">
<div class="inside">
<div class="footer-widget">
<div class="one-third">
<h2>Follow Us</h2>
<p>
Omnes enim peccaverunt et egent gloriam Dei. In principio creavit Deus caelum et terram.
</p>
<ul class="footer-socials">
<li class="rss"></li>
<li class="twitter"></li>
<li class="facebook"></li>
<li class="dribbble"></li>
<li class="vimeo"></li>
<li class="skype"></li>
</ul>
<span class="clear"></span>
</div>
<div class="one-third">
<h2>About Us</h2>
<p>{{ 'logo.png' | theme_image_tag }}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec. Proin nec sollicitudin augue. Donec hendrerit</p>
</div>
<div class="one-third last">
<h2>Join our newsletter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis.</p>
<form id="form_newslatter">
<input type="text" name="newslatter" id="newslatter" placeholder="Email Address..." />
</form>
</div>
<span class="clear"></span>
</div>
<div class="footer-bottom">
<span class="copyright">© 2012 · AGT NoName ( Valid html5 ) All Rights Reserved</span>
<nav id="footer_menu">
<ul>
<li>Home</li>
<li>Works</li>
<li>Blog</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</footer>
<!-- end footer -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>
You might want to use twitter bootstrap as your theme for it includes a pretty nice and lighweight carousel and create a Photos model with a file and description fields then in your page implement somthing like this in locomotive:
{% for photo in contents.photos %}
<li>
{{ photo.fichier.url | image_tag }}
</li>
{% endfor %}
This is an example, don't just copy and paste since I'm using this with fundation as a theme and lightbox for photos.
Let me know if you need further explanation (I don't have time right now).
I think you should read this stuff carefully http://doc.locomotivecms.com/installation/getting_started
Also I have the clue you are mixing 2 things at this very moment:
CMS is explained as Content Management System therefor you will be able to Manage your Content with this System ;)
Ruby on rails is the main web development tool you use to build the housing of your website in the so called server side and client side.
So try to make a website in Ruby on Rails first. then add your CMS system to it and that should do it.

Resources