I am using jcarousel on a page in 3 different sections. I initially show the first section and hide the other two with display: none.
I have done some googling and found this is a common problem because anything that has a display of none automatically has a width of 0 and hence jcarousel cannot set it up properly.
I found this post on SO: Hide a jCarousel when page loads
That deals with it by putting the content you don't wanna show just yet by moving it off the page, I could do that, but was wondering, would that be bad for SEO purposes? As in Google wouldn't like the content being outside of the page?
Do I have any other options?
Ok, I fixed my issue by letting the content load first and then once all the page data was loaded I ran a function to hide the relative content.
Code in header.. this runs the hideHomeCats function once everything on the page has been loaded.
$(window).load(hideHomeCats);
Where hideHomeCats is a function that hides the relevant content.
Hope this helps someone else. :)
Related
I'm experiencing some issues regarding an AJAX script I'm working on.
The page loads perfectly well, and all needed scripts are loaded the same for basic page functionality inside AJAX script, but after hash change, jQuery behaves awkwardly.
Let's take this example.
The custom jQuery script writes an inline CSS propriety for a specific DIV at page loading:
Now, I load the login page for example:
I get back to the main page and inline style disappears as well as the basic loaded functionalities cease to exist after Ajax call:
*
Any experience on this? Does anyone have a clue why this happens? Or even near it... Seems the script unloads on page/hash change, which I don't believe. Or enters in double loop, therefore doubling the classes for HTML. I don't get it.
Already searched a lot and went trough the coding and is fine becasue it works fine alongside with basic HTML. Would appreciate some thoughts on this matter.
Thanks!
I am writing a free online e-book which needs a few minor formatting tweaks:
http://rperl.org/learning_rperl.html
The "Full Table Of Contents" at the very top of the page starts out by being visible for a few seconds, then finally collapses itself to be hidden. What we need is for it to start as hidden, and not be visible at all for the several seconds while the page loads. You can see that I have already tried to solve this issue by setting "var index_hidden=1;" at the following link, otherwise the table of contents would never hide itself at all:
https://github.com/wbraswell/rperl/blob/gh-pages/javascripts/metacpan_rperl.js#L832-L833
It probably shouldn't matter, but I'm using some custom Perl scripts to generate this file from Perl POD source, I can give more info if needed.
Although the described behavior does not appear for me (OSX + Firefox). Here's what you might do:
Hide the element by default using CSS. Add this to your head element (extend with stronger hiding CSS when needed).
<style>.wait-for-js { display: none; }</style>
And hide your element by adding the class
<div id="index-container" class="hide-index wait-for-js">
Last but not least, to make this trick functional. Remove the class as soon as JS is loaded, which would also mean that other logic has been loaded and you're save to show the table of contents. Be sure to load this JavaScript last thing you'll do.
<script>
document.getElementById('index-container').className = 'hide-index';
</script>
Or if you're using jQuery
<script>$('.wait-for-js').removeClass('wait-for-js');</script>
Welcome to SO!
Right so basicly what going on is I have a website I'm trying to build with a ajax navigation so it gets the webpages and loads them into the same page. what the issue is when I put content in normally it works fine but when I try to add content to an external doc and access it from the navigation the boxes split you can see it here http://101.177.243.251/
Does anyone know how to fix this. http://101.177.243.251/ is where it is hosted if you could have a look and see if you could help me.
That gap is from the margin on the first paragraph tag.
The following CSS should fix the issue:
.pageContent {
overflow: hidden;
}
I am having troubles with changing pages across my website with jquery mobile. Tough i switched back to the standard window.location, i would like to use changePage() og jquery mobile, but im facing some issues.
When i click the link, the page changes, but the js attached doesn't reload, so im stuck with the content of the preveious page(or not event this). Ive tried different approches: pageReload:true (not working), changing the position of the script tag(works, but creates duplicate content). If anyone has some answers for my question, i'd be grateful. I dont think this issue needs snippets, but here they are:
HTML:
<div class='ui-block-b'>
<a href='nota.php' data-role='button' class='buton_no_bg right' style='color:#b21908; font-family:'Segoe WP Semibold''>190 lei</a>
</div>
Thank you.
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
Solutions:
Put all of your javascript into first HTML/PHP file
Put your javascript into BODY, basically into page div
Turn ajax off
I'm working on a project where there's quite a lot of jQuery going on. So when I go to the page, I can see the jQuery running (e.g. $.button() elements on the page still appear as normal html elements before jQueryUI is loaded :S) so initially it looks all ugly THEN, once all the JS is loaded and executed, it looks "nice".
It's not just a case of preloading images or whatever, I want to RUN the jQuery code, but "hide" it from visitors so that once the page is opened, it looks "nice" straight away OR displays a black screen saying "Loading..." until the jQuery has finished running.
Take a look here: http://www.filamentgroup.com/ , though I'm not sure that actually runs the site's javascript before displaying it, but it shows the basic idea of having a dark screen saying "Loading...".. I suspect that's what happens in large web apps such as SlideRocket though it does use flash... :S
You answered the question yourself. Have some kind of loading screen that hides the page until all of the jQuery is run.
Try something like the following.
This goes at the top of your page:
<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>
Here's your jQuery:
$(document).ready( function() {
/*
* ... all of your jQuery ...
*/
// At the bottom of your jQuery code, put this:
$('#loadingMask').fadeOut();
});
Wrap all of your jQuery that you want "preloaded" into this :
$(window).load(function() {
//Your jQuery here
});
or alternatively, not all of your jQuery code inside of that wrapper. Rather, put your jQuery DOM changes into a
$(document).ready(function(){
//jQuery
}))
and then have a wrapper for all your site content.
<div id="everything-wrapper">
<!-- put your body here -->
</div>
and set the display to none in your CSS
#everything-wrapper {
display : none;
}
and then with the window load like earlier
$(window).load(function() {
$("#everything-wrapper").show();
// or
$("#everything-wrapper").fadeIn("fast");
// to be fancy with it
});
I was having a similar issue with an artifact popping up briefly during page loads in IE8. The solution I used was to change the visibility of the container to hidden at line 1 of the css. Then showed the element at the end of the jquery file. If the css and jquery start arguing, the element isn't shown until the argument is resolved.
I would have a overlay as part of your static CSS and HTML, then when JQuery loads via
$(document).ready() you can hide the overlay
The answer by Christopher is most likely the way FilamentGroup do it. You can have javascript "preloaded", it loads inline with the rest of the page, and due to it usually being larger than the rest of the page takes longer to download. You can't make javascript load first, that's not the way it works.
However, the principle to make it work is to "hide" your page from view in CSS (or with inline styles as the CSS will still have to load) then once everything is ready in javascript show it all again. If you notice there is a gap between the page displaying (nothing) and the javascript loading showing on FilamentGroup. That is because they hide the page, the javascript loader loads, then once the rest of the javascript has finished it hides the loader and shows the page.
Dude, I did you up a sample. I hope you likes. I use something like this on my own site.
http://jsfiddle.net/jMVVf/