I'm using a thumbnail slider on my site and it loads the images vertically for a split second before arranging them properly.
There are no errors in the console so im unsure how to approach this.
Any tips are greatly appreciated.
http://breakingcapital.com/
Nice site. I think the best answer will be to add a class with display: none to your images and remove it once the plugin has finished. I assume the vertical issue is to do with the way your markup displays the images, before the javascript kicks in.
Another solution which is not ideal will be to move the slider logic into the <head></head> as opposed to below the body, but that will slow down the initial load-up of your site.
Related
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
So basically, I made a simple website.
I am using bootstrap along with masonry jquery and google maps.
This is the basic page of my website.
How this website works is like when gallery is click, index page will fadeout and gallery page is faded in.
Lets go straight to the point which is my CSS. I am wondering what is wrong with it since I am encountering this problem.
My masonry images for gallery will overlap each other but if I place things out of the division class section. Everything is fine. Same goes for the google map width problem.
Things will only be ok after the window is resized manually.
Here are the SS for the problems
my entire css link
http://pastebin.com/kqWaszqF
my custom js link
http://pastebin.com/uqSvaMeT
my index page link
http://pastebin.com/eKHyJV95
As you can see, if I place all this codes for gallery and map outside of everything will be working fine and great but if I put it inside of that . This the above problem happens.
I tried everything like min-width: 100%, width: 100% or whatsoever. Seems like this problem always exist. Even if I setTimeOut to my javascript for masonry and googlemap, it works sometimes but not perfect as it also fails.
Can some kind soul please help me out here?
You need to provide a fiddle with html so i can test it in order to help you.
I hope I'm not violating any written or unwritten rules by asking for help on my business' site.
http://www.gnarlyweb.com/wrladv/
So I'm using Flexslider (but have tried at least 3 others) to handle showing multiple pieces of work on portfolio items. If you scroll to the Portfolio section, each item is clickable, and a flexslider appears. The Flexslider js is obviously working because the nav shows up, the images will animate if I have slideshow: true, but the arrows on the side do not make it move to the next piece.
I've been working on this for weeks now and can't figure it out. Does anyone know why only half of the Flexslider library works in this situation?
I know it's not Flexslider's fault, because I can put together a jsfiddle with the sources from the portfolio area and have it work perfectly.
I see all your images are in one flexslider container and they are dynamic.
I think this may cause this problem.
But i'm not pretty sure.
My suggestion is: different flexsliders for different images
You're not giving anything for the flexslider script to reference in your html. Looks like your basic html setup for your flexslider is:
<div class="portfolio-slides">
<ul class="slides">
<li><li>
</ul>
</div>
By default, the flexslider script searches for the flexslider class. You can either go into your flexslider script and add,
$(document).ready()
$(window).load(function() {
$('.portfolio-slides').flexslider({
});
});
or change your div class name to flexslider. The issue you're going to run into is that you have multiple flexsliders so you're going to have to create unique tags and have jquery call on each one otherwise all the flexsliders sync up.
I stepped a little too far over my head in a job I took this week.
I need to develop a scrolling, changing background like the one on Chevy's home page: http://www.chevrolet.com/
Something like this might suffice though: wearethescenery.bigcartel.com/
Any help would be appreciated.
There are plently of plugins available for jQuery to do just that:
25 jQuery Image Gallery/Slider Tutorials and Plugins
57+ Free Image Gallery, Slideshow And Lightbox Solutions/
You could animate the background-position.
You need a large background image for that, which might slow down the page load.
If you are not against using a javascript library, this jquery tutorial might help you solve your problem.
I am building a splash page for a website with jquery animations.
My problem is: sometimes (before the page and images are cached by the browser) the images load in an order which detracts from the quality of the animation.
Ok, heres what I did:
the container div has the following css: background:url(images/colorcity.png)
if js is enabled I superimpose a greyscale <img> onto colorcity, whose opacity is animated to 0 for a nice "fade to color" effect.
to do this I use: $("#container").prepend('<img src="images/greycity.png" class="grey" />')
What I have been attempting to do, is somehow get that prepended image to be the first thing to display on the page, as it will be 'hiding' other images used in the animation. Unfortunately all of my attempts have failed.
I assume that this is a common problem and likely is a repeat question, but I couldn't find an answer after an hour or two of looking. So, sorry if I'm a noob lol.
Thank you ahead of time for any help.
The page: http://roughgiraffed.com/barrandbarrbags/
Try including this at or near the top of your page:
<img src="images/greycity.png" style="display: none;" />
That should force the image to load pretty early on. If it's still a problem do your animation in the load() callback rather that ready(), to ensure that all your images will be loaded up.
Very cool page, by the way (and it seems to work great in firefox).