How to use joehewitt scrollability? - jquery-mobile

Can anyone help me out in implementing joehewitt's scrollability plugin.(https://github.com/joehewitt/scrollability.git)
I am trying to develop a mobile web app!
Thanks in advance!

Right so,
1)Include the javascript file and the css file (its in the static folder)
2) Head to http://scrollability.com/
and following the structure create the two divs:
<div id="overflow">
<div id="scrollysection">
</div>
</div>
With the following CSS
#overflow
overflow:hidden
position:absolute
top:0px
left:0px
width:100%
height:100%
#scrollysection
position:absolute
top:0px
left:0px
3)Then you need to apply the fix here: https://github.com/joehewitt/scrollability/issues/29
To get the code running just comment out or remove all of the exports
stuff (lines 77-84). Then on line 94 where require is mentioned, just
pull the two lines of code out of that ready function and comment the
ready function out.
Thats what I did and it worked.

Have a look at the source code of: http://www.uponahill.com/ It is done by Joe Hewitt and uses scrollability.

Related

Share icons in blogger post

I've managed to replace some of the icons on the page, but I'm having issues with the ones related to blog posts, the icons you click to share the posts in your social network pages.
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
That's one of the codes, and here is the blog page: https://eliezerh.blogspot.com/2018/10/o-empreendedor-destemido-e-um-mito-por.html
As I understand, and managed to change some of those icons in a different section, you use the piece and replace, as example facebook with whatever icon you want instead... but nothing I do seems to work.
Can anyone please give me ideas?
Thanks so much for your support.
Best,
Eliezer.
You need to identify font-family property as FontAwesome for .fa:before like the following
Add to CSS code
.share-box .fa:before {
font-family: FontAwesome;
}

How do I escape HTML for th:errors?

Let's say I have:
<span th:if="${#fields.hasErrors('firstName')}" class="color--error" th:errors="*{firstName}"></span>
How do I escape the text if the error text contains HTML? I know for normal text, we can use th:utext.
As of 3.0.8-SNAPSHOT, Thymeleaf-Spring has th:uerrors.
See this GitHub issue for the discussion: https://github.com/thymeleaf/thymeleaf-spring/issues/153
And this change log for 3.0.8: http://forum.thymeleaf.org/Thymeleaf-3-0-8-JUST-PUBLISHED-td4030687.html
th:errors is just a shortcut. You still use th:utext for this, you just have to manually output your errors. In your case, the code could look something like:
<div th:if="${#fields.hasErrors('firstName')}" th:each="err: ${#fields.errors('firstName')}" th:utext="${err}" class="color--error" />

Elements in KSS Styleguide won't get styled

I use kss-node and trying out the simplest project. It just uses the example from the Quickstart guide.
The css is in source/style.css
// Hard rules
//
// Markup: <hr>
//
// Style guide: hard-rule
hr {
border-top: 5px solid #999;
}
I then run
npm-exec kss-node --source source --destination styleguide --css ../source/style.css
The first problem was that the --css option needs the relative path from where the styleguide later is.
But the hr element still looks the same and not 5px thick.
The file is included in the html but Dev Tools says "0 rules" are applied
Could it have something to do with the "//" comments you are using in the css file? Try using a preprocessor and a styles.scss file as the source and then include the styles.css file that sass generates which won't have invalid "//" comments in them.
This seems to working
`
/*
Hard rules
Markup:
Style guide: hard-rule
*/
`
https://github.com/rcaracaus/kss-test
I reread the the documentation to kss-node. The recommended way seems to create a kss template and add the stylesheet in there.
I took the repo of Robert and executed
npm-exec kss-node --init my-template
Then I added following line to my-template/index.html
<link rel="stylesheet" href="../source/styles.css">
Apparently the styles.css file won't be copied to the styleguide directory.
Although this doesn't answer my original question. I feel like it should work without a custom template.
But this works for me.

How to send the PDF output to browser print option (CTRL+P)

I am using TCPDF library to generate some reports, and i want to send the PDF file to print option of browser as simple we press CTRL+P, I need this because it is slip.
I used all parameter for Output but it is downloading the file directly.
$pdf->Output('slip.pdf', 'I');
I also placed the F,D,S,E,FI and FD instate of I but it doesn't work. And I also used header
header('Content-Type: application/pdf');
$pdf->Output('example_001.pdf', 'FD');
but again it doesn't work. Any solution? Please!
Add
$pdf->IncludeJS("print();");
just before $pdf->Output...
You need something like the example below. You would need to intercept print request (print automatically on page load, print button click, etc.) and then call printTrigger function.
<html>
<head>
<title>Print PDF</title>
<script>
function printTrigger(elementId) {
var getMyFrame = document.getElementById(elementId);
getMyFrame.focus();
getMyFrame.contentWindow.print();
}
</script>
</head>
<body>
<iframe id="iFramePdf" src="http://pdfurl.com/sample.pdf"></iframe>
...
</body>
</html>
What you are trying to do is not within the specification of the TCPDF API.
http://www.tcpdf.org/doc/code/classTCPDF.html#a3d6dcb62298ec9d42e9125ee2f5b23a1
I believe you would need to use JavaScript to implement this feature the way you are proposing.
Add $pdf->IncludeJS("print();"); just before $pdf->Output...
It's working for me.

Sublimetext 2 and rails html.erb if then else issue

Love Sublime text 2, but somehow can't get it to do 'if then else' properly within an html.erb template.
It correctly identifies the files as 'HTML (Rails)', but when I do 'if' followed by tab
I get:
<?php if (condition): ?>
<?php endif ?>
I've seen this reported a few other places, but not sure how to fix as new to Sublimetext.
Any tips much appreciated
I added a couple of custom snippets to cover if/elsif/else in erb files.
if-erb.sublime-snippet:
<snippet>
<content><![CDATA[<% if ${1:true} -%>]]></content>
<tabTrigger>if</tabTrigger>
<scope>text.html.ruby</scope>
<description>if (ERB)</description>
</snippet>
elsif-erb.sublime-snippet
<snippet>
<content><![CDATA[<% elsif ${1:true} -%>]]></content>
<tabTrigger>elsif</tabTrigger>
<scope>text.html.ruby</scope>
<description>elsif (ERB)</description>
</snippet>
else-erb.sublime-snippet
<snippet>
<content><![CDATA[<% else -%>]]></content>
<tabTrigger>else</tabTrigger>
<scope>text.html.ruby</scope>
<description>else (ERB)</description>
</snippet>
You have php autocomplete there.
Install ruby and rails plugins for rails development.
More at http://linuxrails.blogspot.com/2012/05/sublime-text-2-setup-for-rails.html
Well, the only way i could make it work was by deleting the php snippets and adding some of my own.
Steps:
1- Go to Preferences -> Browse Packages.
2- Go inside PHP folder.
3- Delete the else/elsif snippets.
4- Create your own like the following example:
<snippet>
<content><![CDATA[
<% else %>
]]></content>
<tabTrigger>else</tabTrigger>
<scope>text.html - source</scope>
</snippet>

Resources