This problem is totally boggling my mind. I have a new website, with 5 main pages, all but one of those pages has an unexplained gap beneath the footer, but only in firefox. I say unexplained because I used firebug to determine that it's not an element or the padding/margin of any elements.
I validated all of the pages in HTML and CSS3, and they all checked out so I don't think it's a broken tag.
I'd be greatfull if someone could poke around with firebug and check it out...
a page with the unexplained space: http://www.smorecreative.com/about/
the page without the unexplained space: http://www.smorecreative.com/work/
I tracked your problem down to the following code - If you remove this block of code, the mysterious gap goes away... But I don't know why Firefox doesn't like this code, and the other browsers are happy with it.
<script type="text/javascript">
// Pretty Checkboxes
jQuery(document).ready(function(){
jQuery('input[type=checkbox]').prettyCheckboxes();
});
</script>
Related
I made a simple change on my Squarespace site today, and for some reason my images on one specific page are not loading anymore. I've tried different browsers, and clearing my cache, but the image won't load and nothing has changed. Any idea what I can do to get to the bottom of this?
If you follow this link you will see what I'm talking about, and image will load for less than a second and then disappear. If you don't see it, try refreshing the page.
It appears that you are applying some custom CSS to the page in question, likely via per-page code injection. The following code is appearing on that page:
<style>
.sublogo {
z-index:1000;
position:fixed;
top:20px;
left:35px;
}
.thumb-image.loaded {
display: none !important;
}
</style>
It is the second rule, .thumb-image.loaded {...} that is causing the image to disappear once it is fully loaded.
Removing that rule should solve the issue. Of course, you'd need to consider why the rule was added in the first place and what other issue it was put there to solve.
I am having a problem with the jcarousel in my Magento webshop. I bought a templete for my webshop so that I did not have to do any programming myself since I don't have any knowledge about programming.
On the bottom of the product pages of my webshop a jcarousel is shown in which related products are shown. This function works well in every browser except Google Chrome. Here none of the products in the carousel can be seen.
Someone on an other forum told me it had to do with the width of the carousel. That this particular line was causing the trouble:
Since I have no knowledge whatsoever on programming, I don't know how to adjust the width. Can any of you tell me if this is indeed the problem and how I can solve it?
To give you an idea what it is all about, here's an url of a page on which it doesn't work:
http://supplementendeal.nl/index.php/creatine/scitec-crea-bomb.html
Well the problem is that a width of 179769313486231600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000px
is being inserted into the li tag of the unordered list. Without the actual javascript its hard to say how to fix this.
I have a strange problem.
When I enter my site http://www.dinomuhic.com I sometimes see a left angle bracket in the top left corner on white background for a short time (1-2 sec) before my page is displayed.
I don't know why this is happening. I thought its because I send an AJAX request at document.ready state but I removed it and placed the stuff, which the AJAX would load at first entering, directly into the DOM so it doesnt have to be loaded and go through all the AJAX code but it still pops up.
It looks really unprofessional and if it has to do something with laoding speed of the page I would rather use a preloader instead of this happening. Perhaps some of you know why its happening.
Thank you
PS: and PLEASE for the love of god, don't tell me to get rid of jQuery/UI or the like buttons. There are millions of other pages which use these and they don't have such problems. Thank you
Cuz it's in your code before your meta redirect. Here's your culprit:
<html><head><meta http-equiv="Refresh" content="0; URL=http://www.dinomuhic.com/2010/index.php"><
<title>DINOMUHIC.COM - The official Homepage of Dino Muhic</title>
</head><body></body></html>
Notice the index.php"><
My designer thought it was a good idea to create a transition between different pages. Essentially only the content part will reload (header and footer stay intact), and only the content div should have a transitional effect (fade or some sort). To create this sort of effect isn't really the problem, to make google (analytics) happy is...
Solutions I didn't like and why;
Load only the content div with ajax: google won't see any content, meaning the site will never be found, or only the parts which are retrieved by ajax, which arent't full pages at all
show the transitional effect, then after that 'redirect' the user to the designated page (capture the click event of a elements): effect is pretty much the same as just linking to another page, eg. user will still see a page being reloaded
I thought of one possible solution:
When a visitor clicks a link, capture the event, load the target with ajax, show the transitional effect in the meantime, then just rewrite the entire document with the content fetched with the ajax request.
At least this will work and has some advantages; the page reload will look seamless, no matter how slow your internet connection is, google won't really mind because the ajax content is a full html page itself, and can be crawled as is, even non-javascript browsers (mobile phones et al.) won't mind, they just reload the page.
My hesitation to implement this method is that i would reload an entire page using ajax. I'm wondering if this is what ajax is meant to do, if it would slow things down. Most of all, is there a better solution, eg. my first 'bad' solution but slightly different so google would like it (analytics too)?
Thanks for your thoughts on this!
Short answer: I would not recommend loading an entire page in this manner.
Long answer: Not recommended. whilst possible, this is not really the intent of XHR/Ajax. Essentially what you're doing is replicating the native behaviour of the browser. Some of the problems you'll encounter:
Support for the Back/Forward
button. You'll need a URI # scheme
to solve.
The Browser must parse
the entire page through AJAX.
This'll slow things down. E.g. if
you load a block of HTML into the
browser, then replace the DOM with
it, only then will any scripts, CSS
or images contained therein begin
downloading.
Memory - the
browser's not changing pages. Over
time (depending on the browser), I'd
expect the memory usage to increase.
Accessibility. Screen readers
will need to be notified whenever
the page content is updated. Might
not be a concern for you but worth
mentioning.
Caching. Browser
would not know which page to cache
(beyond the initial load).
Separation of concerns - your View
is essentially broken into
server-side pieces to render the
page's content along with the static
HTML for the page framework and
lastly the JS to combined the server
piece with the browser piece.
This'll make maintenance over time
problematic and complex.
Integration with other components -
you're already seeing problems with
Google Analytics. You may encounter
issues with other components related
to the timing of when the DOM is
constructed.
Whether it's worth it for the page transition effect is your call but I hope I've answered your question.
you can have AJAX and SEO: Google's proposal .
i think you can learn something from Gmail's design.
This may be a bit strange, but I have an idea for this.
Prepare your pages to load with an 'ifarme' GET parameter.
When there is 'iframe' load it with some javascript to trigger the parent show_iframe_content()
When there is no 'iframe' just load the page, with a hidden iframe element called 'preloader'
Your goal is to make sure every of your links are opened in the 'preloader' with an additional 'iframe' get parameter, and when the loading of the iframe finishes, and it calls the show_iframe_content() you copy the content to your parent page.
Like this: Link clicked -> transition to loading phase -> iframe loaded -> show_iframe_content() called -> iframe content copied back to parent -> transition back to normal phase
The whole thing is good since, if a crawler visit ary of your pages, it will do it without the 'iframe' get parameter, so it can go through all your pages like normal, but when you use it in a browser, you make your links do the magic above.
This is just a sketch of it, but I'm sure it can be made right.
EDIT: Actually you can do it with simple ajax, without iframe, the thing is you have to modify the page after it has been loaded in the browser, to load the linked content with ajax. Also crawlers should see the links.
Example script:
$.fn.initLinks = function() {
$("a",this).click(function() {
var url = $(this).attr("href");
// transition to loading phase ...
// Ajax post parameter tells the site lo load only the content without header/footer
$.post(href,"ajax=1",function(data) {
$("#content").html(data).initLinks();
// transition to normal phase ...
});
return false;
});
};
$(function() {
$("body").initLinks();
});
Google analytics can track javascript events as if they are pageviews- check here for implementation:
http://www.google.com/support/googleanalytics/bin/answer.py?hl=en-GB&answer=55521
I've been using a very helpful AJAX-based script called AJAXTwits to load multiple Twitter timelines for a sports team into a div. The nice thing about the script is that it (1) combines multiple timelines into one chronological timeline and (2) caches the xml for faster loading. Every so often, though, Twitter's feeds go down, meaning that (i) the caching fails, (ii) the content won't load (I get stuck with the loading message), and (iii) if the problem is big enough, the whole page (not just div) breaks and throws a 404 error.
So, I'd like to add error-handling -- specifically, a pre-written message/div-content that will replace the loading message if the content doesn't load within a set amount of time. I've found some nice examples on this forum on how to handle timeouts. But those deal with a much simpler function/script syntax. Being a cut/paste/emulate programmer, I'm having trouble adapting that.
The main html looks like this:
<ul id='AjaxTwits'>
<li id='AjaxTwitsLoader'>
<em>Loading tweets</em>
</li>
</ul>
<script type="text/javascript">
getAjaxTwits("AjaxTwits/AjaxTwitsRequest.php", 6);
</script>
Without digging into the script and php files, is there any kind of error/timeout handling that can be placed into this html? Any help appreciated!
I did not use this script before therefore i can't help you on this, but i can recommend what i've been using for showing twitter messages on my apps.
It is a jquery plugin which you can find here: http://tweet.seaofclouds.com/.
I don't think you will have the same problem, because it uses jquery to make the ajax call. It worths to try.
Hope it helps.