This might be a bug but I have no idea what I'm doing wrong.
I went to the trouble of making a JS Fiddle and sadly it's behaving fine there, but if you take the exact code and run it locally in chrome, the jqUI handles are all sitting at the top of the element instead of the outer edges? Here's the fiddle:
https://jsfiddle.net/ceL1j3kL
For sanity sake, I'm including a screen image of this behavior when I run it locally.
Does anyone know how to keep the handles in place when dynamically creating elements that are going to utilize the handles?
Heres the full source I'm working with:
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style/chat.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/scripts/test.js"></script>
</head>
<body>
</body>
</html>
css
html,
body {
height: 100%;
overflow: hidden;
margin:0;
padding:0;
}
js
$(document).ready(function(){
let c = $('<div id="container" style="width: 75%; height: 75%; background-color: black;">');
c.appendTo($('body'));
c.draggable({
containment: 'body'
});
c.resizable({
handles: 'all'
});
});
image of the behavior i'm seeing when running locally. you can see i'm hovering in the image over the south handle, which is at the north of the element and is not clickable....
You have to add jquery-ui.css reference in your project, for example:
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Related
I have kept the original files and folder structure this time,
Simply changed the code from the 'default.html' to display the events from google calendar. But as soon as I add that script, It doesn't display the calendar or the events.
I'm really lost.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'MY KEY',
events: {
googleCalendarId: 'https://calendar.google.com/calendar/ical/ID%group.calendar.google.com/public/basic.ics'
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
You missed the gcal.js script that's required.
You need to include the following reference (after your fullCalendar.js):
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
This file is included in the fullCalendar distribution.
See the full instructions for setting up fullCalendar with Google here - https://fullcalendar.io/docs/google_calendar/ - make sure you've set all the permissions on your calendar correctly as well at the Google side.
You are probably getting a script error. Press f12 in chrome and try again. You will probably see more about the issue.
This is a general question, but how can you add the drag feature to a custom chrome extension.
I'm building a custom chrome ext. but I would like the user to drag it around; currently it's fixed at the right corner.
I would like it to be similar to "Moat" extension (if you're familiar w/ it). Here is a screenshot of this ext. and URL.
Is it simply adding Jquery UI, or do i need to do something special?
I tried to set the width and height 100% to the body element, so it would take the whole page and add a div inside the body, which is the ext, and set a z-index to 1, but this approach is not working out. The body width and height is not expanding, and the extension is still fixed at the top right hand corner.
I tried to inspect the element and see if I can find a way to 'detach' from that corner but had no luck with it.
Has anybody had experience with chrome extension and adding a drag feature? Again, this is a general question. Your help will be appreciated.
You actually could use jQuery UI in a couple of different ways. Of course, the Dialog Widget is great, but if you only want to drag things around the screen, you can use Draggable. You will find a working example at the link.
Once you add the jQuery UI, it is simply one line:
$('#yourSelectionID').draggable();
For example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<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() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
The above code was taken from the link above. Please note to include jQuery.js and the jQuery-ui.js files to make this work.
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
Forgive me if this is a newbie question - but sadly that's what I am.
I have an index.html containing two divs (id's #A and #B). From the main page I can click a link to be opened in div #A using the following:
link in index
function load_A(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
document.getElementById("A").innerHTML=parsedhtml;
}
So far so good. But now I want to click a link inside div #A to open in div #B. I tried the following:
link in A
function load_B(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
document.getElementById("B").innerHTML=parsedhtml;
}
All this does is open the second link inside div #A.
I suspect there is something wrong with the scoping of the div id's, but I can't figure out how to remedy it.
Thanks in advance for taking pity on me!
EDIT: minimal html example using the above functions
Here is the index.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
link_to_A
<div id=A>one</div>
<div id=B>two</div>
</body>
</html>
where funs.js contains the functions load_A() and load_B() above. The divs are described in style.css:
#A { position: absolute; top: 10%; left: 10%; width: 20%; }
#B { position: absolute; top: 10%; right: 10%; width: 20%; }
and the files one.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Contents of one.
link_to_B
</body>
</html>
and two.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Contents of two
</body>
</html>
Thanks again for your help!
If you aren't getting a javascript error then it probably means that your script is grabbing some other element. Check your entire html page and make sure that you do not have any other elements (not just divs) on the page with the id of 'B'.
Also, make sure that you don't have any malformed html. A missing or mismatched closing tag and div #B does not exist in the DOM.
It would also help if you could post the full html related to the divs.
After much trial-and-error and some judicious Googling I realised that my load_B() function should get look for the element id in the parent of the current div:
function load_B(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
parent.document.getElementById("B").innerHTML=parsedhtml;
}
Hi all I'm trying to use dijit from the dojo library and trying to use the Calendar component. I followed the code as it is in the online documentation but it just doesn't seem to work. Below is the code that I'm using:
<html>
<head>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.claro table.dijitCalendarContainer { margin: 25px auto; } #formatted
{ text-align: center; }
</style>
</head>
<body class=" claro ">
<div dojoType="dijit._Calendar" onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})">
</div>
<p id="formatted">
</p>
</body>
<script type="text/javascript" src="js/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // loads the optimized dijit layer
dojo.require("dijit._Calendar");
</script>
</html>
Using firebug it shows the following error:
Could not load 'dijit._Calendar'; last
tried '../dijit/_Calendar.js'
Please can anyone help me on this. I really want to make this work.
Thanks in advance.
Your tree appears to have been changed, or at least you relocated the copy of dojo.js from the standard distribution. You should include dojo as "dojo/dojo.js" It will then use that reference to find relative urls in the tree, like ../dijit/_Calendar.js