I'm trying to create a register/login overlay for users although when trying to use the JQuery .toggle() I have no luck. I can't see any obvious issues and any minor tweaks I've made have been unsuccessful.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle(slow);
});
});
</script>
</body>
CSS:
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
Check it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
<style>
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle('slow');
});
});
</script>
</body>
You are calling .toggle() with an undefined variable called slow:
$('.register').toggle(slow);
You need to pass the string "slow":
$('.register').toggle("slow");
And you may need to cancel the default click behaviour and/or change the link's href="" to href="#":
$('#toggle-reg').click(function(e) {
$('.register').toggle("slow");
e.preventDefault();
});
Demo: http://jsfiddle.net/PDaej/1
Related
I am trying to hide border of label that appears when pressed on. That is, the border around the i button. I have tried setting outline and border to 0 and even to none but nothing works. What am I doing wrong?
$(document).ready(function(){
$('#popoverData').popover();
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div>
<label for="download" style="float: left; margin-top: 6px">Content</label>
<a id="popoverData" class="btn" href="#" data-content="My Content"
rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">🛈</a>
</div>
</body>
</html>
I assume you refer to the box-shadow of the a.btn, you can remove it by adding the following CSS rule :
.btn:active {
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
$(document).ready(function(){
$('#popoverData').popover();
});
.btn:active {
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div>
<label for="download" style="float: left; margin-top: 6px">Content</label>
<a id="popoverData" class="btn" href="#" data-content="My Content"
rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">🛈</a>
</div>
</body>
</html>
It depends what you mean: If you click and hold on the button, it's the shadow which appears (see previous answer), but if you just click the button and release the mouse, it will be focused. So in this case you can add a CSS rule for the focus state, like this:
a#popoverData:focus {
outline: none;
}
But note that this will be against accessibility rules, since people navigating only by keyboard actions will not see anymore which element is selected/focused.
Full example (i.e. above rule simply added to the code in the question):
$(document).ready(function() {
$('#popoverData').popover();
});
a#popoverData:focus {
outline: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div>
<label for="download" style="float: left; margin-top: 6px">Content</label>
<a id="popoverData" class="btn" href="#" data-content="My Content" rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">🛈</a>
</div>
</body>
</html>
Basically Here is the HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
i++;
});
})
</script>
<div id="watch_list"></div>
</html>
But Whenever I Open the HTML it shows the formatting Properly But It is only Showing 1 Result Instead of all of them!!!
I've Done this With nodejs Before (With a CLI Application) Before but It Doesn't Work Now
How can I Fix This?
Should I add a Loop?
Here is the
Output
I Really Don't Have any other words because I am a novice so Please stop saying "It looks like your post is mostly code, please add some more details"
Just remove the line
i++ (6th line from end), your code will run fine. i is not defined so it is creating the error ReferenceError: i is not defined
Code snippet after removing the line i++
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
});
})
</script>
<div id="watch_list"></div>
</html>
I've all my CSS and Javascript inside my HTML file on Django which looks as follows:
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
<style type="text/css">
.toggle-btn {
position:absolute;
left:180px;
top:70px
}
.toggle-btn span {
display:block;
width:30px;
height:5px;
background:#000000;
margin: 5px 0px;
}
.sidebar {
height:100%;
width:160px;
position: fixed;
z-index:1;
top:0;
let:0;
background-color:#111;
overflow-x: hidden;
padding-top:70px;
}
.sidebar.active {
left:0px
}
.sidebar a {
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:18px;
color: #818181;
display:block;
}
.sidebar a:hover {
color:#ffffff;
}
</style>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="#">Home.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Logout</a>
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<h1>Centered Text</h1>
</div>
</section>
</header>
</body>
</html>
I wanted to toggle the sidebar, that means triggering a hide function when someone clicks on the hamburger menu indicated by the spann tag, as you can probably tell by the following:
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
So far it's not working yet as excepted, given that I'm an absolute beginner to CSS & Javascript. I would be super appreciative if someone could point out the things I might have done wrong.
In CodePen
I could fix the toggle functionality, hope this helps:
function toggleSidebar() {
var x = document.getElementsByClassName("sidebar")[0];
if(x.classList.contains('active')) {
x.classList.remove('active')
return;
}
x.classList.add('active')
}
if you check the sidebar div you'll see that class is being added and removed on toogle
You can use jQuery's toggle method. You need to have an onclick event on your .toggle-button with the name of your method (toggleSidebar), so it knows to call it when it's clicked.
You can also add an EventListener to your button instead of onclick.
.toggle-btn {
position: absolute;
left: 180px;
top: 70px;
}
.toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000000;
margin: 5px 0px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 70px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function toggleSidebar() {
$(".sidebar").toggle();
}
</script>
</head>
<body>
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
Im building an email subscription form into my asp.net site and I'm trying to show the modal window when the user adds their name to the subscribe list. I can't seem to get the div to hide on pageload. The modal loads on page load, but I want it to be hidden until the user submits the form.
Ideally this would all be done server side since i don't want the modal to pop up until the form is submitted and doing it client side could trigger a false positive.
I'm not sure what the best way to achieve this would be, through code behind or possibly jQuery, which I don't know much about.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.responsive {
width: 40%;
height: auto;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
</style>
<style>
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
</style>
<style>
#dialog-message { display: none; padding: 5px; }
</style>
<style>
div.hidden {
display: none;
}
</style>
</head>
<body bgcolor="black">
<div class="simple-subscription-form" id="emailForm">
<form id="email" runat="server">
<script type="text/javascript">
function showDiv() {
div = document.getElementById('dialog-message');
div.style.display = "block";
}
</script>
<h4>Subscribe</h4>
<p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
<div class="input-group"/>
<span class="input-group-label">
<i class="fa fa-envelope"></i>
</span>
<input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/>
<asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"></asp:button>
</form>
<div id="dialog-message" title="Subscribed!" class="hidden" >
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
You have been successfully added to our Mailing List
</p>
</div>
</div>
</body>
</html>
Insert the <script> before </head>, so it doesnt have glitch
<script>
$( function() {
$('#dialog-message').dialog('close')
} );
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.responsive {
width: 40%;
height: auto;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
</style>
<style>
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
</style>
<style>
#dialog-message { display: none; padding: 5px; }
</style>
<style>
div.hidden {
display: none;
}
</style>
<script>
$( function() {
$('#dialog-message').dialog('close')
} );
</script>
</head>
<body bgcolor="black">
<div class="simple-subscription-form" id="emailForm">
<form id="email" runat="server">
<script type="text/javascript">
function showDiv() {
div = document.getElementById('dialog-message');
div.style.display = "block";
}
</script>
<h4>Subscribe</h4>
<p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
<div class="input-group"/>
<span class="input-group-label">
<i class="fa fa-envelope"></i>
</span>
<input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/>
<asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"></asp:button>
</form>
<div id="dialog-message" title="Subscribed!" class="hidden" >
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
You have been successfully added to our Mailing List
</p>
</div>
</div>
</body>
</html>
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