I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}
Related
I have a hard time figuring out how b-table adds the thick border when you click on a b-table row, when the b-table has selectable on.
//someidea component
<template>
<b-table striped hover
:items="ideas"
:fields="ideaFields"
#row-clicked="markRead" //this turns on selectable by default.
ref="table">
</b-table>
</template>
<script>
export default {
name: 'someidea',
data()
{
return {
ideas: [{
title: 'Some idea',
description: 'Some description',
_rowVariant: 'warning',
}],
ideaFields: [
{
key: 'title',
sortable: false,
},
{
key: 'description',
sortable: false,
}
],
}
},
mounted()
{
},
methods: {
markRead(record, data, datax)
{
record._rowVariant = '';
},
},
}
</script>
Before clicking
After clicking
Now when you click on the row, it does empty the _rowVariant, changing it from yellow bg to white bg as expected. The problem that the row gets a thick border for getting focus(dont know if it really is focus but cannot describe it any better). I've checked in the inspector in both chrome and firefox(both recently updated) and I do not see any change in the focussed row, but it does get the border so im not sure how they applied it.
One important sidenote based on b-table documentation(first example table):
b-table supports programmatically selecting and de-selecting the selected row. This does sadly not apply to my situation. The clicked row is not really selected, more like focussed. If you click twice on the row in the documentation(again first table), you see that it becomes deselected but still has the border.
Ive tried this too(without success):
tr:focus {
border: none !important;
}
I hope anyone can help me out with this because even though having an ugly border is not the end of the world, it bugs me I cannot find how this style is being applied.
Thanks in advance.
Solution
Change border to outline like this:
tr:focus {
outline: none;
}
You can also do this:
tr:focus {
outline: 0;
}
The outline property is used by :focus styles by default. The purpose of outline is to make the element stand out. outline is drawn around the border.
The difference between outline & border
Outlines are not a part of the box model.
Outlines do not change the size or position of the element.
Outlines cant set each edge to a different width, or set different
colours and styles for each edge. An outline is the same on all sides
(All sides must be uniform in colour, width and style).
Outlines do not take up space they are placed on top of the element
(outlines do not interfear with the element itself or other elements
around them).
Outlines can not be circular.
I have a div with an overflow hidden property, and I want the scroll position to be at the bottom when my page loads.
I have this :
I want this when I load my page :
Any idea ?
This Can Be Easily Done By This Method....
function setItem(){
// We go through all items and change the value of the id attribute to empty
$('#mylist li').each(function (i, v) {
$(v).attr('id', '');
});
// We add the items
$('#mylist').append('<li id="last">test</li>');
// Currently there is only one identifier called "last"
window.location.href = '#last';
}
#mylist{
overflow-y: scroll;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="setItem();">Add</button>
<div id="mylist"></div>
Just create new li and modify it's id to last and hrefing the document to last.
Then remove id attribute from all li.
Here li are messages.
I think you should look into JS method scrollIntoView. It might be what you're looking for.
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I am using JQueryUI draggable and I would like to be able to add styling to the draggable element while it is being dragged. I have tried variations on this code:
$(".ui-widget-content").draggable({
drag: function(event, ui) {
$(this).css("width", "50px");
});
However, my attempts have failed and I believe it it because I don't know how to get the draggable element from the ui object. What am I missing?
No need for extra JavaScript. Just use this CSS selector:
.ui-draggable-dragging {
/*
This class is applied to the element while it is being dragged.
This is done automatically by jQueryUI.
*/
width: 50px;
}
Read the docs here: http://jqueryui.com/demos/draggable/#overview-main
I have a HTML unsorted list which I capture its “on click” event. When a list item is clicked on I want to change that items font setting to bold so that the user gets a visual indicator that it’s been selected. Is this possible?
<li onclick="this.style.fontWeight= 'bold'">
Or do you want to change it back to regular when another li is clicked? I think you should use jQuery then (it's possible in regular javascript but this is just so much easier)
$('li').click(function () {
$(this).siblings('li').css("fontWeight", "normal");
$(this).css("fontWeight", "bold");
});
Or even easier, just add a class:
CSS: .selected { font-weight: bold }
jQuery:
$('li').click(function () {
$('li.selected').removeClass('selected');
$(this).addClass('selected');
});