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.
Related
all.
I have been dabbling around with JavaScript but I stumbled upon a problem that I am not sure how to get around. What I want to do is create a list of links that have a small fixed pop up window with a message on it.
I made a list like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<li>google.com</li>
<li>espn.com</li>
<li>stackoverflow.com</li>
<li>wikipedia.org</li>
</body>
</html>
But I am not exactly sure what to do to make a pop up screen with fixed dimensions, like 100x100 and it saying something like "Hello." Is there a way to do this with inline styling and implementing the onclick function? I have tried doing this with div tags, a separate styling sheet and so on before, but I am trying to see if there are other methods of doing this.
Thank you.
I have used boot box to create the alert:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script>
$(document).ready(function() {
$( ".openDialog" ).on( "click", function() {
bootbox.alert('Hello');
});
} );
</script>
<body>
<li>google.com</li>
<li>espn.com</li>
<li>stackoverflow.com</li>
<li>wikipedia.org</li>
</body>
</html>
I think you are looking for the window.open() function. You can call it directly with an onClick() as you requested. You can also have full control over the dimensions.
For example, this is how you would make a window pop up that is 100 x 100 with some content inside.
First we open the window with a title MsgWindow window.open("", "MsgWindow", "width=100,height=100");
Then we put content into the window.
myWindow.document.write("<p>This is 'MsgWindow'. I am 100px wide and 100px tall!</p>");
Here is the documentation
https://www.w3schools.com/jsref/met_win_open.asp
Hope that helps
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">
I assume this is a CSS error. I downloaded the jqueryui dialog example code, (which displays as advertised in the jquery site) store it in notepad and point to it with various browsers, but the styling is wrong. There is no title bar, there is no X button, however the title text does appear and a button labeled "close" appears. There is no surrounding box either. Looks like the text and close button are sitting on top of the existing content. Is is draggable,close button works, so functionality is ok.
Here is the code take from the jqueryui site.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - 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">
<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" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
The X button is showing fine here, if you'r using jquery ui locally you must add images folder
I'm really new at this and I would like to create collapsible menus using jQuery Mobile. I went over to their site and found this resource:
http://demos.jquerymobile.com/1.4.0/collapsible/
So, I made a test page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div id="div2014" data-role="collapsible">
<h3>2014</h3>
<p>
Q1<br/>
Q2<br/>
Q3<br/>
Q4
</p>
</div>
</body>
</html>
but I can't seem to get it to work. All that gets displayed is this:
Please help! I'm really new at this, so I'm not sure if I'm doing things right :(
You need to include the jquery.mobile CSS file as well.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
make use of jQuery's slideToggle() function on click.
See this pen and click 2014, the menu will be displayed and collapsed on clicking it again
On our company website http://exciga.com/Services.php# when one clicks on any of the services on the right hand side (ex: the IT Governance image), a Window Pops Up with information regarding IT Governance along with a Blue Menu on the left hand side. This Blue Menu can be seen in IE 10 but not in Chrome. Please help as I cant figure out what I have done wrong :-)
The 2nd issue I face is in the Service Lists. When I click on the list of Services (ex: the "+"sign near IT Governance), I get a list of services related to it. As you can see the fonts are different here. I am unable to place the same font as in the Service List header ("IT Governance"). If I try making a change, the font for the entire webpage changes. I want the font in the drop down list to be the same as the one in the Service List header ÏT Governance +" Hope I was clear for u guys.
Finally, what is the syntax to ensure that the size of an object does not change if I Zoom in and out in a browser.
The blue menu is actually present in Chrome. It's just that it's getting hidden by the pop up window's size: <div class="popupbox3_pm" id="popuprel3" style="display: block; margin-top: -355px; margin-left: -380px;">, which is its parent element. Because this <div> has position: fixed; and a set width/height, anything outside of its dimensions gets cut.
I'm not quite sure why the z-index: 999 on the blue menu is not setting it above the black space around it though. That might have to do with the placement of the element in the HTML. Also, it should have a higher z-element than the black fade box, which has z-index: 9999;.
First fix <head> section, you have included multiple jQuery libraries, if your plugins can work with latest jQuery (you should test it) then I suggest you to download jQuery 1.10.2 put it in your js folder and replace <script src="js/jquery-1.6.js" ></script> with <script src="js/jquery-1.10.2.min.js"></script>.
Now replace your <head> element with this new one and I wish you luck ;) P.S. I don't say that this will fix the problem you have.
<head>
<title>Exciga</title>
<meta charset="utf-8">
<meta name="description" content="Write short description of your site here.">
<meta name="keywords" content="write, site, keywords, here, like, this, comma, delimited">
<meta name="author" content="Name of the site author">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css"> <!-- Why style2.css ? Is this another style for entire site or you could merge style.css with style2.css ? -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/hover/style_common.css">
<link rel="stylesheet" href="css/hover/style2.css">
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="popup/style.css">
<link rel="stylesheet" href="assets/application-d7d505356b55e600106ef945bd484e9f.css">
<script src="js/jquery-1.6.js"></script>
<!-- These scripts you can/should put just before the </body> tag, if after that some elements lose functionality then put that script again in the <head> section -->
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.akordeon.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Vegur_300.font.js"></script>
<script src="js/PT_Sans_700.font.js"></script>
<script src="js/PT_Sans_400.font.js"></script>
<script src="popup/custom.js"></script>
<script src="assets/application-aa8aaa30c70f4a42013dec916e9b29b0.js"></script>
<script>
$(function() {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [0, 1,2,3,4,5,6,7] });
});
</script>
<!-- End of scripts -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<div style="clear: both; text-align:center; position: relative;">
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
</head>
Update: About font-family for the Service Lists open style.css and insert code below then change font family and size in accordance with your desires.
.responsive,
.responsive-half {
font-family: Verdana !important;
font-size: 16px !important;
}