scrollify and malihu-custom-scrollbar-plugin on touch devices - jquery-scrollify

I'm building a website with vertical split screens and full viewport sections. Each section is divided in half where every side can have overflow content. When theres no overflowing content, the page should scroll to the next section. When theres overflowing content, it first should scroll to the bottom/top and then to the next/previous section.
For scrolling through sections I'm using scrollify. For overflowing content and nice scrollbars I'm using malihu-custom-scrollbar-plugin.
On desktop everything works fine, but on touch-devices its very buggy. Unfortunately I cant figure out why and how to prevent this buggy behaviour.
I've created a Fiddle
Maybe someone could point me in the right direction?
HTML
<section class="section one" data-section="0">
<div class="content"><div class="inner"><p>Scroll down</p></div></div>
<div class="images"></div>
</section>
<section class="section two" data-section="1">
<div class="content">
<div class="inner">
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet,sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="images">
<img src="https://via.placeholder.com/640x320/124477/" />
<img src="https://via.placeholder.com/640x720/2288AA/" />
<img src="https://via.placeholder.com/640x520/AABB44/" />
<img src="https://via.placeholder.com/640x320/124477/" />
</div>
</section>
<section class="section three" data-section="2">
<div class="content"><div class="inner"><p>Scroll up</p></div></div>
<div class="images"></div>
</section>
CSS
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
img {
max-width: 100% !important;
height: auto !important;
vertical-align: bottom;
width: 100%
}
html {
font-size: 62.5%;
height: 100%;
position: relative
}
body {
height: 100%;
font-size: 2rem;
background: #202629
}
.section {
height: 100%;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
}
.section .content,
.section .images {
overflow: auto;
}
.section.one {
background-color: aqua
}
.section.two {
background-color: green
}
.section.three {
background-color: grey
}
.section .images {
background-color: lightblue
}
.section .content .inner {
position: relative;
padding: 5vw 0 0 0
}
.section .content .inner p {
padding: 0 5vw 5vw
}
SCRIPT
$(function() {
$.scrollify({
section : ".section",
scrollbars: true,
easing: "easeOutQuint",
standardScrollElements: "",
setHeights: false,
});
});
$(".content, .images").mCustomScrollbar({
theme:"light-thick",
contentTouchScroll: true,
scrollInertia:600,
scrollEasing:"easeOutQuint"
});

Related

Asciidoc long chapter titles in the header area overlaps the company logo

My problem is the representation of long {chapter-title} in the header area. The long chapter titles overlaps the company logo. It would be great if I could define a short version for the header area.
I'm using the asciidoctor-maven-plugin version 2.2.1 and asciidoctorj-pdf-plugin version 1.6.0 for pdf creation. The theme.yml has following definitions:
recto:
left:
content: '{document-title}'
right:
content: image:logo.png[width=200]
verso:
left:
content: '{chapter-title}'
right:
content: $header-recto-right-content
and example.adoc looks as folows:
= Lorem ipsum dolor sit amet
:doctype: book
:encoding: utf-8
:lang: en
:toc: macro
:toclevels: 2
:numbered:
toc::[]
== Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Use the <side>-columns property to assign a specific width for your header elements. Check Running Content (Header & Footer) for more info.
header:
recto:
columns: <25% =50% >25%
left:
content: '{document-title}'
right:
content: image:logo.png[width=200]

Turning URLs into embeds - ruby

I'm currently migrating a Wordpress blog to Contentful. During that migration I want to transform urls, e.g. https://www.youtube.com/watch?v=psil6MKUXeE, into embeds.
Let's say I got this text:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
https://www.youtube.com/watch?v=psil6MKUXeE
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.
https://www.youtube.com/watch?v=psil6MKUXeE
Dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
How can I extract multiple urls (in this case youtube) and replace them with the youtube embed code?
If I understand your question correctly, you want to replace https://www.youtube.com/watch?v=video_id with an iframe that holds your video.
You can do something like this:
url = 'https://www.youtube.com/watch?v=psil6MKUXeE'
value = url.match(/v=(.*)$/)[1]
target = "<iframe width='854' height='480' src='https://www.youtube.com/embed/#{value}' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>"
This will generate the links in the embeded video format that you want, implementing a script is a bit hard with the information you've provided, but putting this inside a loop that contains files and the lines to be replaced should no be hard. If you're working on Linux, you could even do this with sed on the whole repository.
TEXT = 'your text with links to youtube videos'
url_regex = /https:\/\/www.youtube.com\/watch\?v=(\w+)/
iframe_tag = '<iframe width="560" height="315" src="https://www.youtube.com/embed/\1?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
TEXT.gsub(url_regex, iframe_tag)
regex could be simplified to something like /https.+?v=(\w+)/ if all links in text goes to youtube.
you should change iframe_tag params to fit your requirments on autoplay, sizes etc.

