I have a page in which I have a fixed footer that scrolls with the page, however on the page there is a Javascript slideshow, as the slideshow loads in a new image, it loads it over the fixed footer.
The page in question is this one: http://mysterybox.co/signalnoise/. Scroll down to see problem.
Screenshot of the offending effect:
Can anyone give me any advice? I thought I may be able to fix it with a z-index but that didn't work.
add z-index: 2; to #footerwidth
EDIT:
same goes for #headerwidth
EDIT2:
per ThinkingStiff's suggestion, you may also consider replacing the margin-bottom attribute of the footer with a padding-bottom attribute.
Related
https://jonathanrace77.github.io/
In the portfolio section there is a "sync" version of the slick carousel. (The top carousel should show what is selected in the bottom).
However, on a fresh load of the page, the top carousel shows nothing. It is only after the page is refreshed (not hard refreshed), that the picture shows.
Can anyone help me understand what is happening here?
The slider div img did not like width:auto.
Setting this as px or vw (in my case) solved the problem.
First of all, I really don't know much about JavaScript or jQuery, so sorry in advance for any stupid thing I could say :)
I have a div with a set height of which the content loads on page load using AJAX. My objective is to have it scrolled to the bottom on page load.
I've found a few answers on how to do this online, but none of these worked for a div of which the content is set with jQuery :/
Any ideas ?
OK ! Was going to upload my code when I found what the problem was :
The said div was inside another div, on which I had set height: 750px and overflow: auto, which worked perfectly as it was, but made jQuery unable to determine the height and scroll overflow of the child div. Fixed it, all works now !
Thanks for your time :)
You could add the below code after the ready function:
$('html, body').animate({scrollTop: $("#yourid").offset().top }, 1000);
I am adapting a Wordpress theme for a client.
Within the theme, there is a portfolio feature which loads using javascript. Unfortunately, execution of the javascript is fairly slow, so the result is the footer flashing in the middle of the screen before being pushed to the bottom. This is pretty unsightly - You can see it here: http://bit.ly/1nCH0Br
Is there a way to defer the execution of the footer until the javascript has finished executing (or any better way of solving this unpleasant problem?)
You could make the footer part of the portfolio, so that it doesn't load until the portfolio loads, but that will still leave you with the problem that the page looks blank for the first few seconds of a visit.
A better solution would be to adapt the theme so that it includes a div with a fixed height that displays a loading image and some text like "Loading...". You can adapt the carousel to replace this div. That way you can push the footer down to the bottom of the page, AND give the user some feedback that there's more content loading in the background.
Initialize your footer with css:
position: absolute;
left: -10000px;
opacity: 0;
and set the correct values when the page has loaded. You can do this with having 2 classes, one for preloads and another for after load.
The reason of not just hidding the footer with css is that your js can still work with width and height values
I'm using Flexslider which calculates the image size based on the parent element width, which makes it responsive because it resizes when you change the browser size.
The problem I'm having is that when I load the page, you see a colapsed slider until the images are loaded which makes it look bad. However, if you go to flexslider site at http://www.woothemes.com/flexslider/ you'll see that it has a loader.
Is there an option in flexslider for automatically behaving this? I couldn't find one.
Try giving
min-height
min-width
using CSS to the div block in which you are having the images so that it might atleast not collapse
In flexslider stylesheet they have give .flexslider a min-height of 280px and used a gif loading image as its background. You should use that. Your problem will be solved.
I know what you're thinking, not this again, right?
Here's my site: http://mydesignfeti.sh/
As you will see the browser loads the body & all of its content then the javascript animation loads. All I want is for the animation to load without having to see the content load beforehand. If you're lacking an imagination just refresh the page or click the logo in the top left to see how I want the page to load.
I've tried toggling the container div's class display using javascript, but apparently I was doing it wrong.
Suggestions? Answers? Laughs?
Thanks in advance.
I am not super familiar with how Adobe Edge works, but the basic idea is you will need to either:
Make your initial html/css match the animation base state.
Hide your animated divs initally, using css display: none, and add a second state to your animation to display all of the elements (eg display: block) before sliding them back on the screen.
In the html set the container div property style="display: none;", this will hide the html elements until the javascript animation gets loaded.