I'm writing a bit of code that mimics the F12 inspect tool that most browsers have. When hovering over an element, a div is appended with a semi-transparent blue colour, indicating that it's selected:
The problem that I'm having is that when moving the cursor over the child of an 'inspected' element, the child element does not actually get hovered:
Before Hover:
After Hover:
Here's my code (JS Bin):
$('body *').on('mouseover', function(e) {
if ($(e.target).closest('.inspect_hover').length == 0) {
$('<div class=\'inspect_hover\'></div>').appendTo(e.target);
}
}).on('mouseout', function(e) {
var mouse = [e.pageX, e.pageY];
var min = [$(e.target).offset().left, $(e.target).offset().top];
var max = [($(e.target).offset().left + $(e.target).width()), ($(e.target).offset().top + $(e.target).height())];
if (!(mouse[0] >= min[0] && mouse[0] <= max[0]) || !(mouse[1] >= min[1] && mouse[1] <= max[1])) {
$('div.inspect_hover').remove();
}
});
.header {
position: absolute;
width: 400px;
height: 200px;
left: 20px;
top: 20px;
background-color: #efefef;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.header h3 {
position: relative;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
top: 40px;
left: 0px;
text-align: center;
margin: 0px 0px 0px 0px;
}
.inspect_hover {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px 0px 0px 0px;
background-color: rgba(126, 103, 238, 0.125) !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class='header'>
<h3>Hello, World</h3>
</div>
</body>
</html>
How would I change my JS so that when hovering over the child, the child element is also 'inspected'?
Thanks!
Use prependTo instead of appendTo
$('body *').on('mouseover', function(e) {
if ($(e.target).closest('.inspect_hover').length == 0) {
$('<div class=\'inspect_hover\'></div>').prependTo(e.target);
}
}).on('mouseout', function(e) {
var mouse = [e.pageX, e.pageY];
var min = [$(e.target).offset().left, $(e.target).offset().top];
var max = [($(e.target).offset().left + $(e.target).width()), ($(e.target).offset().top + $(e.target).height())];
if (!(mouse[0] >= min[0] && mouse[0] <= max[0]) || !(mouse[1] >= min[1] && mouse[1] <= max[1])) {
$('div.inspect_hover').remove();
}
});
.header {
position: absolute;
width: 400px;
height: 200px;
left: 20px;
top: 20px;
background-color: #efefef;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.header h3 {
position: relative;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
top: 40px;
left: 0px;
text-align: center;
margin: 0px 0px 0px 0px;
}
.inspect_hover {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px 0px 0px 0px;
background-color: rgba(126, 103, 238, 0.125) !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class='header'>
<h3>Hello, World</h3>
</div>
</body>
</html>
Related
I'm a beginner and I don't understand why it doesn't work. I have code that allows you to move a circle on the screen. I also need to make a popup appear when clicking on a circle.Also, I want a popup to appear in the middle of the screen when the circle is clicked
I have code that allows you to move a circle. It chooses a random point to move to. Also, I want a popup to appear in the middle of the screen when the circle is clicked
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Circle</title>
</head>
<body>
<header></header>
<main>
<label name="popup" id="popup" class="popup"></label>
<div class="button">
<input type="checkbox" name="popup" id="popup" class="popup__check">
</div>
</main>
<footer></footer>
<script src="js/script.js"></script>
</body>
</html>
CSS:
*,*::before,*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
body main html{
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);;
position: absolute;
transition: linear 4s;
}
.popup {
display: none;
width: 1000px;
background: rgba(61, 55, 61);
height: 1000px;
overflow: auto;
font-size: 1rem;
padding: 20px;
position: absolute;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
align-self: center;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.popup__check:checked ~ .popup{
display: block;
}
JS:
let elem = document.querySelector('.button');
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.left = randYP;
elem.style.top = randXP;
};
setInterval(changePosition,1000);
It seems like you cant use checkboxes if you use appearance: none.
So you need to do it in JS:
HTML:
<main>
<div class="button" data-popup="false"></div>
<label name="popup" id="popup" class="popup"></label>
</main>
CSS:
.popup {
display: none;
width: 100px;
background: rgba(61, 55, 61);
height: 100px;
overflow: auto;
font-size: 1rem;
padding: 20px;
position: absolute;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
align-self: center;
}
.button[data-popup='true'] + .popup{
display: block;
}
JS:
const btn = document.querySelector(".button")
const onClick = () => {
console.log("onCLick")
const current = btn.getAttribute("data-popup") == "true";
btn.setAttribute("data-popup", !current);
}
btn.addEventListener("click", onClick);
This is how it should be done. You can use :checked to determine the state of checkbox, you just need correct CSS selectors and markup. Take a look below:
let elem = document.querySelector('.button');
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.left = randYP;
elem.style.top = randXP;
};
setInterval(changePosition, 1000);
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
main {
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
.popup {
display: none;
width: 100%;
height: 100%;
background: rgba(61, 55, 61);
font-size: 4rem;
padding: 20px;
position: fixed;
left: 0;
top: 0;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
justify-content: center;
align-items: center;
color: #fff;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.popup__check:checked+.popup {
display: flex;
}
<main>
<div class="button">
<input type="checkbox" name="popup" id="popup" class="popup__check">
<label name="popup" id="popup" class="popup">So you clicked on that thing...</label>
</div>
</main>
I want that when I click on the arrow, the website will scroll down to the next section, called rest in my code. So it will move 100vh. I don't know how I must do this, I think there must be some JS in it. Does anyone know how I can get what I want? See image below, so it will be clear. Thanks in advance!
HTML:
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<button class="button">
<div class="button__arrow button__arrow--down"></div>
</button>
</div>
<div class="rest">
</div>
</body>
</html>
CSS:
.bg{
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom:8%;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest{
width: 100%;
height: 100vh;
background-color: aliceblue;
}
Image:
Simple approach using scroll-behavior: smooth; and a tag instead of button.
window.onscroll = function () {
var height = $(window).height();
var scrollTop = $(window).scrollTop();
var obj = $('#scroll');
var pos = obj.position();
if (height + scrollTop < pos.top) {
$('.button').fadeIn();
}
else {
$('.button').fadeOut();
}
}
html {
scroll-behavior: smooth;
}
.bg {
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom: 8%;
background: #ccc;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest {
width: 100%;
height: 100vh;
background-color: aliceblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<a href="#scroll" class="button">
<div class="button__arrow button__arrow--down"></div>
</a>
</div>
<div id="scroll" class="rest"></div>
</body>
</html>
I think you can do it by simply putting arrow in tag and in href give the id of rest.
CSS:
.bg{
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom:8%;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest{
width: 100%;
height: 100vh;
background-color: aliceblue;
}
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<button class="button">
<div class="button__arrow button__arrow--down"></div>
</button>
</div>
<div class="rest" id="rest">
</div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-
scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<button class="button">
<div class="button__arrow button__arrow--down" id="button__arrow
button__arrow--down" onClick="topFunction()"></div>
</button>
</div>
<div class="rest">
</div>
<script>
var mybutton = document.getElementById("button__arrow button__arrow--
down");
var close = document.getElementsByClassName("button")[0];
function topFunction() {
document.body.scrollTop = 1000;
document.documentElement.scrollTop = 1000;
}
var close = document.getElementsByClassName("button")[0];
close.onclick = function() {
close .style.display = "none";
}
</script>
<style>
.bg{
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom:8%;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest{
width: 100%;
height: 100vh;
background-color: aliceblue;
}
</style>
</body>
</html>
see this https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy
window.scrollBy(0, window.innerHeight);
Auxiliary line
How to draw the blue dashed reference lines with css like the one in firefox development?
I finally build references line like this : to make the parent div's top,left, width,height variables, and calc them to lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
}
:root {
--left: 30px;
--top: 20px;
--width: 100px;
--height: 60px;
}
.mydiv {
width: var(--width);
height: var(--height);
left: var(--left);
top: var(--top);
position: relative;
background-color: black;
}
.up {
border-top: 1px dashed aqua;
height: 1px;
left: calc(0px - var(--left));
line-height: 1px;
width: 100vw;
}
.down {
border-top: 1px dashed aqua;
height: 1px;
left: calc(0px - var(--left));
top: var(--height);
width: 100vw;
}
.left {
border-left: 1px dashed aqua;
width: 1px;
top: calc(0px - var(--top));
height: 100vh;
}
.right {
border-left: 1px dashed aqua;
width: 1px;
top: calc(0px - var(--top));
left: var(--width);
height: 100vh;
}
.v-line {
position: absolute;
}
</style>
</head>
<body>
<div class="mydiv">
<span class="v-line up"></span>
<span class="v-line down"></span>
<span class="v-line left"></span>
<span class="v-line right"></span>
</div>
</body>
</html>
If you have more good idea pleace leave your answer.
I'm trying to make Paint in JS here's the code.
I want to change color of the trail from black to red by clicking on div "red" for example,and I'm out of ideas (without jQuery).
let active = false;
const draw = function(e) {
if (active == false) {
return;
}
const x = e.clientX;
const y = e.clientY;
let div = document.createElement("div");
div.style.top = y + "px";
div.style.left = x + "px";
document.body.appendChild(div);
}
const drawActive = function() {
active = !active
}
function changeColor() {
//div.classList.add("mainColor");
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
height: 100vh;
margin: 0;
}
#containter {
width: 200px;
height: 200px;
border-radius: 0;
background-color: #fff;
position: fixed;
}
div {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
#red {
width: 25px;
height: 25px;
background-color: red;
border-radius: 0;
margin-top: 18%;
}
.blue {
width: 25px;
height: 25px;
background-color: blue;
border-radius: 0;
margin-top: 6%;
margin-left: 12%;
}
.yellow {
width: 25px;
height: 25px;
background-color: yellow;
border-radius: 0;
margin-top: 18%;
margin-left: 12%;
}
.green {
width: 25px;
height: 25px;
background-color: green;
border-radius: 0;
margin-top: 6%;
}
.first {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
.mainColor {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="containter">
<div id="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<script src="script.js"></script>
</body>
</html>
I tried to make it with setAttribute but I had some errors.
I don't know which details should I give.
I don't know which details should I give.ยด
#Edit from review: removed 6 more repetitions...
I used the querySelectorAll to find all div and added condition
if (!document.getElementById("containter").contains(item))
to except content within div id container.
document.querySelectorAll('div').forEach(function (item) {
if (!document.getElementById("containter").contains(item))
item.setAttribute('class', 'mainColor');
})
let active = false;
const draw = function(e) {
if (active == false || document.getElementById("containter").contains(e.target)) {
return;
}
const x = e.clientX;
const y = e.clientY;
let div = document.createElement("div");
div.style.top = y + "px";
div.style.left = x + "px";
document.body.appendChild(div);
}
const drawActive = function() {
active = !active
}
function changeColor() {
document.querySelectorAll('div').forEach(function(item) {
if (!document.getElementById("containter").contains(item))
item.setAttribute('class', 'mainColor');
})
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
height: 100vh;
margin: 0;
}
#containter {
width: 200px;
height: 200px;
border-radius: 0;
background-color: #fff;
position: fixed;
}
div {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
#red {
width: 25px;
height: 25px;
background-color: red;
border-radius: 0;
margin-top: 18%;
}
.blue {
width: 25px;
height: 25px;
background-color: blue;
border-radius: 0;
margin-top: 6%;
margin-left: 12%;
}
.yellow {
width: 25px;
height: 25px;
background-color: yellow;
border-radius: 0;
margin-top: 18%;
margin-left: 12%;
}
.green {
width: 25px;
height: 25px;
background-color: green;
border-radius: 0;
margin-top: 6%;
}
.first {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
.mainColor {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="containter">
<div id="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<script src="script.js"></script>
</body>
</html>
I'm developing an Android app, and my intention is to be able to publish it for Android 2.2+ at least. Currently, I'm limited to Android 4.0+ because of the WebView control being a mess.
The app is largely HTML+CSS+JS+jQuery based.
div.appList shows a list of apps, and when clicked the app should launch. Only there's some trouble with this; For the list to be scrollable, I have to add overflow: scroll; to its parent. This works fine in Android 3.0+. In Android 2.x the list is still not scrollable.
I said it worked fine in Android 3.0? Well, the scrolling does. Now the problem is that it doesn't register clicks. If the user taps an item in the list, the click event simply doesn't get triggered, because, I'm guessing, it's registered as the user scrolling through the list. Making the list unscrollable again makes the items clickable, but then again, the list is useless because you can only access the top few items.
Everything works fine in Android 4.0+
Any help would be hugely appreciated.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="loadingScreen">
</div>
<div id="desktop">
<div class="unity panel">
</div>
<div class="unity launcher">
<div class="launcherIcon bfb">
<img src="img/unity/launcher.bfb.png" alt="Dash Home" />
</div>
<div class="launcherApps iScroll" id="launcherApps">
</div>
<div class="launcherIcon launchTrash">
<img src="img/apps/trash.icon.png" alt="Rubbish Bin" />
</div>
</div>
<div class="window">
<div class="windowClose">
</div>
<div class="windowContent">
<div class="windowPreferences">
<p>Nothing to be seen here, yet</p>
</div>
</div>
</div>
<div class="unity dash">
<div class="dashContent">
<div class="dashApps dashPage iScroll" id="dashApps">
<div class="appList"></div>
</div>
<div class="dashFiles dashPage iScroll" id="dashFiles">
<div class="fileList"></div>
</div>
</div>
<div class="dashRibbon">
<img src="img/unity/apps.png" alt="Applications" class="activeRibbonItem ribbonApps" />
<!--<img src="img/unity/files.png" alt="Files" class="ribbonFiles" />-->
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
font-family: 'Ubuntu', 'Droid Sans';
margin: 0px;
padding: 0px;
overflow: hidden;
background: rgb(43,0,30);
}
/*# Loading screen #*/
div#loadingScreen
{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
text-align: center;
background: rgb(43,0,30) url(img/ubuntuLogo.png) center center no-repeat;
color: white;
z-index: 49;
}
/*# Desktop #*/
div#desktop
{
display: none;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: rgb(43,0,30) url(img/wallpaper/wartyFinal.jpg);
background-position: center center;
background-size: cover;
}
div.unity.panel
{
display: none;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 24px;
background: rgb(69,68,64) url(img/unity/panel.background.jpg);
background-repeat: repeat-x;
}
div.unity.panel.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
border-bottom: 1px solid #504E4F;
}
div.unity.launcher
{
display: none;
position: absolute;
top: 24px;
left: 0px;
bottom: 0px;
width: 0px; /* Animates to 64px */
background: transparent url(img/unity/launcher.background.png);
border-right: 1px solid #504E4F;
padding: 3px 0px 55px 0px;
}
div.unity.launcher.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
}
div.launcherIcon
{
display: none;
width: 52px;
height: 52px;
margin: 4px 6px 4px 6px;
border-radius: 5px;
background: transparent url(img/unity/launcher.iconbg.png);
background-position: center;
background-size: cover;
}
div.unity.launcherIcon.dashOpened
{
background: grey !important;
opacity: 0.8;
}
div.launcherIcon.bfb
{
background-image: none;
border-radius: 0px;
}
div.launcherIcon.bfb img
{
width: 52px;
height: 52px;
margin: 0px;
}
div.launcherIcon img
{
width: 46px;
height: 46px;
margin: 3px;
}
div.launcherIcon.launchFirefox
{
background-color: rgb(247,192,48);
}
div.launcherIcon.launchTrash
{
position: absolute;
bottom: 3px;
background-color: #303030;
}
div.window
{
display: none;
position: absolute;
top: 24px;
left: 64px;
right: 0px;
bottom: 0px;
background: rgb(242,241,239);
color: black;
}
div.windowClose
{
position: fixed;
left: 0px;
top: 0px;
width: 64px;
height: 24px;
text-align: center;
background: url(img/window/close.png) center center no-repeat;
}
div.dash
{
display: none;
position: absolute;
left: 64px;
top: 24px;
bottom: 0px;
right: 0px;
background: transparent url(img/unity/dashOpened.png);
padding: 0px 12px 48px 12px;
color: white;
overflow: scroll;
}
div.dash.dashOpened
{
display: block;
}
div.dash *:link
{
color: white;
text-decoration: none;
text-shadow: 0px 0px 2px white;
}
div.dash ul li
{
padding: 5px;
}
/*# Applications #*/
div.appWindow
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
JavaScript
var bootscreenDelay = 500; // 2500 //
var appOpened = false;
var dashOpened = false;
$(document).ready
(
function ()
{
$('div#loadingScreen').delay (bootscreenDelay).fadeOut (800);
$('div#desktop').delay (bootscreenDelay + 300).fadeIn (600,
function ()
{
$('div.unity.panel').slideDown (400,
function ()
{
$('div.unity.launcher').css ('display', 'block').animate ( { width: 64 }, 600,
function ()
{
$('div.launcherIcon').each
(
function (i)
{
$(this).delay (i * 200).slideDown (400);
}
);
}
);
}
);
}
);
$('div.windowClose').click
(
function ()
{
$('div.appFirefox .appFirefoxBrowser').fadeOut (400,
function ()
{
appFirefoxNavigate ('http://start.ubuntu.com/');
}
);
$('div.appWindow.appFirefox').fadeOut (800);
$('div.window').delay (200).fadeOut (800);
appOpened = false;
}
);
/*# Dash #*/
$('div.launcherIcon.bfb').click
(
function ()
{
if (! dashOpened)
openDash ();
else
closeDash ();
}
);
/*# Trash #*/
$('div.launcherIcon.launchTrash').click
(
function ()
{
closeEverything ();
android.openInBrowser ('http://www.dafk.net/what/');
}
);
}
);
function closeEverything ()
{
$('div.windowClose').trigger ('click');
closeDash ();
}
function openDash ()
{
$('*').addClass ('dashOpened');
dashOpened = true;
var appList = android.getApplicationList ();
var pkgMan = android.getPackageManager ();
var strAppList = '<ul>';
for (var i = 0; i < appList.size (); i++)
{
var appLabel = android.getApplicationLabel (appList.get (i));
strAppList += '<li onclick="launchApp (' + i + ')">' + appLabel + '</li>';
}
strAppList += '</ul>';
$('div.appList').html (strAppList);
}
function closeDash ()
{
$('*').removeClass ('dashOpened');
dashOpened = false;
}
function launchApp (i)
{
android.launchAppFromList (i);
}
Anything that helps me get it working on an older version is appreciated. The goal is Android 2.x, but if you can help me make it work on 3.2+, I'm already very happy.
overflow:scroll|auto dowsn't work properly on Android 2.X devices.
This css rule equals to overflow:hidden :)
You can't fix it but you can use plugins to avoid this behaviour e.g. http://cubiq.org/iscroll-4