Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Jumpy Jquery since safari 4 final and firefox 3.5

Cabbit

Cabbit

macrumors 68020
Original poster
Jan 30, 2006
2,128
1
Scotland
Link to example
Link to source code home page

Link to full site source
Link to sql database tables

I have been working on my web app a little more but since upgrading to safari 4 and firefox 3.5 the effect has become rather jumpy.
I am wanting to get on to making it work with my sql database but this issue has put a halt to that work while i scratch my head looking for a solution.
I am thinking that i may need to update jquery but i do not understand enough about it and there is a very large version gap that i can not just write over the existing files.
Anyone that has perhaps already found a solution or can chip in to find out why it is jumpy on the newer browsers.
 
Almost ceretainly the old version of Jquery is why.

Are there any custom files in the jquery folder as I'd imagine you should be able to drag/drop update. Though I've only used it not upgraded it ;).
 
Eraserhead said:
Almost ceretainly the old version of Jquery is why.

Are there any custom files in the jquery folder as I'd imagine you should be able to drag/drop update. Though I've only used it not upgraded it ;).
Click to expand...

I really wish i knew i am used to working with a newer version of Jquery but i have only just started playing with it, this was part of a magazine tutorial i am working to convert from XML feeds from the BBC to data on my sql database then this issue propped up one i updated my browsers.

The source folder
i have here though does contain the scripts folder if you care to take a nose.
 
Yeah its in the scripts folder. You seem to have the latest version of Jquery and Jquery ui (which is a separate product).
 
Eraserhead said:
Yeah its in the scripts folder. You seem to have the latest version of Jquery and Jquery ui (which is a separate product).
Click to expand...

^_^ ah that emm nope i am not running the latest version i just tired to hobble them in, the old scripts folder is the right one.
 
Once you've copied the new version of Jquery in you should need to point to the new versions of JQuery. Certainly you'll need to do that from your index.php file and maybe somewhere else for JQuery UI I'm not sure.
 
Eraserhead said:
Once you've copied the new version of Jquery in you should need to point to the new versions of JQuery. Certainly you'll need to do that from your index.php file and maybe somewhere else for JQuery UI I'm not sure.
Click to expand...

Ah well you see what happens if i link it to the newer files then the drag and drop component just stops working completely.
 
^_^ i found out where the issue is and its strangely not the javascript but the CSS.
Seems there is a conflict between the homepage css and the site wide css.

stylesheet.css
HTML: 
.crumbs {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#inner-nav li {
	margin-right: 5px;
	float: left;
	list-style: none;
	display: inline;
}


input.default {
	color: #999;
}

input.default:focus {
	color: inherit;
}

h1 {
	font-weight: normal;
	color: #222222;
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0.5em;
}
h1.logo {
	float: left;
	width: 50%;
	font-weight: normal;
	color: #222222;
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0.5em;
}

h1 img {
	margin: 0;
}

h2 {
	font-weight: normal;
	color: #222222;
	font-size: 1em;
	margin-bottom: 0.75em;
}
h2.sub_logo {
	display: block;
	text-indent: 130px;
	float: left;
	font-weight: normal;
	color: #000;
	font-size: 1.4em;
	margin-bottom: 0.75em;
}

h3 {
	font-weight: normal;
	color: #222222;
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
}

h4 {
	font-weight: normal;
	color: #222222;
	font-size: 1.2em;
	line-height: 1.25;
	margin-bottom: 1.25em;
}

h5 {
	font-weight: normal;
	color: #222222;
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 1.5em;
}

h6 {
	font-weight: normal;
	color: #222222;
	font-size: 1em;
	font-weight: bold;
}

body {
	background-color: #ccf;
	width: 1010px;
	color: #333;
	margin: 0 auto;
}

p {
	font-size: 1.2em;
}

#header,
#footer {
	padding: 1em 1em 0;
	clear: both;
}

#content {
	background: #ddd;
	color: #111;
	min-height: 500px;
}
h1.logo {
	float: left;
	margin: 10px;
}

h1.logo a {
	background: url(images/basic/bg/logo.png) left center no-repeat;
	padding-left: 120px;
	display: block;
	height: 50px;
	text-decoration: none;
	line-height: 50px;
	color: #000;
}

