Now that we're switching to feature detection rather than browser detection, how does/should one detect for a webkit browser?Is there a known feature that we can check for that would Identify Safari and Chrome?We're running into some (rather minor) layout issues with some jquery plug-in rendered content in Chrome and Safari and it'd be really easy to just do a 'if a webkit browser, tweak this' type of logic.
View 4 RepliesWhy this code is not working on Webkit browsers:
Only jquery and the plugin printed above are loaded, so there shouldn't be any conflicts.
HTML:
Chrome gives the following error: Uncaught TypeError: Object #<an Object> has no method 'followUser
I have been spending my whole life on converting a flash version of a header/menu system to jQuery HTML. It is very nearly done in that it works nearly 100% perfectly in Firefox and IE8. [URL]. Unfortunately, in Chrome and Safari, my menu events of the top menu seem to fire inconsistently, and in the wrong order. It is easy to trigger a problem by simply circling your mouse over the top links. One of the menus will retract when it's already retracted, or the mouseover event for one or more of the links will seemingly detach, making the menu unusable.
The way it is supposed to work is as follows: Person hovers over link, causing menu to slide out and the mouseover event to be detached. This also triggers a 1 second timer that retracts the menuHovering over menu cancels 1 second timer.When the mouse leaves the menu, the menu is retracted and the original mouseover event is attached to the link. It's a bit hackish but it works and I've spent way too much time on this project as is. I have a lot of iphone detection checking to disable/enable some portions of the code if the browser is mobile safari. The site works fine in mobile safari as is.
It seems that this code makes webkit browsers and opera anchor back to where the fade happens everytime the fade action occurs.
CSS Code:
.slider {
margin: 0 auto;
overflow: hidden
}
.slide_content {
margin: 0 auto;
width: 800px;
height: 202px;
}
.slide_content img {
border-width: 1px;
border-style: solid;
border-color: #43474A;
} .....
I have some JS code that uses XMLHttpRequest to get an XML file then loops through to display each item from the file. This happens relatively quickly but there is about a second delay before the content shows up--I want to display a loading message while that is happening. Everything's working great in Firefox, but all the webkit browsers I've tried (Chrome + Safari), don't display the loading message in any fashion. It's not that the function to display the loading message isn't firing (because if I open it and then take out the code to close it, it does appear after all the XML processing is done).
I've even tried making opening the loading message a prerequisite (with setTimeout even, to make sure it's not just happening too fast), for running the XMLhttprequest, and it still don't show up. My hypothesis is that the browsers seem wait until all the processing is completed (ie: the XML file has been downloaded and converted to HTML) before doing anything. So both the open and close loading message functions are firing, but they're "let loose" at the same time so the net result is no loading message. I'm not exactly at liberty to disclose the code, so I'm hoping there is some known issue with this that someone is aware of, without having to show all my code.
I got this simple test page linked here that is suppose to automatically "click" a box at load time. Works in all browsers, except for Chrome and Safari (webkit browsers). I'm getting the error ... Code: Uncaught TypeError: Object #<HTMLDivElement> has no method 'click' Do a "view source" and you will see all the code there as being ...
[Code]...
I am having difficulty getting the cursor to turn into a magnifier in both Mozilla and Webkit browsers. In the js file, I have this line
Code:
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image which works fine with Firefox, however if I do this, neither of them work.
Code:
cursorcss: 'url(magnify.cur), -webkit-zoom-in, -moz-zoom-in',
I can only get one or the other to work, not both at the same time.I also tried adding this into the html file
Code:
<script type="text/javascript">
$("img").css('cursor', function() {
if (jQuery.browser.mozilla) {
[code]....
but that did not work with either of the browsers.
I have a function called 'loadScript' which is used to load JavaScript files in parallel (for the purpose of not blocking the browser from downloading other components at the same time).
See the following link for more information on the subject:[URL].. This function works fine for IE and Firefox and up until today has always worked for Chrome/Safari. But today I noticed an issue for WebKit rendering engines, which is that sometimes the callback method I pass to the loadScript doesn't always fire, only sometimes when I force refresh the page.
[Code]...
I was having trouble with XSLTProcessor::transformToFragment() returning null on WebKit browsers (Safari and Chrome). Having read comments about issues with the load() method and xsl:import element, I used XMLHttpRequest and a very simple stylesheet and XML document for testing. Even after having eliminated the well-known problems, I was still disappointed to get a null return value from transformToFragment(). Finally, I noticed that one example used:
<xslutput method="html" />
where I had been using:
<xslutput method="xml" ... />
When I changed my method to "html", the transformToFragment() worked.
This should be an easy answers since I am a newbee and never redirected older browsers.For example I am learning JSON now and the below browsers are the only browser that can use the faster and safer JSON.parse parser. older browsers need to use javascripts eval() to parse json files to javascript objects.
[Code]...
On the cart payment page of my system, when a user proceed to pay his cart/order using online payment, the page takes time to process the payment. I made a pop-up for it to show that it is processing saying that "Do not refresh, your payment may take upto 2 minutes to process." But I am thinking for this solution of disabling the refresh... Or this alternate way: detecting the refresh committed by the user on my back end... If I detected it, Ill just make a function that will terminate the process and will inform the user for unsuccessful payment
View 1 Replies View RelatedSo I created a long while back a basic debt calculator for a blogger-client of mine. Here's the relevant code:
Code:
<script language="JavaScript" type="text/javascript"><!--
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
[Code]...
This code just does some basic arithmetic based on the values the client gave me, and it works fine in pretty much every browser, but for some reason in some web-kit (I think)-based browsers (Safari 5.x on the PC as well as a few other similar rarely-used browsers like Konq on Linux according to browsershots), the final tally (perperson2) does not display. [URL]...
I'm not a JavaScript wizard, but this is pretty basic stuff -- am I missing something really obvious?
Another thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me.
I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them.
Is there a single method using JS that works for all browsers?
I want to use jquery to detect what type of browser you are using and display a link to a .wmv file if you are on IE or display a link to a .mp4 file if you are any other type of browser.I have this script declaration in my <head> section.
<
script src="http://code.jquery.com/jquery-latest.js"></script>
In the body section I have the following
<div id="block"></div>
<
script type="text/javascript">[code]....
Nothing is being output on the page at all. I've tried to patch this together from various example on various web sites. How can I make this work?
I am using jQuery.get to make an AJAX request to the server which should return a JSON object, but it is interpretated by jQuery as a string, not an object.[code]I do not use getJSON because I want to make one request which could return in a JSON object, or just a string, depending on some conditions.
View 2 Replies View RelatedVery new using jQuery. Anyway, I have the following few lines which create a component on a web page.[code]...
Upon some analysis, I can see that the css does contain the styles used by my div. So now, I would like to change the colors of the component, but I am not sure what is the best practice. Can one override in the div tag the colors, or should one duplicate the .css and change it?
Seeking the best way to perform this that other in the group use.
This is my first jQuery code so I am noob at that case. I have created page with 4 tabs based on that tutorial:Each tab has form to fill out and submit. Starting on first tab, then if passed validation goes to next, etc. But when will not pass a validation I want to keep open that tab where the error occurred. My PHP code for the second tab looks like:
if(count($errors) > 0)
{
echo '<script type="text/javascript">
[code]....
So I have the following form field:
Code HTML4Strict:
<input type="text" size="9" style="width: auto">
I do this, because in CSS I set all my input fields to 'width:200px;' (looks better), but also require some fields to be shorter (which I do by setting 'width:auto' and attribute size="x"). The problem with this is that I need to get the precise width of all inputs with jQuery!
But if I do the following:
Code JavaScript:
alert( $( "input" ).css( 'width' ) );
It outputs: 'auto'
How do I make it return the element's actual width?
How does one assign the return value of a jQuery method/plug-in to a reference variable?
An IT idiot with apparent zero ability to communicate among Geeks who systematically eschew reading but readily recommend the writing of others.
I want to add a 'visited' class to a table cell and all of it's siblings if the link in the first td has been visited.
Here is my markup.
I've tried his:
And this:
And the class only gets added/appended to the table cells in FF, not webkit or IE and firebug tells me that the css is fine and would be applied if the class were present.
I'm trying to create a list, to which you can:
1. Add and remove items.
2. According to what's in this list, there should be dynamic content loaded on to the page.
I've accomplished 1 with the code below. I'm not sure about how to accomplish 2.
<script language="javascript">
var listItems = new Array();
var currentList = new String();
function listManager(task, id, name) {
//$("#debug").append(" ##### List manager. ("+listItems.length+"
items) #####
");
if(task == "add") {
refreshList(); // refresh the list .....
This appears to be an issue with webkit and not jQuery specifically, but I've noticed this:
NewDomRadio = '<input type="radio" checked="checked"id="testme" name=" testme" />';
$('div').prepend(NewEnumDom);
will not work in Safari (I'm using 5.0 w/ Snow Leopard).
Chrome appears to have somewhat fixed this, although destroying and recreating the element a few times re-introduces the bug. The source will read "checked=checked" correctly, but the DOM inspector reports checked: false.
There seem to be two workarounds:
1] Removing the name attribute (!!!)
2] Placing the checked attribute at the end.
I have prepared this jsfiddle test [URL] which works in Firefox but not in Chrome.
View 3 Replies View RelatedI'm trying to force jQuery UI Tabs to work with browser locations (as in direct-linking or bookmarking), but having very little luck doing so. It feels like I've seen this question at least 50 times around the net, and the answer mostly consists of one of the following 5:
[Code]...
Hierarchically based tabs (hopefully something better than "level1-level2-level3") As I said, I know it has been asked before, but apparently I am now the only one struggling with this. So if anyone could give some suggestion on how to use jQuery Address, jQuery BBQ or any other method to accomplish this,
I am trying to cycle through a set of tables within divs this works fine in firefox, but I cannot understand why it is not working in webkit broswers an example of what I'd like to cycle through:[code]do I need to somehow define that 'roundabound' id is what i'd like to cycle through?
View 5 Replies View RelatedFor a webpage displaying test results I have written jQuery in order to display the points scored as percentage of the maximum, and animated bars that expand and display different colours depending on the result.FF and Webkit display this without any problem, but IE somehow does not like it. First it displays the values as intended, but after clicking away the error message, I'm left with "NaN"..
View 1 Replies View Related