I am returning to web development after many years. I did web development before jQuery came along.
Now I see a lot of frameworks to choose from. I see web frameworks (aurelia, ember etc) and then web design frameworks (bootstrap, foundation etc).
My task at hand is too narrow down the technology options for a web app which will provide a certain drag and drop user interface to build workflows.
For drag n drop I have seen, not used, dragulla and interact.js
But not having a hands on experience I am in a confused state. The only certain thing at the moment is the backend which is going to be Django.
Can you please provide some guidance here? My main concern is the ability of doing a smooth drag and drop experience. I would also like to save the state of the flow which is designed by dropping the objects on the canvas, to keep the visual representation of the workflow.
Cheers
A simple and basic drag and drop functionality is provided by jquery ui draggable.
You can see how simple it is to implement:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable + Sortable</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>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</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() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
} );
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>
Related
I like to indent <html>, <head>, <body> and the child elements (not all descendants) of <body> at the same level, at the very start of each line. Like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
I also don't want any empty lines between <html>, <head>, and <body> tags, which is what happens by default when I run the selection formatting operation. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
How can I configure Visual Studio Code to do this automatically?
Currently I have to manually undo the extra indentations for every new HTML file. After removing them and adding one child element to <body>, it does behave like I want. But it's still quite irritating to have to do it every time.
Hi I have this code in my Sencha gXt app which purpose is to change when user click on login button then show another page as follows:
String url = GWT.getHostPageBaseURL() + "MyApplicationFrame.html";
Window.Location.replace(url);
It's Redirecting but in MyApplicationFrame.html showing same login page. I have another class with frames. I want to show the control of that class.
MyApplicationFrame.html
enter code here
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="MyFirstGXT.css">
<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="myfirstgxt/myfirstgxt.nocache.js"></script>
</head>
<body>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
I am new to html and css. I was trying to create a test Image Gallery to check how fancy box works. I followed all the instructions from youtube and other sites but still I am not able to get the thing to work.
All the required files were loaded.
I apologise for what most may feel is a really simple question. But this is my first attempt so please bear with me.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<div id="container">
<div id="title">Gallery </div>
<div class="gallery">
<ul>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image1"><img src="Images/Gallery/ts/image1"></a></li>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image4"><img src="Images/Gallery/ts/image4"></a></li>
</ul>
<ul>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image6"><img src="Images/Gallery/ts/image6"></a></li>
<li><a class="fancybox" rel="group" href="Images/Gallery/ls/image8"><img src="Images/Gallery/ts/image8"></a></li>
</ul>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>
I have a chunk of content in HTML that is viewable when JavaScript is enabled with fancyBox. The read more link, when clicked, triggers fancyBox to pop up a window that shows the hidden content. The Intro, More and Bob parts are displayed in the fancyBox, but the Intro and Bob parts are displayed first, before the read more linked is clicked. It's a testimonial list, with the read more sections appearing with fancyBox.
...
<li>
<!-- hidden div begin-->
<div id="read-more-1" style="display: none;">
<p>Intro More</p>
<span class="source">Bob</span>
</div>
<!-- hidden div end-->
<!-- displayed begin-->
<p>Intro</p>
<a class="fancy-monials" href="#read-more-1">Read more...</a><br />
<span class="source">Bob</span>
<!-- displayed begin-->
</li>
...
If I disable JavaScript and click the read more link, it just takes me to my home page. Which I expect.
I've flirted with building a <noscript> block that re-displays the testimonials in full, and hides the others but that seems tedious and hacky.
One common way to solve this type of problem is to add a class="no-js" attribute to your page's html element, and then remove this class using javascript.
You can then use this class as a styling hook in your CSS to show/hide content depending on whether JS is enabled. So at the most basic, you might do this (using your code from above):
<html class="no-js">
<head>
<script type="text/javascript">
var dde = document.documentElement;
dde.className = dde.className.replace('no-js','js');
</script>
<style type="text/css">
.no-js .read-more {
display: block;
}
.js .read-more {
display: none;
}
</style>
</head>
<body>
<!-- ... -->
<ul>
<li>
<!-- hidden div begin-->
<div id="read-more-1" class="read-more">
<p>Intro More</p>
<span class="source">Bob</span>
</div>
<!-- hidden div end-->
<!-- displayed begin-->
<p>Intro</p>
<a class="fancy-monials" href="#read-more-1">Read more...</a><br />
<span class="source">Bob</span>
<!-- displayed begin-->
</li>
</ul>
<!-- ... -->
</body>
</html>
In other words, you use javascript to change the no-js class to js, and then use CSS to hide .js .read-more but show .no-js .read-more (or whatever your hidden element's class name may be).
Hope this helps!
I have this page, the superfish menu does not show over the google earth plugin but under!
This problem is happening in IE8 and Google Chrome.
Any Ideas?
To run the following code run it under localhost (that is the domain registered with the google earth api key)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link type="text/css" rel="Stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAFoBwRF7WovCjsFJemYop1hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTpGk76aE2Yul2N6gAS9CZLeDBtuA"></script>
<script>
$(document).ready(function() {
$('ul.sf-menu').superfish();
});
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCallback(errorCode) {
}
</script>
</head>
<body onload="init()">
<ul id="sample-menu-1" class="sf-menu">
<li class="current">
menu item
<ul>
<li>
menu item
</li>
<li class="current">
menu item
</li>
</ul>
</li>
</ul>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
It is not possible to apply z-index layering of arbitrary HTML content on top of the Google-Earth-Plugin window. There is a long standing feature request for that functionality here:
http://code.google.com/p/earth-api-samples/issues/detail?id=9
In the comments to that request there are workarounds and demos posted involving an IFRAME shim, but that works only for iframe boxed content. Due to low-level details of how plugins work within browsers, I think it's unlikely z-index layering of arbitrary content over the plugin window will be possible anytime soon, especially across all browsers.