#admin-menu {
	clear: both;
	-webkit-border-top-left-radius: 0.6em;
	-moz-border-radius-topleft: 0.6em;
	-webkit-border-top-right-radius: 0.6em;
	-moz-border-radius-topright: 0.6em;
}

#admin-menu,
#sub-menu {
	margin: 0 1em;
}

#admin-menu li {
	
}

#admin-menu ul,
#sub-menu ul {
	padding: 0;
	margin: 0;
}

#admin-menu ul li,
#sub-menu ul li {
	float: left;
	margin-right: 1em;
	list-style: none;
}

#admin-menu ul li,
#sub-menu ul li {
	margin-right: 0;
	margin-bottom: -1px;
}

#admin-menu ul li a,
#sub-menu ul li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	outline: none;
}

#admin-menu ul li.selected a,
#sub-menu ul li.selected a {
	background-color: #89b8e7;
}

#admin-menu ul li.selected {
	border-bottom: 1px solid #89b8e7;
}

#IE7 #admin-menu {
	height: 39px;
}

#admin-menu {
	background-color: #ffa1ff;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ababab;
}

#admin-menu ul {
	margin-bottom: -1px;
}

#admin-menu ul li:first-child {
	
}

#admin-menu ul li.selected {
	background: #89b8e7;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ababab;	
	height: 40px;
	margin-top: -2px;
}

#sub-menu {
	background: #89b8e7;
	border-left: 1px solid #89b8e7;
	border-right: 1px solid #89b8e7;
	border-bottom: 1px solid #89b8e7;
}

#IE7 #sub-menu ul {
	height: 26px;
}

#sub-menu ul li a {
	padding: 3px 7px;
	margin: 10px 5px;
	color: #fff;
	background: none;
}

#sub-menu ul li.selected a {
	background: #fff;
	color: #000;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.search-form {
	display: none;
	padding: 1em;
}

.search-form label {
	display: block;
}

a.button {
	background: transparent url(images/buttons/right_01.png) no-repeat scroll top right;
	display: block;
	float: left;
	margin-right: 6px;
	padding-right: 20px;
	text-decoration: none;
	color: #111 !important;
	font-weight: bold;
	outline: none;
}

a.button span {
	background: transparent url(images/buttons/left_01.png) no-repeat;
	display: block;
	line-height: 22px;
	padding: 7px 0 5px 14px;
	text-shadow: #efefef 1px 1px 0px;
}

a.button img {
	vertical-align: middle;
	margin: 0 3px 0 0;
}

a.button.cancel span {
	font-weight: normal;
}

a.button.small {
	font-size: 1em;
	background: transparent url(images/buttons/right_01_small.png) no-repeat scroll top right;
	padding-right: 20px;
}

a.button.small span {
	background: transparent url(images/buttons/left_01_small.png) no-repeat;
	padding: 5px 0 3px 20px;
	line-height: 21px;
}

.right {
	float: right;
	display: block;
}

button {
	border: 0;
	cursor: pointer;
	font-weight: bold;
	padding: 0 20px 0 0;
	text-align: center;
	background: url(images/basic/buttons/right_01.png) center right no-repeat;
	font-size: 1.2em;
	outline: none;
}

button span {
	position: relative;
	display: block;
	white-space: nowrap;
	padding: 0 0 0 20px;
	height: 35px;
	line-height: 35px;
	background: url(images/basic/buttons/left_01.png) center left no-repeat;
	text-shadow: #efefef 1px 1px 0px;
}

button span img {
	vertical-align: middle;
	margin: 0 3px 0 0;
}

button:focus {
	outline: none;
}

button.tick {
	background: none;
	width: 24px;
}

input.title,
textarea {
	margin: 0;
}

#errorExplanation {
	width: 100%;
	border: 2px solid red;
	padding: 7px;
	padding-bottom: 12px;
	margin-bottom: 20px;
	background-color: #f0f0f0;
}

#errorExplanation h2 {
	text-align: left;
	padding: 5px 5px 5px 15px;
	font-size: 1.4em;
	margin: -7px;
	background-color: #c00;
	color: #fff;
}

#errorExplanation p {
	color: #333;
	margin-bottom: 0;
	padding: 5px;
}

#errorExplanation ul li {
	font-size: 1em;
	list-style: square;
}

