I'm using fullcalendar scheduler v.5.3.2.
Horizontal scroll seems not to be working in timeline view header, whith a custom view of 6 weeks (resourceTimeline).
Here is my code:
calendar = new FullCalendar.Calendar(calendarTimeline, {
initialView : 'resourceTimelineSixWeeks',
views : {
resourceTimelineSixWeeks : {
type : 'resourceTimeline',
duration : {
weeks : 6
}
}
}
});
And here is the error i'm seeing because the header is not moving at all:
displaced_header
I've tested it without a customview, and in IE 11, Chrome and Firefox with same bad result. ¿Is this a bug? ¿Someone who knows how to solve it?
Fullcalendar demo works fine: https://fullcalendar.io/docs/resourceAreaColumns-grouping-demo
I also haven't found any info about this problem here or in github.
Related
i've made this banner like screen that appears when my site is loaded, but here's the thing, i don't want no scrollbar while this opening animation it's happening, i only want to show the other components (the scrollbar and the whole site) once the gsap animation finishes, how could i proceed? thanks! (i tried to create a function to control those global elements, is it a way?)
So if I understand correctly you need the Banner to be displayed until the site is loaded. Maybe you are making some API calls or in general, you are planning to show the banner for let's say 3 sec and post that you want your actual components to be displayed.
You can try below approch:
export const APP = (): JSX.Element => {
const [isAnimationInProgress, SetAnimationState] = React.useState(true);
React.useEffect(() => {
// You can have your page load API calls done here
// Or wait for 'X' seconds
// Post that set the AnimationState to false to render actual components
setAnimationState(false);
})
return (
{
isAnimationInProgress && <Banner />
}
{
!isAnimationInProgress && <ActualComponent />
}
)
}
Regarding scrollbars, including overflow: hidden; in style for the banner should do the work if you are getting scrollbars for the Banner component.
I built a landing site using Angular. To make it SEO friendly, I had to do prerender it.
The landing page starts with an intro animation (using CSS' animation).
When I first load the page/full reload, the animation starts, and in the middle the app is being bootstrapped so ot restarts the animation again.
I was wondering if there's a way to prevent the animations to reoccur. I know that there are few questions that might be similar to mine, but none of them helped me.
I have tried to solve this issue by:
Adding initialNavigation in AppRoutingModule:
#NgModule({
imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled'})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
AddingTransferHttpCacheModule and BrowserTransferStateModule to AppModule, and ServerTransferStateModule to AppServerModule.
You could do it, however it might not be the answer you're looking for.
First let's see what happens when a SSR Angular app starts in the browser:
The browser receives the server-side rendered page. The HTML is rendered, including your animation, and it starts playing. Then at the bottom of the page, the angular script tags are parsed, and the JS for the app starts downloading.
While the app is downloading, the animation is playing.
When the app is downloaded, it bootstraps, and when it's bootstrapped, it renders the whole DOM again, including your animation. During this process, the old animated elements are removed from the DOM, and then new animated elements are added. The animation starts playing the second time.
You can go around this in 2 ways:
either don't start the animation until the app is loaded on the client (add the animation with a custom class when the app runs in a browser)
or move the animation outside of your app, embed it manually to the index.html - this way when the SSR re-render happens it will not be affected. (this way you can't have the element inside your <app-root></app-root> elements)
Hope this helps!
Have you tried to save any indication of initial loading, for example with cookies as suggested.
And then wrap the animated element with [#.disabled]="indication", it should look like this:
<div [#.disabled]="isInitialized">
<div #someAnimation>
...
</div>
</div>
It's actually fairly simple - all you need to do is:
get your initial (server side generated) page url
store it in the TransferState
when client page is reloaded, check if the url is the same
if so, fast forward animation immediately right to the end
ensure it's only done for the initial navigation (as the server- to client-rendered transition only occurs once)
I've created a simple directive for this purpose. Just put it on any element that has a css animation e.g.
<div class="slideInAnimation" ssrPreventAnimationReplay></div>
Here it is:
#Directive({
selector: '[ssrPreventAnimationReplay]'
})
export class ServerSidePreventAnimationReplayDirective {
static key = makeStateKey('ssrPreventAnimationReplay');
static subscription: Subscription;
constructor(
private el: ElementRef,
private transferState: TransferState,
private router: Router,
private renderer: Renderer2,
#Inject(PLATFORM_ID) private platformId) {
}
ngOnInit() {
if (isPlatformServer(this.platformId))
this.transferState.set(ServerSidePreventAnimationReplayDirective.key, { url: this.router.url });
else {
let value = this.transferState.get(ServerSidePreventAnimationReplayDirective.key, null);
if (value && value.url == this.router.url) {
this.preventAnimation();
this.cancelOnNavigation();
}
}
}
ngOnDestroy() {
if (ServerSidePreventAnimationReplayDirective.subscription)
ServerSidePreventAnimationReplayDirective.subscription.unsubscribe();
}
private preventAnimation() {
this.renderer.setStyle(this.el.nativeElement, 'animation-duration', '0ms');
this.renderer.setStyle(this.el.nativeElement, 'animation-delay', '0ms');
}
private cancelOnNavigation() {
ServerSidePreventAnimationReplayDirective.subscription = this.router.events.subscribe(async event => {
if (event instanceof NavigationStart)
this.transferState.remove(ServerSidePreventAnimationReplayDirective.key);
});
}
}
You can disable angular animations in a similar fashion.
Hope it's of help to someone.
Import NoopAnimationsModule to the app.server.module.ts
#NgModule({
imports: [
NoopAnimationsModule,
For fancybox 3, I can manually create a group of objects with a pattern
{
src : '' // Source of the content
type : '' // Content type: image|inline|ajax|iframe|html (optional)
opts : {} // Object containing item options (optional)
}
How can I specify srcset in this case for display different images based on viewport width?
You can use image.srcset option to set srcset attribute, example:
$.fancybox.open({
src : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720',
type: 'image',
image : {
srcset : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=large_1600%C3%97800&w=1600&h=960 1600w, https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720 1200w, https://placeholdit.imgix.net/~text?txtsize=33&txt=small_640%C3%97427&w=640&h=384 640w'
}
});
Demo - https://codepen.io/anon/pen/aRWpQp?editors=1010
Note: there is an inconsistency across browsers about how this should work, for example, try that demo using Chrome and Firefox, and try resizing window. Firefox works as you might expect but Chrome probably not. Therefore it is planned for v4 to implement responsiveness a bit differently.
So far, I've found a temporary solution. In JSON I added srcset:
var gallery = {
"src" : "https://source.unsplash.com/random/400x300",
"srcset" : "https://source.unsplash.com/random/400x300, https://source.unsplash.com/random/800x600 2x"
}
Then used afterLoad:
$.fancybox.open(gallery, {
afterLoad: function (instance, slide) {
if (slide.srcset)
slide.$slide.find(".fancybox-image").attr("srcset", slide.srcset);
}
});
Everything seems to be working correctly.
Demo - https://codepen.io/anon/pen/oaWBMe?editors=1010
If I am wrong, please correct.
Here is my problem :
- i have an fancybox 3 gallery intro an iframe
- when i click to one of the link, i would like the image showing on top of the parent of my iframe
I have made many researches and tried several solutions
I found this : call Fancybox in parent from iframe
but it only provide a solution for fancybox 2
Here is my code on the iframe :
$(document).ready(function() {
parent.$(".fancybox").fancybox({
href: this.href
});
});
Please note
i have included jquery and fancybox 3 both in the iframe and the parent
fancybox works like a charm independently in the iframe and the parent, but cannot be called from the iframe to be displayed in the parent (my problem)
i have also tried :
$(".fancybox", top.document).fancybox
$(".fancybox", window.opener.document).fancybox
$(".fancybox", window.parent.document).fancybox
None of these worked
Thank you very much for your attention
I hope you red the docs while doing "many researches". From the docs:
To access and control fancybox in parent window from inside an
iframe:
// Adjust iframe height according to the contents
parent.jQuery.fancybox.getInstance().update();
This should give you a clue that you can use parent.jQuery.fancybox to use API from the parent page.
Then, API section should give you a clue how to open image gallery programmatically:
$.fancybox.open([
{
src : '1_b.jpg',
opts : {
caption : 'First caption',
thumb : '1_s.jpg'
}
},
{
src : '2_b.jpg',
opts : {
caption : 'Second caption',
thumb : '2_s.jpg'
}
}
], {
loop : false
});
So, combining these two snippets should give you the answer.
How does URL fragments interact with CSS? I have a page, say: http://example.boom/is_this_a_bug.html. The code for the page is shown in https://gist.github.com/3777018
When I load the page with the URL like that, the .tab-pane elements are not showed because they overflow their container, and it has an overflow: hidden property.
However, if I load the page by appending a valid fragment (#00) to the URL, then the .tab-pane gets visible, just as if the left:100% was not taken into account. Pressing the button just removes and resets left:100%, and then I get the overflowing tab-panes.
This happens in both Firefox 15.0.1 and Chromium 18.0.1025.168 (Developer Build 134367 Linux) Ubuntu 12.04.
Any ideas why this is happening? Is this a bug, or is documented elsewhere?
Best regards,
Manuel.
When you load a page with a fragment identifier in the URL, if that fragment identifier matches the ID of an element on the page the browser will scroll the page to bring that element into view.
An alternative can be use javascript applied styles.
(function hashStyle() {
if (window.location.hash == '#COLOR') {
var css = document.createElement('style'),
s = document.getElementsByTagName('script')[0],
styles = 'body { background-color: #b0c4de; }';
css.type = 'text/css';
if (css.styleSheet) {
css.styleSheet.cssText = styles;
} else {
css.appendChild(document.createTextNode(styles));
}
s.parentNode.insertBefore(css, s);
}
})();