Develop Reference

Use Chrome Dev Tools to overlay transparent Image in Browser window

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);

Titanium - Textarea within a ScrollView

I am trying to create a textarea box within a scrollview. The problem is that it works in iOS, but in Android, when typing multiple lines within the textarea, I cannot scroll up and down to view what I have typed. I know in native Android that you can provide a maximum number of lines and the scrollbars to allow in the view XML file that allows a scrollable textarea within a scrollview, but is there a way to do something similar or a different way of doing this for Titanium?
Here is the code which I am using:
var win = Ti.UI.createWindow({
title: 'Test',
backgroundColor: 'transparent'
});
var view = Ti.UI.createScrollView({
top: 10,
left: 10,
right: 10,
});
var ta = Ti.UI.createTextArea({
top: 5,
left: 5,
right: 5,
height: 400,
backgroundColor: '#AA8BC9'
});
var btn = Ti.UI.createButton({
top: 800,
left: 10,
right: 10,
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
backgroundColor: 'FF00CC',
text: 'OK'
});
view.add(ta);
view.add(btn);
win.add(view);
win.open();

Kibria, This is the problem in old titanium sdk. I also facing this problem with tableview and scrollview in android. I hope this problem can resolve in new titanium sdk.
The alternative solution is you need to set scrollview layout to vertical. and your TextArea height set to auto and then add your button. In this way your scrollview and textarea works perfect for you.

Make div 'fullscreen' onClick?

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?

DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});

$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})

What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});

I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});​
jsfiffle: http://jsfiddle.net/P6tgH/

$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/

This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});

Appcelerator Titanium: Controlling Views Height and Top Automatically

var Section1 = Titanium.UI.createView({
top:0,
height: 'auto',
});
var Section2 = Titanium.UI.createView({
top:0,
height: 'auto',
});
I have two views and these two views has some buttons and TextFields which comes dyanmically. How can i control the Section 2 that it does not over lap the Section 1 View when its height gets increased.

I don't know if there's a better way, but I had a similar issue recently, which I tentatively solved like so
var Section1 = Titanium.UI.createView({
top:0,
height: 'auto',
});
// Add other views to Section1
var Section2 = Titanium.UI.createView({
top: Section1.toImage().height,
height: 'auto',
});
I think in your case the height will only be accurate after you've added your other views and objects to it.

If you are adding your views directly to the Ti.UI.currentWindow then you can just set layout of the Ti.UI.currentWindow to 'vertical' and the heights will automatically adjust
Ti.UI.currentWindow.layout = 'vertical';

Ti.UI.createView({
layout : 'vertical',
height : Ti.UI.SIZE
});

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();