ul.checkbox-list {
	list-style: none;
}

ul.checkbox-list li {
	display: block;
	float: left;
	width: 200px;
}

ul.checkbox-list li label {
	font-weight: normal !important;
}
.placeholder {
	height: 30px;
	clear: both;
	border: dashed 2px #ddd;
}

h3.warning {
	background-image: url(images/basic/icons/fugue/exclamation.png);
	background-position: 10px 15px;
	background-repeat: no-repeat;
	padding-left: 35px;
}

#searching {
	clear: both;
	margin-top: 2em;
}

.pagination {
	padding-top: 10px;
	text-align: right;
}

a.page, span.page {
	padding: 0px 5px;
	margin: 0 3px;
}

a.page {
	text-decoration: none;
	border: 1px solid #9aafe5;
	color: #2e6ab1;
}

a.next_page {
	font-weight: bold;
}

span.disabled_page {
	border: 1px solid #929292;
	color: #929292;
}

span.current_page {
	font-weight: bold;
	border: 1px solid navy;
	background-color: #2e6ab1;
	color: #FFF;
}

.flash {
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
}

.flash.notice, .flash.errors {
	font-size: 1.3em;
	margin-bottom: 1em;
	padding: 0.8em;
}

.flash.notice {
	background-color: #e59494;
	color: #000;
	border: 1px solid #9ac;
}

.flash.errors {
	color: #000;
	background-color: #e59494;
	border: 1px solid #000;
}

/* Posts */

.post h2 {
	color: #227edb;
	font-size: 30px;
	letter-spacing: -1px;
	margin: 0;
	padding: 10px 0px 0px 0px;
}

.post h2 a {
	color: #227edb;
	text-decoration: none;
}
.post h2 a:hover {
	text-decoration: underline;
}

.comment {
	padding: 1em;
	margin: 0;
	float: left;
}

.comment-odd {
	background-color: #fffeee;
	padding: 1em;
	margin: 0;
	float: left;
}

h2 {
	color: #3c7dfb;
}

.comment h3 {
	color: #666;
	font-size: 1.6em;
	letter-spacing: -1px;
	margin: 0;
	padding: 2px 0px 0px 0px;
}

.comment-odd h3 {
	color: #666;
	font-size: 1.6em;
	letter-spacing: -1px;
	margin: 0;
	padding: 2px 0px 0px 0px;
}

.text {
	float: left;
	width: 495px;
}

.text a {
	color: #227edb;
	text-decoration: none;
}

.text p {
	margin: 15px 0;
	line-height: 22px;
	color: #333;
}

.text ul, .text ol {
	margin: 15px 0;
}

.text li {
	margin: 5px 0;
}

.text blockquote {
	font-style: italic;
	background: url(images/quote.gif) top left no-repeat;
	text-indent: 25px;
}

.info {
	color: #666;
	float: left;
	width: 140px;
	font-size: 11px;
	padding: 20px 20px 0 0;
}

.info ul li {
	margin: 0 0 10px 0;
	list-style: none;
}

.info a {
	color: #ff5d96;
	text-decoration: none;
}

.more-link {
	display: none;
}

/* Code and quote */

.quote {
	border-top: 1px inset;
	border-left: 1px inset;
	border-right: 1px inset;
	border-bottom: 1px inset;
	background: #eee url('/include/style/default/images/quote-left.gif') no-repeat left top;
	min-width: 20em;
	padding-top: 1px;
	padding-left: 40px;
	padding-bottom: 1px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	-webkit-border-top-left-radius: 0.2em;
	-moz-border-radius-topleft: 0.2em;
}

.divider { 
	clear: both; 
	width: 275px; 
	padding: 10px 0 0 0; 
	margin: 10px 0; 
	background-image: url(/images/divider.png) bottom repeat-x; 
	height: 4px; 
}


.quote div {
	background: transparent url(/include/style/default/images/quote-right.gif) right bottom no-repeat;
	padding-top: 5px;
	padding-bottom: 10px;
}

bbtoolbar {
	margin: 0;
}

style.css (from the home page)
HTML: 
#container{
	border-color: #ccc;
	background-color: #fff;
	border-width: 1px;
	border-style: none solid solid solid;
	margin: 0 0.9em;
	text-align: left;
	font-size: 1.2em;
	cursor	default!important;
}

