Use Chrome Dev Tools to overlay transparent Image in Browser window - javascript

I am looking for a way to overlay an Image over the current page I am viewing with the chrome dev tools. The overlay needs to be transparent and I must be able to interact with the page below the image layer.
Is that possible? It would be best, if I could paste a URL to the image with the rest of the code.
Thanks for your help :)

Yes, it is possible. The CSS property you are looking for is pointer-events: none.
function addOverlayImage(src, opacity) {
const img = new Image();
img.src = src;
Object.assign(img.style, {
position: 'fixed',
left: 0,
top: 0,
width: '100vw',
height: '100vh',
opacity,
objectFit: 'cover',
objectPosition: 'center center',
pointerEvents: 'none'
});
document.body.appendChild(img);
}
Usage:
addOverlayImage('https://i.picsum.photos/id/1/1440/900.jpg', 0.5);

Related

How can I bind:style with object syntax and multiple background images?

I want to bind css style with the object syntax to an image.
the style object contains the css property background refering to multiple background images. Unfortunately, these images are not displayed.
Template
<v-img
:src="require('../assets/background/bg_0.png')"
:style="bg"
></v-img>
Script
data() {
return {
bg: {
background: "url('~#/assets/pieces/animals/animal_1.png') no-repeat center, url('~#/assets/pieces/animals/animal_3.png') no-repeat center",
width: "300px",
height: "300px"
}
}
}
The properties for width and height are working, but the two images from background are not displayed.
What am i doing wrong?
Thanks for your help!
The background CSS is technically correct, but I believe your issue is the image path. That path prefix ~# won't work here because you haven't required the image so Webkit doesn't know about it. My recommendation would be to require the image first and then pass it as a constant to the bg object. That would clean things up by splitting code up over multiple lines and still allow you to use your path prefix for the dynamic URLs.
Something like this
const animal1 = require('~#/assets/pieces/animals/animal_1.png')
const animal3 = require('~#/assets/pieces/animals/animal_3.png')
data() {
return {
bg: {
background: `url(${animal1}) no-repeat center, url(${animal3}) no-repeat center`,
width: "300px",
height: "300px"
}
}
}

How to avoid transparent background using cropping plugin

I'm using this cropping tool https://github.com/fengyuanchen/cropper/. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.
here is my code:
<div id="imgWrap" style="max-height:400px;min-height:400px">
<img id="img" src="" /> // Image gets added dynamically
</div>
the javascript
var reader = new FileReader();
reader.onloadend = function () {
var img = $('#imgWrap img');
img.attr('src', reader.result);
img.cropper({
aspectRatio: 1 / 1,
autoCropArea: 0.65,
guides: false,
strict: true,
highlight: false,
responsive:true,
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom:true,
rotatable: false,
minCropBoxWidth:105,
minCropBoxHeight:105,
built: function () {
// cropper-container is the element where the image is placed
$('.cropper-container').cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
}
);
},
})
I tried to this: https://github.com/fengyuanchen/cropper#setcanvasdatadata but nothing happens
You can see an example here:
The natural size of the image is 1920x1200
This is what is generated after the image is added:
So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?
I had the exact same issue. In the Cropper doc it says to set the img max-width = 100%. I did this and it fixed the issue
https://github.com/fengyuanchen/cropper
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
Setting background property of cropper object to false fixes this problem.
You can set option:
aspectRatio: 1 / 1, // select area ratio 16:9, 4:3, 1:1, 2:3, free
viewMode: 3, // sketch image to fit the container
In case someone else gets a similar problem, I fixed mine by encasing the <img> its in own div. Cropper (at least in 2.0.1) defines the container with
$cropper.css((this.container = {
width: max($container.width(), num(options.minContainerWidth) || 200),
height: max($container.height(), num(options.minContainerHeight) || 100)
}));
and $container is created with this.$container = $this.parent(); so if you have padding, some other lines of code, etc it calculates its size along with those lines. Given the age of this though, I doubt OP can validate if that was his problem or not.
I had a same problem and solution was easy.
Everything what you need is setup your css height, width to your cropper selector instead of cropper but after init cropper. This is normal jQuery object and you call cropper init on him later. As latest thing you'll setup new visual variables.
var $area = $('div.crop-area-image'); // jquery object
$area.cropper(options); // init cropper
$area.css({height: '300px'}); // setup css
voala .. thats all!
Unfortunatelly
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
is not enough. This only fixes top and bottom empty space issue.
I had to add display: inline-block; to my container to clamp canvas and image boxes: https://jsfiddle.net/h9ktgxak/
Use fillColor option in the getCroppedCanvas method
Also, make sure to use full color name ('#ffffff') not ('#fff')
getCroppedCanvas({fillColor:'#ffffff'}).toBlob((blob) => {});
You call setCanvasData method on wrong element.
You should call it on the image:
...
img.cropper({
...
built: function () {
img.cropper('setCanvasData', {
left: 0,
top: 0,
width: 700,
height: 700
});
}
});
...

