Hi I have a div with the following styling:
#lists li {
width: 580px;
background: #FFD586;
margin-bottom: 5px;
padding: 10px;
list-style: none;
line-height: normal;
text-align: left;
margin-left: 40px;
font-size: x-large;
overflow: scroll;
}
I want to make the div draggable, however the content within the div is being pulled in from my database, and I cannot seem to get the content to be draggable.
Any suggestions?
give that list element class name or use id and make it draggable, here the jquery code:
$( ".draggableclass").draggable(); //$( "#yourid").draggable();
$( ".droppableclass" ).droppable({ //same here
accept:".draggableclass",
drop: function( event, ui ) { //function that will activate after dropping
}
});
If you don't need droppable function, just use draggable and you'll be able to drag it anywhere.
Try Jquery, it's easy to use, see more here:
http://jqueryui.com/draggable/
Like this:
$(document).ready(function() {
$('#lists').draggable();
});
Or see this in action here: http://jsfiddle.net/9axcg/
Related
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
Currently I am trying to make the selected list item STAY bold after selected and go back to normal after a different item is selected. basically I want a "currently selected tab". is there a way I can do this with css or do I need Javascript? Here is my code ->
CSS: (using SASS)
.setup-nav {
float: left;
position: relative;
width: 20%;
padding-right: 20px;
box-sizing: border-box;
font-size: 18px;
color: $base-link-color;
text-align: left;
li {
border-top: none;
border-bottom: none;
&.active {
font-weight: bold;
}
}
HTML:
<ul class="setup-nav">
<li>HTTP</li>
<li>Email</li>
<li>Ruby</li>
<li>Python</li>
</ul>
Hopefully there is an easy way to do this.
Using jQuery:
$(".setup-nav").on( "click", "li", function(){ // attach to Click event
$(".setup-nav li.active").removeClass("active"); // reset all <li> to no active class
$(this).addClass("active"); // add active class to this <li> only
});
http://api.jquery.com/on/ reference for use of .on()
http://api.jquery.com/addClass/ reference for use of .addClass()
Someone may come along with pure JavaScript answer (no jQuery library use) if you prefer that approach.
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
I have a droppable div that contains child elements that are not droppable.
For some reason, if you drop on the first child element, the drop event is not triggered, but it is on the second child element.
Here's a JSFiddle example: http://jsfiddle.net/bppn33q3/1/
Why is this? And how can I fix it?
EDIT: Wrong fiddle
It actually is working. Look at what happens when you remove margin-top: 50px.
.drag {
padding: 10px;
width: 25%;
background-color: aqua;
}
Updated Example
As you can see, the margin affects the placement calculations.
You could always play around with the tolerance option - (example).
$('.drop').droppable({
accept: '.drag',
tolerance: "pointer",
drop: function () {
alert('dropped');
}
});
Playing with your fiddle, it appears that the issue is the css.
Check out my new fiddle after I removed your margin:
http://jsfiddle.net/bppn33q3/2/
.drag {
padding: 10px;
width: 25%;
background-color: aqua;
}
I don't have much experience with jQuery.
I have 4 li elements and a draggable block. When I drag from green to blue, first I need my dragging block to stand behind blue and not go out from the borders of the container, meaning that my draggable element must be always snap into the container.
When my draggable element stand behind blue, the background color must be changed from brown to red.
Can anybody help me? Because I don't really know how to do this. All what I have at this moment is: JSFiddle
HTML
<div id="container" class="ui-widget-header">
<div id="draggable" class="ui-widget-content"></div>
<ul id="menu">
<li id="menuElement1"></li>
<li id="menuElement2"></li>
<li id="menuElement3"></li>
<li id="menuElement4"></li>
</ul>
</div>
CSS
body {
background-color: brown;
}
#container {
position: relative;
}
#menu,
#draggable {
position: absolute;
top: 0;
left: 0;
}
#draggable {
width: 100px;
height: 150px;
}
#menu {
margin-left: -40px;
}
ul li {
display: block;
float: left;
padding: 50px;
}
#menuElement1 {
background-color: green;
}
#menuElement2 {
background-color: blue;
}
#menuElement3 {
background-color: black;
}
#menuElement4 {
background-color: red;
}
#container {
height: 150px;
width: 100%;
background-color: gray;
JQuery
$(function() {
$( "#draggable" ).draggable({ snap: ".ui-widget-header" });
});
Here's an updated fiddle
You'd do well to read this article on Droppable from the jQuery docs. Basically you were half way there, you need to make an element (the blue box, with id #menuElement2) droppable to provide a target for a draggable element
$('#menuElement2').droppable({
drop: function( event, ui ) {
//Do something here...
}
});
Within the drop function (this fired when the block is dropped on the target) you need to perform your action.
$('body').css({'background-color': 'red'});
This adds a custom css rule to the body that changes the colour, again check out the jQuery docs - search for 'jQuery css'.
Hope this helps :)
Update: I just updated the fiddle again to make it revert back to brown when you change selection - not sure if you wanted this but it can be easily removed by commenting out the css change within the drag function.