Sortable plugin to sort images with drag and drop transition - jquery-ui-sortable

I am trying to sort a list of images - allowing to drag and drop the images as is.
With the following code, i see the dom elements being reordered when i try drag and drop, however, actual drag and drop is not visible and it is a very jarred experience.
Could you tell me what I am missing here?
<html>
<head>
<style>
li {
display: inline-block;
}
img{
margin:10px;
}
</style>
</head>
<body>
<div>
<ul class="sort-photos">
<li><img src="http://via.placeholder.com/50x100" /></li>
<li><img src="http://via.placeholder.com/60x100" /></li>
<li><img src="http://via.placeholder.com/70x100" /></li>
<li><img src="http://via.placeholder.com/80x100" /></li>
<li><img src="http://via.placeholder.com/90x100" /></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".sort-photos").sortable();
});
</script>
</body>
</html>
https://jsfiddle.net/unodurga/tn8kuzab/

Related

AMP Email - amp-selector to create a conditional menu

Does any one know how to make a conditional hide with amp-selector in email? on buttons like these? So I have 3 of these buttons next to each other, menu 1, menu 2 and menu 3. So if I click menu1, I only want the content to show that links to menu 1.. If I click menu2 I want to only show the content from menu2 and so forth.
<table>
<tr>
<th on="tap:menu1.hide;tap:menu1.toggleVisibility" class="bg-indigo-500 hover:bg-indigo-600 rounded" style="mso-padding-alt: 12px 48px;">
<a class="block text-white text-sm leading-full py-12 px-48 no-underline">Menu 1</a>
</th>
</tr>
</table>
<amp-selector id="menu1" layout="container" hidden>
<amp-selector id="hide1" layout="container" name="single_image_select" >
<ul>
<li>
<p option="1" select> MENU1 </p>
</li>
<li>
<p option="2" hidden> HEJ2 </p>
</li>
<li option="na" disabled>None of the Above</li>
</ul>
</amp-selector>
</amp-selector>
You can use actions and events in AMP Email to achieve this. See this URL for detail.
Below is a tested code for the same:
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden} </style>
<style amp-custom>
/* any custom styles go here. */
.hideme {
visibility:hidden
}
</style>
</head>
<body>
<button value="menu1" on="tap:menu1.toggleVisibility,menu2.hide,menu3.hide">menu1</button>
<button value="menu1" on="tap:menu2.toggleVisibility,menu1.hide,menu3.hide">menu2</button>
<button value="menu1" on="tap:menu3.toggleVisibility,menu1.hide,menu2.hide">menu3</button>
<div id="menu1">
<h3>
Menu1
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu2" hidden>
<h3>
Menu2
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu3" hidden>
<h3>
Menu3
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
</body>
</html>
Working Example in AMP Playground

Server Side Swift: Navbar Toggle not working in Vapor 4 Leaf + Bootstrap

Configurations:
Vapor 4 | Updated beta version & packages | macOS Catalina v.10.15.3 | XCode 11.4 beta 2 | Bootstrap CDN 4.4.1
I'm unable to toggle my navbar button. I'm not sure if it's a bug in Leaf. I've implemented Bootstrap and CSS in the right order. Try and run this code. Don't forget to resize your browser window to mobile or tablet view in order to show navbar toggle button.
Here's my leaf code:
// base.leaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- <link rel="stylesheet" href="/styles/bootstrap.min.css"/>-->
<link rel="stylesheet" href="/fonts/fa/css/all.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/styles/main.css"/>
<link rel="stylesheet" href="/styles/header.css"/>
<link rel="stylesheet" href="/styles/footer.css"/>
<title>#(metaContent.title)</title>
<meta name="description" content="#(metaContent.description)"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main>
#import("main")
</main>
<footer id="myFooter">
<div class="bg-secondary" style="height:3px;">
</div>
<div class="footer-copyright footer-brand">
<h6 class="mt-2 text-light">© 2020 Company. All Rights Reserved.</h6>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// index.leaf
#extend("base"):
#export("main"):
<div class="container mt-3">
<h1>#(metaContent.title)</h1>
<p>#(body.content)</p>
</div>
#endexport
#endextend
In Safari's Inspect element, my html document is rendered in the right order. But, I've no clue why the click on navbar toggle isn't working.
As far as I remember using Vapor 4 leaf renderer there is a bug about #. They are always interpreted as the beginning of a leaf tag.
The simplest workaround is to escape them with a \ : data-target="#navbarCollapse" become data-target="\#navbarCollapse"
I believe there is a bug in Leaf parser, and the # in data-target="#navbarCollapse" gets misinterpreted. The way I have solved it is to change data-target to data-target=".navbarCollapse" and to modify class attribute of navbarSupportedContent div element from <div class="collapse navbar-collapse" id="navbarSupportedContent"> to <div class="collapse navbar-collapse navbarSupportedContent" id="navbarSupportedContent">. Not the best of workaround, but it does the trick until the Leaf parser is modified.

