Consider de following codepen:
https://codepen.io/Zimutes/pen/NWYXYqa
ScrollTrigger.create({
markers: {
startColor: "grey",
endColor: "grey"
},
trigger: section,
start: () => (x - 0.5) * innerHeight,
end: () => (x + 0.5) * innerHeight,
onToggle: (self) => self.isActive && setSection(section)
});
I need the "slides" section to change onscroll, being that those sections are absolute positioned. I obviously still have to work that out, since it's not working properly.
But more importantly, inside each section I need to have images rendered into a canvas, so that it creates an animation. "Slide 2" must come into viewport only after all the images of "Slide 1" are shown, the scroll animation reached the end.
I'm not really sure If I whould try this using timeline, or containerAnimation, or the best way to go with this. How to make the slide change trigger only after all the images of the previous section were shown?
Thanks fro your help.
Related
EDIT: reason for this request. This edit has been added when the solution has been found for the sake of describing my needs. I had a Carousel that showed a logical sequence step 1, step 2, step 3.. That carousel is not a top of page, so I want it to stay stopped / paused until the user sees it and when it will see it, as first, I want the user to see the first slide, step 1. Nevertheless, some users (and they are not few, believe me) don't know about carousels and sliders, so I don't wanna miss their view on the subsequent slides. This is the reason for what follow.
I'm wondering about this
I have a bootstrap 3.1 carousel that is not at top of the home page.
Instead you "reach it" when scrolling down some "bootstrap' rows".
Well I'd like it to keep the carousel stopped / paused until the user will scroll the page down to where the carousel is placed (let's say the carousel height is 500 pixel, when at least the first top 150 pixels are entered in the viewable area)
when those 150 pixel have been scrolled in, the pause / stop should turn to "play" and so, if the pause between each slide is 5000 msec, after 5000 msec the next slide should turn.
According with this solution it is matter of javascript but it is not what I'm seeking for also excuse me but currently I'm not so strong with javascript and jquery, so thank you for any hint with some explanation.
EDIT 01
This script looks to be the correct and also a great solution :-), especially reading the comments at bottom of that page, but as stated above, I miss the knowledge to properly take advantage of it, thank you for any hint.
Here's a method using Intersection Observer API; it will fail silently for IE and other unsupported browsers.
setTimeout(function() {
if (IntersectionObserver === undefined) return;
const carousels = $(".carousel");
if (carousels.length === 0) return;
const RATIO = 0;
// You can set a intersection percentage, such as 0.25 for 25% visible, but
// if you want pixels, I'm using `rootMargin` in the options below
var observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function(entry) {
jQuery(entry.target).carousel(entry.intersectionRatio < RATIO ? 'pause' : 'cycle');
});
}, {
root: null,
rootMargin: '-150px 0px', // 150px visible on top or bottom of viewport
threshold: RATIO
});
carousels.each(function () {
observer.observe(this);
});
}
});
I went for the long path, self answered myself.
I've tried several plugins, but they were not effective or either they were breaking the Carousel engine.
Researching so much, finally I've landed on this jQuery plugin
http://www.jqueryscript.net/other/jQuery-Plugin-To-Determine-If-An-Element-Is-In-the-Viewport-Viewport-Checker.html
It works pretty fine, straight and as expected and there is a bonus included: the offset I was seeking for!!! (yeeeh!)
Pretty easy to implement
<script src="viewportchecker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel('pause'); /** load page with carousel paused
$('.carousel').viewportChecker({
offset: 200, /** wait for the first 200 pixel of the element
to enter in the viewport
callbackFunction: function(elem){
setTimeout(function(){
$('.carousel').carousel(''); /** remove pause
},500);
}
});
});
</script>
"thank you" to myself :-)
I suppose this would also help the problem when the viewport cuts the carousel in half. ie: With a carousel at the top of the page and you scroll down, forcing the top of browser window to show only the bottom half of carousel.
Currently, when the carousel cycles, the carousel images load to the top of the viewport, not the top of the carousel container.
When you scroll back up, the carousel only displays half the image and the top half is grey. This is very annoying. Will try this to see if it fixes.
Please see here
When the browser is resized, the Google Map and the grid are correctly resized. I want the Google map to always take up 100% of the page height.
I want the grid to take 70% and the chart to take up the rest.
However, the chart is not being resized vertically. Its as if there is a hard coded height somewhere
This is not the same kind of problem that other people have had where the chart does not resize at all, because if you make the browser wider and narrower the chart does resize horizontally
I call the code below when the window is loaded and when the window is resized
$(window).resize(function() {
resizeGrid();
var chart = $("#kendoChart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if (chart) {
chart.redraw();
}
});
Also when the window is loaded
$(document).ready(function() {
var chart = $("#kendoChart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if (chart) {
chart.redraw();
}
}
I have tried changing the height of the associated CSS class to varying percentages and nothing changes the height of the chart
As you can see from the markup below, I have no hard coded height here
<div id="chartContainer" class="chartContainer" >
#(Html.Kendo().Chart<IMeterProfileData>()
.Name("kendoChart")
.PlotArea(plotArea =>
plotArea.Margin(0)
)
.Legend(legend => legend
.Visible(false)
)
.AutoBind(false)
.Series(series => { series.Column(model => model.Consumption, categoryExpression: model => model.PeriodDateTime).Name("Consumption"); })
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Minutes).BaseUnitStep(30)
.Labels(label => label.Step(48).Rotation(-90).Format("dd/MM/yyyy"))
.Axis.MajorGridLines.Visible = false
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.Line(line => line.Visible(false))
.Title("Consumption kWh")
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
).ChartArea(area => area.Border(1, "#cdcdcd", ChartDashType.Solid)
) )
</div>
Has anyone ever come across this?
Paul
To quote the developers,
"The size of the Chart can be set initially either in the configuration or by specifying the size on the parent element. For example:
$("#chart").kendoChart({
chartArea: {
width: 200,
height: 200
},
....
If you wish to change the size dynamically, you should also repaint the Chart by using the refresh or redraw methods after the change."
I'm unsure whether this supports percentage heights, only trying will tell. You'll probably have to calculate the height in JS whenever the page size changes if you want a dynamic page that fits the window.
I'm using Flexslider for a project of gallery and I want to modify the navigation system.
On keypress/swipe/click on arrows, four images displayed disappear and are replaced by four new.
Is it possible to modify the behavior of the navigation to move images one by one ?
Thank you very much for your help !
Z.
You may want to use property move, which is defined as
//{NEW} Integer: Number of carousel items that should move on
animation. If 0, slider will move all visible items.
So, your code will look like this
$(window).load(function() {
$('.slidewidget1').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 210,
controlNav: false,
itemMargin: 0,
slideshow: false,
move: 1,
minItems = 4,
maxItems = 4
});
});
plus, of course, your customization of width, etc.
Documentation
Problem
I use the flexslider carousel to a number of images to show. What I want now is, when the browser has a certain width drop a break, which for example is incidental to 768px 2 images are shown. Currently you see an image at a certain width but half and wants to these points with javascript / jquery to give many pictures there must fully show.
So my question is, how I can make an if statement for when the browser width is for example 768px width, is must show two images...
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 320,
itemMargin: 0,
minItems: 2,
maxItems: 5,
start: function(slider){
$('body').removeClass('loading');
}
});
Check code on JSFiddle
You can use an if statement for widths like this:
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
... and to contain that, you might like to combine your document ready function with a window resize function.
$(document).ready(myfunction);
$(window).resize(myfunction);
function myfunction() {
// Pace the if/else here, do whatever
}
In terms of showing two images it think you should be able to be achieve that by setting slide widths and offsets in the flexslider function - or with css. here are the options i'm talking about:
itemWidth: 490, // or whatever is 1/2 of your width
itemMargin: 30, // experiment here!
minItems: 1, // or 2
Here's an edited version of your JS fiddle demo! http://jsfiddle.net/tM2a8/
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();