Skip to content

Commit

Permalink
some chrome css bugs fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitmalina
vitmalina committed Aug 25, 2011
1 parent 52fa7f0 commit 55238af
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 43 deletions.
22 changes: 11 additions & 11 deletions css/core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,17 @@ div.jsTouch div.footer {
bottom: 0px;
}

div.jsTouch div.footer ul{
div.jsTouch div.footer ul.tabs{
text-align: center;
color: white;
font: bold 10px "Helvetica Neue", Helvetica;
padding: 0px;
margin: 0px;
margin-top: 1px;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

div.jsTouch div.footer ul li, div.jsTouch div.footer ul li a {
div.jsTouch div.footer ul.tabs li, div.jsTouch div.footer ul.tabs li a {
display: inline-block;
-webkit-box-sizing: border-box;
overflow: hidden;
Expand All @@ -75,18 +76,18 @@ div.jsTouch div.footer ul li, div.jsTouch div.footer ul li a {
text-shadow: 1px 1px 0px #222222;
}

div.jsTouch div.footer ul a img{
div.jsTouch div.footer ul.tabs a img{
width: 40px;
height: 40px;
opacity: 0.4;
}

div.jsTouch div.footer ul a.clicked {
div.jsTouch div.footer ul.tabs a.clicked {
border-radius: 3px;
background: rgba(255,255,255,0.3);
}

div.jsTouch div.footer ul a.clicked img{
div.jsTouch div.footer ul.tabs a.clicked img{
opacity: 1;
}

Expand Down Expand Up @@ -270,7 +271,6 @@ div.overlay div.content div.simple-title {
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(104,104,104,1)), color-stop(0.5, rgba(40,40,40,1)), color-stop(0.5, rgba(20,20,20,1)), to(rgba(40,40,40,1)));
color: #fff;
text-shadow: #000 0 1px 0;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
Expand All @@ -292,7 +292,7 @@ div.overlay div.content div.simple-title {
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(234,234,234,1)), color-stop(0.5, rgba(185,185,185,1)), color-stop(0.5, rgba(166,166,166,1)), to(rgba(167,167,167,1)));
color: #000;
text-shadow: #ccc 0 1px 0;
text-shadow: #cccccc 1px 1px 1px;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
Expand All @@ -308,7 +308,7 @@ div.overlay div.content div.simple-title {
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(29,103,186,1)), color-stop(0.5, rgba(13,70,134,1)), color-stop(0.5, rgba(12,58,110,1)), to(rgba(13,65,120,1)));
color: #fff;
text-shadow: #000 0 1px 0;
text-shadow: #000000 1px 1px 1px;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
Expand All @@ -324,7 +324,7 @@ div.overlay div.content div.simple-title {
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(250,50,50,1)), color-stop(0.5, rgba(202,34,38,1)), color-stop(0.5, rgba(184,20,20,1)), to(rgba(230,20,20,1)));
color: #fff;
text-shadow: #000 0 1px 0;
text-shadow: #000000 1px 1px 1px;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
Expand All @@ -340,7 +340,7 @@ div.overlay div.content div.simple-title {
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(55,200,55,1)), color-stop(0.5, rgba(23,130,14,1)), color-stop(0.5, rgba(0,113,0,1)), to(rgba(0,150,0,1)));
color: #fff;
text-shadow: #000 0 1px 0;
text-shadow: #000000 1px 1px 1px;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
Expand All @@ -356,7 +356,7 @@ div.overlay div.content div.simple-title {
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(86,213,255,1)), color-stop(0.5, rgba(39,125,255,1)), color-stop(0.5, rgba(0,114,255,1)), to(rgba(0,133,255,1)));
color: #fff;
text-shadow: #000 0 1px 0;
text-shadow: #000000 1px 1px 1px;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
Expand Down
80 changes: 50 additions & 30 deletions includes/jsTouch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,7 @@ var jsTouch = {
},

loadPage: function(url, params, callBack) {
if (window.event) {
// find current touch box
var currObj = this.getCurrentBox(window.event.target);
// auto add clicked class (remove previous)
if (window.event.currentTarget.tagName == 'A') {
$('#'+ currObj.name +' a').removeClass('clicked');
$(window.event.currentTarget).addClass('clicked');
};
}
if (window.event) { var currObj = this.getCurrentBox(window.event.target); }
// if target is defined - open there
if (params && typeof(params) == 'object' && params['target']) {
window.elements[params['target']].loadPage(url, params, callBack);
Expand All @@ -32,16 +24,7 @@ var jsTouch = {
}
},

overlayPage: function(url, params, callBack) {
if (window.event) {
// find current touch box
var currObj = this.getCurrentBox(window.event.target);
// auto add clicked class (remove previous)
if (window.event.currentTarget.tagName == 'A') {
$('#'+ currObj.name +' a').removeClass('clicked');
$(window.event.currentTarget).addClass('clicked');
};
}
overlayHTML: function(HTML, params, callBack) {
// parse parameters
var width = 300;
var height = 300;
Expand All @@ -61,20 +44,34 @@ var jsTouch = {
lock.style.cssText = 'z-Index: 9; background-color: '+ bgcolor +'; opacity: 0; position: fixed; left: 0px; top: 0px; '+
'-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transition: all .4s ease-in-out; '+
'width: '+ window.innerWidth +'px; height: '+ window.innerHeight +'px;';
if (!modal) lock.onclick = function (e) { jsTouch.overlayClose(); }
if (!modal) {
lock.onclick = function (e) { jsTouch.overlayClose(); };
} else {
// if modal flash red background
lock.ontouchstart = function (e) { $('#overlay_lock')[0].style.cssText += '-webkit-transition: none; background-color: white;'; };
lock.ontouchend = function (e) { $('#overlay_lock')[0].style.cssText += '-webkit-transition: all .4s ease-in-out; background-color: black;'; };
}
$(document.body).append(lock);
setTimeout("$('#overlay_lock').css('opacity', '"+ opacity +"');", 1); // otherwise transition is not working

// create overlay
var div = document.createElement('div');
div.id = 'overlay_box';
div.className = 'overlay';
div.style.cssText += 'left: 10px; top: 52px; width: '+ width +'px; height: '+ height +'px; -webkit-border-radius: 5px; '+
'-webkit-transition: all .4s ease-in-out; opacity: 0;';
div.innerHTML = '<div class="content"></div>';
$(document.body).append(div);
div.innerHTML = HTML;
$(document.body).append(div);
setTimeout("$('#overlay_box').css('opacity', '1');", 1); // otherwise transition is not working

// add clicked class when clicked on the link
$('#overlay_box a').click(new Function(
"$('#overlay_box a').removeClass('clicked');"+
"$(this).addClass('clicked');"));
},

overlayPage: function(url, params, callBack) {
// create HTML overlay
this.overlayHTML('<div class="content"></div>', params, callBack);
// load overlay content
$.get(url, {}, function (data) {
$('#overlay_box').html(data);
Expand All @@ -86,6 +83,14 @@ var jsTouch = {
// init scroll
if (jsTouch.overlay_scroll) { jsTouch.overlay_scroll.destroy(); jsTouch.overlay_scroll.scroll = null; }
jsTouch.overlay_scroll = new iScroll($('div.overlay div.content')[0], { desktopCompatibility: true, zoom: false });
// for buttons on top do it on touch start
$('#overlay_box a.button').bind('touchstart', new Function(
"$('#overlay_box a').removeClass('clicked');"+
"$(this).addClass('clicked');"));
// add clicked class when clicked on the link
$('#overlay_box a').click(new Function(
"$('#overlay_box a').removeClass('clicked');"+
"$(this).addClass('clicked');"));
});
},

Expand Down Expand Up @@ -125,6 +130,7 @@ function jsTouchBox(name, params) {
this.animate = jsTouch_animate;
this.initScroll = jsTouch_initScroll;
this.initTabs = jsTouch_initTabs;
this.initLinks = jsTouch_initLinks;
this.resize = jsTouch_resize;
// -- internal variables
this._tmpCallBack;
Expand All @@ -143,6 +149,7 @@ function jsTouchBox(name, params) {
" clearTimeout(obj._tmpTimer); "+
" obj.animate(data, '"+ ((typeof(params) == 'object' && params['transition']) ? params['transition'] : "") +"'); "+
" obj.initTabs();"+
" obj.initLinks();"+
" if (obj._tmpCallBack && obj._tmpCallBack == 'function') { obj._tmpCallBack(); } "+
"}")
);
Expand Down Expand Up @@ -309,9 +316,9 @@ function jsTouchBox(name, params) {
}
// make divs scrollable
if (this._lastDiv) {
var div = $('#'+ this.name +' > .jsTouch.div1 > .content')[0];
var div = $('#'+ this.name +' > .jsTouch.div1 > div.content')[0];
} else {
var div = $('#'+ this.name +' > .jsTouch.div2 > .content')[0];
var div = $('#'+ this.name +' > .jsTouch.div2 > div.content')[0];
}
// destroy previous scroll
if (this.scroll) { this.scroll.destroy(); this.scroll = null; }
Expand All @@ -327,8 +334,10 @@ function jsTouchBox(name, params) {
var tmp = String(el.href).split('#');
var id = tmp[1];
if ($(el).hasClass('clicked')) { $('#'+id).show(); } else { $('#'+id).hide(); }
$(el).click( function () {
$(el).bind('touchstart', function() { $(window.event.currentTarget).addClass('clicked'); });
$(el).click(function () {
var currObj = jsTouch.getCurrentBox(window.event.currentTarget);
// change clicked tab
$('#'+ currObj.name +' a').removeClass('clicked');
$(window.event.currentTarget).addClass('clicked');
// show/hide tabs
Expand All @@ -344,6 +353,17 @@ function jsTouchBox(name, params) {
});
}

function jsTouch_initLinks() {
// toolbar imediate click
$('#'+ this.name +' div.toolbar a').bind('touchstart', new Function(
"$('#"+ this.name +" div.toolbar a, #"+ this.name +" div.content a').removeClass('clicked');"+
"$(this).addClass('clicked');"));
// list click when not scrolling
$('#'+ this.name +' div.toolbar a, #'+ this.name +' div.content a').click(new Function(
"$('#"+ this.name +" div.toolbar a, #"+ this.name +" div.content a').removeClass('clicked');"+
"$(this).addClass('clicked');"));
}

function jsTouch_resize() {
// get width and height of the div
var width = this.width;
Expand All @@ -356,9 +376,9 @@ function jsTouchBox(name, params) {
// make divs scrollable
if (this._lastDiv) { var tmp = 'div1'; } else { var tmp = 'div2'; }

var div = $('#'+ this.name +' > .jsTouch.'+ tmp +' > .content')[0];
var isToolbar = ($('#'+ this.name +' > .jsTouch.'+ tmp +' > .toolbar').length > 0 ? true : false);
var isFooter = ($('#'+ this.name +' > .jsTouch.'+ tmp +' > .footer').length > 0 ? true : false);
var div = $('#'+ this.name +' > .jsTouch.'+ tmp +' > div.content')[0];
var isToolbar = ($('#'+ this.name +' > .jsTouch.'+ tmp +' > div.toolbar').length > 0 ? true : false);
var isFooter = ($('#'+ this.name +' > .jsTouch.'+ tmp +' > div.footer').length > 0 ? true : false);
if (isToolbar) $(div).css('top', '45px');
if (isFooter) $(div).css('bottom', '50px');

Expand Down
2 changes: 1 addition & 1 deletion pages/overlays.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Overlays are popups that display additional information.
</div>
<ul class="rounded">
<li><a onclick="jsTouch.overlayPage('pages/overlay-msg.php', { width: 300, height: 200 });">Simple Message</a></li>
<li><a onclick="jsTouch.overlayHTML('<div class=\'content\'>This is a short simple message.</div>', { width: 300, height: 200 });">Simple Message</a></li>
<li><a onclick="jsTouch.overlayPage('pages/overlay-msg2.php', { width: 300, height: 300 });">Message with Title</a></li>
<li><a onclick="jsTouch.overlayPage('pages/overlay-list.php');">List Items</a></li>
<li><a onclick="jsTouch.overlayPage('pages/overlay-buttons.php', { modal: true });">Question With Buttons</a></li>
Expand Down
Loading

0 comments on commit 55238af

Please sign in to comment.