div.column{
	float: left;
	padding-left: 14px;
	min-height: 350px;
	position: relative;
}

div.panel, div.column{
	width: 306px;
}

/* non section styles */

img{
	border: none;
}
.hidden{
	display: none;
}

div.buttons input{
	margin: 0 10px;
	height: 24px;
	color: #5D5D5D;
	border: 1px solid #737373;
	cursor: pointer;
}

div.buttons input.yes{
	background-color: #f2f2f2;
}

div.buttons input.no{
	background-color: #C4C0C0;
}

/* --------------------------------- sections -------------------------- */


/* top form */

div#top-form-controls{
	background: #89b8e7;
	height: 3.2em;
	border-bottom: 1px solid #919191;	
}

div#top-form-controls a{
	display: block;
	padding: 4px 20px 4px 40px;
	background-color: #ffa1ff;
	margin: 8px 15px 0 15px;
	border: 1px solid #ADAFB1;
	color: #fff;
	background-position: left;
	background-repeat: no-repeat;
	
}

div#top-form-controls a:hover{
	background-color: #ffa1ff;
}


div#top-form-controls a#customize{
	float: left;
	background-image: url('../images/customize.jpg');	
}

div#top-form-controls a#reset{
	float: right;
	background-image: url('../images/reset.jpg');
}

#top-form{
	border-bottom: 1px solid #999;
}

#top-form form{
	background-color: #ccc;
	margin: 0!important;
	color: #fff;
	padding: 20px 0;
	display: none;
}

#top-form form h5{
	font-size: 0.9em;
	margin-left: 20px;
}

#top-form form div{
	clear: left;
	margin-bottom: 10px;
}

#top-form form ul{
	margin: 10px 0;
	
}


#top-form #choose-topics ul li{
	list-style: none;
	float: left;
	width: 200px;
	margin-left: 20px;
	margin-bottom: 20px;
	background-color: #737373;
	padding: 5px 5px 8px 10px;
}

#top-form #choose-topics ul li.active{
	background-color: #F8F8F8;
	color: #5D5D5D;
}

#top-form #choose-topics label{
	margin-left: 7px;
	position: relative;
	top: 1px;
}

#top-form #choose-colours ul{
	margin-left: 10px;
}

#top-form #choose-colours ul li{
	list-style: none;
	float: left;
	margin-left: 8px;
}

#top-form #choose-colours ul li div{
		border: 2px solid #454547;
		float: left;
		margin-right: 2px;
}

#top-form #choose-colours ul li.active div{
	border-color: #fff;
}

/* need to be positioned absolutely, not hidden, for IE */
#top-form #choose-colours input{
position: absolute;
left: -1000px;
top: 0;
}

#top-form #choose-colours label{
	width: 44px;
	height: 11px;
	display: block;
	border: 1px solid #fff;
	cursor: pointer;
}

#top-form #choose-colours label span{
	display: none;
}

#top-form div.buttons{
	margin: 20px 0 0 0;
	text-align: center;
}

#top-form form div.buttons input{
	width: 80px;
}	

#features
{
	background-color: #ddd;
	height: 200px;
	position:relative;
	display: block;
	overflow: hidden;
}

#features{
	color: #000;
}

#features .ui-tabs-panel {
background-color: #fff;
border:none;
padding:0;
height: 160px;
padding: 0;
}

#features div.fragment-body{
	float: left;
	margin: 0.5em;
}

#features h5{
	font-size: 1.1em;
	margin: 20px 10px 0 0;
}

#features p{
margin-top: 10px;
}


#fragment-1 a{
	color: #629DD9;
}

#fragment-2 a{
	color: #0C44BF;
}

#fragment-3 a{
	color: #3E8B8F;
}

#fragment-4 a{
	color: #FD7603;
}



.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a span {
background: none;	
}

.ui-tabs-nav, .ui-tabs-nav li, .ui-tabs-nav li#sea-forts a{
margin-left: 0px;
padding-left: 0px;	
}

.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a {
width: 142px;
margin: 3px 0 0 3px;
height: 40px;
top: 0;
}

.ui-tabs-nav li#home_tabs a{
	background: #89b8e7;	
}



