I am trying to put together parallax section scrolling using parallax.js. I cannot seem to get the sections to work correctly. I am following the tutorial they have at http://pixelcog.github.io/parallax.js/ but for some reason my code is not working correctly. Not sure if i'm missing something or if the code it not responding as it should. Can someone shed some light on this issue? my test code is listed at http://gynxprinting.com/test/
Since it's a Jquery plugin you'll also need to load Jquery,
try adding
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Related
I'm currently running into an issue when using a package called jQuery Sparklines by Gareth Watts. Does anyone have any experience with this package? It seems to be pretty outdated but some people still use it here..
I am importing the package via script tag in a Flask view using regular ol' script tags:
<script src="/custom/css/JS/jquery-sparklines.js"></script>
And have checked the console to make sure jQuery is also installed and loaded before I load the script tag above.
I noticed the issue when I was trying to emulate the example jFiddle in the docs:
I was able to create a working version of the fiddle myself here but only by adding jQuery 1.9.1 on the extensions dropdown, and then toggling the "migrate 1.1.0" slider in the JS section.. pic here
Even with my example working somewhat, AND importing the same things in my html, the HTML doesn't pick up the custom jQuery function in the external code and get:
$(...).sparkline is not a function
Does anyone have any experience with this library? I've followed the docs but theres something i'm obviously missing.
SOS : ( or maybe reccomend other sparkline packages? : (
Thank you soooo much for your time!
UPDATE:
Still fails to recognize sparkline code with the cdn instead of downloaded files : (
Do not know why, but when I put the sparkline reference right before where I use it, the problem's gone.
It looks like:
<script src="~/Scripts/sparkline/jquery.sparkline.js"></script>
<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq(".sparkline_bar").sparkline([5,6,7,2,0,-4,-2,4], {
type: 'bar'});
//Some other things.
Solved:
I had JS code that was conflicting with the sparklines code in the tags to initialize the lines.
Fixed by simply initializing the lines FIRST before any other JS stuff.
I'm trying to have a div appearing in a dialog using the jQuery-UI function. It will be a contact form in my blogspot site. However I keep getting the notorious 'Undefined is not a function' error. I searched a lot without eventually being able to address the issue and I have no idea about what's going on.
Below is a fiddle EXACTLY as in the blogspot code (even same id names). You can see that in the fiddle the code functions perfectly.
HTML:
<a id='emailform' href='#'>Click here!</a>
<div id='contform' style='background-color:red;width:200px; height:200px;display:none;'>Blablabla</div>
JS:
$(document).ready(function () {
$("#emailform").click(
function () {
$("#contform").dialog();
})
});
http://jsfiddle.net/mukL3hq8/2/
Any help will be greatly appreciated.
UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library.
I don't know why but I have found that jQuery sometimes has some trouble working with Blogger, what mostly solved the issue was wrapping it like this:
<script>
//<![CDATA[
jquery here
//]]>
</script>
I find that blogger will sometimes encode some elements within my script and this will prevent blogger from doing so, thus the script is executed properly.
Maybe it'll solve your problem as well.
Ok, issue tracked down. It seems that the problem caused by a duplicate 'include' of the jquery-ui library. The template I've used was making a second reference to a jquery-ui library (which was also an older one from what I've used) and caused a conflict. Removing the second reference just solved the problem.
So I have a website and I want to use the jQuery slideToggle to move the blocks. The problem is that it doesn't work on my Joomla website. However, when I copy the code to jsbin.com, it works. Here's the link http://jsbin.com/EcObOwex/1/edit
Here's the actual JS I'm using:
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
I don't know what additional information I can provide.
The JS code is in splash.js, link to it works properly (checked it, there's some other script that works from the file)
Edit: I was informed that it was an JS error that I was getting.
Here's the error
Uncaught TypeError: Object [object Object] has no method 'tooltip'
And here's the code. Could anyone help me determine what is it?
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"container": false});
});
I didn't add it manually, it's part of the <jdoc:include type="head" />. Could anyone help me determine how to shake this code off?
EDIT 2:
Some more information:
Here's my full <head> code. http://jsbin.com/aFOZEWI/2/edit
AND YOU CAN ALSO FIND THE FULL SPLASH.JS in the JavaScript part of the Bin.
P.S. The other part of the splash.js works, my overflow element changes just as it's intended.
It might be possible that you have multiple jQuery libraries being imported which may cause conflicts. In addition to that, let's import the scripts and add you code using Joomla coding standards.
<?php
JHtml::_('jquery.framework'); //This calls jQuery in noConflict mode
$doc = JFactory::getDocument();
$doc->addScript(JUri::root() . 'templates/vabankbroker/src/splash.js');
$doc->addScriptDeclaration("
$('.sTurinys').hover(function(){
$('.ssTurinys',(this)).stop().slideToggle(600);
});
");
?>
As for the Tooltip error, open the index.php of your template and if the following doesn't exist, I would recommend you add it:
JHtml::_('bootstrap.framework');
Hope this helps
I found my answer through this post:
My script works in jsfiddle but not site. Cannot call method hover of null?
Thank you for all kinds of notices, I'll make all those fixes, but for this exact problem, I had to include the script in the end of the <body> tag, and it started working.
Cheers :)
I am having a few issues with the jquery plugin (ImageMapster). ImageMapster has provided a demo jsfiddle to test out their demo, they use one resource and the rest is right in front of you: http://jsfiddle.net/nYkAG/396/
If you hover over the image, you will be able to several small boxes and when you hover over them, you will see a description under the image. (if it doesnt work then try clicking on the image itself). It uses the area tag.
I tried to use the same method and implement it on a normal HTML site. However, its not working and i cannot understand what i have done wrong to the jsfiddle that is not working.
Example SIte: http://www.nina-naustdal.com/index1.html
Its Exactly the same site, which is annoying. Can someone shed some light onto this issue.
Thanks again for your assistance.
Just wrap your code in
$(function(){
// Your code
});
or
$(window).load(function(){
//Your code
});
You are accessing #beatles before loading it in DOM.
Its running under jsfiddle because it is wrapping in $(window).load(function(){
I'm making a couple of themes for Wordpress from scratch. Everything seems to work alright, but when i installed thethe tabs and accordions plugin, a plugin for making accordions with jQuery i realized that jQuery is not working with my templates! I searched a lot, but every method that i try to implement is not working:
<?php wp_enqueue_script("jquery"); ?> //Not working
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<?php wp_head(); ?> // Not working
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.4.2.min.js"></script> //Not working
I even try to make a function in the functions.php file, but i got the same results.
When i look at the code with Chrome it looks like the site is loading jQuery, but for some reason my accordion plugin is not working.
I'm not very familiar with jQuery and Javascript.
I'm working on a localhost and i tried with tewnty eleven and twenty ten themes and everything works well with them. For some reason my themes are not working properly.
Any help would be welcomed.
Updated on 04/01/2012
After trying everything! I decided to take another way. I used the Shape theme from Thematic, copy all my content over the original content and, voila! Everything it's working properly!
I really don't understand why, but at least it worked.
It's very strange because when i follow the tutorial from Thematic to make a theme like Shape the problem appears again... so, if somebody is getting problems to get jQuery plugins working properly on a WP Theme from scratch i recommend to use the Shape theme as a base theme for start working on.
Hope it helps somebody!
It seems like your trying to include multiple versions of jquery, is that needed? Also I always put wp_head last. Lastly, and only because I do this all the time, are your files named correctly and in the right folders?