I'm using NextGEN Galleryview template Wordpress plugin.
When I load the page, it first loads a very tall, blank document. Some 3000px in height.
Then this disappears and it loads the carousel with the correct height/elements.
I'd like it not to double-load, although I've not been able to identify where and how it occurs. I've compared it to another NextGEN gallery template (which loads properly) and FireBug shows them to have identical scripts/images, CSS and loading times.
Found the problem.
In the galleryview.css file there is this crucial bit:
/* IMPORTANT - Change '#photos' to the ID of your
gallery list to prevent a flash of unstyled content */
#photos{ visibility: hidden; }
Not sure why the default ID in the JS file isn't used here.
There is no ID for the gallery list in the JS file anyway, only a class. Changing the code to:
#myGallery{ visibility: hidden; }
.galleryview { visibility: hidden; }
Eliminates the flash of unstyled content. #myGallery is the actual ID, and changing its visibility seems to make the page load faster with no side effects, so I'm not pushing my luck. Leaving as is.
Hope this helps others. It took two days to solve this issue.
Related
I have two questions im sure are very simple I'm just looking over something.
1.) To start off, my website is mostly HTML, except I have a WordPress blog page. To make the blog page look like the HTML home page, I modified the header.php and footer.php, and everything looks fine except one problem.
As you'll notice if you compare the Home page with the Blog page, for some reason the margins I have to position the navigation links & social media icons isn't working but it works on the home page? I really have no idea why it isn't working, the stylesheet is linked correctly and everything, as every other style works fine except the margin in those areas.
2.) At the bottom of the home page there is a white space below the footer, but its not on the WordPress blog page? I am trying to remove the white space but have had no luck. The only way I can remove it is if I make the footer 30px larger, which I don't want to do. I have set heights on the HTML, Body and am unsure why the space is there.
Thanks ahead of time, I appreciate you taking the time to look at my questions.
EDIT here is a link to the site:
http://jqwebexamples.com/iAM_Talent/Version3-rev/index.html
The <p> Tags in your footer are the problem. If you remove (or disable it temporarily) the following style:
#footer p {
margin-top: 45px;
}
then the white line disappears. Take a look in firebug to check this out.
The other issue looks like caused by the unsorted list in your navigation div.
I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.
No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.
I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's "Sticky Footer" solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.
Heres a Fiddle of my footer PHP.
Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.
You can find an example of the whitespaces on my website here
Solutions i've tried:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.
I'm fairly new to Wordpress/CSS/PHP and I'm having a few issues when designing the company intranet. As a design brief I was asked specifically to use only the primary sidebar as a navigation menu, leading me to remove the main/top menu.
I am currently using the code:
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
header {display: none; !important
}
Within a child theme to successfully hide all headers, unfortunately I've reached a point where I actually need to use the "entry-header" class in the featured content window to show the titles.
I am very happy with all other titles staying hidden as I've done a lot of my styling around this.
Basically, all I'm wanting to do at this point is keep everything else hidden whilst only showing the entry-header on the featured content section. I hope this makes sense! Thank you very much in advance for your help.
Unfortunately the site is hosted internally so I can't provide a link to show what I mean!
There should be a file named header.php
Inside there should be the "top header" where the nav is contained, etc., that you want to hide. It should have an ID or a class along with, if it does not, give it one. For example...
<header>
Could be edited to be...
<header id="top-header"> or <header class="top-header">
Then, in your CSS, change...
header {display: none !important; }
To this if you are using an ID...
header#top-header { /*code*/ }
OR this if you are using a class...
header.top-header { /*code */ }
The above is the more "proper" way of hiding those items, although in the interest of site speed, if you arent using those headers at all, simply delete them from header.php. (be careful of any wrapping div's that end in footer.php")
Off the top of my head, the 2014 theme has an ID attached to the top element already that you can re-use.
Alternatively, you could just "undo" the styling for the entry-header... Though at this point it would be considered bad practice. To do this... Right beneath the header line you already have in your css, add this:
header.entry-header { display: inline !important; }
Make sure that the above code is directly AFTER the code you are using to hide all headers. It will not work if it is above.
Again, i caution you however, that this is not best practice. Hiding all headers, then unhiding the ones you want isn't the best way to code. This would be called an exception, and you are forcing yourself into writing potentially multiple exceptions any time you run across an instance where you want to see .
Also, simply setting them to display: none; does not mean they are REMOVED from the page. Only hidden from view to users. Google bot will still see and read any content inside those hidden elements. This could potentially be very bad for your SEO.
If you want the .entry-header to be visible on only the featured content page, you'll have to use a conditional statement in the featured page template to enable the header to be displayed on that page alone.
I'm having trouble making my site function well both in JS, and without JS.
I have two standalone versions working just fine. Now, I have a photo-album. In the Javascript version, there is a FancyBox. There's the overview of all photos inside an album, and clicking an image will open up that image in FancyBox. In decent browsers, the url even changes with the ID of the image, so you can share an image easily. When the Javascript version is called with an image, the FancyBox gets loaded automatically.
The issue is with the non JS version. Here we have the same overview of all the images in the album, but the links are different. To solve this, I use the following script:
<noscript><!-- all the images here --></noscript>
for the non-JS version, and
<div class='jsonly'><!-- all the images here --></div> with
<noscript><style>.jsonly{display:none;}</style></noscript>
Now the issue is that I'd rather not have the whole js-version in the background of the php-version, because this is a rather biggy and also requires two extra queries. To try and circumvent these troubles, I used JS to set a cookie if JS is enabled, so I could filter it out in PHP. The issue with this however is, that when a user had JS enabled and suddenly doesn't anymore, it will still present the JS-version because of the cookie that's still there.
What are common solutions for problems like these? Should I just put it all in the background, or neglect the fact that some people might need to push a button to go back to the JS version?
You've got the logic backwards. If you want something to be visible only when JS is enabled, then you BY DEFAULT hide that content, then use JS to show it.
<div class="jsonly">...</div>
<style>
.jsonly {
display: none; /* hide by default */
}
</style>
<script>
$('.jsonly').show(); // will only work if jquery/JS is available.
</script>
If you go to "Game rules" section and click around the sections "Backgammon, Narde, Nackgammon, Tavla, Old English" you will see that some sections load normally and the scrollbar works fine. Bigger sections like Backgammon and Narde do not load fully. The content in backgammon section is going out of the margin and the Narde section simply won't load fully.
What could be the issue here? All of the sections with scrollbar have the same identical settings. The only difference is that Backgammon and Narde sections have more text and more images. Could this be a reason for the glitch? Maybe the plugin somehow doesn't get to load all the content and already locks itself in place? What could be the possible solutions?
EDIT: I'm pretty sure it has something to do with tinyscrollbar plugin loading a bit too fast (before the inside content has loaded). What method could I use to put a timer on the plugin so it doesn't load as quickly or refreshes?
first it seems that your "p" elements styles do not have width set to it and when rendered they hide behind the scroll bar making some of the text not visible.
This may not answer you question directly but it may have something to do with portions of text being hidden by overflow:hidden / overflow:scroll that is being used for the scroll bar.
You could also try using the jScrollPage plug in as it simplifies the scroll bar coding.