Foundation 6 Accordion Not Working

Could you please help on below Foundation 6 Accordion sameple code where I could not able get it worked. I am not sure what I am missing. Also, I kept all js and css files are in the same directory.
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery.js"></script>
<script src="foundation.js"></script>
<script src="foundation.accordion.js"></script>
<link rel="stylesheet" href="foundation.css" />
<script>
$(document).foundation();
</script>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question 1
<div id="panel11a" class="content">
Answer 1
</div>
</li>
<li class="accordion-navigation">
Question 2
<div id="panel12a" class="content">
Answer 2
</div>
</li>
<li class="accordion-navigation">
Question 3
<div id="panel13a" class="content">
Answer 3
</div>
</li>
</ul>
</div>
</body>
</html>
Appreciated if someone help on this at the earliest.
Okay, so for me it works perfectly, just checked. You had some missing classes and that was your main problem.
Firstly:
The container for an accordion needs the class .accordion, and the
attributes data-accordion and role="tablist". Note that in these
examples, we use a <ul>, but you can use any element you want.
In your code there is no role=tablist in ul tag.
Second thing is that you are missing a lot in your <a></a> and <div></div>
You don't have for example aria-controls or data-tab-content aria-labelledby
About <a></a>
The tab title needs role="tab", an href, a unique ID, and
aria-controls.
About <div></div>
The content pane needs an ID that matches the above href,
role="tabpanel", data-tab-content, and aria-labelledby.
Your example:
<div class="row row-padding small-12">
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-navigation">
Accordion 1
<div id="panel11a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel11a-heading">
Answer 1
</div>
</li>
<li class="accordion-navigation">
Accordion 2
<div id="panel12a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel12a-heading">
Answer 2
</div>
</li>
<li class="accordion-navigation">
Accordion 3
<div id="panel13a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel13a-heading">
Answer 3
</div>
</li>
</ul>
</div>
If you need there is also my code, I have used it to check if it all works.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="scripts/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-navigation">
Accordion 1
<div id="panel11a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel11a-heading">
Answer 1
</div>
</li>
<li class="accordion-navigation">
Accordion 1
<div id="panel12a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel12a-heading">
Answer 2
</div>
</li>
<li class="accordion-navigation">
Accordion 1
<div id="panel13a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel13a-heading">
Answer 3
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/foundation.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
In the future check this link. This should be very helpful for you.
zurb-accordion

Bootstrap carousel not sliding on iphone

I'm building a responsive webpage with bootstrap plugin. Everything works fine in desktop browsers, even in low resolution and toggle device mode (chrome). But when i open the page on chrome or safari, on my iphone, the carousel just don't slide. It goes to the next slide, but without using the sliding effect.
This is the URL: http://diogoalmeida.pt/2/index.html
This is my HTML code:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Blueimp Gallery -->
<link rel="stylesheet" href="css/blueimp-gallery.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Menu -->
<nav class="navbar navbar-fixed navbar-green" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav nav-green navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container-fluid myCarousel">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
<div class="item">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div class="container">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" style="width:10%;" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" style="width:10%;" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" style="width:10%;" alt="Orange">
</a>
</div>
</div>
<!-- JQuery -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4(custom-touch).js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Blueimp Gallery -->
<script src="js/jquery.blueimp-gallery-1.2.2.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
</body>
</html>
Problem solved, the bootstrap auto compiler (website) wasn't including vendor prefixes.
Solution here -> https://github.com/twbs/bootstrap/issues/14973
similar problem .....my problem was that the images were not sliding to the next on small screens , i added to the head and it worked
<script src="../resources/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="../resources/assets/js/smoothproducts.min.js"></script>
<script src="../resources/assets/js/theme.js"></script>

Simple 2 line jQuery Accordion menu...Need help !

This is my accordion menu :
<script type="text/javascript">
$(function()
{
$("dt.title").click(function()
{ $("div.info").slideUp("slow"); $(this).next("div.info:hidden").slideDown("normal" );
});
});
</script>
It is working fine, here have a look at the html:
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title">About</dt>
<dt class="title">Work</dt>
<div class="info">
<ul>
<li>Bol</li>
<li>Annie</li>
<li>Imran</li>
</ul>
</div>
<dt class="title">Contact</dt>
<dt class="title">Links</dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>
Very simple ! But when I put the href links, the menu stop working. For example:
<dt class="title">About</dt>
Please help me with this, I'll be really thankful !
Cheers,