JQuery panel hiding - javascript

I'm having trouble getting a simple panel hide script to work. It works for MLAWebsite's panel, but when I click the MLAJournal button nothing happens? I've tried everything I can think of and looked at it for quite a bit now and can't seem to figure it out.
Relevant JQuery and HTML:
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
$("btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>


You're missing a # there.
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});


put # on $("btnMLAJournal").click(function(){
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>


You have given the id btnMLAJournal to your button and calling element from id in jquery requires # with id which in your case is missing.
just add # to your id in jquery and it will work fine
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
//# is added here
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>

Related

jquery scoll page hide div and stop scroll page show div and close, open button

The div closes when I press the close button. but when I keep scrolling the div appears again. I don't want it to appear when I press close and it starts to slide again. I just want it to appear when I press the close button again. but I couldn't, no matter what I tried.
body {
left: 0;
padding: 0;
margin: 0;
top: 0;
}
.middlesection {
height: 500vh;
background-color: red;
width: 100%;
}
.rightsidestyle {
height: 200px;
width: 300px;
background-color: bisque;
right: 10px;
position: fixed;
bottom: 10px;
display: block;
}
.onclk {
position: fixed;
bottom: 11rem;
right: 17rem;
z-index: 9999;
}
<!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">
<link rel="stylesheet" href="css/style.css">
<script src="js/custome.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>test HTML</title>
</head>
<body>
<div class="middlesection"></div>
<button class="onclk" onclick="myFunction()"><i class="fa-solid fa-xmark"></i></button>
<div class="rightsidestyle" id="rightside">
</div>
<script>
$(window).scroll(function() {
$('#rightside').stop(true, true).hide().fadeIn('slow');
});
function myFunction() {
var x = document.getElementById("rightside");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>

Just remove this script if you don't want to show it on scroll.
$(window).scroll(function(){
$('#rightside').stop(true, true).hide().fadeIn('slow');
});

i did it by myself !!!!! thanks
body{
left: 0;
padding: 0;
margin: 0;
top: 0;
}
.middlesection{
height: 500vh;
background-color: red;
width: 100%;
}
.rightsidestyle{
height: 200px;
width: 300px;
background-color: bisque;
right: 10px;
position: fixed;
bottom: 10px;
display: block;
}
.onclk{
position: fixed;
bottom: 11rem;
right: 17rem;
z-index: 9999;
}
.openclk{
position: fixed;
bottom: 55px;
right: 0;
z-index: 9999;
height: 100px;
display: none;
}
<!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">
<link rel="stylesheet" href="css/style.css">
<script src="js/custome.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>test HTML</title>
</head>
<body>
<div class="middlesection"></div>
<button class="openclk" id="openclick"><i class="fa-solid fa-angle-left"></i></button>
<div class="sagtaraf">
<div class="rightsidestyle" id="rightside">
<button class="onclk" id="clickbutton"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<script>
$(window).scroll(function(){
$("#rightside").stop(true, true).hide().fadeIn('slow');
});
$('#clickbutton').click(function (){
$('.onclk').css('display', 'none');
($('.sagtaraf').hide('slow'));
$('.openclk').css('display', 'block').show('slow');
});
$('#openclick').click(function (){
$('.openclk').css('display', 'none');
($('.sagtaraf').show('slow'));
$('.onclk').css('display', 'block').show('slow');
});
</script>
</body>
</html>

Progress bar jQuery percent counter not working

I created a skill progress bar for my project using HTML CSS and jquery. All things working fine but the percent counter option is not working when the animation run.
I need to count the percentage from 0 to the value along with the animation bar. Please help me. Thanks.
jQuery(function($){
$(window).scroll(function() {
var top_of_element = $(".work-process").offset().top;
var bottom_of_element = $(".work-process").offset().top + $(".work-process").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('.project-percent').each(function(){
var $this = $(this);
var percent = $this.attr('percent');
$this.css("width",percent+'%');
$({animatedValue: 0}).animate({animatedValue: percent},{
duration: 2000,
step: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
},
complete: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
}
});
});
}
});
});
.nb-progressbar-row {
width: 90%;
margin: 0 auto;
}
.project{
width: 60%;
margin: 0 auto;
}
.work-process h3 {
margin: 30px 0px 10px;
}
.project-bar {
height: 18px;
background: #e0e0e0;
border-radius: 30px;
}
.project-percent {
height: 18px;
background-color: #2196F3;
border-radius: 30px;
position: relative;
width: 0;
transition: 2s linear;
}
.project-percent::before {
content: attr(percent);
position: absolute;
right: 0px;
left: 0px;
padding: 1px 0px;
color: #ffffff;
font-size: 15px;
border-radius: 25px;
font-weight: bold;
width: 20px;
margin: 0px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<section class= " my-5 nb-progressbar-wrapper">
<div class="container my-5 nb-progressbar-conainer">
<div class="row nexnomic-progressbar-row">
<div class=" col work-process">
<h2 class="text-center my-5">SCROLL DOWN</h2>
<div class=" pt-5 project">
<h6>Xyzzz & ABCD</h6>
<div class="project-bar">
<div class="project-percent" percent="95"></div>
</div>
</div>
<div class="project">
<h6>Abcd-xyz</h6>
<div class="project-bar">
<div class="project-percent" percent="80"></div>
</div>
</div>
<div class="project">
<h6>ABCDYZX</h6>
<div class="project-bar">
<div class="project-percent" percent="75"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>

Moving background image on mousemove not working

I'm trying to move background image on mousemove in Angular project.
It is not working, I'm thinking that the problem is loading:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
because I debugged manually in my code with: "console.log("message") and nothing happens, so the function is never called.
Some piece of code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
<div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
<h1 class="title">Keeping track of your health, register as:</h1>
</div>
<div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" >
<a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
<a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
<a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
</div>
</div>
</div> <!-- /container -->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
console.log("dsd");
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
</body>
</html>
CSS:
#bg {
height: 100vh;
background-image: url('../../../images/1.jpg'); /* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
Here is what I want
https://codepen.io/chrisboon27/pen/rEDIC

You should check background image path.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
</div>
</div> <!-- /container -->
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
<style>
#bg {
height: 100vh;
background-image: url('https://i.stack.imgur.com/rhStR.jpg');
/* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
</style>

Jquery functions not linked correctly? Why can'y my <script> section run?

Been trying to create a simple "squad builder", basically just creating a list as different buttons are clicked. I noticed Jquery was not working, although it has been linked to in the section. I can't even access basic animations. What is going on in here?:
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<head>
<title>Squad Builder</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
<style type="text/css">
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
</style>
<body>
<div class = "row container-fluid">
<div id = "player-box" class = "col-md-6">
<ul id = "player-list">
<li><button class = "player-btn btn">Player1</button></li>
</ul>
</div>
<div id = "squad-box" class = "col-md-6">
<ul id = "squad-list">
</ul>
</div>
</div>
</body>

Your code is ok, probably is only missing the animate.css assets:
animate.css
$(document).ready(function() {
$("button").addClass("animated bounce");
});
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="row container-fluid">
<div id="player-box" class="col-md-6">
<ul id="player-list">
<li><button class="player-btn btn">Player1</button></li>
</ul>
</div>
<div id="squad-box" class="col-md-6">
<ul id="squad-list">
</ul>
</div>
</div>

JQuery .resizable not working

My jQuery .resizable is not working.
It gives error :
TypeError: $(...).resizable is not a function ;
My code is:
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="httpS://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#main").resizable("enable");
});
</script>
</head>
<body>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content"></div>
</div>
</div>
</body>
</html>

This snippet is working.
Look for the CDNs used here... And look for the order to load them too.
$("#main").resizable();
#main{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content">
You can resize me!
</div>
</div>
</div>

You might be missing jquery ui css and js :
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Add jquery-ui.js library and remove enable from resizable function
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#main" ).resizable();
} );
</script>

<html>
<head>
<meta charset="utf-8">
<title>resizable</title>
<!--div is used to style block element,span are used to group inline elements-->
<style>
.bluebox{
background-color:#415E9B;
font-size: 20px;
color: white;
height: auto;
}
.blackbox{
background-color: #0C0C0C;
font-size: 20px;
color: white;
height: 100px;
}
.greybox{
background-color:rgb(161, 54, 165);
font-size: 20px;
color: white;
height: 100px;
}
.great{
background-color: yellowgreen;
color: teal;
}
.news{
background-color:palevioletred ;
columns: auto 1px;;
height: auto;
}
.org{
background-color: peru;
color:red;
height: auto;
}
#fb{
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="bluebox" id="fb">
<p>facebook is <span class="great">great</span></p></div>
<div class="blackbox">
<p>BBC is a <span class="news">> newschannel</span></p></div>
<div class="greybox">
<p>UEFA is a football<span class="org">organization</span></p></div>
<script>
$(function(){
$("#fb").resizable({
maxheight : 200,
maxwidth : 300,
minheight: 50,
minwidth:50
});
});
</script>
</body>
</html>

we have to check the sequence of our cdns:
correct sequence:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
i was doing the opposite putting jquery-ui above jquery.min ...
issue is resolved now

Categories

Resources