how do you make img 100% of its parents height

I am working on a page with a lot of text on it, and I want to include an image. The problem is that the img is taller than the paragraph. Does anyone know how I can make the img 100% of its container?
.container {
width: 40%;
margin: 0 auto;
background: #000000;
color: #ffffff;
padding: 5px;
}
img {
float: right;
}
<body>
<p class="container">
<img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit
amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc
egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec.
</p>
</body>
The problem is that float takes the image otu of the standard flow, so you need to implement Clearfix:
1. Create the clearfix class in CSS:
Add the following CSS (Note: this it works for IE8 and higher. If you need to support older browsers, check the link above).
.clearfix:after {
content: "";
display: table;
clear: both;
}
2. Apply the clearfix to your HTML:
Add the clearfix class to the div that holds your image i.e. <p class="container clearfix">
Working Demo:
Note: I have your container width to 100% so that you can see the effect - otherwise in the small CodeSnippet window, the text was not short enough to cause the issue you describe.
.container {
width: 100%;
margin: 0 auto;
background: #000000;
color: #ffffff;
padding: 5px;
}
img {
float: right;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<body>
<p class="container clearfix">
<img src="http://via.placeholder.com/200x250"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper interdum risus eget ultrices. Morbi placerat ante nec accumsan tempus. Donec aliquam ex lectus, quis dignissim lacus tempor sit
amet. Proin varius dui sit amet enim semper, sit amet pharetra metus convallis. Cras at velit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim elit turpis, vel pretium leo rhoncus ac. Nunc
egestas arcu non nisi volutpat sagittis. Phasellus porttitor sollicitudin tellus, vel egestas nibh ultrices nec.
</p>
</body>

Add title to readmore button in tagged articles using joomla

I'm new to joomla and I have a problem in adding title of articles in read more button using TAG ITEMS.
I have two articles like this:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis elit augue. Aliquam mattis sem sed ligula mattis faucibus. Donec vitae pretium sem. Vivamus ipsum enim...
Read More
Dolor Sit amet
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas purus ex, ultrices eget ante ac, tempor suscipit nunc. Etiam viverra dolor id...
Read More
=========================================================================
What i want to do is add the title of each article to the readmore button, so it would look like this:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis elit augue. Aliquam mattis sem sed ligula mattis faucibus. Donec vitae pretium sem. Vivamus ipsum enim...
Read More: Lorem Ipsum
Dolor sit amet
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas purus ex, ultrices eget ante ac, tempor suscipit nunc. Etiam viverra dolor id...
Read More: Dolor sit amet
Can anyone help me with this problem?
Thanks!
In Content -> Articles -> Options, set "Show Title with Read More" = "Show".

My bootstrap image keeps cutting into my paragraph in mobile

I am trying to get an image to pull-right and display block when in mobile, but my image keeps cutting into my text. Can anybody help me figure out how to make the image appear on top, then the text?
Here is the link: http://o-pd.com/AP
<div class="clearfix">
<img src="http://o-pd.com/AP/img/John-Abraham.jpg" alt="John Abraham" class="pull-right img-responsive gap-left" width="200" height="200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
<br/><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia pharetra lacus, id pulvinar ligula molestie et. Duis in ultricies ipsum. Etiam tellus diam, eleifend in rutrum ac, facilisis quis dolor. Nulla ex elit, malesuada vel commodo ac, volutpat nec odio. Duis ac turpis dignissim, placerat lectus quis, venenatis dui.</p>
</div>
/*we will use media query to change the direction of img*/
#media (max-width:500px){
.pull-right{
float:left !important;
}
p{
clear:both;
}
}

Resources