I've got html site with little help of css.
I Never tried to use javascript, but I found one that called simplr-smoothscroll which requires jQuery Mouse Wheel Plugin.
When I downloaded both of them I got jquery.mousewheel.js and jquery.simplr.smoothscroll.js. When I searched google how to install them in my site, I found that I need to put them in the site directory and refer to them in the html like this:
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.simplr.smoothscroll.js"></script>
I did that and nothing happened. What should i do?
PS: there are some tips which i really don't understand in the github links of the project :)
You also need to include jQuery itself for those libraries to work.
You can download jQuery as well and put it there, on the top of the other two, or you can reference it from a CDN.
Most of the libraries require you to write some codes as well. You can read their documentation and see how you can use them.
simplr-smoothscroll for example, you need to add the code below to your page and put your configuration inside in order to get it to work.
<script>
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
</script>
First of all, you should put your jquery.mousewheel.js and jquery.simplr.smoothscroll.jsin js folder which is same hierarchical level with your index.html.
Second, did you add the JavaScript which is provided in your link?
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
you should add this between <script> ... </script>.
Include jquery js file first .here using cdn path you can download latest version and give accpording path
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Then include mousewheel js
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
Include mooth scroll js
Use Follwing code:
<script type="text/javascript" charset="utf-8">
$(function () {
$.srSmoothscroll()
})
</script>
You can set option also ,refering to document :
https://github.com/simov/simplr-smoothscroll
Related
I have checked to see if both jQuery is loaded and the colorbox script is loaded and they both have been loaded correctly (I used .getScript to see if colorbox loaded correctly and I get a positive result). However the function does not load colorbox and Firebug says "$(...).colorbox is not a function". The code used to work but I'm not sure what I did to break it. Here's the header:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="colorbox.css"/>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/scripts.js"></script>
<script>
$(document).ready(function(){
$(".popup").colorbox({transition: "elastic", opacity: 0.5, speed: 350});
var panels = $('.accordionButton > .accordionContent').hide();
$("div.accordionButton").click(function(){
panels.slideUp();
$(this).parent().next().slideDown();
return false
});
});
</script>
</head>
I have checked several times to make sure the script is located in the correct directory. Here is the link:
<div id='supermenu'><table><tr><td><a href='login.php?lang=en' class='popup'>Login</a></td><td> or </td><td><a href='register.php?lang=en'> Register </a></tr></td></table></div>
You need to reference the colorbox file after the jquery file. Like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="Scripts/scripts.js"></script>
That is the case for most jquery plugins by the way.
I had the same error appears in Chrome browser.
In case the solution above didn't helped, #MannyFleurmond solution helped in my case.
Try warp the colorbox js call with function($):
(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
})(jQuery);
So my ColorBox call look like this:
(function ($) {
$('#myelement').click(function (e) {
e.preventDefault();
var url = $(this).attr('href');
$.colorbox({ href: url, width: 936, height: 582, top: 160});
});
})(jQuery);
Hello I'm looking for someone proficient in Javascript. The site I'm using uses a javascript file to initialize the plugins and load settings and what not. So after reading some of
http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/
I decided to use it to snap to my divs(all with the class "slide")...
However placing this
$(window).scrollsnap({
snaps: '.slide',
proximity: 100
});
in my js.js file accomplished nothing
Any help is appreciated!
The code I used with that was this and it worked, give it a try:
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.slide',
proximity: 100
});
});
Not sure about $(window), where did you get that from?
Also, are you linking to the appropriate javascript files and to the jquery library? Make sure to put it at the end of your html like this:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.scrollstop.js"></script>
<script src="js/jquery.scrollsnap.js"></script>
<script src="js/jquery.fitvids.js"></script>
</body>
</html>
I have a page with js source. I have to include two different jquery sources. If i take out one the countdown clock doesn't work.
how i work with js conflit ?
<script type="text/javascript" src="files/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="files/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="files/js/kivi.js"></script>
<script type="text/javascript" src="files/js/jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
</script>
I think you should better find out how to fix the contdown clock instead of loading 2 versions of jquery on the page.
There is that noconflict method but i'm sure the plugin doesn't do it that way. You can edit the source of the plugin, wrap it in an annonymous self executing function that takes one parameter
(function($) {
// your plugin code here
})(JQ);
where JQ is the non conflict name you get from whatever version of jquery this plugin requires.
So safest way is to fix the clock plugin
I've been messing around with my custom(not a plugin) jquery slide for Wordpress. I've been searching the whole day for how to integrate javascript in Wordpress but seem to come across many different ways. So my main question is which way is the proper, fastest way to code the script.
From what I read it looks like I should use Wordpress enqueue so that the script is only called on the page it is needed on which in my case is the index.php. But I am not sure of the proper way to do it. Also, should I add something to my functions.php?
Here is the script:
<script src="Js/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="Js/js/jquery.zaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#example4 ul").zAccordion({
slideWidth: 600,
width: 900,
height: 250,
timeout: 5000,
slideClass: "frame"
});
});
</script>
And this is what I have now in my header.php:
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head();?>
<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/jquery.zaccordion.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#slider ul").zAccordion({
slideWidth: 600,
width: 800,
height: 250,
timeout: 5000,
slideClass: "frame"
});
});
</script>
My advice (and solution):
WordPress Plugin Development - Beginner's Guide
Packtlib press
This is a really good book, very clear, simple, and there are tons of good samples you can use with jQuery.
Moreover you have the real things everybody should do when writing Wordpress plugins ;)
If you don't want to create a plugin then the second best solution is to install the Headspace2 plugin which allow you to add any JS or CSS file to any page from the Wordpress Admin Edit page/post screen.
Also I would turn your inline JS into a external JS file (mycustom.js) and then include it just like you do your other JS files, but that is my personal preference.
Here's a couple things I can suggest:
Don't include your .js because you're already enqueueing them
Register your jquery.zaccordion.js using wp_register_script and then enqueue it like you did with jquery
You don't need to include jQuery.noConflict(); since WordPress' jQuery has that declared already. Only when you include your own jQuery do you need to
You can include jQuery in your theme file and call it the functions.php file. In my case the script was in the js folder (your_theme/js/).
The right way to load scripts in WordPress is to use the function wp_enqueue_script.
In functions.php in your theme type:
/**
* Load jQuery script
*/
if (!is_admin()) {
function register_my_jquery() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_bloginfo('template_directory') . "/js/jquery.min.js" );
wp_enqueue_script( 'jquery' );
}
add_action('init', 'register_my_jquery');
}
I am working on a website that has incorporated the jquery cycle plugin. It was all working fine until I tried to add the lightbox plugin. There seems to be an issue within the element that only allows the latter JS files to work. Any help would be great.
Here is the jquery code I am using in the element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function () {
var titles = ['Pentiction Summer Classic', 'Ryan Kesler', 'Trevor Linden'];
$('.slideshow').after('<div id="navigation"><div id="nav"></div></div>').cycle({
fx: 'fade',
timeout: 5000,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '' + titles[index] + '';
}
});
});
</script>
It works without any issue.
Here is the lightbox code in the element.
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
It also works alone without any issue. When I put them together, only the last one in the element works. The first one breaks.
I have checked the error console and this is the error:
Error: element.dispatchEvent is not a function
Source File: http://localhost:8888/rockymountainsports/rms/web/js/prototype.js
Line: 3972
That error does not appear when the cycle js is not there. Any ideas?
Thanks
I presume the error is due to the fact that you're using 2 Javascript Frameworks, jQuery and Prototype.
This usually isn't recommended unless you really need to use both frameworks.
I would consider using the jQuery alternative of lightbox or using jQuery in noConflict() mode. Something like:
var $j = jQuery.noConflict();
And then instead of using $("someelement") use $j("somelement");
But, my personal recommendation is to ditch one of the framworks and stick with just one.