Content slide show - javascript

Hey I’m building this Content Slideshow
I have two problems:
1: I had it working, but now it’s broken…I’m spending the entire morning trying to figure out what I broke.
2 : When it was working, the slide will start at Content DIV three then jump to 1. And I wanted it to start at 1, then 2, then 3, and keeps respeating about every 10 seconds.
Here is my Fiddle http://jsfiddle.net/myislandshop/2AW8a/4/
Any help will be appreciated .
Thanks

It works if you remove the redundant window.load http://jsfiddle.net/2AW8a/5/

Full Disclosure: This is plugin that I have developed myself
Check out Basic jQuery Slider - either to use, or get some ideas on how to implement your own content slider.

Related

Owl-carousel 2 stop the work of autoplay when lose a focus

I use Owl-carousel 2. I use standard code of initialization and markup of Owl-carousel 2. At the first load of page the work of carousel is perfect. Owl-carousel 2 stop the work when I pass in browser to another page and back or minimize browser and again open page with Owl-carousel 2. New start of carousel when I again click navigation. I had try to place in body of html code of initialization of carousel again:
var $carousel = $('.owl-carousel');
var owl = $carousel.data('owlCarousel');
owl.trigger("refresh.owl.carousel");
But it is not working. Autoplay need to run but it is not working. How I can correct this problem? Thanks
I know this question is rather old, but since it has no answer yet, and the issue is still present in Owl Carousel 2.2.1, here's a simple solution that may hopefully help someone:
Try using the beta build of Owl Carousel, you can get it here. Just grab the owl.carousel.js or owl.carousel.min.js file and replace the one you're using currently with it. At
the moment of this writing the current beta build is 2.3.0. I can
confirm that this build fixed the issue for me.
The issue is a known bug. The discussion in the issue tracker provides more insight into what causes it, so you could use it to modify your existing owl.carousel.js to incorporate your own fix if you don't feel like using beta builds.

can't get scroll magic to work in JSFIDDLE (part 1 of 2)

I have a one page scrolling website that I'm working on. I am trying to implement ScrollMagic and pin the first section so that the remaining sections of the website scrolls over top of the pinned section. I tried to create a jsfiddle to show the issue, but I can't seem to get jsfiddle working (first time using fiddle so I may have something not linked up correctly. link to fiddle...
After I get this working I have a follow up / new question in regards to scroll magic, but I think it would be helpful if I am able to show my problem in the fiddle.
You forgot to include external ScrollMagic libraries:
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js
I've added them to your jsFiddle and it looks like everything is working correctly now.
https://jsfiddle.net/fxf4b2cg/
Have fun coding!

CSS/Javascript - Div removing itself from Page

I'm currently putting together a website for a buddy and myself. I purchased a template (mind all the silly placeholders and obvious space issues) to help get the ball rolling as I didn't have very much time available to put in to the project.
On the store section of the page you have that little gallery of products, when you scroll down a bit more it removes itself from the page (page jitters, clicking from store to about works funny). This is causing an issue with my Jquery waypoints setup. I can't for the life of me figure out what's removing it from the page when I'd like to keep it there at all times.
Any help is appreciated.
http://lovedrugfrontend.herokuapp.com/
For quick fix you can try to give the
style = "display:block!important";
to the 'team' class.
This will solve your issue.
This is just quick fix. Cant fix the issue without js files.

Page flickers on load - hide/show javascript - Total Newbie

Ok so here goes.. I'm totally new to Javascript. I only started on html&css about a month ago. All my htl and css is probably pretty backward and i've got a stack to learn. I'm using two pieces of javascript - one piece loads the nivo slider and the other the hide and show easy tabs:
http://www.kollermedia.at/archive/2007/07/04/easy-tabs-11-free-tab-menu/
Both were fine when I hacked them to hell trying to get them to look the way I wanted. Since i've put them together all hell has broken loose (bit of an exageration) but it may as well have because although they are both working, the page flickers badly on load. I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the script kicks in. I also notice that the increased page height, for the split second (sometimes longer) it takes the content to hide activates the scroll bars and i know this could have an affect. I'm also using background images within the links on mouse over commands.... i didn't know what else to do.
I've read you can add script to only show the content once the script has loaded but I know zero javascript : ) ... yet!
Can somebody please help me fix this? I've read lots of posts around the net but they all put the code with gaps where your supposed to fill in and where it's put is expected to be known. I'm sorry to be such a mong but could someone literally copy and paste my javascript and edit that to show me?
I know it's a lot too ask but i've been trying to fix this all day.
Here's a link showing the problem (when selecting the portfolio links the delay / flicker lasts ages!)
link to the site: http://www.adam-ashton.co.uk/homepage.html
(sorry to be so long winded)
Thanks,
David
Page Flicker can be handled with the help of some css
.hideME {
visibility:hidden;
}
Add this class to the Top Most Element (Mostly a div ) of you html page
And inside the script tag ,
write a window.load function
$(window).load(function() {
$(selector).removeClass('hideMe');
});
this should do the magic :)
Add this one line code at 46th line .. Means first line of window.load
$('.container').removeClass('hideMe');

Javascript Accordion

I have a strange bug I cant quite figure out, I've built an accordion slider that shows short content intially and when clicked then shows the long content.
At any one time only 1 tab should be open but when 2 opens the short content dissapears.
ive attached a fiddle, can anybody see whats wrong? Is it because they all shgare the same class?
http://jsfiddle.net/2v44c/
Here's what I came up with.
Simplified the JS a little bit and added 1 line of CSS to help with hiding the short content.
http://jsfiddle.net/2v44c/2/

Categories