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());
Related
I am working on this Wordpress website in which Kona theme is used. Someone already did some changes in the original theme after the installation. Hence, now I am having this issue where my menu bar is appearing on the slider itself in desktop mode. In mobile/tablet mode, it is working okay. However, desktop mode shows the menu like this as shown in the image below. I am not much experienced in WordPress, hence, I am finding it hard to separate the menu strip and slider and make it responsive.
Can someone guide me what can I do in this regard?
This is the image. Please click on the link to see the image.
Edit: Here's the website link --> https://www.pinsandpearls.com/
That's for the link. In your CSS you have something like this:
#header {
z-index: 1501;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Instead, try it:
#header {
z-index: 1501;
width: 100%;
position: relative;
}
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
I am developing a website and i am making it RTL. the whole website is ok but i have a problem on 1 page
I am having trouble on making this page RTL.
Since other pages are ok, i am pretty sure the search form on this page is making this problem. even i used the following code to avoid scrolling but after clicking on search fields, the pages scrolls left again:
html, body {overflow-x: hidden; }
I might have discovered the problem. You have the following CSS declaration:
.single.options-hidden.selectator_element .selectator_input {
opacity: 0;
position: absolute;
left: -10000px;
}
That left: -10000px; seems to be the cause of your issue.
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'm displaying some alerts using angular-UI which is basically powered by bootstrap. However the issue is that the alerts can't be seen by the client if they are navigating to the bottom of the page. I would like to know how can I display the alerts always on top ( I think the right term is "on fixed position" )
How exactly do you want it to work? It might be easiest to use a library like PNotify or AngularJS-Toaster (plnkr).
If you want to do it yourself, you could put them in a special area. For something like this you can put the alerts in a div that is position:fixed (plnkr):
<div style="position: fixed; top: 0; right: 0">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
{{alert.msg}}
</alert>
</div>
There are various css position properties that will help you.
.class_of_your_alerts {
position: absolute; /* position: absolute rather than position: fixed
because you will be declaring left, right, top, etc. */
left: 0;
right: 0;
top: 0;
bottom: 0; /* now it covers the whole browser window because all absolute
positioning properties are set to 0. Tweak to your liking
using px or percentage */
z-index: 105; /* optional - if your application has a lot of layers that are
already absolutely positioned, you may wish to up the z-index
which is essentially the element stacking order for the current
dom node */
}
well, you should add or override alert styles with position:fixed if you want to "pin" it to the screen..
with additional properties left and top for positioning relative to viewport.