I'm trying to connect multiple nested items using jQuery UI's sortable.
The code is correctly selecting draggable/droppable items, but selected items cannot be nested elsewhere.
How should I allow connecting (nesting) in all weblog-sections and item-body elements?
<!DOCTYPE html>
<html html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sortable with jQuery test</title>
<style>#myToolTip {
display: none;
}
.Mainheading {
font-size: 2em;
color: red;
}
.weblog {
width: 65%;
padding: 5px;
margin: 10px;
font-family: monospace;
}
.weblog-section {
background-color: #EEE;
margin-bottom: 10px;
}
.item-body {
/*background-color: #EEE; */
}
div {
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px #CCC dashed;
margin: 3px;
padding: 5px 5px;
}
OL {
counter-reset: item;
margin: 1px;
padding: 5px;
font-weight: bolder;
}
LI {
display: block;
font-size: 1.1em;
padding: 5px 10px;
background-color: #DDD;
margin: 1px;
border-radius: 5px;
-webkit-border-radius: 5px;
font-family: Tahoma;
}
LI:before { content: counters(item, ".") " "; counter-increment: item }
p {
padding: 0px 5px;
text-align:justify;
}
.toolbox, .toolbar:link{
color:white;
font-size: smaller;
font-family: monospace;
text-decoration:none;
}
#sortable { }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }</style>
</head>
<body>
<ol>
<div class="weblog">
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<!--<p></p>-->
<ol>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
</ol>
</div>
</div>
<div class="weblog-section">
<li>Some blog title</li>
<div class="item-body">
<p>Some blog text.</p>
</div>
</div>
</div>
</ol>
<script type="text/javascript" src='scripts/jquery-3.2.1.js'></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script>
$( function() {
$( ".weblog-section" ).sortable({
connectWith: ".weblog-section",
items: ".item-body"
});
$( ".weblog-section" ).disableSelection();
$( ".weblog" ).sortable({
connectWith: " > .item-body",
items: "> .weblog-section",
});
$( ".weblog" ).disableSelection();
} );
</script>
</body>
</html>
If you run the code, you would recognise what's missing. Sortable is working fine on the inner items. But It's not possible to drag a weblog-title and put it under another section.
For some reason I couldn't figure out the logic I should use to write the right jquery script.
Whatever I tried, I ended up getting parent-child errors.
Cheers
The functionality you are looking for is not built into jQuery UI's Sortable.
I would like to suggest for you to look at https://github.com/ilikenwf/nestedSortable, as it has been the chosen answer in jQuery Nested Sortable - Move LI elements within all available UL's.
Related
I have an issue with Dompdf not positioning images correct.
The output in browser is ok, but the images are to close to the title in the PDF.
They should also render over the blue bar. I thought this should be possible with either a negative margin-top or a position absolute. But from what I read is that position:absolute inside a position:relative container is (still) not working.
HTML and expected output:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
PDF renders as follows:
Screenshot
PHP Code:
$dompdf_options = new \Dompdf\Options();
$dompdf_options->set('isRemoteEnabled', true);
$dompdf_options->set('chroot', $dirname);
$dompdf = new \Dompdf\Dompdf($dompdf_options);
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();
This is an issue with how Dompdf aligns element within a line box. There is an ongoing effort to address the issue (WIP).
With the current release you can work around the issue by moving your image block down using relative positioning. You'll also want to set z-indexing a bit differently to better accommodate how Dompdf renders elements.
Try the following:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
z-index: 99;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
top: 40px;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
Follow your issue for updates
I am working on developing a custom theme for a website project on which I am currently working. I have been able to put the zip file together, upload it, and successfully install the template in Joomla. The theme with content shows up beautiful. However, I am not able to click on any buttons in any of the components or modules or even the edit button in the component. In the past, I have created and used a couple themes, and I have never had this issue, so I am not certain as to why I am having this problem now. I am including my index.php and custom.css files for reference. Any suggestions would be greatly appreciated from any Joomla gurus! Thank you much.
index.php
<?php
/**
* #package Joomla.Site
* #subpackage Templates.shamrocktours
*
* #copyright Copyright (C) 2016 Paradimensional Technology. All rights reserved.
*/
// Check if template is being installed in Joomla
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load Bootstrap CSS
JHtml::_('bootstrap.loadCss', true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Shamrock Tours Web Site">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+French+Canon" rel="stylesheet" type="text/css">
<link href="templates/shamrocktours/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner" class="row-fluid">
<div class="span8">
<img src="templates/shamrocktours/images/site_logo.png" alt="Shamrock Tours, click for home." id="headerimage">
</div>
<div class="span4">
<jdoc:include type="modules" name="usermenu" style="none" />
</div>
</header>
<nav role="navigation" class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="nav" style="none" />
</div>
</nav>
<div role="main" id="innerbody">
<div class="row-fluid">
<aside class="span3">
<jdoc:include type="modules" name="side" style="none" />
</aside>
<article class="span9">
<jdoc:include type="message" />
<jdoc:include type="component" />
</article>
</div>
</div>
</body>
</html>
custom.css
#charset "utf-8";
/* Main Styles for Shamrock Tours Website */
/* CSS Reset */
a,
article,
aside,
body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img {
margin: 0;
padding: 0;
}
/* General Element Styling */
html {
background: #0D8330;
}
body {
border: 5px double #000;
border-radius: 10px;
box-sizing:border-box;
font-family: "IM Fell French Canon";
background: transparent;
font-size: 1em;
}
h1,
h2,
h3 {
font-weight: bold;
}
h1 {
font-size: 2.25em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.125em;
}
/* Header */
header {
margin: 25px 25px 0;
}
#headerimage {
float: left;
width: 41%;
margin-left: 10px;
line-height: 2;
}
header h1 {
position: relative;
top: -10px;
left: 150px;
width: 500px;
text-shadow: 1px -1px #fff;
text-align: center;
}
/* Navigation */
nav {
position: relative;
top: -65px;
left: 397px;
width: 75% !important;
height: 75px;
border-radius: 10px;
box-shadow: 0 4px #666;
background: rgba(8,138,43,0.9);
line-height: 2;
}
/* Content */
#innerbody {
position: relative;
top: -99px;
width: 95%;
min-height: 450px;
margin: 0 auto;
padding: 75px 15px;
border-radius: 10px;
background: #fff;
z-index: -1;
}
article {
float: right;
width: 70%;
}
article h2 {
margin: 1.05em 0;
text-shadow: 1px 1px #666;
}
article h3 {
line-height: 1.2;
}
aside {
text-align: center;
}
/* Footer */
#footercontainer {
position: relative;
}
footer {
position: absolute;
bottom: 0;
font-size: 0.875em;
}
Just remove the z-index: -1 from the #innerbody:
#innerbody {
position: relative;
top: -99px;
width: 95%;
min-height: 450px;
margin: 0 auto;
padding: 75px 15px;
border-radius: 10px;
background: #fff;
/*z-index: -1;*/
}
In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Unable to sort inner list in kendo nested list">
<base href="http://demos.telerik.com/kendo-ui/sortable/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<ul class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
<li>Happy
<ul>
<li>Papercut <span>3:04</span></li>
<li>One Step Closer <span>2:35</span></li>
<li>With You <span>3:23</span></li>
<li>Points of Authority <span>3:20</span></li>
<li>Crawling <span>3:29</span></li>
</ul>
</li>
<li>Sad
<ul>
<li>Runaway <span>3:03</span></li>
<li>By Myself <span>3:09</span></li>
<li>In the End <span>3:36</span></li>
<li>A Place for My Head <span>3:04</span></li>
<li>Forgotten <span>3:14</span></li>
<li>Cure for the Itch <span>2:37</span></li>
<li>Pushing Me Away <span>3:11</span></li>
</ul>
</li>
</ul>
</div>
<style>
.playlist {
margin: 30px auto;
padding: 10px;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
.playlist li {
list-style-type: none;
position: relative;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
.playlist li:hover {
background-color: #dceffd;
}
.playlist li span {
position: absolute;
right: 5px;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.placeholder = function(element) {
return element.clone().addClass("placeholder").text("drop here");
};
$scope.hint = function(element) {
return element.clone().addClass("hint");
};
})
</script>
</body>
</html>
http://jsbin.com/qubuguh/edit?html,output
This can be done by using a filter that describes the child li elements. For example:
<ul class="playlist" kendo-sortable k-filter="'ul>li'" k-placeholder="placeholder" k-hint="hint">
I'm trying to create a chart on a webpage with each entry being coded as a div containing a <p> element, to number the entry, furthest to the left and a picture next to it. However when I try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD\xhtml1-strict.dtd">
<html xmlns="hhtp://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style>
.entry {
background-color: #99d699;
width: 600px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 1px;
border-color: #808080;
border-width: 2px;
border-bottom-style: solid;
position: relative;
overflow: hidden;
}
.entry p {
color: white;
font-weight: bold;
font-size: 30px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
}
.art {
width: 80px;
height: 80px;
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
float: left;
overflow: hidden;
}
</style>
</head>
<body style="background-color: #D6DDD6;">
<div class="entry">
<p>
1
</p>
<img class="art" src="http://wvs.topleftpixel.com/photos/2008/04/Dundas_Square_Pano_Fisheye_tunnel_crop.jpg" alt="Random pic" />
</div>
</body>
</html>
...the picture ends up underneath the paragraph. How can I cleanly position the image to the right of the paragraph?
Here is JSBin
Simply add below code in your CSS
p{
float:left;
}
This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I've been staring at this for so long that I can't find any errors at all with it, so maybe one of you guys can point out where I'm going wrong.
CSS:
body {
font-family: Georgia, serif;
margin: 0px;
padding: 0px;
background: #222;
}
header {
background: #fff url('images/header-border.gif') bottom repeat-x;
width: 980px;
margin: 0px auto;
height: 100px;
padding: 0px 0px 0px 20px;
-moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-left-radius: 4px;
}
section {
}
article {
}
footer {
clear: left;
}
nav {
width: 980px;
margin: 0px auto;
height: 70px;
padding: 10px 0px 10px 0px;
font-size: 21px;
font-weight: bold;
font-family: Arial, serif;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background: #060606;
}
#content {
width: 980px;
background: #fff;
padding: 0px 0px 0px 20px;
margin: 0px auto;
}
nav ul li {
float: left;
list-style: none;
width: 155px;
}
#left-column, #logo {
width: 560px;
margin: 0px auto;
float: left;
}
#right-column, #share {
width: 380px;
margin: 0px auto;
float: left;
height: 100%;
padding: 0px 0px 0px 20px;
border-left: 1px solid #d9d9d9;
}
address {
display: inline;
}
a img {
border: 0px;
}
.clear-left {
clear: left;
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html; charset=UTF-8" />
<title>Webtint </title>
<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>contact</li>
<li>follow us</li>
</ul>
</nav>
<header>
<section id="logo">
</section>
<section id="share">
</section>
</header>
<div id="content">
<section id="left-column">
<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
<?php the_excerpt(); ?>
<br /><br />
Read More
<?php comments_popup_link(
'<span class="boxed">No Responses »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</span>'); ?>
</article>
<hr />
</section>
<section id="right-column">
<h2>Popular Posts</h2>
</section>
</div>
<footer>
</footer>
</body>
</html>
Screenshot in Firefox:
http://imgur.com/wvhI0.gif
Screenshot in Chrome: (How it's supposed to look)
http://imgur.com/sQK8S.gif
Screenshot in IE8:
http://imgur.com/7OnEJ.gif
Thanks for any help in advance :)
Basically, you're using mostly HTML5 specific elements, and they're not supported everywhere properly yet, especially IE8 out of those you listed.
For a quick look, Here's the list of elements added in HTML5.
Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.
Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.
Johnny, does your solution also fix the incorrect rendering in Firefox 2 and Camino 1? Interesting, as I only know of the Javascript solution. Just to give you some more feedback on this: to learn more about getting HTML5 rendered properly in all major browsers, read this article by Nico Hagenburger. You can also use this script to render HTML5 in IE.
A more general article about HTML5 and CSS3 support in IE (e.g., your corners aren't rounded) in this article. For rounded corners in all major browsers (also in Opera) please read this one. There also exist general tables about support in all major browsers of HTML5 and CSS3.
EDIT: I just read an article about HTML5 pages not rendered properly when printing from within IE, because this JavaScript solution isn't loaded when printing a page. More info on doctype.com.