make a view scroll horizontally rather than vertically

I'm struggling to make a scroll view scroll sidewards rather than up and down in titanium. I'll need the solution for both iOS and Android.
var challengesScrollView= Ti.UI.createScrollView({
top: '60%',
height: c1Container.height,
width: '60%',
backgroundColor: 'yellow',
zIndex: 9000,
/* left & right work too */
contentHeight:'auto',
});
challengesScrollView.add(c1Container);
challengesScrollView.add(c2Container);
challengesScrollView.add(c3Container);
mainContainer.add(challengesScrollView);
UPDATE:
my mainContainer is the following:
var mainContainer= Ti.UI.createView({
left: '5%',
right:'5%',
top: '9%',
bottom:'15%',
});
and c1Container is:
var c1Container= Ti.UI.createView({
top:'1%',
width:'70dp',
height: '90dp',
zIndex:20,
left:'10dp',
backgroundColor:'#3b214a',
borderRadius: 5
});
and it contains the following:
var c1PicView= Ti.UI.createView({
width: '55dp',
height: '55dp',
top: '5%',
borderRadius: 5,
//backgroundColor:'pink',
zIndex:5
});
var c1Pic= Ti.UI.createImageView({
image:'girl.jpg',
width: c1PicView.width,
height: c1PicView.height,
zIndex:5
});
var cName= 'Mary';
var c1Name=Ti.UI.createLabel({
color: 'white',
text: cName,
font:{fontSize: '14sp'},
top: '60dp'
});
c1Container.add(c1PicView);
c1PicView.add(c1Pic);
c1Container.add(c1Name);
c2 is the same as c1 apart from the name
I'm not sure how to position c1Container, c2Container and c3Container etc. so that they will just add on the view sidewards. I can't give actual pixel, left or right positions because the scroll view could have up to 20 mini containers. All help appreciated
simple thing is that you just need to set layout property to horizontal.
In fact, you can use a ScrollView (and it should work both on iOS and android).
I've just tried this code which works just fine :
var win = Ti.UI.createWindow();
var challengesScrollView = Ti.UI.createScrollView({
top: '60%',
height: '30%',
width: '60%',
backgroundColor: 'yellow',
layout: 'horizontal'
});
win.add(challengesScrollView);
function addView() {
challengesScrollView.add(Ti.UI.createView({
left: '10dp',
width: '100dp',
height: '100dp',
backgroundColor: '#FF0000'
}));
setTimeout(addView, 2000);
}
win.addEventListener('open', addView);
win.open();
This code add a new View to the ScrollView every 2 seconds and, as you wish, the ScrollView's width change every time.
The property layout: 'horizontal' is used to place each view horizontally in the ScrollView. Thus, you don't have to calculate the absolute position of each view.
If this property doesn't solve your issue, maybe you should share more code (for example the construction of your containers). Otherwise, it will be difficult to help you ;)
use Horizontal scroll widget in android
For iOS:
UIScrollView scrolls in different directions depending on its contentSize property. If you make the contentSize's width larger then the actual width of the scroll view, it should scroll horizontally.

