I want to check the position of loader (circle loading) to fix it at the middle of the screen.
But whenever I run the project in development mode, I can't see the loader for a long time as the page loads, content appears and the loader disappears.
Is there any method to see the loader for a longer time?
1st you need to provide code to be able to fix it
2nd did you try inspect element?
3rd you may wan to use jquery for that (its very easy)
Javascript file:
$(window).on("load", function() {
$(".loader .inner").fadeOut(500, function() {
$(".loader").fadeOut(750);
});
});
HTML file Make sure to put it under the body opening tag like this
<body>
<div class="loader">
<div class="inner"></div>
</div>
<!-- rest of the code .. -->
CSS file:
.loader {
width: 100%;
height: 100%;
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.loader .inner {
width: 100%;
height: 100%;
background: url(../images/loader.gif) center center no-repeat;
}
this is 1 of the simplest ways to do it (there is tons of ways)
hope it helps
Develop your loader as individual component which has no relation to your project flow, update it as per new requirements and then embed in your project.
As each component has different logic behind holding its state inside project, developing those component as standalone is better than looking for how to hold that specific state inside project.
You can use chrome to simulate internet speed directly.
See this: https://developers.google.com/web/tools/chrome-devtools/network-performance/network-conditions
Related
I'm trying to follow this tutorial in creating a slide in navigation, and I have the following stackblitz. The side nav is toggleing, but it is not expanding to fit the page. IIUC this CSS class is supposed to do the trick (In styles.css):
.container {
position: absolute;
top:0px;
left:0px;
bottom:0px;
right: 0px;
}
Thoughts?
.container {
position: absolute;
height: 100vh;
width: 100vw;
top:0px;
left:0px;
bottom:0px;
right: 0px;
}
let me know if that helps, it looks like it works but i don't know exactly what you want, and optionally
padding: 0;
margin: 0;
on the body element to remove the scroll bar.
I have run into many similar issues working with Angular Material. The issue stems from AngMat dynamically generating custom components and classes at render time, so it's often hard to catch these things up front.
If you open the dev tools and select the opened menu, you can find the custom component, <mat-drawer class="sidenav mat-drawer..."/>, This is the piece that is preventing the full width menu. If you manually apply a width: 100% on that component it will snap into place.
There are two approaches I've found, neither of which are ideal solutions. You can look into ::ng-deep and how to override angular material styling by disabling view encapsulation, this is a pretty deep concept when it comes to shadow doms and everything else associated but you don't need to know all of that to know that you can override the styles with the approach. However this will be deprecated at some point. The other approach is a hard-coded width:100% applied directly to the component. So something like mat-drawer { width:100% } in the top level stylesheet.
I know there is no point to do it, but I want to ask if it is possible to disable right click on an image with only css.
-What I want to do is to disallow naïve users from saving the images, from my WordPress website slider (MetaSlider)
You can use an overlay above the image to avoid such a thing :
.img-container {
position: relative;
}
.img-container:after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
}
<div class="img-container">
<img src="https://lorempixel.com/400/400/" />
</div>
This will avoid the usual save image action but any experienced developer will always be able to get the images (source code, inspect element, screenshot, etc).
You cannot prevent any user from saving the image whatever you will do because in all the cases the image is served with the web page and it's present in the client side.
No, you need JavaScript.
document.addEventListener('contextmenu', event => event.preventDefault());
I am trying to adapt my Blockly workspace inside a div. I want that if the page makes smaller, the div and the Blockly workspace inside of it would be smaller also.
I know that there is a way that Google provides in its documentation but I think it is a bit "dirty" and you have to use a lot of code to resize it.
Looking at the debugger of Google Chrome I saw that I can set a max-height to the svg object but I do not know how to change that height when you inject the workspace:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
Anyway, it will not solve my problem at all (just avoid that the workspace would be bigger than the div before resizing the page).
I also tried changing my blocklyDiv in which I inject the Blockly workspace to display: flex; but it does not change anything.
Is there a better approach than Google's example to resize the Blockly workspace?
Thanks in advance!
I used CSS Only to get the same behavior...
Just create a container for the blockly editor with any size you want and position relative, then put a blockly editor inside with position absolute.
HTML Code:
<section id="blocklyContainer">
<div id="blocklyDiv"></div>
</section>
CSS code:
#blocklyContainer {
position: relative;
width: 100%;
height: 100vh;
}
#blocklyDiv {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here you have a CodePen to see: blockly resize
As I said in above comment, I allow width resize while fixing the height in the blockly div.
<div id="blocklyDiv" style="height: 800px; width: 100%;"></div>
Here you have the JSFiddle to play with:
blockly workspace resizing.
I solved this problem by using Blockly.svgResize api, note that if the size changes with transition, you have to set a timeout function and call the api in the callback in timeout, the delay is the transition time.
I am a newbie and not expert with HTML and CSS.
I decide to do one project in which to take PSD and make it into HTML and CSS.
The file was 900 x 600 images with many layers and elements one above other.
I watched a few tutorials on how this happens, but never found a tutorial with so complex image.
To complete this task I use Brackets and use Live Preview all the time. When I was almost done I decide to run HTML file in some browsers and in all of the the result was the same- awful.
My Questions are:
How is possible to guide myself with Chrome Live Preview (Brackets) and everything is fine and still is, but when I open file in IE, Chrome and Safari the things are very very bad?
Am I wrong( or very dumb ) to use this very simple method of writing HTML and CSS.
My HTML look like this (Every div for himself and every div is equal):
<div id="woman">
<img src="/images/woman.png" alt="woman">
</div>
<div id="bgr-small">
<img src="images/bgr-small.png" alt="Beach">
</div>
<div id="lights" >
<img src="images/lights.png" alt="Projectors">
</div>
And my CSS like this (every div have id and modify them by id and positioning them by the method shown below) :
#woman {
padding-left: 20px;
position: absolute;
bottom: 35px;
left: 45px;
float: left;
z-index: 3;
}
#bgr-small {
position: absolute;
top: 147px;
bottom: 29px;
left: 115px;
right: 106px;
z-index: 2;
}
#lights {
position: absolute;
bottom: 723px;
left: 183px;
right: 170px;
}
Right now everything in the right position but only in Brackets Live Preview. In whole CSS i only use position: absolute; . Also I think that the fault is in this position: absolute;
How can I fix this? Where am I wrong? What i do wrong?
Here is a snippet from the PSD:
Snippet from PSD
Folder with my HTML/CSS/Images ( Where is my fault?)
How is possible to guide myself with Chrome Live Preview (Brackets) and everything is fine and still is, but when I open file in IE, Chrome and Safari the things are very very bad?
I think you should open up the PSD - and use the slice tool.
https://helpx.adobe.com/photoshop/using/slicing-web-pages.html
You can slice up the image in anyway you want - for example, if you are going to have a web-form (as I see in your screenshot), slice that section of the image in the PSD.
Once you're done slicing - you can save the file as a webpage - and move forward from there.
Am I wrong( or very dumb ) to use this very simple method of writing HTML and CSS.
You're not necessarily wrong, but I'd say its no where close to being the standard way of doing things. At least not anymore. As DA stated in the comments, PSDs are now generally used only as rough guides to create the wrappers and website entirely with HTML/CSS/JAVA/etc.
I hit a peculiar problem today which I haven't encountered or noticed before. While setting up a map in Here Maps 3.0, I noticed that if the browser window is "small", less than a full-screen one, during loading the map, also the map will stay small even if the browser window will be resized to a full-screen one.
How could I update the Here Maps map size to occupy as much space as allotted?
My arrangement is as follows and I wonder if the reason for this could be the relative divs. The reason I have them is that I'm experimenting with designs that have headers, footers, other text with and without scrolls bars (and it looks like scrolling the map gets a bit jittery if there's a scrollbar present on the page).
<style type="text/css">
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background: grey;
}
#main {
position: relative;
width: 100%;
height: 100%;
}
html, body {
overflow-y: hidden;
}
</style>
<div id="main">
<div id="mapContainer"></div>
</div>
try this after the map object initialization:
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
That should solve the problem.
The window resize event mentioned by support seems to be the main approach. However, in a templated page the window resize event sometimes occurs too soon and the resize() call then doesn't have the correct sizing yet - at that point you may need to find an 'AfterRender' event for the template library, or failing that set a timeout from the resize event to give the element resizing a chance to finish.