I have a website I built using parallax.min.js on top of WordPress, and I am having a very weird issue. I've spent probably 4 hours on this and have concluded that a large white space is being added to the bottom of a div you can see in below screenshot.
when I view code I can see the white space is being added to only one of the parallax divs .para_block - the very last div block on that home page on top of the footer.
the dev site is located here - bloompeach.mybrowsertest.com - I know this is a long shot but I want to see if anyone smarter than me can see something easy I am leaving out.
what is crazy about this is I am using the same code on a site I built a few weeks ago located here - truffles.accountsupport.com - and I am unable to replicate the issue there. which makes this even more confusing.
I appreciate your time and energy it takes to review my post and the dev site, in an effort to fix this. heck if you can figure this out I'll buy you a coffee or a six-pack I am so exhausted trying to solve this.
I have changed the height of .parallax-window, now its look better
.parallax-window {
min-height:837px;
}
Related
It's a little bit difficult to ask a question, because I'm using mainly templated code for the outlooks of the (personnal) website I'm conceiving.
It's a template using html5/css3 and javascript (which doesn't seem to take a part in the issue I'm having).
So here it is : in firefox and explorer, the footer displays at the bottom of the screen even when the content of the page does not go that far. But in chrome, for a reason I do not grasp, the footer displays right under the content stop, leading to an ugly blank space from the end of the page to the end of the screen. Does anyone have an idea why?
I know it's difficult to answer without code, but since I only half grasp what's happening I can't really provide more information.
Thanks in advance!
Edit : https://jsbin.com/hozudepimi/1/edit?html,output
Added a bit of code if it can help
Issue: I have problems with this page: http://kivusandcamera.com/blog/ The page loads with a proper layout, but then the two blog entries "jump" to the left behind the navigation bar. I have spent a good bit of time trying work through the various CSS, inspecting it with developer tools, etc..., but I have reached a point where I feel like I need some help. Any advice would be appreciated.
Background: This is just a basic Wordpress theme that I am trying to customize for a website, so I am not 100% sure how
Additional Information: Though I am passingly familiar with CSS, I have done hardly any work involving responsive design, media queries, etc... Basically, I am saying (1) I would not be surprised if it is something really simple that I am missing, and (2) if something could be done a better way, please feel free to let me know.
UPDATE - It looks like this issue might be Javascript or JQuery related. Basically, a style attribute is getting injected into one of the div tags. The style attribute used an absolute position, with a certain width, and I have no idea how to modify it.
UPDATE #2 - It appears the issue happens with any pages I set in the theme to "Full Width" (see also the http://kivusandcamera.com/about page.) I think those pages must get processed differently by JS layout framework that is used. Again, I still haven't figured out how that is all happening.
Turns out there were two separate issues:
(1) The JQuery auto-layout framework was resizing the various page columns with the assumption that the navigation bar was the same size as the individual columns of blog entries. That caused an issue that had to be solved.
(2) The full page CSS had to be updated to reflect the lack of a resizing navigation bar.
Ultimately, these issues were very specific to the this particular Wordpress theme, so I doubt full description of the solution would provide much of a benefit to the community. Thank you to everyone who helped lead me to the solution.
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
Greeting's and thanks for your time.
I just started a new job building a new marketing site for a headphone company. I'am still a student with a year left and I trying to figure out the best way to proceed with a challenge I've been given for this site.
The site is a parallax scrolling site, with movement horizontally and vertically.
The area I need advice on is with the site being a scrolling site there is no natural point to do a page refresh. We have near 25 products, each with several variations totally over 250 images. My boss wants the site to scroll as seamlessly as possible, i.e. the user will move left/right to see the products, then the user moves up/down to see the variations of that particular product.
What would be the most effective means to load these images?
My first thought was to have the pre-loader begin loading everything after the home pages loads. This seems like the easiest solution but probably less effective?
My next thought was to have the scroll trigger additional pre-loader events? I've looked into this and I could use some advice on how to best accomplish this? I'am trying to avoid, within reason, the user seeing a loading gif.
Haven't had a next thought? but please let me in on any other process that might be better.
I'am not looking for an explicit answer, although if you want to provide one... I'am really just looking for advice and hopefully some articles that can get things going.
I was in a similar situation, although my parallax site was just for experiment/fun, but I found https://github.com/protonet/jquery.inview/ to be a possible solution. A loader for the first sections then after that inview would load in the next ones on scroll.
I've built a horizontal accordion with jquery. I'm having a problem with it. When it animates from one panel to another there's a jump at the right hand edge of the carousel. I've tried everything to get rid of this...adding widths...changing the js..removing whitespace from html etc..any suggestions?
http://boudaki.com/testing/carousel
http://dev.iamntz.com/40/jquery-ui-accordion-jump-bug/
http://dev.iamntz.com/166/jquery-accordion-tutorial/
Two relatively reasoned through musings on that issue.
I have run into this previously - I think it is a particularly nasty little issue that the community on the pluging has been trying to find a workaround for. The markup at the links above is probably a bit different but the application should be no different when adjusted to your case.