The link for the plugin:
http://www.myjqueryplugins.com/jquery-plugin/jscrollbar
As they said i just downloaded the files uploaded them to my website.
Then i embeded html and added this code:
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="http://newsxpressmedia.com/files/theme/jScrollbar.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jquery.js"></script>
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jquery-ui.js"></script>
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jquery-mousewheel.js"></script>
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jScrollbar.jquery.js"></script>
<!-- Main container -->
<div class="jScrollbar">
<!-- Scrolling content container -->
<div class="jScrollbar_mask">
<p>
<!-- Your long content here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...dfdfdsfdfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</p>
</div>
<!-- slider container -->
<div class="jScrollbar_draggable">
<!-- slider -->
</div>
<!-- don't forget to clear the floats -->
<div class="clr"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// simple jScrollbar plugin call
$('.jScrollbar').jScrollbar();
// more complex jScrollbar plugin call
$('.jScrollbar').jScrollbar({
scrollStep : 25,
position : 'left',
showOnHover : true
});
});
</script>
But all i see is the text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...dfdfdsfdfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
I didn't see any scrollbar/s
The links to the files are ok like i'm using with other jquery plugin that work.
Related
I've recently started learning JavaScript, and lately, I've been doing some exercises to gain skills, but I don't know if I'm doing it right on this one.
I'm trying to load a page inside a div that will be shown to the user after pressing the buttons on the banner.
document.getElementById("btnConta").addEventListener("click", function() {
$(document).ready(function() {
$("#content").load("http://127.0.0.1:5500/conta.html");
});
});
document.getElementById("btnDenuncia").addEventListener("click", function() {
$(document).ready(function() {
$("#content").load("http://127.0.0.1:5500/denuncia.html");
});
});
document.getElementById("btnConta").addEventListener("click", function() {
window.location.href = "index.html";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pág. Inicial</title>
<link href="pagInicial.css" rel="stylesheet">
<script type="module" src="pagInicial.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div class="wrapper">
<header role="banner">
<nav>
<div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div>
<div class="menu">
<ul>
<a id="btnDenuncia" class="btn btn1">Denuncias</a>
<a id="btnConta" class="btn btn1">Conta</a>
<a id="btnLogout" href="#"><button>Logout</button></a>
</ul>
</div>
</nav>
</header>
<div class="content" id="content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p>
</div>
</div>
</body>
</html>
Should I've been doing it this way, or is there a better way of doing it?
Thank you :)
The reason your code working, you put the document ready inside click event here you doing wrong
document.getElementById("btnConta").addEventListener("click", function () {
$(document).ready(function () {
$("#content").load("http://127.0.0.1:5500/conta.html");
});
});
you have ready DOM only once and put all your click events inside it like below
$(document).ready(function () {
document.getElementById("btnConta").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/users/8384983/neeraj);
});
document.getElementById("btnDenuncia").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/users/8384983/neeraj");
});
});
it's not working here due to cross-origin blocking to open URL you can check it now in your code it works perfectly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
document.getElementById("btnConta").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/company");
});
document.getElementById("btnDenuncia").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/company");
});
});
</script>
</head>
<body>
<div class="wrapper">
<header role="banner">
<nav>
<div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div>
<div class="menu">
<ul>
<a id="btnDenuncia" class="btn btn1">Denuncias</a>
<a id="btnConta" class="btn btn1">Conta</a>
<a id="btnLogout" href="#"><button>Logout</button></a>
</ul>
</div>
</nav>
</header>
<div class="content" id="content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p>
</div>
</div>
</body>
</html>
I am learning react js and trying to create a website with react js from a Html template. The template is using Jquery Isotope image filter plugin and my react code using react-router-dom for navigating page. when starting the app, in the home page the filter is working properly but when navigating to another page using the menu bar, the isotope filter does not work. It again works when i hard reload the page again. I have tried some way but that didn't work. So what is the way to use Jquery Plugin in a react js app ??
My Code is below:
Index.html page. Here i am declaring the Scripts:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<title>Laravel</title>
</head>
<body class="antialiased">
<div id="root"></div>
<script src="js/app.js"></script>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
Home.js component. Here i am using the isotope filter plugin:
import React from 'react';'
export default function Home() {
return (
<>
{/* <!-- ======= Portfolio Section ======= --> */}
<section id="portfolio" className="portfolio" style={{ marginTop: "50px" }}>
<div className="container" data-aos="fade-up">
<div className="section-title">
<h2>View Our Image Store</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea.</p>
</div>
<div className="row" data-aos="fade-up" data-aos-delay="100">
<div className="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" className="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div className="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div className="col-lg-4 col-md-6 portfolio-item filter-app">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" className="img-fluid" alt="portfolio-1" />
<div className="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div className="portfolio-links">
<i className="bx bx-plus"></i>
<i className="bx bx-link"></i>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 portfolio-item filter-web">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" className="img-fluid" alt="portfolio-2" />
<div className="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div className="portfolio-links">
<i className="bx bx-plus"></i>
<i className="bx bx-link"></i>
</div>
</div>
</div>
</div>
</div>
</section>
And the isotope plugin is initialized in main.js script file that is integrated in the index.html page above.
So when i start the app, this page Home component works fine but when i go to another menu and come again to this menu then the filter doesn't work. What is the way to do this correctly?
Also i created below hooks to load the scripts in this Home component but doesn't work.
Hooks code:
import React, { useEffect } from 'react'
export default function loadScript(url) {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
}
and called it from Home component like below:
import loadScript from '../hooks/loadScript'
export default function Home() {
loadScript("assets/vendor/jquery/jquery.min.js");
loadScript("assets/vendor/bootstrap/js/bootstrap.bundle.min.js");
loadScript("assets/vendor/jquery.easing/jquery.easing.min.js");
loadScript("assets/vendor/php-email-form/validate.js");
loadScript("assets/vendor/owl.carousel/owl.carousel.min.js");
loadScript("assets/vendor/waypoints/jquery.waypoints.min.js");
loadScript("assets/vendor/counterup/counterup.min.js");
loadScript("assets/vendor/isotope-layout/isotope.pkgd.min.js");
loadScript("assets/vendor/venobox/venobox.min.js");
loadScript("assets/vendor/aos/aos.js");
loadScript("assets/js/main.js");
But is doesn't work. What is the right way to do this?
You may be having trouble loading jquery in. I would install it as an npm package:
npm i jquery
And then load jquery into your app like so:
import $ from 'jquery'
However, I'm not sure if it's failing for a different reason. You can load jquery as an npm package which might take some pain out of things, but I doubt that the jquery plugin you want to use exists as an npm package. I should mention that it is a little bit of an anti-pattern to use jquery within a React app. Not that you can't or shouldn't, but the challenge comes in trying to build a data model that is tracked within React's state management. When relying heavily on other libraries like jquery it can start to become a lot of work to stitch the two together.
That said, sometimes it still can be worth it to make use of a jquery plugin if it accomplishes something which cannot easily be done in a React plugin. You'll have to make the decision as to which is best in your case.
I'm trying to learn programming from various online tutorials and I created flask server which predicts something. I also got the front-end with javascript but it wont run. I don't know why. I don't know JS. I know python well but that's it.
I don't know that to do.
here is the html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/style.css">
<script type="text/javascript", src="static/code.js"></script>
<title>Heading</title>
</head>
<body>
<br>
<!--<img class="logo" src="static/final_v1.png" alt="">-->
<br>
<div class="container main">
<div class="jumbotron" id="holder">
<h1 class='main_heading'> Some Machine learning model</h1>
<h3>lorem ipsum dolor sit amet</h3>
<br>
<div class="instructions">
<h2>Instructions: </h2>
<p>1. lorem ipsum dolor sit amet</p>
<p>2. Curabitur tincidunt orci non nunc sagittis euismod.</p>
</div>
<br>
<br>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Feature1:</label>
<div class="col-sm-10">
<input class="form-control" id="feature1" placeholder=" Enter feature1" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="button btn btn-default">Submit</button>
</div>
</div>
</form>
<h2 class="result"></h2>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue">
<div class="footer-copyright text-center py-3">
<div class="bottom">
<p>xyz | Status Prediction Demo</p>
</div>
</div>
</footer>
<!-- Footer -->
</body>
</html>
here is the JS file:
var feature1;
$(document).ready(function(){
// fetch all DOM elements for the input
feature1_ = document.getElementById("feature1");
;
});
$(document).on('click','#submit',function(){
alert('end')
// on clicking submit fetch values from DOM elements and use them to make request to our flask API
var feature1 = feature1_.value;
if(feature1 == ""){
// you may allow it as per your model needs
// you may mark some fields with * (star) and make sure they aren't empty here
alert("empty fields not allowed");
}
else{
var requestURL = "http://127.0.0.1/predict?f1="+feature1;
console.log(requestURL); // log the requestURL for troubleshooting
$.getJSON(requestURL, function(data) {
console.log(data); // log the data for troubleshooting
prediction = data['json_key_for_the_prediction'];
});
// following lines consist of action that would be taken after the request has been read
// for now i am just changing a <h2> tag's inner html using jquery
// you may simple do: alert(prediction);
alert(prediction)
$(".result").html("Prediction is:" + prediction);
}
});
There is flask on the backend and js suppose to execute the link.
I have no idea why this is not working
Could you help me please ?
OK, there are several things:
Your submit button is missing an id
Your submit button causes reload
Your callback will run before you get a response
Change your HTML to:
<button id="submit" type="button" type="button" class="button btn btn-default">Submit</button>
The type attribute will remove the reload and the added id will make your script recognize it.
These lines of code runs before you get a response:
alert(prediction)
$(".result").html("Prediction is:" + prediction);
Put them inside getJSON:
$.getJSON(requestURL, function(data) {
console.log(data); // log the data for troubleshooting
var prediction = data['json_key_for_the_prediction']; // <-- added `var`
alert(prediction);
$(".result").html("Prediction is:" + prediction);
});
You're clearly new so I'm offering a strict/minimal test case file for you to work with. This one will simply trigger an alert when the page loads.
Download Notepad++ so you're not adding BOM (Byte Order Marks) if you're running a Microsoft operating system.
Save the following code as example.xhtml.
Modify as needed.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Default Test Template</title>
<script defer="true" type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
alert('JavaScript is enabled');
}
//]]>
</script>
<style type="text/css">
body {background-color: #000; color: #fff;}
</style>
</head>
<body>
<h1>Default Test Template</h1>
</body>
</html>
Cant get the stylesheet to work on the printed document. It works on the popup window but not when printed. So when the window on the screen pops up it has the proper styling but when the print dialog is used the print the contents of the window it does not take the styling from the stylesheet just default styles.
Here is the code:
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery- 1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
Printout
If you want to design your print page.It will not work with your style sheet.You need to write inline style sheet.
I have face the same problem and finally solved that this is code :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<a onClick="PrintElem('#mydiv')" class="btn btn-default btn-icon icon-left hidden-print pull-left">
My Div
<i class="entypo-print"></i>
</a>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($('<div/>').append($(elem).clone()).html());
}
function Popup(data)
{
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.print();
myWindow.close();
return true;
};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </script>
</body>
</html>
Print pages are usually used inside email as well. Based on what I experienced, you should write all your stylesheet codes within the code (inline).
I have been trying to figure out why I am getting this problem and cannot figure it out. I am guessing it has to do with the libraries added but I am a newby and have spent like 2 days trying different things. The problem here is for the function calling the fancybox, but it happens whenever I call the document.ready.
Here is the code:
<head>
<script type="text/javascript" src="public/scripts/jquery.min.js"></script> <!-- 1.7.2 -->
<script src="public/scripts/applicat.js" type="text/javascript"></script>
<!--Add link fancybox-->
<script type="text/javascript" src="public/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="public/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#add-iframe").fancybox({
'hideOnContentClick': true
});
});
</script></head>
<section id="top-comments" style="margin-top: 10px">
<div class="left-side">
<p class="top-comment-title">Michigan</p>
<div class="top-comment-wrapper">
<div class="top-comment-header">
<span class="user-name">Andrew P.</span>
<div class="fix"></div>
</div>
<p class="top-comment-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
</div>
</div>
<div class="right-side">
<p class="top-comment-title">Notre Dame</p>
<div class="top-comment-wrapper">
<div class="top-comment-header dispute-comment">
<span class="user-name">Jenny S.</span>
<div class="fix"></div>
</div>
<p class="top-comment-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
</div>
</div>
<div class="fix"></div>
</section>
<!-- Articles -->
<section id="top-resources" style="display:none; margin-top:10px">
<a id="add-iframe" href="add-link.html" class="top-add-link">Add Link</a>
<div class="left-side">
<p class="top-comment-title">Michigan</p>
</div>
<div class="right-side">
<p class="top-comment-title">Notre Dame</p>
</div>
<div class="fix"></div>
</section>
</div>
<script type="text/javascript" charset="utf-8">
jQuery().ready(function() {
jQuery("#discussion-sections > nav ul").tabs("#discussion-sections > section");
});
</script>
Thanks for your help!
Luis
You load Modernizr right after jQuery library somehow (in applicat.js), so $ variable gets rewritten. Use jQuery in 'noConflict' mode, or use Modernizr to load jQuery as described here.
You didn't reference jQuery successfully.
Check this:
alert(typeof $ == "undefined");
alert(typeof jQuery == "undefined");
If those are true, jQuery was not loaded to the page.
Change:
<script type="text/javascript" src="public/scripts/jquery.min.js"></script>
To:
<script type="text/javascript" src="http://www.sofiaandluis.com/luis/public/scripts/jquery.min.js"></script>