I like a Javascript for remove
<ul class="selection-list sel-scroll sel-items js-items-unchecked">
REMOVE only (sel-scroll)
And then add this code below that
This code
<link rel="stylesheet" type="text/css" media="all" href="js/jScrollPane.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
$('#pane1').jScrollPane({showArrows:false,scrollbarWidth:10, scrollbarMargin:20});
});
</script>
It looks like you're using jQuery. Therefore you can do:
$('#elementID').removeClass('sel-scroll');
Also look into:
$('.sel-scroll').removeClass('sel-scroll');
Related
I'm attempting to integrate datatables with bootstrap 4 and there are some major conflicts. I am getting the page navigation and the buttons in the style of bootstrap 4 but my table looks like a general HTML table with random bolded borderlines. I believe that my styles are getting overridden somewhere but I can't for the life of me figure out where...
imgur link here https://imgur.com/a/2nkm4F0
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.2.2/css/autoFill.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.4.1/css/colReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.3.2/css/keyTable.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.3/css/rowReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.4/css/scroller.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.bootstrap4.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/dataTables.autoFill.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/autoFill.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/keytable/2.3.2/js/dataTables.keyTable.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.4/js/dataTables.scroller.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>
I make sure that there is only 1 import of jquery 3.3.1 and 1 import of bootstrap's css and bootstrap.min.js.
EDIT: HTML for the table that I am using.
<div id="similar-results" class="tabcontent">
<h3>Similar Documents</h3>
<table border="1" class="dataframe table display" id="example">
From the Bootstrap documentation on tables:
Due to the widespread use of tables across third-party widgets like
calendars and date pickers, we’ve designed our tables to be opt-in.
Have you added the .table class to your <table> element?
The following results in: Uncaught TypeError: Cannot read property 'formatDate' of undefined
I have all three files in the same directory (jquery, jquery-ui and this html file):
<html>
<head>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-1.11.1.min.js"</script>
<script src="jquery-ui.min.js"</script>
<script>
$(document).ready(function(){
var $t = $.datepicker.formatDate("M dd", new Date("2014-12-01"));
console.log($t);
});
</script>
</head>
<body>
</body>
</html>
What am I doing wrong?
If this is your actual HTML, you should change
<script src="jquery-1.11.1.min.js"</script>
<script src="jquery-ui.min.js"</script>
into
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
You aren't loading the jquery-ui properly. You need a closing bracket.
HTML:
<input type="text" id="your_input" name="your_input" />
JS:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
$( "#your_input" ).datepicker();
});
</script>
Optional Fast load datapicker:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
$('body').on('focus',"#your_input", function(){
$(this).datepicker({ dateFormat: 'dd-mm-yy' });
});
});
</script>
I sloved the same error by using the FULL datepicker js file
<script src="/js/jquery.datetimepicker.full.js"></script>
available in
Git Datetimepicker/build/
I have almost finished a website, but I'm struggling with combining two different javascript files... If I exclude A, B works. If I exclude B, A works. So there seems no go-between.
I'm trying to combine a JQuery-form validation and a JCarousel. As you can see, I have to exclude the validation script in orde to get the Carousel working...
Isn't there a way to combine both these script? I already tried the $j-trick from JQuery documentation, but with no luck.
I have included the files in this order:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.6.min.sliding.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<!-- THIS MUST BE COMMENTED OTHERWISE THE CONTACT SLIDER DOENS'T WORK!!
MUST FIX!!!
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
-->
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
I can see the problem but not what is causing it. I imagine you're outputting some javascript via PHP but it is coming out above the <html> tag.
If you goto view-source:http://www.YOURDOMAIN.be/new/index.php?page=&action=shout
The html looks like this:
<script>
$(document).ready(function(){noty({"text":"Uw shout is succesvol toegevoegd.",
"layout":"top","type":"success","animateOpen":{"height":"toggle"},
"animateClose":{"height":"toggle"},"speed":500,"timeout":5000,
"closeButton":true,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});});</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- css links -->
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<link rel="stylesheet" type="text/css" href="styles/skin.css" />
<link rel="stylesheet" type="text/css" href="includes/js/form/css/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="includes/lightbox/lightbox.css" />
<link rel="stylesheet" type="text/css" href="includes/notify/css/jquery.noty.css"/>
<link rel="stylesheet" type="text/css" href="includes/notify/css/noty_theme_default.css"/>
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/demos/demos.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/jquery-ui-timepicker.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
<script>
$(function(){
$('.leader_picture').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width = 500; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = 'includes/php/popup.php'; //Refer to any page on your server, external pages are not valid
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
</head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
is wrong
use this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
see the difference it is src.
I want to implement javascript flip counter. I included all needed files and added code as in this article - http://cnanney.com/journal/code/apple-style-counter-revisited/#demo.
I added html in my page:
<div id="counter" class="flip-counter"></div>
and added javscript to my application.js:
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
here is my included files(js and css):
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.8.22.custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-flipcounter.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.22.custom.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
I will also write here what files demo page is including:
<!-- My flip counter script, REQUIRED -->
<script type="text/javascript" src="js/flipcounter.js"></script>
<!-- Style sheet for the counter, REQUIRED -->
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<!-- NOT REQUIRED FOR COUNTER TO FUNCTION, JUST FOR DEMO PURPOSES -->
<!-- jQuery from Google CDN, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
and here is rar archive with working counter: https://dl.dropbox.com/u/86122402/cnanney-apple-style-flip-counter-13fd00129a41.rar.
add this to your application.js
$(function(){
var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
});
Everything looks like it should work.
Try adding you JavaScript inside a self anonymous invoking function.
$(function(){
var myCounter = new flipCounter("counter", { inc:123, pace:600});
});
Also make sure all your included files point to the right location.
Replace it with the following to test.
<script type="text/javascript" src="js/flipcounter.js"></script>
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
I've included fancybox2 files like instructed here
http://fancyapps.com/fancybox/#instructions
using my extensions xml and
<action method="addJs">
for javascript files and
<action method="addItem">
for css.
Order of my included js and css files inside my :
<link rel="stylesheet" type="text/css" href="magento/js/calendar/calendar-win2k-1.css" />
<link rel="stylesheet" type="text/css" href="magento/js/n123/fancybox2/source/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/print.css" media="print" />
<script type="text/javascript" src="magento/js/prototype/prototype.js"></script>
<script type="text/javascript" src="magento/js/lib/ccard.js"></script>
<script type="text/javascript" src="magento/js/prototype/validation.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="magento/js/varien/js.js"></script>
<script type="text/javascript" src="magento/js/varien/form.js"></script>
<script type="text/javascript" src="magento/js/varien/menu.js"></script>
<script type="text/javascript" src="magento/js/mage/translate.js"></script>
<script type="text/javascript" src="magento/js/mage/cookies.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery.no.conflict.js"></script>
<script type="text/javascript" src="magento/js/varien/product.js"></script>
<script type="text/javascript" src="magento/js/varien/configurable.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="magento/js/n123/fancybox2/source/jquery.fancybox.pack.js"></script>
Then inside my template (phtml) I've added following code:
<a id="single_1" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Assunção - Santo Tirso...a New Dimension... (Alex Matos)">
<img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt="" />
</a>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
</script>
In Chrome this error occurs:
http://www.imagebanana.com/view/6oxxttnx/s02.png
Uncaught TypeError: Object function wrap(wrapper) {
var __method = this;
return function()
{
var a = update([__method.bind(this)], arguments) ;
return wrapper.apply(this, a);
}
} has no method 'unbind'
Every help is welcome!
I've found a soulution: in my case the packed "fancybox.pack.js" didn't work and I got that error posted above but the "fancybox.js" ("unpacked"/normal version) works like a charm! Thanks for your support and attention.