There are other answers on Stack Overflow however, I can't get any of them to work.
I need to use 2 versions of jQuery. Here is my code:
I link to first version then have this code:
<script>
var $i = jQuery.noConflict();
</script>
I then link to the 2nd version and have this code:
<script>
var $j = jQuery.noConflict();
</script>
Here is the code I need to run with the 2nd version $j
<script type="text/javascript">
$j.ready(function() {
$j('#slider').layerSlider({
sliderVersion: '6.2.1',
type: 'fullsize',
responsiveUnder: 0,
fullSizeMode: 'hero',
maxRatio: 1,
parallaxScrollReverse: true,
hideUnder: 0,
hideOver: 100000,
skin: 'outline',
showBarTimer: true,
showCircleTimer: false,
thumbnailNavigation: 'disabled',
allowRestartOnResize: true,
skinsPath: 'skins/',
height: 800
});
});
</script>
I inspected the page in Chrome and not showing any errors but it will not run the slider at all.
Here's one way to load (and use) 2 versions of jQuery at once. There's no need to call .noConflict at all.
console.log(jQuery3.fn.jquery);
console.log(jQuery2.fn.jquery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>var jQuery3 = jQuery;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>var jQuery2 = jQuery;</script>
Then to run your slider script with jQuery2:
$jQuery2.ready(function() {
$jQuery2('#slider').layerSlider({
sliderVersion: '6.2.1',
type: 'fullsize',
responsiveUnder: 0,
fullSizeMode: 'hero',
maxRatio: 1,
parallaxScrollReverse: true,
hideUnder: 0,
hideOver: 100000,
skin: 'outline',
showBarTimer: true,
showCircleTimer: false,
thumbnailNavigation: 'disabled',
allowRestartOnResize: true,
skinsPath: 'skins/',
height: 800
});
});
Related
I'm using mo.js library for animations and other effects and noticed that I must place the script tag
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
at the end of body because if I place it at the head element then I'm getting null reference error "mojs is undefined".
The error occurs in javascript file where I'm using this particular library to create an animation:
const polygon = new mojs.Shape({
parent: '#cell1',
shape: 'polygon',
points: 5,
fill: { 'deeppink' : '#00F87F' },
x: { 'rand(-100%, -200%)' : 0 },
angle: { 0: 'rand(0, 360)' },
radius: 25,
duration: 2000,
repeat: 999,
}).play();
Could anyone explain why I'm getting this error when script is in head but when it's in body it's working as intended?
It doesn't depend on whether or not you put in your body, it just matters that you load mojs before using it. Depending on where you use mojs, you can place the script tag in the head.
<head>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
<script>
console.log(mojs); // mojs is defined
</script>
</head>
<head>
<script>
console.log(mojs); // is not defined
</script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
</body>
<body>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
<script>
console.log(mojs); // is defined
</script>
</body>
It should work fine if you include the library in head or at the bottom of page.
If you are using mojs functions before it's loaded on page, you will get the error. if you wait for the library to be available, then using it will be fine.
When you move the library inclusion to the bottom, the DOM gets rende
const polygon = new mojs.Shape({
parent: '#cell1',
shape: 'polygon',
points: 5,
fill: {
'deeppink': '#00F87F'
},
x: {
'rand(-100%, -200%)': 0
},
angle: {
0: 'rand(0, 360)'
},
radius: 25,
duration: 2000,
repeat: 999,
}).play()
#cell1 {
height: 200px
}
<head>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
</head>
<body>
<div id="cell1"></div>
</body>
I'm using freewall.js for displaying a grid on my frontpage. But it doesn't work correct. It only loads after resize. And also after the resize it calculates false heights and puts some objects on other places where they shouldn't be.
Here's my JS:
$(function(){
var wall = new Freewall(".freewall");
wall.reset({
selector: '.freewall-item',
animate: false,
cellW: 150,
cellH: 'auto',
gutterY: 15,
gutterX: 15,
onResize: function() {
wall.fitWidth();
}
});
wall.container.find('.event-intro-image').load(function() {
wall.fitWidth();
});
$(window).trigger('resize');
});
As you can see i also tried to use $(window).trigger('resize');, without sucess.
I'm trying to find out how I can add a button to right before the copy button that will always be a link to the create page of the resource. So if its on /users and in the list of buttons if a user clicks Add then it goes to /users/create. How would I do that with my code below. I also have a couple of errors and researched it and found out my errors might be due to the order in which my files are rendered. I have included the order below. I'm hoping someone can help me out somehow.
TypeError: jQuery[g3g][((((Y2 + Z3) + G4) + p1) + F9e)] is undefined
...((Y2+G4+d6g+Z3+G4+A1e+U2+y8g))):jQuery&&!jQuery[g3g][(Y2+Z3+G4+p1+F9e)][(y8+t5e+...
dataTab...itor.js (line 475, col 170)
TypeError: DataTable.Editor is undefined
DataTable.Editor.defaults.display = "bootstrap";
editor....trap.js (line 8)
$('document').ready(function() {
$('#myDatatable').dataTable({
"pagingType": "full_numbers",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [-1] },
{ 'sWidth': '30px', 'aTargets': ['idTH'] },
{ 'sWidth': '150px', 'aTargets': ['actionsTH', 'subTH'] },
{ 'sClass': 'text-center', 'aTargets': ['idTH', 'actionsTH', 'subTH'] }
],
"iDisplayLength": 10,
"aLengthMenu": [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, "All"]
],
dom: '<"dt-panelmenu clearfix"Tfr>t<"dt-panelfooter clearfix"ip>',
"oTableTools": {
"sSwfPath": "vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
});
<script src="http://myapp.app/vendor/jquery/jquery-1.11.1.min.js">
<script src="http://myapp.app/vendor/jquery/jquery_ui/jquery-ui.min.js">
<script src="http://myapp.app/assets/js/bootstrap/bootstrap.min.js">
<script src="http://myapp.app/assets/js/utility/utility.js">
<script src="http://myapp.app/assets/js/main.js">
<script type="text/javascript">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/jquery.dataTables.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/dataTables.editor.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/editor.bootstrap.js">
<script src="http://myapp.app/assets/js/my-datatables.js">
Well one, in your <script> tags section, you open a tag but never close it. That is likely your odd error you're not defining. Not so much as the placements of the scripts or the order they are in.
As for adding a button to your UI, sometimes the way datatables explains it, it won't always work in your favor, more so as those buttons are flash based.
I'd say for the sake of example:
after your call to $('#myDatatable').dataTable({});
Simply append the element via standard jquery methods..
ie:
$('#myDatatable').append('<div style="width:100px;height:30px;background-color:#F60;color:#fff;position:absolute;top:2px;right:275px;">Hello</div>');
Again primarily for the sake of example, you can tweak as needed but you can basically get this right up snug next to those buttons should you like you could likely get it in the button container, but then your going to mess with extra styling, positioning, etc.. easiest to go next to all around if your getting a feel for things overall.
I can't find out what the problem is with this line of code:
…sc', '<h4 class="vtem_news_show_title">Nesmet El Bouhaira</h4>');$('#vtem1 img…
This is the error message I receive:
**document type does not allow element "h4" here**
What do I need to change?
This is the whole <script>:
<script type="text/javascript">
var vtemnewsshow = jQuery.noConflict();
(function($) {
$(document).ready(function() {
$('#vtem0 img').data('ad-desc', '<h4>Nesmet El Bouhaira</h4>');
$('#vtem1 img').data('ad-desc', '<h4>Tunis Mall 1</h4>');
$('#vtemnewsshowid89-newsshow').adGallery({
loader_image: 'http://laselection-immobiliere.com/modules/mod_vtem_news_show/images/loading.gif',
update_window_hash: false,
start_at_index: 0,
bottompos: 20,
thumb_opacity: 0.8,
animation_speed: 400,
width: '970',
height: '340',
display_next_and_prev: 1,
display_back_and_forward: 0,
slideshow: {
autostart: 1,
speed: 5000
},
effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'
enable_keyboard_move: 1,
link_target: '_self'
});
});
})(jQuery);
</script>
If your Javascript contains HTML tags, a validator considers these part of the document, unless you prefix your code like this:
<script type="text/javascript">
//<![CDATA[
jQuery.data(element, '<h1>Hello, world.</h1>');
//]]>
</script>
You might have come across another way to resolve this issue:
<script type="text/javascript">
jQuery.data(element, '<' + 'h1>Hello, world.<' + '/h1>');
</script>
This basically chops the string to "hide" the tags from a validator. It makes code harder to read and I'd never prefer this "hack" to the CDATA solution.
Please have a look at this question, which is rather old but has a lot of answers.
I am trying to create multiple carousels in one page following this example.
I am creating my carousels in a foreach loop, and I assign to each carousel the names c0, c1, c2, etc. (Each carousel is a <div>)
Now, in order to run the script according to the example, I should run in on each carousel separately.
For example:
<script type="text/javascript">
$(document).ready(function() {
$('#c0').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });
$('#c1').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 5, orientation: 'h' });
$('#c2').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });
});
</script>
Since my carousels are created in a foreach loop, I cannot know how many of them I will have, so I tried to call the function in a for loop:
for (int i = 0; i < counter; i++)
{
string cNum = "#c" + i.ToString();%>
<script type="text/javascript">
$(document).ready(function() {
$(cNum).jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
});
</script>
<%} %>
I checked, and the cNum values are okay, it gets the values #c0, #c1, etc. but it can't recognize it as an equivalent to '#c0' etc. that were there initially.
How can I insert dynamic carousel names into the function?
Instead of doing that, just give each div a class. Like this:
<div class="someClassThatIKnowIsACarousel">
Then you don't need a loop:
$(".someClassThatIKnowIsACarousel").jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });
The problem in your code is that cNum inside your dynamically generated JavaScript section isn't interpreted as an ASP variable. You could fix that with something like $('<% cNum %>') (also note the JavaScript quotes, without get you would get $(#c0), which is erroneous).
However, your approach is wrong, please avoid the best you can mixing server/client code like that.
As aquinas already pointed out, the best solution is to add a class to the divs:
HTML:
<div class="carousel">
JavaScript:
$('div.carousel').jsCarousel({ ... });