I'm trying to make this div both draggable and resizable, however, the resizable function isn't working no matter what I try, but draggable works fine. The div is used to load a user's flash cards so they can view them in a video chat. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="js/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#flash-card-div").hide();
$("#flash-card-bttn").button();
$("#draw-tool-bttn").button();
$("#document-view-bttn").button();
$("#flash-card-bttn").click(function(event) {
$("#flash-card-div").show();
$("#flash-card-div").load("/toolbarcardviewer")
});
$(function() {
$("#flash-card-div").resizable().draggable();
});
});
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
width = 100%;
}
li {
float: left;
}
#flash-card-div {
width: 300px;
height: 300px;
padding: 0.5em;
}
</style>
<link type="text/css" href="js/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="toolbar">
<ul id="tools">
<li>
<button id="flash-card-bttn">Flash Cards</button>
</li>
<li>
<button id="draw-tool-bttn">Draw Tool</button>
</li>
<li>
<button id="document-view-bttn">Documents</button>
</li>
</ul>
</div>
<div id="flash-card-div" class="ui-widget-content">
</div>
</body>
</html>
How do I make both of these functions work on this page? Did I do something wrong with linking the stylesheet or something?
I am unable to replicate the issue. It's not clear what version of jQuery is being used, I am assuming v1.12.4. I tested with v3.3.1 and it seems to work properly.
I do see you are using a Custom jQuery UI download, so I would make sure it include the Resize widget.
$(function() {
$("#flash-card-div").hide();
$("#flash-card-bttn").button();
$("#draw-tool-bttn").button();
$("#document-view-bttn").button();
$("#flash-card-bttn").click(function(event) {
$("#flash-card-div").show();
$("#flash-card-div").load("/toolbarcardviewer")
});
$("#flash-card-div").resizable().draggable();
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
width=100%;
}
li {
float: left;
}
#flash-card-div {
width: 300px;
height: 300px;
padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="toolbar">
<ul id="tools">
<li>
<button id="flash-card-bttn">Flash Cards</button>
</li>
<li>
<button id="draw-tool-bttn">Draw Tool</button>
</li>
<li>
<button id="document-view-bttn">Documents</button>
</li>
</ul>
</div>
<div id="flash-card-div" class="ui-widget-content">
</div>
I click the button. The Flash Card appears. I can drag it. I can resize it.
If you're still having an issue, check your console for errors. Comment with more details if you find out more.
Hope that helps.
Related
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
I want to have a sidebar which should open a new view, but I don't want a new page to open.
My sidebar is always the same and I don't want to copy it to all other pages. If you want an example click on this photo.
So I don't want to change the site the user is right now, I only want to have another content or other functions you can do on this site.
If it is possible (and how), please write me
Thanks
I have prepared a small working demo of a JS sidebar, you can add some nice css effect like animation and better styling on list items. Hope it helps.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sidebar demo</title>
<style>
#sidebar {
position: fixed;
padding: 0px;
height: 100%;
background: orange;
left: -200px;
width: 200px;
}
#sidebar.active {
left: 0px;
}
#sidebar ul li {
padding: 15px 10px;
lis-style: none;
}
.hamburger-btn {
position: absolute;
left: 230px;
top: 20px;
}
.hamburger-btn span {
margin: 5px 0px;
height: 5px;
width: 30px;
display: block;
background: black;
}
</style>
</head>
<body>
<div id="sidebar" class="active">
<div class="hamburger-btn" onclick="togglesidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
<script>
function togglesidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
</script>
</body>
</html>
I have 2 pop-up menus that basicaly open and close when clicked on. I wrote a little code that close any showing menu when the user click anywhere but 1 of the 2 menus. The code work perfecly fine in Chrome and Firefox but in IE, the menus only close when clicked on. I'm pretty new to Javascript so i am pretty sure that there is a better way to do it .
Here is my code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Main Header -->
<header id="header">
<nav class="container">
<img onclick="navFunction(this)" id="navMenuImg" src="img/menu.png">
<img onclick="settingFunction(this)" id="navSettingImg" src="img/setting.png">
<div id="navMenuSetting">
<ul id="navMenu" class="navMenu">
<li><a class="navMenuLink" href="#">Videos</a></li>
<li><a class="navMenuLink" href="#">Pictures</a></li>
<li><a class="navMenuLink" href="#">Profiles</a></li>
</ul>
<ul id="navSetting" class="navSetting">
<li><a class="navMenuLink" href="">Account</a></li>
<li><a class="navMenuLink" href="deconnection.php">Log out</a></li>
</ul>
</div>
</nav>
</header>
<!-- Scripts -->
<script type="text/javascript">
function navFunction() {
document.getElementById("navMenu").classList.toggle("navMenuShow");
}
function settingFunction(){
document.getElementById("navSetting").classList.toggle("navMenuShow");
}
document.onclick = function(e) {
if (!e.target.matches('#navMenuImg') && !e.target.matches('#navSettingImg')) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.classList.remove('navMenuShow');
navSetting.classList.remove('navMenuShow');
}
}
</script>
<!-- CSS -->
<style type="text/css">
#navMenuImg{
width: 55px;
height: 35px;
margin-top: 10px;
cursor: pointer;
}
.navMenu{
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
margin-right: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navSettingImg{
float: right;
width: 30px;
height: 30px;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
}
.navSetting{
position: relative;
right: 0;
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navMenuSetting{
position: relative;
width: 100%;
background-color: red;
}
.navMenuShow{
display: block;
position: absolute;
float: right;
}
</style>
</body>
Thank you in advance !
The js classList and target.matches is not supported in IE. I have listed the code that you can use instead:
function navFunction() {
document.getElementById("navMenu").className+=" navMenuShow";
}
function settingFunction(){
document.getElementById("navSetting").className+=" navMenuShow";
}
document.onclick = function(event) {
var matchesOne = event.target.matches ? event.target.matches('#navMenuImg') : event.target.msMatchesSelector('#navMenuImg');
var matchesTwo = event.target.matches ? event.target.matches('#navSettingImg') : event.target.msMatchesSelector('#navSettingImg');
if (!matchesOne&&!matchesTwo) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.className=navMenu.className.replace(/navMenuShow/g,"");
navSetting.className=navSetting.className.replace(/navMenuShow/g,"");
}
}
The code is tested and is working 100% in IE and Chrome.
I'm trying to create a side bar with 4 different options, when the selected option is active (Meaning you are on that specific page), I want the entire area behind the li, but inside the DIV, a background color slightly darker than what is already there but don't know how to achieve this. I have tried making the li itself 100% width of the div but it doesn't affect it at all.
Here is the issue:
As you can see the li does not reach the start and end width of the sidebar div.
Code Here -
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
padding: 0;
text-align: center;
max-width: 100%;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
#searchbar{
padding-bottom: 0.5em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
Your problem is in your #nav. You need to remove the x-margins:
#nav{
margin: 2em 0;
}
You can then do something like this:
#nav li:hover
{
background:#333;
}
But you'll also want to fix this:
#searchbar{
text-align: center;
}
http://jsfiddle.net/5amL4tx5/
Your problem is the #nav rule. If you remove the margins it will fill the entire containing div.
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
As for changing the background to make it darker for the active element. I suggest creating an .active class and assigning that on the fly to the active page based off of the url.
Example active class:
.active {
background: c2c2c2;
}
I think the problem is here (specifically the 1em for left/right margin):
#nav{
margin: 2em 1em;
}
That's going to limit the size of anything within #nav.
I have the following html page. When i hit the move button, i want to delete a specific item (item2) from first div and add it to second div. (Ultimately these items will be replaced with images.. but that is for later...)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#div1 {
width: 300px;
height: 200px;
float: left;
margin-right: 40px;
background: lightGrey;
}
#div1 li{
width: 150px;
padding: 10px;
border-bottom: 1px solid white;
background: lightBlue;
color: white;
}
#div2 {
width: 300px;
height: 200px;
float: left;
margin-right: 40px;
background: lightGrey;
}
#div2 li{
width: 150px;
padding: 10px;
border-bottom: 1px solid white;
background: lightBlue;
color: white;
}
</style>
<script>
function move()
{
//??? What goes here ???
}
function show1()
{
alert($('#div1').html());
}
function show2()
{
alert($('#div2').html());
}
</script>
<body>
<div id="div1">
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3</li>
</div>
<div id="div2">
<li id="item4">Item 4</li>
<li id="item5">Item 5</li>
<li id="item6">Item 6</li>
</div>
<input type="button" value="Move" onClick="move()"/>
<input type="button" value="Show Div1 Elements" onClick="show1()"/>
<input type="button" value="Show Div2 Elements" onClick="show2()"/>
</body>
</html>
What should i write in the move function to achieve this?
When i click on Show Div1 or Show Div2 buttons, it should correctly show the elements.
I will need to track these too i.e find which divs have what items.
Any advice?
You can try this code, using the appendTo method :
function move() {
$('#item2').appendTo('#div2')
}
You can try
http://api.jquery.com/append/
and
http://api.jquery.com/remove/
You can also
use
http://api.jquery.com/children/
and
http://api.jquery.com/empty/
// From which you will get content
var a=document.getElementById('youritem').innerHTML;
// Get all content from container then append content and generate new content
var c=document.getElementById('#div2').innerHTML;
var b=a+c;
// Then assign new content to Your div
document.getElementById('#div2').innerHTML=b;
// --------- or you can use
function move() {
$('#item').appendTo('#yourdiv')
}