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.
Related
Im trying to add a button/tab on the bottom right corner of the page. That when clicked slides up a window. I've seen this somewhere but i can't get it to work.
I found my answer shortly after. If you're looking for the same, this thread might help:
HTML CSS/JS Bottom navbar Sliding Up
I've added Nivo Slider to a wordpress home page. I've used it before, and I've followed the steps exactly, but the slideshow does not show up at all. If you view the source of the page you can see the code surrounded by "Nivo Slider" comments. If I take the script that fires the slider completely out, the images appear, but with the script included the slider vanishes. I hope someone with fresh eyes can spot what I'm overlooking. Here is the link:
http://phillipsandphillipslaw.com/
Edit: I found that the height setting of "auto" was preventing the slideshow from showing up, so I set it to the height of the images, and it appears, but it still isn't working. So it seems that something it breaking but I can't determine what it is. I don't get any errors in the console, so I'm stuck in the diagnosis.
It must be a conflict - but I'm not sure how to rule that out.
I'm using the following plugin:
https://github.com/davist11/jQuery-Stickem
The plugin is used for a horizontal menu on a gallery page so that when the user scrolls down past the menu, the menu will stick to the top of the browser window.
The problem is that sometimes when the page loads, I only get halfway down the page, and then it releases.
Other times I can get to the bottom of the page without any issues.
Almost all of the time, when I reload the browser (while on the page), the menu goes only half-way down from the top.
I'm assuming this has to do with the items in the containing div not fully loading, any suggestions on how to fix this?
Here's how I call the jQuery:
In the footer I have:
$(document).ready(function() {
//Start stickem Script
$('.single-body').stickem();
});
It is because the plugin is calculating the container height before the images have loaded. If you added width and height to your tags that would solve the issue.
Otherwise you'd need to initialise the plugin after all the images have loaded.
https://github.com/desandro/imagesloaded is a great plugin for this.
$('.single-body').imagesLoaded( function() {
$('.single-body').stickem();
});
The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.
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.