I am trying to drag and sort images using jquery UI. I have cloned element which is I am trying to drag. I need to show a line between two images based on cloned image position. How can I achieve this? Thanks in advance.
Here is the one example.
http://jsbin.com/owuxek/9/edit?html,js,output
I am showing images instead of "Item A Item B.." Now I need to show a line between two li's while one 'li' is moving.
EDIT: That is, when I click "and pick" an image and hover it onto the list of images already in place, I wish to show a 'separator line' between the images over which I am currently hovering, so as to indicate to the user where the image would be placed if user releases the mouse click.
In the attached JSbin code, when I move an element from the list above and try to move it into the list below, a small white separating space appears between the elements of the list below, over which the mouse hovers. I need to replicate this effect for the below element layout.
<div id="single_album_grid" class="sortable">
<div id="divId1">
<img class="assetImg" id="imageId1" src="url">
</div>
<div id="divId2">
<img class="assetImg" id="imageId2" src="url">
</div>
<div id="divId3">
<img class="assetImg" id="imageId3" src="url">
</div>
</div>
This is my updated code:
$( "#divId1" ).draggable({
containment: $('#single_album_grid'),
helper: 'clone'
});
$( "#divId1" ).droppable({
drop: function(event, ui) {
}
});
If you use jquery UI sortable widget, it automatically inserts a placeholder element to at the target position.
You can style it like a line or whatever else you want with .ui-sortable-placeholder selector via css.
$(function() {
$("#single_album_grid").sortable()
});
div div {
height: 50px;
background: dodgerblue;
border: 2px solid white;
}
.ui-sortable-placeholder {
visibility: visible !important;
height: 5px;
background: hotpink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="single_album_grid" class="sortable">
<div id="divId1">
<!--img class="assetImg" id="imageId1" src="url"-->
</div>
<div id="divId2">
<!--img class="assetImg" id="imageId2" src="url"-->
</div>
<div id="divId3">
<!--img class="assetImg" id="imageId3" src="url"-->
</div>
</div>
over: function (event, ui) {
//code here
}
out: function (event, ui) {
//code here
}
worked for me!!
Related
Using the latest jQuery UI, the drag and drop function doesn't work properly, when moving elements from one list to another. I want to drag elements from one list to another and replace the drooped element with another one, the problem is that jquery UI replaces the element but it moves it to the bottom of the list, it doesn't keep it to the position where it was dropped.
<head>
<style>
#list1{
float:left;
width: 200px;
margin-right: 20px;
}
#list2{
float:left;
width: 200px;
}
.element1{
line-height:25px;
width: 200px;
margin-bottom:5px;
margin-top:5px;
background-color:#ededed;
}
.element2{
line-height:25px;
width: 200px;
margin-bottom:5px;
margin-top:5px;
background-color:#ffeded;
}
.highlight{
border: 1px dashed #999999;
color: #333333;
height: 25px;
background-color: #faffd6;
}
</style>
</head>
<body class="">
<div id="wrapper">
<div id="list1">
<div class="element1">Element 1</div>
<div class="element1">Element 2</div>
<div class="element1">Element 3</div>
<div class="element1">Element 4</div>
<div class="element1">Element 5</div>
<div class="element1">Element 6</div>
</div>
<div id="list2">
<div class="element2">Element 1</div>
<div class="element2">Element 2</div>
<div class="element2">Element 3</div>
<div class="element2">Element 4</div>
<div class="element2">Element 5</div>
<div class="element2">Element 6</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script>
$(window).load(function () {
$("#list1").sortable({
revert: true,
placeholder: "highlight",
});
$("#list2").sortable({
revert: true,
placeholder: "highlight",
});
$( ".element1" ).draggable({
connectToSortable: "#list2",
revert: "invalid",
stop: function( event, ui ) {
$(this).replaceWith('<div class="element1">Element 99</div>');
}
});
});
</script>
The problem you got is that you have two different events and you catch only one of them.
You drag item from gray-list and place it inside the pink-list, your highlight element is shown and then you drop it. This is your problematic usage.
You grad item from gray-list and place it inside the pink-list, your highlight element is shown, then you take your dragged element outside of that list (you still have the margin of the new list-item, but the highlighted element is not there) and you drop it. This scenario is all good.
Your problem is that on the first scenario the dragged element position (DOM-wise) is the last element of the list, and when you drop it what happen is that you get animation to put it in the correct position (where the highlight element is places) and then there is a switch. If you change that the function that should change between those elements will not know which elements to switch.
The way to fix this issue is to go to the "droppable" element - the list you put your item in. use the deactivate event of the sortable (#list2) to run anything you want after the element was placed in the right place.
$("#list2").sortable({
revert: true,
placeholder: "highlight",
deactivate: function(event, ui) {
$(ui.item).replaceWith('<div class="element1">Element 99</div>');
}
});
Note the usage of event.toElement and not this, since this in the current scope is the list element and not the dragged element. Don't forget to remove the code of the stop event from your draggable element.
It feels like the question is already answered:
How to select multiple areas in containment using jQuery UI draggable
Set more than one containment in jQuery Draggable
I have 3 timelines and some draggable elements to place there. For some reason I cannot get it to work. This is the syntax I'm using: containment: ".timeline1, .timeline2, .timeline3"
$(function() {
$(".timeline1, .timeline2, .timeline3").droppable();
$(".event").draggable({
containment: ".timeline1, .timeline2, .timeline3"
});
});
.timeline1, .timeline2, .timeline3 {
width: 500px;
height: 40px;
border: 3px dashed gray;
margin-bottom: 10px;
}
.event {
height: 40px;
background: gray;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<div class="timeline1"></div>
<div class="timeline2"></div>
<div class="timeline3"></div>
<div class="event">dance</div>
<div class="event">sleep</div>
<div class="event">eat</div>
Update found in the docs: http://api.jqueryui.com/draggable/#option-containment
The draggable element will be contained to the bounding box of the first element found by the selector
Question is still valid, I'd really like to know how to restrict droppable area to multiple divs?
I'm not sure if you can do this with the containment option, but you can use snap, snapMode and revert to accomplish what you're trying to do.
I'd add a common class like timeline-droppable to your timeline elements to make it easier:
<div class="timeline1 timeline-droppable"></div>
<div class="timeline2 timeline-droppable"></div>
<div class="timeline3 timeline-droppable"></div>
Use the snap option to snap to your droppable timelines. Use the revert option to determine whether the draggable was dropped in a valid droppable:
$(function() {
$(".timeline-droppable").droppable();
$(".event").draggable({
snap: ".timeline-droppable",
snapMode: "inner",
revert: function(droppedElement) {
var validDrop = droppedElement && droppedElement.hasClass("timeline-droppable");
return !validDrop;
}
});
});
Of course you'll need to tweak the CSS to make your event elements fit nicely inside your timeline elements.
Basically I am looking for a code that makes a div visible on a certain location on the webpage. when you scroll trough the website you get at certain headings when you are at a specific heading the div needs to get visible in the navbar.
The div #greybar is the div that needs to get visible only on a certain location while scrolling, the whole navbar is fixed
HTML:
<div class="navbar">
<div class="container">
<div class="logo">
<img src="images/logotekst.png">
</div>
<div id="menubutton"><a onclick="playclip();" href="#homejump">Home</div>
<div id="menubutton"><a onclick="playclip();" href="#aboutjump">About</div>
<div id="menubutton"><a onclick="playclip();" href="#infojump">Info</div>
<div id="menubutton"><a onclick="playclip();" >test</div>
</div>
<div id="greybar"></div>
</div>
CSS:
#greybar {
width: 100%;
height: 5px;
background-color: #A4A4A4;
}
If you are using javascript and jQuery, you can have a look at jQuery functions
hover, show, hide, text. At the end of all pages, there are good examples.
EDIT: You should rather use class="menubutton" and not id="menubutton".
After that, you can use script like
<script>
$( "div.menubutton" ).hover(
function() {
$( "#greybar" ).text( $( this ).text());
$( "#greybar" ).show();
}, function() {
$( "#greybar" ).hide();
$( "#greybar" ).text("");
}
);
</script>
EDIT 2:
add to greybar class position: fixed;
I have an image and rollover image. Using jQuery or CSS, I want to show/hide the rollover image when the onmousemove/onmouseout event happen on the parent div (containing the image).
How can I do it?
Edit: HTML posted below by request. Not relevant to the question, but as an FYI HTML is built on a 30 column fluid grid.
Upon hover of the top div (row-fluid) the image (image.png) should change to a different source image (imagehover.png).
<div class="row-fluid" style="padding-top:1em">
<div class="span4">
//Random content
</div>
<div class="span8 offset1">
//Random content
</div>
<div class="span9 offset3">
<ul>
<li>//Random content</li>
<li>//Random content</li>
<li>//Random content</li>
</ul>
</div>
<img src='../../images/image.png>
<div>
You want to do something like this: full_path_to_css parent:hover child
full_path_to_css parent:hover child {
styles for your item
}
eg:
html (the div.img can be anything):
<div class="parent">
<div class="img">
</div>
</div>
css:
div.parent {
width:200px;
height:200px;
background-color:red;
}
div.img {
width:100px;
height:100px;
background-color:blue;
}
div.parent:hover div.img {
background-color:green;
}
if you want to test check here: http://jsfiddle.net/NicosKaralis/kd6wy/
just to remember, the div with img class can be any element, doesn't need to be div and you can change the css styles as you wish, the only thing you need to watch is the parent:hover child
EDIT
Just to clarify one thing: the item with :hover is the parent on witch you want to detect the hover action, and the child is the item on witch you want to change the css rules
EDIT AGAIN
<div id="parent" class="row-fluid" style="padding-top:1em">
<div class="span4">
//Random content
</div>
<div class="span8 offset1">
//Random content
</div>
<div class="span9 offset3">
<ul>
<li>//Random content</li>
<li>//Random content</li>
<li>//Random content</li>
</ul>
</div>
<img class="child" src='../../images/image.png>
<div>
on your code you will need:
div#parent.row-fluid img.child {
display:none;
}
div#parent.row-fluid:hover img.child {
display:block;
}
this will make your image only show up if the mouse is over your div
Should just be as easy as attaching a mouseover and mouseout event handlers to the parent div and then manipulating the containing img element.
var rolloverImage = ...
var origImage = ...
$("#parentDivId")
.mouseover(function() {
$("#parentDivId img").attr("src", rolloverImage)
})
.mouseout(function() {
$("#parentDivId img").attr("src", origImage)
})
Try:
$('div.row-fluid').hover(function() {
$(this).find('img').attr('src', 'http://dummyimage.com/100x100/000/fff');
}, function() {
$(this).find('img').attr('src', 'http://www.placekitten.com/100/100');
});
jsFiddle example
Without having any html to test with, this is just something I thought up in my head. Not sure if it will work or not, but I don't see why it wouldn't.
$('div').mouseenter(function() {
var image = $('img', this);
$(image.attr('src', 'new-image-src.jpg');
}).mouseleave(function () {
var image = $('img', this);
$(image).attr('src', 'old-image-src.jpg');
});
You can use this code to "show/hide the rollover image"
#parentDiv > img {
display: none;
}
#parentDiv:hover > img {
display: block;
}
The > allows you to select img tags that are the direct descendents of #parentDiv (I gave the outer div that ID). Then we're just setting a different style for it on regular and hover states.
Answering my own question, as I used elements of others' comments and answers to create a hybrid: a sprite, totally CSS solution. I find this to be optimal.
Per #gilly3 "Image swaps are best done with a sprite, so that there is never any delay switching between the images. Put both versions of the image side by side in a single file. Set that image to be the background of a div, and adjust the background position to display one or the other image." For this example, I will use a 96px (height) by 27px (width) sprite, using my em values.
In HTML replace img line with:
<div class="sprite-image"></div>
CSS:
.sprite-image {
{
background-image: url(../../images/image.png);
height: 3.7em;
width: 27px;
}
.row-fluid:hover .sprite-image
{
background-position: 0px -3.7em;
}
I've been struggling with jQuery's sortable. I originally tried following Nettuts tutorial on sortable but found the column method of dashboard layout too constricting. I wanted to have double wide widgets for graphs, etc... So I have a fixed width parent widget div and don't use columns. The fixed width can fit 2 regular widgets, or 1 double wide widget. The widgets just wrap around nicely within the container and I want to just sortable the order the widgets are in.
The problem I'm having is sortable behaviour. I can drag and sort widgets, but the placeholder isn't in the correct location when the click and drag happens. If I grab the bottom widget handle and move it, the placeholder appears at the top and its the width of the widget container (#widgets) not as the widget itself. I can see with columns that the placeholder might get its width from the column, but in my case even the left/top position isn't correct. The placeholder is right at the top of the widget container.
Plus the animation always moves the widget to the top left of the widget container. Like it thinks that insert point, or previous location was the top left, not where its getting inserted or the previous location.
I know I'm missing something here. I've tried changing where the sortable method is attached but it doesn't change anything. Any help would be appreciated!
A chunk of the rendered HTML:
<div id="widgets" class="span9">
<div class="widget span8">
<div class="widget-head">
<h4>Demo Activity 1</h4>
</div>
<div class="widget-content">
<p>The content...</p>
</div>
<div class="widget-bottom"></div>
</div>
<div class="widget span4">
<div class="widget-head">
<h4>Demo Activity 2</h4>
</div>
<div class="widget-content">
<p>The content...</p>
</div>
<div class="widget-bottom"></div>
</div>
<div class="widget span4">
<div class="widget-head">
<h4>Demo Activity 3</h4>
</div>
<div class="widget-content">
<p>The content...</p>
</div>
<div class="widget-bottom"></div>
</div>
</div>
Basic placeholder css so I can actually see it:
.widget-placeholder {
border: 2px dashed #333;
}
A clip of the JS that sets up the sortable:
$sortableItems = $('> div', '#widgets');
$sortableItems.find('.widget-head').css({
cursor: 'move'
}).mousedown(function (e) {
$sortableItems.css({width:''});
$(this).parent().css({
width: $(this).parent().width() + 'px'
});
}).mouseup(function () {
if(!$(this).parent().hasClass('dragging')) {
$(this).parent().css({width:''});
} else {
$('#widgets').sortable('disable');
}
});
$('.widget').sortable({
items: $sortableItems,
connectWith: $('#widgets'),
handle: '.widget-head',
containment: $('#widgets'),
revert: 300,
delay: 100,
opacity: 0.8,
placeholder: 'widget-placeholder',
containment: 'document',
forcePlaceholderSize: true,
start: function (e,ui) {
$(ui.helper).addClass('dragging');
},
stop: function (e,ui) {
$(ui.item).css({width:''}).removeClass('dragging');
$('#widgets').sortable('enable');
}
});
Add float: left; to your placeholder class will place it under correct order in your sortable column.
.widget-placeholder {
border: 2px dashed #333;
float: left;
}