I am having trouble implementing a jquery slider (flexslider)
I feel like I am missing something very basic, but for some reason I just cannot put my finger on it. Any help would be amazing. The link to the test site is below.
I am trying to get the slider to appear in the empty green area.
I am also working in Gumby responsive framework
http://4grain.bmdigitalgroup.com/
This is your issue:
Uncaught TypeError: Object [object Object] has no method 'flexslider'
...also looks like your loading your jquery file after the flexslider file. try keeping all your .js files in one place, with your jquery file on top of all of them.
You have 2 jquery files loaded on the same page. you should only need one, unless you are intentiontally trying to load 2 of them..
try placing your script...
$(window).load(function() {
$('.flexslider').flexslider();
});
at the bottom of the page, wrapped in a script tag, before the body ends, instead of inside the head of the page. the script is waiting until the page is loaded anyway.
UPDATE!
Hey good job so far! i'm seeing what you have done on your page via the web console.
And if you want to get rid of that...
Uncaught TypeError: Object [object Object] has no method 'on'
...then remove the jquery 1.6.2 file from the top of your page, and place the fexslider.js file at the bottom of your page.
As noted, you are having a double reference to the jquery library. Try doing this which will stop the dual references:
<script type="text/javascript" charset="utf-8">
$.noConflict();
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Give #maincontentbody a height, perhaps 75px, then all of the children need to have a defined height and width, even id it's width:100%. min-height is not an appropriate value in this case
Your images appear to be much larger than the green bar area, do you think it will animate as well?
Related
I am trying to make a lightbox gallery and have used the example source code.
Here is the documentation I read over: http://dimsemenov.com/plugins/magnific-popup/documentation.html
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: $ is not defined
I am not sure what the errors mean or what to do with them.
In a video tutorial I watched, they said something about a jquery conflict being a potential problem. On a different page of the website, I used a Kwicks sliding menu (which also used jquery). That's the only thing I can think of.
I would really appreciate any help you would be able to give me!
Thank you! There are no more errors, but now I need to make the hovering on the image work with the zooming in magnifying cursor.
I have made the hovering work, now I need to make the zooming in magnifying cursor work. I have attached a page of what I what the cursor to be when it hovers.
Example: http://dimsemenov.com/plugins/magnific-popup/
I have figured out the zoom cursor! Thanks for all the help!
The documentation of the plugin Magnific popup you are using suggests -
Including files
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
Remember : You need to include jQuery file reference, for the plugin to work; rather every jQuery plugin. And in the specified order. This is the sole reason behind $ not defined and undefined in not a function.
I've been having this issue with fullpage.js not allowing me to scroll properly. Please see the issue at https://www.rewardslive.com/test
I have jQuery 1.10 loaded onto the site already, but the javascript code that is in question here is inline on the page, after along with the initialization code which is an extension of the document ready with no conflict in the rewardslive.js inline script.
Going to the page does not pose an issue, but when i try to scroll down, the url bar changes to https://www.rewardslive.com/test#secondPage - but there is no actual scrolling downward and no new content is updated. I want to keep the header as seen, in there for all intents and purposes.
Is there something I am missing here? All i want is the basic fullpage, 'scroll down function to see more' feature.
Thanks again,
George
The javascript console shows this error:
Uncaught TypeError: Object # has no method 'easeInQuart'
Which means you are not importing the jQuery UI library which is needed by the plugin as specified in the documentation.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
Also, you have problems in your HTML markup as you can see highlighted in red here.
If you do not want to include the whole jquery UI library for just that single effect, you can use the easings file provided by fullPage.js that includes all of the jquery UI easings.
My playlist plug-in with jQuery UI works fine alone, but when I include it on the index page, it gives me this error:
Uncaught TypeError: Object [object Object] has no method 'sortable' /868
Here is my index page at Pastebin
My page's link
Your problem is likely this:
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
That's a relative path, so while js/jquery-ui.min.js might point to the right place in the first location, if there isn't a similar file there in the second location you're going to get the problem you see (ie. no jQuery UI).
I rearranged all my js includes and put them to the top of the index.php. Now it's working...
I'm still learning jQuery (1.6 min) and Javascript, but have been quite pleased with what I have been able to achieve, so far, but this problem has me fooled - i've been looking at it for four hours!
I have the following link on a page contained within a (for which the id value is 'NorthWest'):-
<figure><img src="http://localhost:8888/98394.jpg" alt="" border="0"></figure>
which when clicked on, correctly loads content in to a makes the visible. It does not reload the page, simply makes the DIV visible on top of the current content. The Javascript for doing this uses standard jQuery Fancybox.
All works fine, the DIV can be shown and hidden several times, loading different information on each occasion. Now there is a IMG button which allows the user to reload the 'NorthWest' DIV with the latest content - when clicked it executes this code:
$(".RefreshThumb").find("a").click(function(){
$(".RefreshLoader").show();
$("#NorthWest").load("/refreshdata");
setTimeout(RefreshHide,1000);
});
The setTimeout line refers to a small graphic (refreshloader) which is momentarily displayed to advise the user that a refresh of the data is taking place.
Now, take out the $("#NorthWest").load etc.. line and all works fine. Add that line back in, and the popUpSimple link works fine until the IMG button is clicked to refresh the NorthWest DIV, after which the popUpSimple content is loaded as a new page and no longer overlaid - before clicking that the popup overlay works fine no matter how many times you click it.
EDIT: I should point out that after clicking on the IMG button to reload the NorthWest DIV it does so successfully, its only when you then click the popUpSimple link that things go wrong!
What have I done wrong? I'm using Safari and a look at the Web Inspector window after the page has been reloaded rather than loaded into the DIV shows:
<script type="text/javascript">
$(document).ready(function() {
With a message saying Reference Error: Can't find variable $.
Can anyone point me in the right direction .... please!
It sounds like an eventlistener issue, Try using .on('click',function(){} instead of .click(function(){}
Maybe the jquery '$' is being overridden by another JS framework.
Just replace your '$' with 'jQuery' without the single quotes of course.
You may even try using http://api.jquery.com/jQuery.noConflict/
you can add this right after you load the jQuery library for example:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I'm working on a project where there's quite a lot of jQuery going on. So when I go to the page, I can see the jQuery running (e.g. $.button() elements on the page still appear as normal html elements before jQueryUI is loaded :S) so initially it looks all ugly THEN, once all the JS is loaded and executed, it looks "nice".
It's not just a case of preloading images or whatever, I want to RUN the jQuery code, but "hide" it from visitors so that once the page is opened, it looks "nice" straight away OR displays a black screen saying "Loading..." until the jQuery has finished running.
Take a look here: http://www.filamentgroup.com/ , though I'm not sure that actually runs the site's javascript before displaying it, but it shows the basic idea of having a dark screen saying "Loading...".. I suspect that's what happens in large web apps such as SlideRocket though it does use flash... :S
You answered the question yourself. Have some kind of loading screen that hides the page until all of the jQuery is run.
Try something like the following.
This goes at the top of your page:
<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>
Here's your jQuery:
$(document).ready( function() {
/*
* ... all of your jQuery ...
*/
// At the bottom of your jQuery code, put this:
$('#loadingMask').fadeOut();
});
Wrap all of your jQuery that you want "preloaded" into this :
$(window).load(function() {
//Your jQuery here
});
or alternatively, not all of your jQuery code inside of that wrapper. Rather, put your jQuery DOM changes into a
$(document).ready(function(){
//jQuery
}))
and then have a wrapper for all your site content.
<div id="everything-wrapper">
<!-- put your body here -->
</div>
and set the display to none in your CSS
#everything-wrapper {
display : none;
}
and then with the window load like earlier
$(window).load(function() {
$("#everything-wrapper").show();
// or
$("#everything-wrapper").fadeIn("fast");
// to be fancy with it
});
I was having a similar issue with an artifact popping up briefly during page loads in IE8. The solution I used was to change the visibility of the container to hidden at line 1 of the css. Then showed the element at the end of the jquery file. If the css and jquery start arguing, the element isn't shown until the argument is resolved.
I would have a overlay as part of your static CSS and HTML, then when JQuery loads via
$(document).ready() you can hide the overlay
The answer by Christopher is most likely the way FilamentGroup do it. You can have javascript "preloaded", it loads inline with the rest of the page, and due to it usually being larger than the rest of the page takes longer to download. You can't make javascript load first, that's not the way it works.
However, the principle to make it work is to "hide" your page from view in CSS (or with inline styles as the CSS will still have to load) then once everything is ready in javascript show it all again. If you notice there is a gap between the page displaying (nothing) and the javascript loading showing on FilamentGroup. That is because they hide the page, the javascript loader loads, then once the rest of the javascript has finished it hides the loader and shows the page.
Dude, I did you up a sample. I hope you likes. I use something like this on my own site.
http://jsfiddle.net/jMVVf/