.ui-tabs-nav .ui-tabs-selected a{
	height: 43px;
	margin-top: 0;
}

/* panels */

div.panel{
	margin: 20px 0;
	text-align: left;
}

div.panel h2{
cursor: move;	
}

.collapsed div.panel-main{
	display: none;
}

div.panel-top{
	-webkit-border-top-left-radius: 0.3em;
	-moz-border-radius-topleft: 0.3em;
	-webkit-border-top-right-radius: 0.3em;
	-moz-border-radius-topright: 0.3em;
	background-color: #fff;
	padding: 10px 5px;
}

div.panel-top h2{
	margin-left: 20px;
	font-size: 1.3em;
}

div.panel-top a.toggle-panel{
	float: left;
	position: relative;
	top: 5px;
}

div.panel-top a.edit-panel{
	float: right;
	border: 1px solid #ccc;
	padding: 3px 10px;
}

/* top image sections */


a.active{
	background-color: red;
}

.top-panel-links ul, .top-panel-links li{
list-style: none;
padding: 0;
}

.top-panel-links{
position: relative;	
height: 110px;
background-color: #7C9C5F;
margin: 0;
}

.top-panel-links li a{
height: 32px;	
border-bottom: 1px solid #999;
}

.top-panel-links li a.last-list{
border: none;
}

.top-panel-links img{
position: absolute;
top: 0;
left: 0;
}

.top-panel-links a{
display: block;
margin-left: 146px;
color: #fff;
padding: 2px 6px;
}



/* edit panel form */

form.edit-panel-form{
	background-color: #474749;
	padding: 8px;
	display: none;
}

form.edit-panel-form .feed-input{
	color: #fff;
	width: 140px;
	display: block;
	float: left;
	margin: 3px 0;
}

form.edit-panel-form label{
	margin-left: 4px;
}

form.edit-panel-form .buttons{
	padding: 12px 3px 10px 3px;
	clear: left;
	text-align: right;
}

form.edit-panel-form .buttons div input{
width: 60px;
}


/* feeds */

div.feed-top{
	background-color: #eee;
	padding: 8px 2px;
}

div.feed-top h3{
	margin: 0px;
	text-transform: uppercase;
	font-size: 1em;
	padding-left: 16px;
	color: #494949;	
}

div.feed-top a{
	float: right;
	margin-right: 5px;
}

.feed ul{
	margin: 0;
	background-color: #fff;
	padding: 5px 10px 5px 30px;
}

.feed ul li{
	padding: 5px 0;
}




/* reset form */

#dialog-form{
	display: none;
}

#dialog-form div.buttons{
	text-align: right;
}

.blockUI{
	border: 10px solid #A4A5A5!important;
	background-color: #444445!important;
	cursor: auto!important;
	color: #fff!important;
	text-align: left!important;
}

.blockUI h1{
	padding:  10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #A4A5A5;
}

.blockUI p{
	margin: 0 10px;
	font-size: 1em;
}

.blockUI form{
margin: 30px;	
}

.blockUI form input{
	width: 80px;
}

/* sortable */

.ui-sortable-helper{
	border: 3px solid #A4A5A5;
	z-index: 20;
	position: relative;
}

.placeholder{
	border: 1px dashed #fff;
	background-color: #BFBFBF;	
}

.placeholder{
position: absolute;
z-index: 1;
}


/* colour specfic styles */

/* purple */

.purple div#header{
background-image: url('../images/purple.gif');
}

.purple div#header, .purple .top-panel-links a:hover, .purple .top-panel-links a.active{
	background-color: #691E79;	
}

.purple .feed ul li a, .purple .panel-top h2, .purple .panel-top a, .purple .feed ul li{
	color: #691E79;
}

.purple .top-panel-links{
background-color: #A97AB3;
}


/* pink */

.pink div#header{
background-image: url('../images/pink.gif');
}

.pink div#header, .pink .top-panel-links a:hover, .pink .top-panel-links a.active{
	background-color: #840259;	
}

.pink .feed ul li a, .pink .panel-top h2, .pink .panel-top a, .pink .feed ul li{
	color: #840259;
}

.pink .top-panel-links{
background-color: #B37196;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
	overflow:hidden;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

now i need to start running though this to see what i can find that would cause conflict, if anyone can see anything please post.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back