I'm having a problem with http://taxlienagents.com/ and how it is displaying in Google Chrome. When I open the site in Google Chrome, the center Tab Area seems to cover the main text above it. If you take a look at this link, you should be able to see what I am talking about versus when opening the site in FireFox. I tried playing around with the Z-Index, but that didn't seem to fix it. The other issue that I seem to be having is with rolling over the buttons ("How to," "Coaching," and "Done for You") the highlight only covers about 2/3 of the button, I think this is an issue with FancyBox.
If anyone could give me any advice on how to fix this, it would be much appreciated.
you have several JS related errors :
1 You load jQuery 2 times, in 2 different versions (one on-site, one from google)
--> remove one of them
2 you have an error in adia-paper.js that keeps Fancybox from triggering right - and it blocks the JS execution.
--> try to change
$(document).ready(function() {
$("#form-trigger").fancybox({
'width' : 600,
'height' : 526,
.....
to
jQuery(document).ready(function() {
//contact form modal window
jQuery("#form-trigger").fancybox({
'width' : 600,
'height' : 526,
'autoScale' : true,
'transitionIn' : 'fade',
'transitionOut' : 'fade'
3 you trigger fancybox on a non-existing DIV (#form-trigger)
--> although it is not the major cause for your problem , it is better to trigger JS only when needed...
Jquery - when encountring a big issue, blocks and stops from executing any functions further down the line, and your "slideshow" is also JS driven .
Different browsers treat those errors differently - and it is also depending on your own browser settings.
FF - Firebug Chrome and Opera all give the same consul errors.
If you fix all those problems and the problem persist - we can keep on de-bugging - but I am pretty sure that one of those, or all together are the culprit..
EDIT I you still have other errors - but I do not think they are the problem. I do believe however that it can be because you edited the letabs JS and added some expression regarding height. strangely chrome sets the div height le-tabs_content_container to 58 px .. i believe it comes from the script . try to set the heights for all the parent / children divs (and remove that script) - It worked for me instantly on the debugger..
Here are your issues of tabs http://validator.w3.org/check?uri=http%3A%2F%2Ftaxlienagents.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0. Before asking for help, help yourself by validating your code # validator.w3.org
Related
I have problem with unknown javascript script which scrolldown when enter page (I think it's javascript). I trying to find over firebug, code, delete scripts, I even deleted all styles,scripts, and had a clean code.
When enter this page only in chrome browser its scroll down to comments div, I have no idea why only chrome, firefox it's not do this, I have tested 2 computers them both the same on chrome.
This is the link of the page:
http://test.ibids.co.il/add/120
Which script do it or what cause to do this?
EDIT 1 (27/01) : I don't think it's js as I have removed all JS from code.
EDIT 1 (27/01) : It wad addthis script problem.
Before you do anything else: check your imported scripts! You are importing jQuery three times! This might create unwanted side effects.
http://test.ibids.co.il/assets/js/new_js/jquery-1.9.1.js
http://test.ibids.co.il/assets/header-js/jquery-1.11.1.js
http://test.ibids.co.il/assets/notification/js/jquery-ab8e840c3dad7ccf2deadb8c40d53bdb.js
There might be more scripts / css that are not needed. Check your assets.
I cant comment so I will post answer. I have disabled all JS on site and still on reload page site was goes scroll down and then goes up so maybe it is not so JS related?
I think you have code related to navigate or nicescrollers in your script .First try to remove if you have any code related to navigateble :true ,and If you work on nicescrollers try to resize them or comment to check it once
I'm using fancybox (version: 2.1.5) to show pop ups on my site and it does not work properly, it throws an error
undefined is not a function
Every time when I'm opening and closing fancybox. Here the screenshot: http://grab.by/A5MK
I brought it to work partially and seems it fullfil my needs. But every time when I close it, background stays gray out and I need to click on it one more time to make it go away.
I can't puzzle out what can cause such inconsistency. Does that affiliated with jQuery version (I have it 1.7.1) or with peculiarities of fancybox? I would like to know if someone has encountered with such problem and how can I work around that? Is it feasible to get it to work or I should use another lightbox plug in?
Note: site created with Wordpress CMS.
Sorry for such convoluted and long-winded specification, I have tried my best to provide all information connected with problem.
Thanks in advance.
Edit: I don't know in what extent my code can be helpful on this occasion, but anyway here is my code
$("a.fancybox-purchase-inline").fancybox({
prevEffect: 'elastic',
nextEffect: 'elastic',
autoSize: true,
closeBtn: true,
afterLoad: function () {
set_billing_state_placeholder();
show_billing_state();
}
});
I'm using the jGrowl jQuery status-message plugin to display a sticky message on page load, and it works perfectly on all browsers except Internet Explorer 8. In this browser, there remains a small block, about 2 lines high but with no text, even after closing the sticky message. It does not have a close button, or anything, for that matter. Here is my code, which is placed in the document.onload function for IE:
$.jGrowl("Hi! Welcome to the site!", { sticky: true });
All other jGrowl settings are set to default, which is a floating message at the top right of the page.
Has anyone encountered this problem before, and perhaps know how to fix it?
This seems to be a bug in jGrowl, perhaps as a result of incompatibility with later releases of jQuery (the last update was in March 2008).
Maybe you can try NMS Message?
I have an iframe on my index.html and this iframe is dynamic.
on my index.html I have a form, which when submitted, shows the results inside the iframe.
The problem is the Iframes height also has to be dynamic for the website to look "clean".
So in the Iframes php page, I have this code:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
And in the index.html (which is the parent in this case) I have this function:
function resize_iframe(new_height){
byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}
The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.
I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...
Any ideas?
UPDATE:
I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.
But I must click back in the browser for it to work...
SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here
I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"
Sometimes javascript does not work as expected when the page has validation errors.
First try validating your markup (HTML).
If validating does not work, try using jQuery.
jQuery is cross-browser compatible; you should get the exact same result on every browser.
This problem occurs in Firefox and Chrome, but Safari is fine. IE8, however, in compatability mode or not, doesn't load the overlay over the top (it just sits at the top, scrolling the content down - although I guess this is because the overlay is at the top of the markup).
It also doesn't show the image I'm attempting to show, but shrinks the overlay loading image to nothing in the top left of the screen. I am using the standard colorbox-min and the CSS that goes with that.
Inspecting the markup in the IE8 dev tools seems to hint that the content is not actually loaded into the cboxLoadedContent div.
$(document).ready(function() {
$('a[rel="preview"]').colorbox(
{
photo: true
, maxWidth: '95%'
, maxHeight: '95%'
, photoScaling: true
}
);
});
basically the page is a list of media images and when you click one it gives you the preview and allows you to scroll through ones on the page
well at least it does in FF took a little screenshot as it was shrinking the overlay thingy http://dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png
Anyone have any ideas?
I expect my explanation is not great, so maybe I could take a movie of it or something if needed.
Is your code wrapped in a ready function? I've seen instances where code that works in FF/Safari fails in IE because IE seems to load the DOM more slowly. In those cases it almost always turns out that I've failed to wrap the code in a ready function.
$(function() { // the important bit
$('.colorbox').load('...').colorbox();
});
Try an XHTML strict doctype...?
I've experienced the exact same symptoms - but in my case it extended to all browsers.
One cause was that I didn't include the CSS file that I use for pages that use colorbox.
Another cause was I updated to the newest version of jQuery, but didn't upgrade colorbox. (Also, if you update your jquery include, make sure that you also update your jquery vs doc - if you're even using it).
Hope that helps.
Search through your colorbox files for this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
There will be several instances of it, each pointing to a png. Make sure the path to that png is correct, then test it again.
I'm pretty sure I had this exact problem at one point, and fixing the paths was all I needed to do. However, it's been a while so my memory is a little fuzzy.
I had the same issue. I also had a problem with the image being only 10px wide due to IE not liking CSS max-width being set to 100%. To alleviate the problem I add the following to my CSS.
.cboxIE img
{
max-width:none;
_max-width:none;
}