I have begun building a site using the theme NeueGrafik. I’m a newbie WP user (this is the 3rd site I’ve built, though I am a graphic designer) I’ve been able to stumble through some minor CSS and PHP modifications.
This theme has an slider in the header that fades through a listing of your recent posts (the large bold statements up top).
This element seems to force the page to automatically scroll up as it fades to a “taller” post/statement with multiple lines of type, when you are all the way at the bottom of a page.
You can experience the “jump” if you scroll to the bottom of either of these pages:
http://andyweaverling.com
http://andyweaverling.com/what-is-this-all-about/
This jump makes the posts difficult to read, and is only happening in Safari and Chrome. I can’t seem to find the appropriate CSS value or have enough PHP knowledge to come up with a “fix” for this.
I’ve also noticed that my footer info (RSS link and ©2011 link) at the bottom bump to the far left and bottom with no margins on individual post pages, but seem fine on the homepage, any thoughts?
Any help is greatly appreciated, Thanks!
This is neither a PHP nor CSS issue. It’s with the javascript on your page. Disabling Javascript prevents the “jump” from occurring. To be honest, your site is one of the worst examples of the overuse of Javascript I have ever seen. It kind of looks like you are loading a basic shell of a page then loading all the content on the page using Javascript. The horizontal scroll bar appears, disappears, appears, disappears, again and again as the Javascript loads the content of the page.
You should request this thread be moved to the Javascript board. Better yet, you should scrap this thing and start all over.
It’s a theme that I downloaded, I didn’t write any of the code.
I chose it because I like the way the content flowed into columns and the look of it. Is there an easy way to maintain the theme but remove the javascript slider up top?
I’m new to the forum, so I’m not yet sure how to submit a request to the moderator for moving to the Javascript forum.
I originally posted this in the WordPress forum, but someone suggested I move it over to the Javascript forum:
I have begun building a site using the WordPress theme NeueGrafik that I downloaded. I’m a newbie WP user and not a coder (this is the 3rd site I’ve built, though I am a graphic designer) I’ve been able to stumble through some minor CSS and PHP modifications.
This theme has a javascript slider in the header that fades through a listing of your recent posts (the large bold statements up top).
This element seems to force the page to automatically scroll up as it fades to a “taller” post/statement with multiple lines of type, when you are all the way at the bottom of a page.
You can experience the “jump” if you scroll to the bottom of either of these pages:
http://andyweaverling.com
http://andyweaverling.com/what-is-this-all-about/
This jump makes the posts difficult to read, and is only happening in Safari and Chrome. I don’t have enough code knowledge to come up with a “fix” for this.
I’ve also noticed that my footer info (RSS link and ©2011 link) at the bottom bump to the far left and bottom with no margins on individual post pages, but seem fine on the homepage, any thoughts?
The response I got in the Wordpress forum was to scrap the whole site, even though I’d like to keep the WP theme if I could:
http://www.sitepoint.com/forums/showthread.php?814381-Help-modifying-CSS-or-PHP-to-fix-quot-Jumping-quot-Page
Any help is greatly appreciated, Thanks!
Under everyone’s name there’s a little orange flag on a stick. If you click it, you’ll get a textarea where you can type any message you want to a moderator (and if it’s about moving a whole thread, it doesn’t matter who’s flag/post you click). So, it’s not just for reporting spam/fluff/abuse, it’ll go into the moderator queue and whoever the next one is will move it for you : )
Not sure if this theme is salvageable as per cheesedude’s comment above about scrapping the site and starting over? I think I found the code that controls the slider up top. I’m not sure if I can edit this code to at least fix the “jumping” problem? Thanks again!
//Resize
$(“Content”).find(“img, embed, object”).each(function(){
w = $(this).width();
h = $(this).height();
nw = 180;
r = nw/w;
$(this).width(nw);
$(this).height(r*h);
});
Try it. You can’t break it if you have a copy of the original to go back to if it doesn’t work. Though to me it looks like a function to scale videos and images, not the page itself. Then again, if it’s loading ginormous images and resizing them after the browser is loading them, I suppose that could cause some jumping since as they get resized smaller, the page length gets smaller. You can safely comment that whole function out and see what it does.
The rest of that script seems to deal with the annoying text-changing thingie at the top.
The other major script is the one that makes columns. Since these are all separate scripts, you could probably easily comment out one, then the other, do see at least which script is making webkit jump.
After that, finding the function is probably easier. You may want to keep the column js but remove the image resizing js (and instead make sure your static copy of the image on your server is already the correct size before the browser even asks for it).
Also, you liked the way the theme looked. Mostly, it’s a minimalist design. You could have plain content and style it that way instead.
Oh jeez after several reloadings of the page I suddenly see these posts I kept hearing about. Bleh. The idea of requiring scripting just to read plain-text content is silly. Wonder who came up with this theme.
I’ve also noticed that my footer info (RSS link and ©2011 link) at the bottom bump to the far left and bottom with no margins on individual post pages, but seem fine on the homepage, any thoughts?
On the pages where the footer is more in the middle, the “extra” div (which contains the footer) is inside the box called #container. On the pages where the footer is much too far to the left, the “extra” div is outside the container. Since the container is centered, the footer’s left-margin of 200px is 200px from the left side of the centered container, but when it’s outside the centered container it’s 200px left from the body/viewport/page. That one would indeed be a PHP issue, since your PHP templates are placing your boxes in the order they end up in on the page.
I was able to comment out this code. (just a reminder, I’m a designer not a coder, sorry for the newbie questions):
$(document).ready(function(){
//show
$("#recent").show();
//hide
$("#recent").find("li:gt(0)").hide();
//start fade
setTimeout("fadeRecent(0)",6000);
});
This removed the top statement fader thing. I’m not sure where the js is telling the rest of the page to “jump” or even any dimensional information which causes content adjust to the taller statements?
The first bit of JS code you posted earlier looked for images, embed and object tags and sets their size to something else.
Also, this:
$(document).ready(function(){
this line is jQuery’s loading line. It says “when the page loads, run these functions”. If you want to keep other stuff the JS does, you’d keep that line in but just comment out the functions you don’t want.
To find the part that’s making things jump, just start out commenting out all your JS functions. Yes, that will mean there’s no JS, but then you add them back in one at a time until you see the jumping appear. Or, you can do it the other way around: comment out functions until it goes away.
This kind of debugging is a bit slow but it usually works well. When you find the jumping stops after removing some function, try then adding the other ones back in (to see if they can run without also causing a jump).