I've been having some trouble getting JQuery UI selectable to work with my site. I'm still very new to coding and I'm not sure what I'm doing wrong. I've searched for relevant questions and haven't been able to find any that let me figure it out.
I'm trying to create whats essentially a glorified label maker for work, and would like to be able to select cells in a grid using a mouse "lasso." But for some reason, I can't get selectable to work at all.
Here is the js:
$('document').ready(function() {
for (i=0; i<117;i++) {
$('#plateActual').append('<div class="cell"/>');
}
$('#plateActual').selectable();
});
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navbar">
</div>
<div id="controlPanel">
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
</div>
<div id="plateEditor">
<div id="plateActual">
</div>
</div>
<div id="bottom">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
Here is the CSS:
body {
margin: 0px auto;
padding: 0;
}
p {
color: yellow;
}
#wrapper {
border: 1px dotted black;
width: 980px;
margin: 0px auto;
padding: 0;
}
#navbar {
width: 980px;
background: black;
height: 50px;
position: fixed;
margin: 0;
padding: 0;
top: -10px;
}
#controlPanel {
width: 250px;
background-color: red;
float:left;
top: 100px;
margin-bottom: 0;
}
#plateEditor {
position: relative;
overflow: auto;
width: 730px;
float:right;
top: 100px;
margin-bottom: 0;
margin-top: 150px;
}
#plateActual {
border: 1px solid;
width: 403px;
height: 279px;
margin: 0px auto;
pading: 0;
}
#bottom {
width: 980px;
height: 30px;
background:green;
clear: both;
bottom: 0;
margin: 0px auto;
padding: 0;
}
.cell {
float: left;
width: 29px;
height: 29px;
border: 1px dotted;
}
I apologize if my code is messy and unorganized. I am still figuring out how to best keep it organized and generally write it in an acceptable fashion. Thanks a lot for your help.
Update: I've made the change Ando suggested, but I'm still unable to get selectable to work. I've tried changing #plateActual to an ol or ul and appending li.cell instead but that did not work either.
I was wondering if the reason is my css is somehow interfering with it, but I'm not sure how to fix that without destroying the formatting.
The element returned by append will be the element to which the add is performed - in your case plateActual- so you will be adding the cell class to the wrong element.
When you append the cells - you use $('<div/>') - which will translate to "get the elements of type '<div/>' from the dom and move them inside my 'plateActual' element" - you should add without $ as you are creating an element that does not yet exist.
Something like this should work (http://jsfiddle.net/k3YJY/):
for (var i=0; i<5;i++) {
$('#plateActual').append('<div class="cell"/>');
}
Related
I am trying to create a similar design/approach to this:
https://help.sap.com/viewer/8092b085a68941f6aaa6708685a62b0d/4.2.8/en-US/acc57dbca1ab4a5bac2a352ce8cc52d8.html?q=Amazon
Notice that, when the sidebar << and >> icons are clicked, those sidebars slide out and the topic/content in the center expands to take the freed up space.
They're using AngularJS but I have to do this using html. I can use jquery, vanilla js, and if it makes sense I can try bootstrap (though I'm obviously not very experienced and want to stick to just html and jquery if possible).
Here is what I've come up with so far. Please excuse the awful color scheme - it's just to delineate the divs:
$("#right-sidebar-slider").click(function() {
$('#right-sidebar-content').hide('slide', {
direction: 'right'
}, 300);
$("#topic-container").animate({
width: "75%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
$("#left-sidebar-slider").click(function() {
$('#left-sidebar-content').hide('slide', {
direction: 'left'
}, 300);
$("#topic-container").animate({
width: "77%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
#left-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#left-sidebar-content {
float: left;
width: 19%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
#topic-container {
float: left;
min-width: 58%;
min-height: 600px;
padding-top: 20px;
background-color: red;
}
#right-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#right-sidebar-content {
float: left;
width: 17%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
.header {
display: flex;
align-items: center;
}
.header .logo {
background: url("logo-onlinehelp.png") no-repeat;
width: 60%;
height: 25px;
border: 1px solid green;
margin-left: 15px;
}
.header .search-input {
border: 2px solid blue;
width: 40%;
margin-left: 25px;
}
footer {
clear: left;
border-top: 1px solid #cccccc;
width: 100%;
height: 40px;
bottom: 0;
position: relative;
background-color: gray;
}
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="vertex.js"></script>
<script src="dhtml_toc.js"></script>
<script src="dhtml_search.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_vertex.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- need for slider effect -->
</head>
<body>
<div class="header" style="height: 70px; background-color: gray">
<div class="logo">
</div>
<div class="search-input">
<form action="#">
<input type="text" name="search-input" value="Search available topics..." size="70">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="left-sidebar-content">
Table of Contents...
</div>
<div id="left-sidebar-slider">
<<
</div>
<div id="topic-container">
Topic here...
</div>
<div id="right-sidebar-slider">
>>
</div>
<div id="right-sidebar-content">
Feedback form here...
</div>
<footer>
This is our footer text.
</footer>
</body>
</html>
So I have two questions:
1. In terms of overall page structure/approach - wHat is the best approach to building something like this?
What is the best approach to replicating the sliding divs? I don't need them to animate, though that would be nice. I just need the user to be able to fill the viewport with the center topic div content.
All of the actual content will come from a CMS. This single page I'm creating is just a template that the CMS (a proprietary one) will use to then insert the content, table of contents, etc. into the html.
Your approach is not far off, but I have a couple of suggestions:
CSS flexbox instead of floats to setup the three column layout. (A Complete Guide to Flexbox)
Use CSS transitions instead of javascript to add the sliding effect. (Using CSS transitions)
Let the click of a button add/remove a class to the sidebar elements, so you do not need to have presentational informasjon in your javascript
Codepen: https://codepen.io/anon/pen/XqaGEg
HTML:
<button class="sidebar-left-toggle">
<<
</button>
<button class="sidebar-right-toggle">
>>
</button>
<div class="container">
<div class="sidebar-left">sidebar-left</div>
<div class="content">content</div>
<div class="sidebar-right">sidebar-right</div>
</div>
CSS:
.container {
display: flex;
height: 200px;
transition: width 0.3s;
}
.sidebar-left,
.sidebar-right {
background: #ccc;
width: 200px;
transition: width 0.3s;
}
.sidebar-collapsed {
width: 0;
overflow: hidden;
}
.content {
background: #eee;
flex-grow: 1;
}
Javascript:
const leftToggle = document.querySelector('.sidebar-left-toggle');
const rightToggle = document.querySelector('.sidebar-right-toggle');
const leftSidebar = document.querySelector('.sidebar-left');
const rightSidebar = document.querySelector('.sidebar-right');
leftToggle.addEventListener('click', e => {
leftSidebar.classList.toggle('sidebar-collapsed');
});
rightToggle.addEventListener('click', e => {
rightSidebar.classList.toggle('sidebar-collapsed');
});
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
I know how to use position: fixed; to get it to scroll with the page but my navbar is not at the top of the page it is under my header. I would like the navbar to remain directly under the header until the top of the page hits it then I want it to scroll down with the page. I have tried using JS to do this and using JSfiddle I am able to get it working http://jsfiddle.net/uaqh018d/78/
However, when I apply this to my site it does not work and I can't figure out why.
site code to follow:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--begin header & navbar-->
<div class="header">
<div class="container">
<div class="banner">
<h1><img src="media/CSG%20header%20final.svg" width="961" height="250" alt="crit strike gaming header"></h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Reviews</li>
<li>Previews</li>
<li>Lets Plays</li>
<li>Forums</li>
</ul>
</div>
</div>
</div>
<!--end header & navbar-->
<!-- begin content-->
<div class="container">
<div class="content">
</div>
</div>
<!--end content-->
<script type="text/javascript" src="navfunction.js"></script>
</body>
</html>
CSS
body{
background: #ffda0a;
width: 100%;
margin: auto;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 100%;
height: 250px;
margin: 0 auto;
top: 0;
}
.content{
background-color: rgba(255,255,255,.5);
width: 100%;
margin: 0 auto;
margin-left: 1px;
clear: both;
}
a{
text-decoration: none;
color: #ffda0a;
}
li{
list-style: none;
margin-left: 75px;
float: left;
font-size: 25px;
}
.nav{
background: #a71e1f;
width: 960px;
height: 30px;
margin-left: 1px;
}
.nav.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
.banner{
height: 230px;
}
JS
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#nav').addClass('fixed');
}
else
{
$('#nav').removeClass('fixed');
}
});
});
If anyone can figure out the issue I would really appreciate it.
See the corrected fiddle - http://jsfiddle.net/drecodeam/8Lubmkvw/
You were using classes in the HTML but accessing them as ID in jQuery.
Corrected JS should be
$(document).ready(function () {
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.header').height()) {
$('.nav').addClass('fixed');
} else {
$('.nav').removeClass('fixed');
}
});
});
I want to use Circletype.js in conjunction with jQuery .animate() to cause text to curve around my logo/image as I animate the width of its container.
I am applying .circleType({fluid:true}); to the #demo4 div. This, along with the correct css, causes the text path to bend to fit its container (#resize).
Run the code snippet to illustrate:
text radius does change when container is resized manually
text radius does not change when resized via .animate(). Why not?
$(function() {
$("#resize").resizable();
$("#resize").draggable();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
});
});
$('#demo4').circleType({
fluid: true,
dir: -1
});
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>
You can try this though if you just want the end result. If you want the text to be also animated, then the below code won't work. See if it works for your requirement
$(function() {
$("#resize").resizable();
$("#resize").draggable();
circleInit();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
},400,'swing',function() { circleInit(); });
});
function circleInit() {
$('#demo4').circleType({
fluid: true,
dir: -1
});
}
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>
The code for circletype shows that the text is only reflowed when the window is resized:
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}
Moving a li element into a ul HTML list with jQuery UI Sortable does not work with jQuery Mobile (dragging works, but the ul does not accept the li element). If you comment the line where jQuery Mobile is imported, it will work. If you un-comment it again, it will stop working. But I need jQuery Mobile for my project. Furthermore, the shape of the element being dragged changes as you lift it (Firefox 29).
You can find a screenshot of the HTML file here.
Context: I'm working on a hybrid / web app using jQuery Mobile. It's an educational app and in one exercise type, the user has to drag some terms into the right list but placing the term in the list doesn't work because the list doesn't accept the new li tag. I simplified the scenario so that there is only one term to move into one list.
<html>
<head>
<title>jQueryUI Sortables</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- remove this line and the example will work (Firefox) -->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- but I need jQuery Mobile in my project! -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
$(function() {
$("#part_0").sortable({
connectWith: "#col_0"
});
$("#col_0").sortable({
connectWith: "#part_0"
});
});
</script>
<style>
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; }
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;}
</style>
</head>
<body>
<ul id="part_0" class="smallList">
<li class="part">Drag this</li>
</ul><br /><br /><br /><br />
<ul id="col_0" class="bigList">
<li class="part">Into</li>
<li class="part">This</li>
<li class="part">List</li>
</ul>
</body>
</html>
After days of trying, I finally found a work-around. I don't know why, but with jQuery Mobile, you need to set the ul tag to float: left which is not necessary, if you use jQuery UI without jQuery Mobile. I don't think it's obvious, but adding this single line into the CSS makes the dragging work again:
<style>
/* BEGIN INSERTION: */
ul { float: left; }
/* END INSERTION */
li { margin: 0px; padding: 10px; float:left; border-radius: 5px; }
.smallList {list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.bigList {width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; margin-bottom: 0px;}
.part {margin: 0px; padding: 10px; border-radius: 5px; background-color: Orange; color: White;}
</style>