We Keep Coding

Smoothly navigation bar with javascript/ css

I created a navigation bar with java script and the problem is that my first scrolling make the
navigation bar to disappear with out the nice animation.
The nice animation fade up just after the first scrolling.
CSS:
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
javaScript:
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
You can watch it "live" here: https://jsfiddle.net/Benjamn89/rgxtb7en/345/
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div>
<!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div>
<!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div>
<!-- second_section -->
<div class='third_section'>
</div>
<!-- third_section -->
<div class='four_section'>
</div>
<!-- four_section -->
Thanks:)

Because of your default top value not defined. Adding after top:0 to .nav it will be fixed.
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
top:0
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<title>
My portFolio
</title>
</head>
<body>
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div> <!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div> <!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div> <!-- second_section -->
<div class='third_section'>
</div> <!-- third_section -->
<div class='four_section'>
</div><!-- four_section -->
</body>

JQuery issue with a back to top function

I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});

You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>

Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});

jQuery animation sticking on quick hover

If you hover over the element slowly, the animation works correctly. The green layer overlaps from the left and then, from the top, the yellow layer overlaps the green layer. This overlapping should undo itself when the mouse leaves the element, starting with undoing the yellow overlap and then the green one.
But if the cursor hovers over it too quickly, the animation gets stuck on the yellow overlap until you re-mousover and then mouseout. I've tried adding .stop(false, true) jQuery method before each of the .animate methods, which is what I read has remedied similar problems but this didn't work. I tried it by chaining it right before the .animate function, I tried just about all variations of this, on all of the functions, and also with .stop(true,true);.
Is there a way I can stop the mouseout portion from firing if the mouseover portion doesn't finish before the cursor leaves the element?
$(document).ready(function() {
$('#con').hover(
function() { // handlerIn
$('#crossX').animate({'width': '115px'}, function() {
$('#crossY').animate({'height': '115px'})
})
},
function() { // handlerOut
$('#crossY').animate({'height': '15px'}, function() {
$('#crossX').animate({'width': '15px'})
})
}
)
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>

With the following solution it is guaranteed that the "mouse leave part" only runs after the "mouse enter part" is fullfilled and (vice versa).
Additionally the script takes care for the case that on quick user action: "enter > leave > enter" the state remains as if the user haven't done the "quick leave". So actually this should do what you want to achieve (I hope so at least).
var mouseEnter = function() {
// console.log('in');
sPosition = 'in';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseEnterIsWaiting = true;
mouseEnterIsDone = false;
$('#crossX').animate({'width':'115px'}, function(){
$.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')})
})
},
mouseLeave = function() {
// console.log('out');
sPosition = 'out';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseLeaveIsWaiting = true;
mouseLeaveIsDone = false;
$('#crossY').animate({'height':'15px'}, function(){
$.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')})
})
},
sanitizeAnimation = function( sMode ){
if ( 'enter' == sMode )
mouseEnterIsDone = true;
else
mouseLeaveIsDone = true;
if ( 'in' == sPosition ) {
if ( mouseEnterIsWaiting ) {
mouseEnterIsWaiting = false;
mouseEnter();
}
} else {
if ( mouseLeaveIsWaiting ) {
mouseLeaveIsWaiting = false;
mouseLeave();
}
}
},
mouseEnterIsDone = true,
mouseLeaveIsDone = true,
mouseEnterIsWaiting = false,
mouseLeaveIsWaiting = false,
sPosition = 'out';
$(document).ready(function(){
$('#con').hover(mouseEnter, mouseLeave);
});
body {
padding: 5%;
}
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
If you need further explanations feel free to leave a comment

$("#con").mouseenter(function() {
$('body').addClass('Hover');
$('#crossX').stop().animate({'width':'115px'},500, function(){
$('#crossY').stop().animate({'height': '115px'},500);
});
});
$("body").mouseenter(function() {
$('body').addClass('Hover');
$('#crossY').stop().animate({'height':'0px'},500,function(){
$('#crossX').stop().animate({'width':'0px'},500);
});
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
body{
background-color:#dcdcdc;
height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
</body>

Jquery Drag & Drop like windows taskbar

i am intermediate jquery experience, so i need help here with an awesome interface Demo:
Demo
But i don't know why it isn't drag to other div's with same id's "#drophere". please make it work just like Windows Taskbar. Thanks
$( function() {
$( "#dragme" ).draggable({
appendTo: 'body',
containment: '#drophere'
});
} );
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#dragme {
position: absolute;
background: rgba(0, 100, 200, 0.6);
width: 100%;
height: 50px;
left: 0;
bottom: 0;
text-align: center;
font-size: 36px;
z-index: 999;
}
#drophere {
position: absolute;
background: rgba(200, 100, 0, 0.1);
text-align: center;
}
.top {top:0;width: 100%;height: 50px;}
.left {left:0;width: 50px;height: 100%;}
.bottom {bottom:0;width: 100%;height: 50px;}
.right {right:0;width: 50px;height: 100%;}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dragme">Drag me</div>
<div id="drophere" class="top">Drop it Here</div>
<div id="drophere" class="left" style="padding-top:200px;">Drop it Here & stand it like me</div>
<div id="drophere" class="bottom">Drop it Here</div>
<div id="drophere" class="right" style="padding-top:200px;">Drop it Here & stand it like me</div>

Like Michael mentioned, id's must be unique, you'll want to use classes instead.
Also, IMHO, I'd use .sortable() for this "snap to and fill" type behaviour, not draggable(). You could do it with draggable() with a bit of configuring, but sortable will work with minimal effort.
Here is a working example and a jsfiddle
$(function() {
$(".drophere").sortable({
connectWith: ".drophere"
}).disableSelection();
});
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#dragme {
list-style-type: none;
position: absolute;
background: rgba(0, 100, 200, 0.6);
width: 100%;
height: 50px;
left: 0;
bottom: 0;
text-align: center;
font-size: 36px;
z-index: 999;
}
.left #dragme, .right #dragme{
height: 100%;
}
.drophere {
position: absolute;
background: rgba(200, 100, 0, 0.1);
text-align: center;
margin:0;
}
.top {
top: 0;
width: 100%;
height: 50px;
}
.left {
left: 0;
width: 50px;
height: 100%;
}
.bottom {
bottom: 0;
width: 100%;
height: 50px;
}
.right {
right: 0;
width: 50px;
height: 100%;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul class="top drophere">
<li id="dragme">Drag me</li>
</ul>
<ul class="left drophere" style="padding-top:200px;"></ul>
<ul class="bottom drophere"></ul>
<ul class="right drophere" style="padding-top:200px;"></ul>

Android 2.x and 3.x WebKit mess

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