I want to fade in an element using a javascript tween library. When loading the Sveltekit page for the first time, the DOM elements I want to animate flashes for brief moment before onMount kicks in and I can hide it with javascript, and tween it like I want.
This flashing effect is not desired.
It is possible to hide this with using the following code:
<script>
import { onMount } from 'svelte';
let ready = false;
onMount(() => ready = true);
</script>
<div class="always-visible">
{#if ready}
<div class="visible-on-mount">...</div>
{/if}
</div>
But this will hide the content permanent if the browser does not support javascript. I want the content to appear when javascript is not available.
Related
I have a simple react app, and im trying to add a simple loading overlay.
I saw the most common usage is react-loading-overlay.
My main app.js structure looks like that, I have a simple menu and a deck.gl map
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
If I get it correctly, to use the loading overlay, I need to do something like that (using true for testing):
<LoadingOverlay
active={isActive}
spinner
text='Loading your content...'
>
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
</LoadingOverlay>
But once I do that, my entire app page, instead of filling the whole screen, just takes the top 20% of the screen (and the rest is empty white).
Why wrapping my component with the LoadOverlay component causes the whole page to look weird?
Do I need to "play" with the CSS for the LoadOverlay component?
I am looking for the best way to inject a dynamically built image as my background image. I can build the image and I can display it as a div but I want it as the background of my body.
<div className="App">
<mycomonent />
</div>
works but it is not what I want
<body styles="background-image: {mycomponent}"></body>
You can change using regular DOM object within React.
document.body.style.backgroundImage = `url("https://www.placecage.com/c/460/300")`;
Working Demo
I am building a cross platform application using Angular Kendo Mobile.
I have a Kendo list using "kendo-list-view".
<div kendo-list-view >
I want to get an event when user scrolls this list, in my controller.
I also tried to get the scroll event by using pure angular code, as mentioned in below question.
Bind class toggle to window scroll event
But in my case nothing happens and code inside the directive is not getting called.
UPDATE
I have my HTML with list view as below:
<kendo-mobile-view id="myListScreen" k-transition="'slide'" k-title="'My List'" k-layout="'default'" ng-controller="myListCtrl">
<kendo-mobile-header >
<kendo-mobile-nav-bar style="background-color: gray">
<kendo-view-title style="color: white"></kendo-view-title>
<kendo-mobile-button k-rel="'drawer'" href="#navDrawer" k-align="'left'"><img src="img/menu.png"></kendo-mobile-button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div class="myListMainDiv">
<div kendo-list-view
id="myListViewDiv"
class="myListViewDiv"
k-template="templates.myListViewItem"
k-data-source="myService.listDataSource"
ng-show="showListSelected"
></div>
</div>
<script id="myListViewItem" type="text/x-kendo-template">
<div id="{{dataItem.id}}" ng-click="onSelected(dataItem.id)">
{{dataItem.name}}
</div>
</script>
</kendo-mobile-view>
I am loading this page in my root page when user selects to navigate to this page using kendo.mobile.application.navigate("MyList.html");. And when controller for this page loads I have created list using new kendo.data.DataSource and I have attached new kendo.data.ObservableArray to my data source.
You can get the scroll event from the Scroller of your Kendo Mobile View,
For example if you have a view with id="myListScreen":
var kendoView = $('#myListScreen').data().kendoMobileView;
var scroller = kendoView.scroller;
scroller.bind("scroll", function(e) {
console.log(e.scrollTop);
console.log(e.scrollLeft);
});
You can find more info about the kendo scroller here on their documentation
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
My requirement is to display a spinner image on every $route change request and hide the spinner image on success or error. I am using angular-animate.js to slide the view after the $route success
<div ng-cloak ng-controller="sliderController">
<div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}">
</div>
</div>
I need to hide to progress image (Spinner) after the new page is loaded (ie : on complete page animation)
Any help would be appreciated.
In your code, I don't see anything that is showing what you're doing for the spinner. So this will be just a stab in the dark at what you're looking to accomplish.
One option is to use an app-wide progress bar. Think of how YouTube does page transitions. The Angular Loading Bar is a good solution to accomplish this. I think it uses $http interceptors to do it (good explanation of interceptors).
Another option would be to use $routeChangeStart and $routeChangeSuccess that are part of the $route provider. You can simply have a $scope variable that triggers whether or not the image should be visible.
$scope.$on("$routeChangeStart", function(event, next,current) {
$scope.spinnerDisplayed = true;
});
$scope.$on("$routeChangeSuccess", function(event, next,current) {
$scope.spinnerDisplayed = false;
});
And then your HTML would just have a basic ng-show/hide
<div ng-show="spinnerDisplayed">
<!-- some spinner image here -->
</div>