I am trying to implement parallax effect in materialize framework http://materializecss.com/parallax.html in my project. I have been able to initialize and implement it.
How can I customize the speed of background image and content over it.
Here's my code :
<section class="parallax-container">
<div class="parallax"><img src="/static/images/home/img_background.jpg">
</div>
<h2 class="header">Parallax</h2>
<p class="grey-text">This is going to be my content over image.</p>
</section>
Parallax Initialization :
$(document).ready(function(){
$('.parallax').parallax();
});
I think it is not the best solution, but you can change the parallax scroll distance in materialize.js:
var parallax = Math.round((parallax_dist * percentScrolled));
for example with a multiplier:
var parallax = Math.round((parallax_dist * percentScrolled * 0.3));
Related
Given conditionally rendered div with drop-down menu. In order to calculate its position (to open it to up or down) I need to get its height and width.
Of course element doesn't get correct dimensions before the transition is done.
So question is - how do I turn off transition programmatically? Or how do I get future position of element without showing it?
{#if isOpened}
<div
bind:this={thisMenu}
use:clickOutside
on:click_outside={closeHandler}
class="dropdown absolute left-100p text-gray-600 z-10 w-full animated
rounded-lg"
style={finalStyle}
{isInit ? null : transition:slide }>
<slot name="list" />
</div>
{/if}
slide-transition uses getComputedStyle, so maybe that’s what you need. The following is copied from slide function in svelte’s repository (src/runtime/transition/index.ts). Slide-function sets those values from zero to initial value and back.
const style = getComputedStyle(node);
const opacity = +style.opacity;
const height = parseFloat(style.height);
const padding_top = parseFloat(style.paddingTop);
const padding_bottom = parseFloat(style.paddingBottom);
const margin_top = parseFloat(style.marginTop);
const margin_bottom = parseFloat(style.marginBottom);
const border_top_width = parseFloat(style.borderTopWidth);
const border_bottom_width = parseFloat(style.borderBottomWidth);
EDIT:
#bobfanger explained in comments how to make a custom mySlide-function and within that function there are those initial size values available. Here is a working example:
<script>
import {slide} from "svelte/transition"
let show=false
let d
function mySlide(el) {
let s=window.getComputedStyle(d)
console.log("mySlide",s.height)
return slide(el, {duration:2000})
}
</script>
<h1 on:click={()=>show=show?false:true}>Click me</h1>
{#if show}
<div bind:this={d} transition:mySlide
style="background-color:yellow;padding:10px;border:10px solid;">
<p>test</p>
</div>
{/if}
This is much simpler than to use onMount and visibility hacks.
This is my first question here on SO, so bear with me. I am developing a small project and I recently discovered one particular problem that I did not have before.
In my project I have a small map used for selection of different regions of my country, Romania. I implemented this with Raphael.js library and jQuery/UI. It looks like this:
http://s28.postimg.org/pzg3gaiod/output_Cuap_Ye.gif
The idea is when you select a region it gets dynamically coloured and added to a vector of regions. Simple. So for every region (that is declared as a path for the Raphael library to understand and paint) I have a small function:
function clickableMinimapRegions(st, regio) {
st[0].style.cursor = "pointer";
st[0].onclick = function () {
if ($.inArray(regio, regions) != -1) {
regions.splice($.inArray(regio, regions), 1);
st.animate({
fill: "#FFFFFF"
}, 0);
} else {
regions.push(regio);
st.animate({
fill: "#e6e6e6"
}, 0);
}
};
}
Then I have this HTML:
<ul class="element-menu drop-up">
<li>
<a id="toggle" class="dropdown-toggle bg-lime text-shadow button shadow">
<img src="../img/regions.png">
</a>
<div id="content" class="dropdown-menu bg-steel" data-role="dropdown">
<div id="minimap" class="minimap"></div>
</div>
</li>
</ul>
I use Metro UI CSS library, it's a simple drop-down menu. But it's behaviour is to autoclose on click. So for that I did:
$("#minimap").click(function (event) {
event.stopPropagation();
});
http://s28.postimg.org/trltqsu19/Captura3.png
This menu is at the bottom of the screen over a leaflet map, the map is the background and this drop-down is over the map. The thing is, if the map is not loaded, than it works fine. If the map tiles are loaded, something is happening that prevents the regions to be coloured when clicked.
Thank you.
SOLUTION FOUND:
Force DOM redraw/refresh on Chrome/Mac
The second parameter in jQuery's .animate() is the duration, in milliseconds. Having set it to 0, I'd rather say the behaviour you see in other browsers is wrong, and you should expect to have the property changed immediately with no animation.
st.animate({
fill: "#FFFFFF"
}, 0);
// ^---- duration
Try changing that to a bigger value (400 ms is the default)
Here's a fiddle showing the difference: http://jsfiddle.net/exrj973b/
I have a HTML5 canvas that I'm trying to draw clouds on. It works fine when running in Chrome when testing in Ripple, and when running in the emulator, but fails when running on actual device (10" Samsung Galaxy Tab).
For testing purposes I commented out almost all code and just drew a colored rectangle on the entire canvas so I could see the borders of the canvas. I want to see one yellow rectangle near the upper-left corner of the screen with a bit of whitespace on the left (comes out to about 15px) and some whitespace below the header (total distance from the top of the rectangle to the top of the window is 42px). Call the upper left corner of the rectangle at position (15,42).
However, the tablet draws the rectangle but also draws a copy of itself starting at the very upper left corner of the screen -- position (0,0). The 'correct' rectangle overlaps and appears on top of the 'bad' rectangle.
Here's an image of what I want it to look like.
Here's the HTML:
<div data-role="page" id="makeClouds">
<div data-role="header">
Menu
<h1>Make clouds</h1>
Journal
</div>
<div data-role="content">
<div id="coverageButtons">
Less clouds
More clouds
<p id="cloudCoverageDisplay"></p>
</div>
<div id="canvasDiv">
<canvas id="canvasClouds">Sorry, your browser is not supported.</canvas>
</div>
</div>
</div>
Here's the javascript:
$(document).delegate("#makeClouds", "pageshow", function() {
console.log("Loading page makeClouds.");
//drawClouds();
var canvas = document.getElementById('canvasClouds');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
});
And here's the CSS:
#canvasDiv {
z-index: 2;
}
#canvasClouds {
background-color: blue;
z-index: 20;
}
I'm at a loss here, any help would be greatly appreciated.
Had to set 'position: absolute' on the canvas (which is inside the div) and this fixed the issue.
Fixed from details in link from #AnupChaudhari.
https://code.google.com/p/android/issues/detail?id=35474
Scrolling a div that is within a .sortable() container will start dragging the div when you release the scrollbar
In the fiddle, there are 3 different sortables, 1 of them is a scrolling one
http://jsfiddle.net/wnHWH/1/
Bug: click on the scrollbar and drag it up or down to scroll through the content, when you release the mouse, the div starts to drag, which makes it follow your mouse around and there is no way to unstick it without refreshing the page.
You can use .mousemove event of jquery like this:
$('#sortable div').mousemove(function(e) {
width = $(this).width();
limit = width - 20;
if(e.offsetX < width && e.offsetX > limit)
$('#sortable').sortable("disable");
else
$('#sortable').sortable("enable");
});
I have create fiddle that works here http://jsfiddle.net/aanred/FNzEF/. Hope it meets your need.
sortable() can specify a selector for a handle much like draggable() does. Then only the matched elements get the click events. You specify the handle selector like this:
$('#sortable').sortable( {handle : '.handle'});
You already have most of what you need for the rest. The inner div on your overflowing element makes a suitable handle, like this:
<div style="height: 200px;overflow:auto">
<div class="handle" style="height: 300;">
blah
blah
blah
Then you need to restore the sortability of everything else. You'd think you could just give those divs the handle class, but it's looking for children, so you need to wrap all of them like so:
<div><div class="handle">asadf</div></div>
Modified fiddle
Supplement to SubRed's answer:
This worked perfectly for my needs. However, rather than rely on the width of the scrollbar being 20 pixels (as above), I used the code from:
How can I get the browser's scrollbar sizes?
This allows the code to handle different scrollbar widths on different setups. The code is pasted here for convenience:
function getScrollBarWidth ()
{
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
}
I've also used the width value for the height of the scrollbar and modified SubRed's code to suit. This now works with one or both scrollbars.
I also used code from:
Detecting presence of a scroll bar in a DIV using jQuery?
To determine the presence of either scroll bar and adapted the turning on/off of the sortable code accordingly.
Many thanks.
I have implemented a WebApp using SplitView - http://asyraf9.github.com/jquery-mobile/ - (and that seems to use the ScrollView component) together with jQuery Mobile. Everything works fine ...
Within the panel I have got a list of elements that should dynamically add elements when scrolling reaches the end of the list. On the iPhone I do not use SplitView but iScroll - http://cubiq.org/iscroll - and the following code to achieve this (and it is working).
HTML:
<div data-role="panel" data-id="menu" data-hash="crumbs" style="z-index: 10000;" id="Panel">
<div data-role="page" id="Root" class="Login" onscroll="console.log('onscroll');">
<div data-role="content" data-theme="d" onscroll="console.log('onscroll');">
<div class="sub">
<ul data-role="listview" data-theme="d" data-dividertheme="a" class="picListview" id="PortfolioList">
<!-- Content added dynamically -->
</ul>
</div>
</div>
</div>
</div>
Javascript:
var defaultIScrollOptions = {
useTransition: true,
onScrollStart: function() {
this.refresh();
},
onScrollEnd: function() {
if (this.elem && this.id) {
possiblyDisplayNextDocuments(this.y, this.elem, this.id);
}
}
};
iScrolls.push(new iScroll(document.getElementById("searchResults").parentNode, defaultIScrollOptions));
But when using SplitView I do not really know which event and which element to bind the listener on or how to get the scroll position. I already tried several combinations, but did not achieve good results. The best one was the following:
$("#PortfolioList").scrollstop(function(event) {
console.log("scrollstop: "+$("#PortfolioList").scrollTop());
});
My question is: Am I using the right event listener (since it already fires althgough the scrolling animation is still in use) and how do I get the scroll position?
dont use the scrollview plugin. its buggy. Use iscroll for both iOS phonegap apps as well as android. It works fine on both.
For detecting the scroll and loading new elements into the list, listen to the the 'onScrollMove' event of iscroll.
In the iscroll-wrapper.js add this-
options.onScrollMove = function(){
that.triggerHandler('onScrollMove', [this]);
};
then in your code attach a event handler to the onScrollMove event and handle adding new rows in that. onScrollMove will fire whenever you scroll.
In the handler you can find how many rows are there in your list and that which row is on the top of your view port using something like
iscrollScrollEventHandler:function(event){
var contentDiv= $('div:jqmData(id="main") .ui-page-active div[data-role*="content"] ul li' );
var totalItemsonList = contentDiv.length;
var cont =$('div:jqmData(id="main") .ui-page-active div:jqmData(role="content")');
var itemToScrollOn = totalItemsonList - x; // x is the item no. from the top u want to scroll on. u need to keep updating i guess
var docViewBottom = $(cont).scrollTop() + $(cont).height();
var itemOffset = $(contentDiv[itemToScrollOn]).offset();
if(itemOffset){
var elemTop = itemOffset.top;
if (elemTop <= docViewBottom){
event.data.callback();
}
}
}
and in the callback add the code to add new rows. hope that helps.