We Keep Coding

Javascript Show/Hide text

I'm trying to have a list in which when a user clicks, an image shows up along with a text under it. Let's say for List 1, I want it to say "Price: $1" when the link is clicked. And then for List 2, "Price: $2" under the image when the link is clicked. The same functions as the image show/hide ideally. Then when clicked away, hides the elements. I'm fairly new to JS but here's what I've gathered so far:
$(function () {
$(".imgPreview").hide();
$(".unstyled li a").click(function () {
$(".imgPreview").show().find("img").attr("src", $(this).attr("href"));
return false;
});
$("body").click(function () {
$(".imgPreview").hide();
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {margin: 10px;}
li {margin: 25px;}
.unstyled, .imgPreview, .showPrice {float: left; width: 50%;}
.unstyled, .imgPreview img {max-width: 100%;}
p {margin: 5px;}
.recycle-button {
padding: 6px 6px;
background-color: rgb(53, 189, 208);
border-radius: 5px;
color: white;
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="margin-bottom: 35px;">
<h3>LIST</h3> </div>
<ul class="unstyled">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
</ul>
<div class="imgPreview">
<img src="" alt="" width="350" height="150"/>
</div>
My goal is to have something like this.
Edit:
So far, I've tried adding the attribute data-price to the element <a to hold the price data:
<li>List 1</li>
and have the script do the same function with the imgPreview:
$(".imgPreview").show().find("p").attr($(this).attr("data-price"));
I'm fiddling with this and the error I get is "Script error." Surely, you can see the limited knowledge I have with JS.

May be you want something like this...
$(function () {
$(".imgPreview").hide();
$(".unstyled li a").click(function (event) {
var listItem = event.target.parentElement;
var image = $(".imgPreview");
image.show();
image.find("img").attr("src", $(this).attr("href"));
$(image.find("span"))[0].innerHTML="Price = $"+ ($( "li" ).index( listItem ) + 1);
return false;
});
$("body").click(function () {
$(".imgPreview").hide();
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {margin: 10px;}
li {margin: 25px;}
.unstyled, .imgPreview, .showPrice {float: left; width: 50%;}
.unstyled, .imgPreview img {max-width: 100%;}
p {margin: 5px;}
.recycle-button {
padding: 6px 6px;
background-color: rgb(53, 189, 208);
border-radius: 5px;
color: white;
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="margin-bottom: 35px;">
<h3>LIST</h3> </div>
<ul class="unstyled">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
</ul>
<div class="imgPreview">
<img src="" alt="" width="350" height="150"/>
<span id="priceView"></span>
</div>

Kendo UI sortable within a sortable

I'm trying to get the following to work:
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</div>
</ul>
</div>
<script>
$(document).ready(function() {
$("#sortable-basic").kendoSortable({
hint:function(element) {
return element.clone().addClass("hint");
},
placeholder:function(element) {
return element.clone().addClass("placeholder").text("drop here");
},
cursorOffset: {
top: -10,
left: -230
},
items: ".sortable, .sortable-div"
});
});
</script>
So the plan is the following:
You need to be able to drag the div's up and down other div's. This works fine. But you also need to be able to drag a single item around, in and out the div. This is the part I cannot figure out. When I click an item it selects the div anyways.
For the life of me i cannot seem to figure this out.

please try below code.
For your more reference, I was modify given link code:
https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/nested-sortables
$(document).ready(function() {
function placeholder(element) {
return $("<li style='color: red;' class='sortable' id='placeholder'>Drop Here!</li>");
}
$("#sortable-basic").kendoSortable({
connectWith: ".sortable-div",
filter: ".sortable", // Filter only list items that are direct child of the Sortable container.
// Use ".list-item" to allow parent items to use the nested Sortable.
placeholder: placeholder
});
$(".sortable-div").kendoSortable({
connectWith: "#sortable-basic",
filter: ".sortable",
placeholder: placeholder
});
});
#example {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playlist {
margin: 30px auto;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
#playlist-title span {
display: none;
}
#sortable-basic {
padding: 0;
margin: 0;
}
li.sortable {
list-style-type: none;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
li.sortable:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
li.sortable span {
display: block;
float: right;
color: #666;
}
li.sortable:hover {
background-color: #dceffd;
}
li.hint {
display: block;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #52aef7;
position: absolute;
left: 216px;
top: 8px;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" rel="stylesheet"/>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="example">
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</ul>
</ul>
</div>
</div>

Able to Drag but not Drop: jQuery Plug-in

I am trying to implement the drop and drop feature in my app using a jQuery plugin as described here: http://farhadi.ir/projects/html5sortable/ anyhow, I am only able to drag the list objects and not drop them in my project.
Then, I tried to simply .html file that implements just the drag and drop described without all the complexities of my app.
So, here is the code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<section id="demos">
<h1>Demos</h1>
<style>
#demos section {
overflow: hidden;
}
.sortable {
width: 310px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
.handle {
cursor: move;
}
.sortable.connected {
width: 200px;
min-height: 100px;
float: left;
}
li.disabled {
opacity: 0.5;
}
li.highlight {
background: #FEE25F;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<section>
<h1>Sortable List</h1>
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1
<li draggable="true" class style="display: list-item;">Item 2
<li draggable="true">Item 3
<li draggable="true">Item 4
<li draggable="true">Item 5
<li draggable="true">Item 6
</ul>
</section>
</section>
<script src="/html5sortable/jquery-1.7.1.min.js"></script>
<script src="/html5sortable/jquery.sortable.js"></script>
<script>
$(function() {
$('#sortable1, #sortable2').sortable();
$('#sortable3').sortable({
items: ':not(.disabled)'
});
$('#sortable-with-handles').sortable({
handle: '.handle'
});
$('#sortable4, #sortable5').sortable({
connectWith: '.connected'
});
});
</script>
</BODY>
</HTML>
But even this is not working. The examples given on the site are working properly, so there has to be something wrong.
I have properly downloaded and included all the files that need to be downloaded/included?

There is an additional "/" in the relative address that you have defined. Remove it.

I think you need to close your li tags like this:
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1</li>
<li draggable="true" class style="display: list-item;">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
<li draggable="true">Item 6</li>
</ul>
fiddle

Horizontal Javascript menu error

I have a small problem with my JavaScript menu.
When I choose an item it shows me always the last sub menu.
This is very simple for people who are professionals in Javascript :p
Here is the sample:
CSS
ul#midnav {
border-width: 1px 0;
list-style: none;
margin-bottom: 5px;
text-align: center;
border-bottom: solid thin #c8c8c8;
padding: 0px 0px 13px 0px;
}
ul#midnav li {
display: inline;
padding: 0px 0px;
}
ul#midnav li a {
text-transform:uppercase;
font-size:11px;
padding: 5px 13px 0px 5px;
background: url('../image/arrow-topdown-gray.png') 100% 9px no-repeat;
}
ul#midnav li ul {
line-height: 28px;
padding: 0;
position: absolute;
top: -30px;
background: none;
display: none;
/* --Hide by default--*/
width: 960px;
height:28px;
background: #fff;
border-top: solid thin #eeeeed;
}
ul#midnav li ul a {
background: url('../image/arrow-left-gray.png') 100% 9px no-repeat;
}
HTML
<div id="navigation">
<div id="mid-nav">
<ul id="midnav">
<li>Item 1
<ul>
<li>Item 1.1
</li>
<li>Item 1.2
</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2.1
</li>
<li>Item 2.2
</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3.1
</li>
<li>Item 3.2
</li>
</ul>
</li>
<li>Item 4
<ul>
<li>Contact Us
</li>
<li>Item 4.1
</li>
<li>Item 4.2
</li>
</ul>
</li>
<li>Item 5
<ul>
<li>Item 5.1
</li>
<li>Item 5.2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
JavaScript
$(document).ready(function () {
$('ul#midnav li a').on('click', function (event) {
event.preventDefault();
$('#mid-nav > ul').find('ul').slideUp(function () {
$(this).closest('li').find('ul').slideToggle();
});
});
});

this in your ready handler refers to the wrong object:
$(document).ready(function () {
$('ul#midnav li a').on('click', function(event){
event.preventDefault();
var e=this;
// must alias or 'this' will refer to
// the last submenu slid into hiding
// instead of the one to open
$('#mid-nav > ul').find('ul').slideUp(
function(){
$(e).closest('li').find('ul').slideToggle(); // 'e' instaed of 'this'
});
});
});

Running rb_menu() on one div

All of the submenus appear and overlap regardless of which of the three options is selected [Work, Services, Contact] and all are highlighted rather than the one the mouse is hovering over
Is there a way to only display the sub menu that has been selected using CSS and hiding the rest until otherwise clicked?
Can you use an example of how I would do this using the code provided:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$('#menu-wrapper').rb_menu({
triggerEvent: 'click',
hideOnLoad: true,
loadHideDelay: 0,
autoHide: false,
transition: 'swing'
});
});
</script>
<div id="menu-wrapper">
<div id="menu" class="menu clearfix">
<div class="toggle">Work</div>
<div class="items">
<ul>
<li>Basingstoke Treatment Works</li>
<li>Project Two</li>
<li>Project Three</li>
<li>Project Four</li>
<li>Project Five</li>
<li>Project Six</li>
</ul>
</div>
</div>
<div id="menu2" class="menu clearfix">
<div class="toggle">Contact</div>
<div class="items">
<ul>
<li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li>
</ul>
</div>
</div>
<div id="services" class="menu clearfix">
<div class="toggle">Services</div>
<div class="items">
<ul>
<li>Site Logistics</li>
<li>Waste Management</li>
<li>Security Services</li>
<li>Traffic Management</li>
<li>Multi Service Gangs</li>
<li>Facilities & Accommodation</li>
<li>Small Works & Maintenance</li>
<li>Catering Services</li>
</ul>
</div>
</div>
</div>
CSS
#menu {
position: relative;
top: 435px;
left: -15px;
width: 60px;
height: 25px;
}
#menu2 {
position: relative;
top: 445px;
left: -15px;
width: 60px;
}
#services {
position: relative;
top: 428px;
left: -15px;
width: 60px;
}
.menu .items a:hover {
text-decoration: none;
}
.menu .items a {
font-size: 11px;
color: #ABA099;
text-decoration: none;
}
.menu .items {
left: 180px;
width: 250px !important;
}
.menu .items li {
width: 250px;
line-height: 19px;
font-size: 11px;
color: #ABA099;
height: 19px;
}
.menu .items li a:hover {
color: #4D4D4F;
}
.menu .toggle {
color: #ABA099;
font-weight: normal;
}
.menu .toggle-hover {
color: #4D4D4F;
}

It looks like your css styles are being overridden somewhere in your page. I have setup a sample page for you to try - this works for me.
Include the following code in the head of your document:
<link rel="stylesheet" type="text/css" href="http://www.getintothis.com/pub/projects/rb_menu/css/rb_menu.css" media="screen,projection" />
<style type="text/css">
#menu-wrapper {
border: 1px solid #bcd;
background: #fbfbfb;
padding: 12px;
overflow: hidden;
width: 540px;
height: 320px;
position: relative;
}
.menu {
margin-bottom: 10px;
}
.toggle {
padding: 6px;
margin-bottom: 2px;
font-size: 12pt !important;
}
.items {
margin-left: 46px;
}
.items li a {
padding: 2px;
}
</style>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery.ui-1.7.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/rb_menu.js"></script>
<script>
$(document).ready(function(){
$('#menu1').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
$('#menu3').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
});</script>
Then add the following in the body:
<div id="menu-wrapper">
<div id="menu1" class="menu clearfix">
<div class="toggle">Work»</div>
<div class="items" style="display: none; ">
<ul>
<li>Basingstoke Treatment Works</li>
<li>Project Two</li>
<li>Project Three</li>
<li>Project Four</li>
<li>Project Five</li>
<li>Project Six</li>
</ul>
</div>
</div>
<div id="menu2" class="menu clearfix">
<div class="toggle">Contact»</div>
<div class="items" style="display: none; ">
<ul>
<li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li>
</ul>
</div>
</div>
<div id="menu3" class="menu clearfix">
<div class="toggle">Services»</div>
<div class="items" style="display: none; ">
<ul>
<li>Site Logistics</li>
<li>Waste Management</li>
<li>Security Services</li>
<li>Traffic Management</li>
<li>Multi Service Gangs</li>
<li>Facilities & Accommodation</li>
<li>Small Works & Maintenance</li>
<li>Catering Services</li>
</ul>
</div>
</div><!--End menu3--></div><!--End menu-wrapper-->
I hope this helps! :)