How do I put additional content into fancybox iframe

I am having trouble figuring out how to put some additional content into an iframe I am displaying with fancybox.
My basic setup:
$('.fancybox').fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'padding': 0,
'closeClick': false,
helpers: {
overlay: {
closeClick: false
}
}
<a class="fancybox" href ="http://my-iframe.example"/><img src="myimage.jpg" width="x" height="y" /></a>
So I need to put a couple of custom buttons and another javascript widget in under the iframe but on top of the background overlay.
I am just having trouble grasping what might be the best way to do this. I suppose I could put this content in a div and then display that div once the fancybox has completed loading? I am having trouble with the callback function though, so I just need some general direction on the best way to do this.
if using fancybox v2.x try with the call back afterShow to append the additional content to the .fancybox-inner selector like :
afterShow: function(){
var customContent = "<div class='customHTML'>My custom content</div>"
$('.fancybox-inner').append(customContent);
}
use CSS to style and position such additional content, e.g.
.customHTML {
position: absolute;
z-index: 99999; /* this place the content over the fancybox */
bottom: 0px;
right: 0;
background: #f2f2f2;
width: 200px;
height: 100px;
display: block;
}
If the iframe is from same domain then you can access the contents with contents()
$('#fancybox-frame').contents().find('h1').prepend('<a>Button</a>');
This will not be possible for cross domain cases.
If your case also require javascript widgets to be injected, that might be hard for you with injecting into DOM, you can better go for a different div shown along with iframe.
For that just make the div show up on onComplete event or onStart event, and then position it according to fancybox position, height etc.
To make it above overlay, give it some positioning, you should obviously, and give a higher z-index that overlay.
#fancybox-overlay {
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1100;
}
#mydiv{
position:absolute;
z-index:1101;
}
You can try data attributes (data-fancybox-title) and initialize fancybox to place it to the top like this:
$(".fancybox-video").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
}
});
You can find more info here: Fancybox Instructions
I needed a solution for FancyBox 1.3 and in my case I used the onComplete event to update the contents
<a class="iframe" id="fancybox-preview-card" href="about:blank"></a>
$("#fancybox-preview-card").fancybox({
'height': screen.availHeight * 0.9,
'width' : 600,
'onComplete' : updatePreviewContent,
'overlayShow': false
});
...
var contentUpdated = false;
function previewEcardTemplate() {
contentUpdated = false;
$("#fancybox-preview-card").attr("href", "about:blank").trigger("click");
}
function updatePreviewContent() {
// if content has already been updated then back out
if (contentUpdated)
return;
contentUpdated = true;
$.get('/template/mytemplate.htm', function (data) {
// Any mods to the html can go here
var ifrm = document.getElementById('fancybox-frame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(data);
ifrm.document.close();
})
}

Display fullscreen image, wait2 seconds, close image, open div - javascript/jquery

I 'm trying to open fullscreen image for 2 seconds and then close the image. After the image is closed, another element is shown.
$("#explosion-image").attr('src', %image_url%);
$("#explosion-image").css({
height:'100%', width:'100%', position:'fixed', top:0, left:0
});
$("#explosion-image").show();
$("#explosion-image").delay(2000);
$("#explosion-image").hide();
$("#explosion-image").attr('src', '');
$("#div-to-open").show();
This code only opens the image and than does nothing :(
Thanks for help in advance
try this fiddle out:
http://jsfiddle.net/maniator/JhcGb/
$("#explosion-image").css({
height: '100%',
width: '100%',
position: 'fixed',
top: 0,
left: 0,
display: 'none'
}).show()
setTimeout(function() {
$("#div-to-open").show();
$("#explosion-image").hide();
}, 2000)
delay() only really works on animations. You should use setTimeout instead. Even if it works, you need to chain the calls:
$("#explosion-image").show().delay(2000).hide();

Categories

Resources