Add sticky sidebar - javascript

I'm trying to use sticky sidebar with theiaStickySidebar from Github projects. As it described in above link, this should be an easy work. I use below HTML construction:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
This all these scripts need to work.
And also using scripts mentioned at Github page as below:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
But this doesn't work currectly.
Have I done something wrong in this process?

Jquery selector seems wrong. Use .ssidebar or theiaStickySidebar depending on which one you want as the sidebar.
eg.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .ssidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>

I just didn't delete extra class .content. For:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
Must use:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>

Related

How to Add Amazon Affliate Banner in vue app

I want to add the Amazon affliate banner to a component in my vue web application.
Below is the Amazon code.
<script type="text/javascript" language="javascript">
var aax_size='160x600';
var aax_pubname = 'samplename';
var aax_src='***';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
However adding this in the index.html wasn't giving expected results.
I want this to add to a vue component. The below code doesn't even show the banner.
mycomponent.vue
<template>
<div>
<!-- Some contents -->
</div>
</template>
<script type="text/javascript" language="javascript">
var aax_size='160x600';
var aax_pubname = 'samplename';
var aax_src='***';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
<script>
export default {
// Vue options api code
}
</script>

js bootpag not loading pagination

My bootpag is not loading the pagination.I have spend several hour checking the rest of the code and it works good.The problem is that I'm unable to figure out why does not bootpag load.
Here is my code:
dashboard.php//Users dashboard
<?php
session_start();
......
......
$pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js_user.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("views/apps/get_apps_record.php"); //initial page number to load
$(".paging_link").bootpag({
total: <?php echo $pages; ?>
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
$("#results").load("views/apps/get_apps_record.php", {'page':num});
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
//loading the apps.php here
....
<script src="js/jquery-1.12.4.min.js"></script>
....
</body>
</html>
apps.php//the pagination is here
...
<div id="results" class="list-group"></div>
<div class="paging_link"></div>
....
In the #results the output is being loaded but the pagination is not showing up.
Any ideas?
Was missing:
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
face palm!!!
I think you are misspelled.
Please add your css files on head then
Add jquery ,then
Add bootstrap.min.js ,then
Add custom js scripts

Uncaught TypeError: $(...).lightGallery is not a function

when I try to click the link it shows this in browser console:
Uncaught TypeError: $(...).lightGallery is not a function(anonymous function) # index.html:250dispatch # jquery.min.js:3r.handle # jquery.min.js:3
and this is the code I used:
$('#gallery').on('click', function() {
$(this).lightGallery({
dynamic: true,
dynamicEl: [{
"src": 'assets/images/gallery/1.jpg',
'thumb': 'assets/images/gallery/thumbs/1.jpg',
'subHtml': '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>'
}, {
'src': 'assets/images/gallery/2.jpg',
'thumb': 'assets/images/gallery/thumbs/2.jpg',
'subHtml': "<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
}, {
'src': 'assets/images/gallery/3.jpg',
'thumb': 'assets/images/gallery/thumbs/3.jpg',
'subHtml': "<h4>Coniston Calmness</h4><p>Beautiful morning</p>"
}]
})
});
bear in mind I am using the Dynamic Mode in lightGallery.
I already included the lightGallery library before and the jQuery library before it.
I have tried to substitute the $ with jQuery.
I also tried the "semicolon solution" but with no luck.
this is the whole libraries i included:
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/SmoothScroll.js"></script>
<script src="assets/viewportChecker/jquery.viewportchecker.js"></script>
<script src="assets/cookies-alert-plugin/cookies-alert-core.js"></script>
<script src="assets/cookies-alert-plugin/cookies-alert-script.js"></script>
<script src="assets/dropdown/js/script.min.js"></script>
<script src="assets/touchSwipe/jquery.touchSwipe.min.js"></script>
<script src="assets/jarallax/jarallax.js"></script>
<script src="assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="assets/jquery-mb-ytplayer/jquery.mb.YTPlayer.min.js"></script>
<script src="assets/theme/js/script.js"></script>
<script src="assets/mobirise-slider-video/script.js"></script>
<script src="assets/formoid/formoid.min.js"></script>
<!-- lightgallery -->
<script src="assets/theme/js/lightgallery.min.js"></script>
<script src="assets/theme/js/lg-thumbnail.min.js"></script>
<script src="assets/theme/js/lg-fullscreen.min.js"></script>
<script src="assets/theme/js/lg-share.min.js"></script>
<script src="assets/theme/js/lg-zoom.min.js"></script>
<script src="assets/theme/js/lg-autoplay.min.js"></script>
Wooooooooooo Haaaaaa I finally solved it, and the problem was maybe with local version I have!!
When I switched to the cdnjs version it worked PERFECT!!!
a huge THANKS for all of you!!
all I did is replace the local ones with the cdn links
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/css/lightgallery.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.2/js/lightgallery.js"></script>
in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html.
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body. at the end after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
I make sure, this plugin was the last script in been called.
I also wrapped the code inside the ready function.
In addition, I show how to use a variant to select elements from the DOM. I'm using jQuery and running all from my local server. The sources of lightgallery are from 2018, downloaded from the repository, manually.
<script type="text/javascript">
$(document).ready(function() {
$('.post img').wrap(function(){
return "<div class='gallery' data-src='" + $( this ).attr("src") + "'></div>";
});
lightGallery(document.querySelector('.post'), {selector: ".gallery"});
});
</script>

mmenu position & direction attributes to slide in from right

I read another person's question asking how to make mmenu slide in from the right side of the screen instead of the left. They responded saying that they got it to work by doing the following, but it does not work in my instance - it still moves in from the left side of the screen, not the right like I want.
The mmenu related files are the latest from http://mmenu.frebsite.nl/, so I do not believe it's a version issue.
<!DOCTYPE html>
<html>
<head>
<title>mmenu test</title>
<script src="jquery-2.1.4.min.js"></script>
<link type="text/css" href="jquery.mmenu.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
<script>
$(document).ready(function() {
var API = $("#menu").mmenu({
dragOpen: true,
position:'right',
direction:'right'
}).data( "mmenu" );
$("#menu-button").click(function() {
API.open();
});
});
</script>
</head>
<body>
<div>
This is some body content
</div>
<button id="menu-button">open/close</button>
<nav id="menu">
<ul>
<li>Home</li>
<li>About us
</ul>
</nav>
</body>
</html>
From this page of the plugin documentation, you need to include the "positioning" extension. I guess it is already included in your case, because you call the all.js and all.css files.
Then, use the following code :
$("#menu").mmenu({
offCanvas: {
position: "right"
}
});
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.mmenu.js"></script>
<link href="path/to/jquery.mmenu.css" rel="stylesheet" />
<link href="path/to/jquery.mmenu.positioning.css" rel="stylesheet" />
<script>
$(document).ready(function() {
$("#my-menu").mmenu({
extensions: ["position-right"]
});
});
</script>

Uncaught ReferenceError: $ is not defined error in jQuery

I have this code in jQuery: (the file name is javascript.js ...I was using JavaScript before...)
$(document).ready(function() {
$("#readFile").click(function() {
$.get('test.txt', function(data) {
$("#bottom_pane_options").html(data); // #bottom_pane_options is the div I want the data to go
}, 'text');
});
});
...and this in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Culminating</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./javascript.js"></script>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(50.569283,-84.378433),
zoom:5,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>
<div id="bottom_pane_options">
<button id="readFile">Read File</button>
</div>
</div>
</body>
When I check the console, I get the Uncaught ReferenceError saying that $ is not defined on the first line. I'm assuming that it is referring to the first character on the first line. I got this code from a website and I'm new to jQuery so I'm not sure what is going wrong here.
Any suggestions?
Change the order you're including your scripts (jQuery first):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script
src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIKEY&sensor=false">
</script>
Include the jQuery file first:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
</script>
Scripts are loaded in the order you have defined them in the HTML.
Therefore if you first load:
<script type="text/javascript" src="./javascript.js"></script>
without loading jQuery first, then $ is not defined.
You need to first load jQuery so that you can use it.
I would also recommend placing your scripts at the bottom of your HTML for performance reasons.
The MVC 5 stock install puts javascript references in the _Layout.cshtml file that is shared in all pages. So the javascript files were below the main content and document.ready function where all my $'s were.
BOTTOM PART OF _Layout.cshtml:
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I moved them above the
#RenderBody() and all was fine.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>

Categories