When you click on the content of orbit content slider it goes to the next slide some kinda calling "self.next" in the js I think, I want to disable that, any ideas?
Here's what I've achieved till now:
there's this line in the foundation.js file:
container.on('click', '[data-orbit-slide]', self.link_bullet);
I've commented it out and now I can safely put a tabbed div in the slides without auto sliding on click, but the indicator bullets does not work on click, they just show which slide is active right now as you could guessed by commenting out that line....
if there could be anything that I could achieve better functionality please do mention it, Y'ALL
Related
I'm facing a huge problem. I have a modal that renders a list of texts. The div where the text is shown has a scrollbar, but when I change the text the scrollbar remains at the same spot. If I scroll to the middle and change the text it will appear from the middle and not from the top as it should.
I've tried this code: window.scrollTo(0,0) but it resets the main page scroll not the modal one.
Could anyone help me?
I'm not sure I'm understanding your question. It is more helpful if you post the bit of code that's giving you trouble so we can clearly see what's going wrong. That said, window.scrollTo(0,0) will scroll the whole page. If you want to scroll to the top of an element like that, call .scrollTop from the element you wish to scroll. I think you are looking for something like this:
$("#myScrollDiv").scrollTop(0);
I want a panel with a start button in the middle of the page. When the button is clicked the panel should move up and disappear. The content of the page should start loading after the button is pressed. Something like a start button for a game.
Currently I use two html pages. The first is the panel(index.html) and the second is the content. When I press the button it moves the panel up, removes it and loads the second page. It feel a bit clunky so I wonder is there a better way to do this?
I'm not sure if this works for canvas. As I said in the comments I suggest doing a text-align:center;. This works for text and buttons. To center other elements such as divs try margin: auto;. Good luck with canvas :-)
I would also suggest expanding your css knowledge because text-align is very common to use as well as margin:auto;.
I am using this jQuery plugin on a website: http://stolksdorf.github.com/Parallaxjs/
I am trying to achieve an effect where when a slide is navigated to, it automatically moves onto another slide once it has loaded - think of it as a transition slide.
For example:
parallax.transition.onload=function(){
parallax.citymid.show();
};
This code shows the city mid slide once the transition slide has loaded.
However:
parallax.transition.onload=function(){
parallax.citymid.bottom();
};
This does not make city mid slide in from the bottom as it would if it was called from a button.
Does anyone know whow I can make this work, or at least find a work around for it? I have contacted the developer of the plugin but to no avail.
Many thanks,
Oli
Using transition callbacks, everything works as it should.
parallax.pageB.right(function(){
parallax.pageC.right();
});
Call this bit of code while on pageA and it will slide in pageB from the right, and as soon as it's done it will slide in pageC. I've tested this and it works flawlessly.
I have make a carousel with jquery. The carousel have three sections and a large background images. When you click on the right button. The next section is coming and the background image is scrolling -1000 pixels to right.
But now the problem. When i click verry fast of a couple of times on the next button. The hole carousel is going crazy. How can i fix that? When you click on the next button. Then you can not print again. You must wait until he is animated. Thanks for help.
You can see the code on JsFiddle
http://jsfiddle.net/6RJzU/1/
Does this fix it ??
http://jsfiddle.net/6RJzU/2/
I'm trying to recreate an effect in jQuery, where an element (<li> <img>) will be cycled and has a fading effect when hovered. The '<li>' contains '<img>' (image screenshots). When the mouse is on top of element it will keep cycling all that are in '<ul>' with a fading effect. When the mouse is away it will stop cycling the list. I also want to add a pager where you can navigate to the list.
My Existing Code:
link text
My Problem: the current code has some problem with the pagination, it added all images that can be seen on the code. Instead of 1-8 only, it continued to add another 1-8 and another.
Second problem is, It also start cycling and fading when the page loads. The cycling and fading should only be working when the mouse is on top of the element.
I don't know if the 'Cycle Plugin' (Plugin Home Page) is really required on this approach, I wan't it to be minimal as much as possible. I just use 'Cycle Plugin' because it's a quick answer to my problem.
Thanks and merry xmas!
Edits
remove and added a link
I could be wrong, I'm not familiar with this plugin, but it seems like you need an ID for each slideshow you have instead of using a class like you are.
I've setup a JSFiddle with your code and tweaked it. Below is how each slide should function.
starts on mouse over and stop on mouse out
changes on mouseover of the nav
changes when the nav is clicked
The link I gave you in the comments to your question should guide you to the available options for this plug-in. In case you missed it, here it is: plugin options