I've been searching for how to write a bookmarklet which overlays the full screen with a layer filled with a color. Ie. Click the bookmarklet and a layer sits on top of the content.
The other trick I.am trying to solve is to.have a 'hole' aka a transparent part of the layer, eg 200px square in the middle of the overlay layer where you can see through to the original web page content underneath.
Are there any css wizards out there who could help me? Much appreciated... I'm a bit of a css newbie.
Cheers and thanks!!
I've been searching for how to write a bookmarklet which overlays the full screen with a layer filled with a color. Ie. Click the bookmarklet and a layer sits on top of the content.
How about this? The following works for me:
javascript:(function(a){a=document.createElement('div');a.style.position=
'fixed';a.style.left=a.style.right=a.style.top=a.style.bottom='0%';
a.style.zIndex='100000';a.style.background='white';a.innerHTML=
'overlay content goes here';document.body.appendChild(a);})();
I'm not sure about the hole though; sorry. You may have to create separate elements that form the shape, but that of course is an ugly solution.
Here is an example that only uses CSS
http://jsfiddle.net/QZV4D/
you can modify the hole by adjusting the % of the left and right overlays
Related
On this link is a very much draft map with photo popups at the orange dots.
https://www.victoriasforestryheritage.org.au/maps/forestlocations/locationtest3/index.html#7/-36.719/146.133
The map is produced from QGIS and with the qgis2web plug in using the Leaflet option.
https://www.qgis.org/en/site/
https://qgis2web-docstests.readthedocs.io/en/testing/
https://leafletjs.com/
The popup should work on hover, which it does. But on first hover the bounding box, if that is the right term, does not expand to surround the photo. With a mouse click it does surround the picture.
Obviously I would like this to come together at hover rather than the process requiring a mouse click after hover.
I have been trying to solve this on the basis that it may be a z-index issue in the leaflet.css file but to no effect. I also thought it may be a maxWidth maxHeight issue but no joy there either.
I obviously need some assistance because my coding knowledge is limited with css and almost non-existent with javascript.
The coding package for the map is available here:
https://drive.google.com/drive/folders/1teRbeTRYjBJzaxNeGoi-90wfiFhO-B8e?usp=sharing
and the leaflet.css file with z-index etc is included.
Any advice that points me in the right direction would be appreciated.
Richard
I am making a page on my mobile app that can crop images.
What I'd like to do is have a div overlayed on top of my image. This div will have a box within it, and that box should be transparent so that you can see the part of the image you want to keep. Outside the box, I want the image to be shaded.
This image below is an example of what I want to do, except instead of the fancy border I can just have a regular border.
Is this possible with css or javascript?
(Ps I know the below is a software program, but just imagine the picture is html and that's what i'm trying to accomplish)
Your best bet is to prob use 4 divs with an rgba(0,0,0,.5) all around the region
Very interesting question but unfortunately there is no easy way of doing it using HTML/CSS. There are several proposed solutions which you can find with bit of googling like this one Make part of a image transparent but i couldnt really understand that solution.
So how i'd go on about this and probably the simplest solution would be to initially have all the image greyed out (low opacity) then when the user draws the div on top of it by giving x, y, width, height.. then in that div, display the cropped part of that same image with normal opacity using the values of x, y, width and height.. you can get the exact part of the image to be displayed in the div. For this purpose, the following thread will help you:
CSS Display an Image Resized and Cropped
Idk how useful this method will be but that's one way to do it or atleast i'd do it that way.
I would like to know how to be able to "darken" the image of a html page without darkening the area I selected over that same image, just like this example http://odyniec.net/projects/imgareaselect/ . I studied the code but remained the same. Can someone help me? Thank you!
EDIT:
I was able to darken the body but unfortunately, even playing with opacity, the content inside the div referring to the selection remained faded to.
They are achieving this affect using four different div's to do the darkening. One for everything to the top, right, bottom and left. Don't have time to explain further right now, but that is what is happening on the surface level.
I am trying to build an example to highlight multiple image map areas on an html page for the iPad. The idea is similar to the magnifier feature that you notice when you tap and hold the mobile safari address bar. You can pan the magnifier around to go to a particular character. I am trying to leverage the same user experience to highlight image map "poly" areas. When I pan the magnifying glass, I want to scroll through the areas by highlighting them and making them active.
I am thinking of using the Jquery Maphighlight plugin alongwith a CSS/JS magnifier sample
http://persistent.info/files/20040508.magnifier/
http://davidlynch.org/projects/maphilight/docs/
The place I'm stuck is the actual scrolling between the areas and highlighting them automatically.
I was wondering if anyone has done something similar to what I'm trying to achieve.
Cheers!
Sameer
I couldn't quite conceptualise what you were wanting, but this may help in any case.
use the pseudo class :active in your css and in the tag add
In this demo I've simply used CSS transform to simulate the zooming, but it could be replaced with whatever you want. I think you will find a pure css option faster then any javascript.
http://jsfiddle.net/thurstanh/QEudm/5/
<body ontouchstart="">
css
img:active {
-webkit-transform:scale(2,2);
}
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.