Just starting to use fullPage.js and loving it so far.
Anyhow, when implementing continuous effect and you're on the last section, scrolling down it sends you to the first section, but it looks like it loads two times, or like it very fast goes to the second section and then to the first I removed all other scripts and tried again, but same problem.
Also, header disappears when you scroll to first section again, after last section.
Here is the link:
http://sedmica.rs/problem/
Thanks in advance.
It works as expected as you can see here with your same initialisation.
I believe you have some problem related with the use of the class 'slide' for another one of your plugins. That's making fullPage.js throw the an error in the javascript console:
Uncaught TypeError: Cannot read property 'left' of undefined
To solve this, if you are not planning to make use of the fullPage.js sliders and you rather prefer using some other plugin for that, make use of the opton slideSelector to set the value to any other string different from slide.
From fullPage.js docs:
slideSelector: (default .slide) Defines the jQuery selector used for the plugin slides. It might need to be changed sometimes to avoid problem with other plugins using the same selectors as fullpage.js.
Related
I would like to use the following CSS slider in my project
http://jsfiddle.net/63w9jnqq/1/
It does not using any JavaScript or jQuery. When I clicking on the link from any slide other than the 'slide 5' takes me back to the first 'slide 5' instead of opening a new tab. It is CSS heavy code, I have no idea about how to fix it. I have no problem to use extra jQuery or JavaScript to fix this issue.
I tried the following jQuery to stop click action, it does not working
$(document).ready(function(){
$(".slide-gfx a").click(function(event){
event.preventDefault();
});
});
:focus state
The cause of this issue is down to the fact that the slideshow is relying on the :focus handling of CSS to remember state. This is a very temporary handler, which is lost whenever a new element is focused. I built the slideshow more for non-interactive elements, just to demo visual work — this works fine with :focus
The slideshow reverts back to slide 5 (or the end slide) when none of the slides are focused. This was fine for my needs, but obviously not for your use-case. This is occurring when you focus on your <a href="" /> elements.
Limitations of css
Unfortunately there is no way to match (in current CSS) up to a parent from a focused child — at least not that I am aware of. This would solve the issue with pure CSS. You can obviously match downwards (i.e. parent:focus .child), but that doesn't help. You can employ the The checkbox/radio hack which I did consider at the time, or you can switch to using a different way of "remembering state".
:target state
The CSS in the original demo was already tailored to also support :target as an alternative, so you can patch current functionality with a small bit of JS. I wouldn't want to rely on this across older browsers however — but then again, older browsers would probably find it hard to cope with this system anyway.
Snippet and fiddle
This patch listens for the :focus event, and sets the fragment in the URL to match the id of the slide. This means that the CSS then switches to listening to the :target selectors instead, which should keep the right slide selected.
http://jsfiddle.net/63w9jnqq/4/
$('.slide').on('focus',function(e){
window.location.hash = $(this).attr('id');
});
Recommendation
Going forward, I'd suggest perhaps looking at more recent methods for implementing CSS. As I'm sure there are a lot of new improvements that could be used to extend the system — something I haven't had time for of late. There may even be handling to integrate touch-style events to make things more naturally mobile friendly, although perhaps that is just wishful thinking.
At the end of the day, even though there is a lot of CSS in this solution, it is best to try and understand every part of the code you use in your projects — as that helps to debug situations you might find yourself in. This issue is mentioned in the original post here, and the solution using :target is employed to handle the "sub nav" links:
Implement a CSS-only slideshow / carousel with next and previous buttons?
I am creating a WordPress theme. I have finished the design using Zurb's Foundation as my framework. Everything was going swimmingly until I hit a snag with what I think is Javascript.
Please take a look here:
http://dev.andrewtanner.me/wordpress/
Two problems:
The masthead image (specifically the word 'Napier') is not rendering beneath the fixed navigation top bar.
When scaling down to smaller devices, I expect that clicking the hamburger would call the menu but this isn't happening.
You can check out the design here (just the framework, nothing else):
http://dev.napiercountryfestival.co.nz/ - No problems at all here so the JS etc is all good.
I do believe this problem resides with JS as when I use Dev Tools I am met with two errors:
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: foundation is not defined
I know Foundation relies upon JS for elements within the navigation bar, particularly if it is fixed like mine is.
I would like to know how to best approach this with WordPress. I have checked out the Codex and tried their solution concerning calling the JS located here but to no avail http://codex.wordpress.org/Using_Javascript
I have also tried calling WordPress' jQuery using <?php wp_enqueue_script("jquery"); ?> instead of Foundation's but no luck either - it makes no difference. Could it be than I'm not calling things in the right order in the DOM?
I do have a couple of smaller JS scripts, one for running the marquee and another for the countdown located beneath the masthead and I'm not experiencing any problems with these (unless I kill the dependency to Foundation's jQuery by messing around trying to get things working).
Any help you can offer would be much appreciated - thanks!
Fixing Foundation to be a function is easy. Open your app.js file and re-write it to look like this:
jQuery(document).ready(function ($) {
$(document).foundation();
});
You have two jquery files in your head tag. Remove one of them it will fix your hamburger menu issue
your masthead goes below the nav bar because you have a class fixed which has a property of position:fixed.
in the other link you have provided you have a class .f-topbar-fixed on body tag which provides padding-top:99px; which pushes your page down resulting in the visibility of your masthead. Add the class as well as the styles defined it will fix the masthead
I have a toggle dropdown menu button that appears on smaller resolutions/devices, but for some reason it isnt working. When clicked, nothing appears/shows.
Most likely there is something missing (JS function that makes it open maybe). Copying entire code doesn't make too much sense to me, so I am just using some of it:
http://goo.gl/TNixQe
UPDATE
True about responsive design. Now I noticed it (but did you say about it in your question? nope.).
When I tried to resize window firebug had found this error:
This error appears in js_func.js file in 9 row. Are you sure you link libraries correctly? JS can't find uniform() function.
Possibly this error is appearing, because all your instructions are in simple function. Try to add them to onload handler. Possibly browser try to load this instructions before uniform library had been loaded.
I meant this:
$(document).ready(function()
{
// use `uniform()` function on elements
}
OLD ANSWER
It is simple drop-down menu, based on lists. It is working throw hover handlers.
You can't do 'hover' on your mobile device. You can tap on screen only.
If you want users with gadgets use your site, you have to create menu espesially for gadgets.
Small trick, which helped me (because I am lazy :)) is to assign javascript:void(0); to 1 level buttons hrefs. This worked on SGS2 and Xperia Z1, but I am not sure it will work everywhere. With that trick, a man will tap on menu button and drop-down menu will appear.
You have a javascript error on line 9 of js_func.js:
Uncaught TypeError: Object [object Object] has no method 'uniform'
This will be causing any code below it not to be run.
Could it be a missing plugin on the mobile version?
A quick google suggests that the issue is with your jquery verison, they say to downgrade to 1.8.3.
In your case you are using 1.8.2, so try upgrade to 1.8.3.
I have a an app that I will port to Phonegap, and I am using iScroll 5 to handle some aspects of the scrolling.
This app is built with some CSS from Ratchet, but quite modified, and just about all the Ratchet javascript has been removed; also jQuery; FastClick.js.
The app is a single HTML file (not using push.js from Ratchet), and divided into Pages that are inside a master Content area, and change with CSS3 transitions. So far, iScroll is used in two places; initialized at the same time with two different calls to IScroll("#id").
The first iScroll works fine - it is just a simple set of sections with paragraphs scrolling between two fixed header/footer bar elements.
The second one wraps an entire page that shows on an internal transition. In other words, its not a page as described above, but it is a full width element that is taller than the page, and sits beneath the header and one other button set. That may or may not be important, but when it shows the first time, there is nothing anywhere I can do to get it to initialize properly.
Since the js variable is global, I can see it, and this is what I have noted so far:
> myScroll.initiated=0
> myScroll.enabled=true
> myScroll.scrollBy and myScroll.scrollTo both work as expected
> myScroll.refresh() and myScroll.resetPosition called from
js file or from console have no effect whatsoever
I am using Chrome with touch events enabled for development, but the behavior is replicated on my iPhone. The div (which only contains a simple list) responds to touchmove events, in that they are logged in the console, but there is literally no scrolling movement at all. I believe that there is probably a bug related to multiple layers being positioned with transitions, but I don't know what to do next.
Can anyone offer some guidance on,
How To Fix This
Or failing that, what is the best placed to look to debug this, and find out why nothing is happening.
Thanks
I am trying to use a third-party jQuery Carousel plugin in a project at work (don't know which plugin it is though). The problem is that when I use multiple instances of the same plugin on the same page only one of the instances updates. I think this issue is with how my instances are setup. I have constructed a jsFiddle at here.
The carousel is attached by the .carousel class and all instances are initiated by the method shown below:
// Enable carousel
$.each($('.carousel'), function (i) {
$(this).carousel(this.id);
});
Unlike in my local code, in the JsFiddle only one of the carousels works. Any help would be very much appreciated.
Firstly there is an error when your js runs. If you look in your browser dev tools of choice you should see
TypeError: properties.slider.swipe is not a function
Once commented out the js will run correctly but if you click any of the next and previous buttons only the bottom slider will run. This is because they use the same instance of the var properties.
I would suggest looking at creating a jQuery widget with your existing code, it is fairly straight forward to do. By doing this you can have several instances of the same widget running on a page together.
Coding your first jQuery ui plugin
Rather than fix the entire plug-in, it's much easier to tell you that after the plug-in is initialized, the plug-in code breaks when it attempts to add touch events.
// Add touch events
properties.slider.swipe(function (event) {
if (event.swipeDirection == 'left') {
methods.next();
} else if (event.swipeDirection == 'right') {
methods.previous();
}
});
// Throws: Uncaught TypeError: Object [object Object] has no method 'swipe'
Comment out the plug-in code's touch events, and it no longer breaks.
However, because of how the plug-in is created, it can only handle one carousel at a time since it overwrites the last one that was defined.
Try a different, widely-used, and responsive JS slider that supports touch events.
Hi i have created Carousel without using any third party plugin.If you want please refer
Reference Link
Hope its helps you.