Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have drag and drop functionality on one of my sites. Once you start dragging one of my dragable divs, there is a transparent preview of the dragged element. This is actually in the way of my users placing the element accurately, as what they are dragging does not directly reflect what is dropped.
Is there a way to remove, or better yet, change the drag preview to a different image?
I believe you can use the SetDragImage function which is part of the Data Transfer API
The following link has some sample Javascript which attaches an event to the ondragstart event. Using the DataTransfer API you can then set the Drag Image of the event with any Image you want, even an invisible image.
.dragdemo {
width: 170px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 6px;
background: green; color: #efe;
}
<div id="drag-something" class="dragdemo" draggable="true">drag me</div>
<script>
document.getElementById("drag-something").addEventListener("dragstart", function(e) {
var crt = this.cloneNode(true);
crt.style.backgroundColor = "red";
crt.style.display = "none"; /* or visibility: hidden, or any of the above */
document.body.appendChild(crt);
e.dataTransfer.setDragImage(crt, 0, 0);
}, false);
</script>
http://www.kryogenix.org/code/browser/custom-drag-image.html
Hope this helps
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed last month.
im new to the whole Angular/Web Development world. I am currently trying to improve my HTML/CSS skills and ran into a problem I couldnt solve myself.
I am using Bootstrap in my angular project and implemented the cards component.
the card for my usecase](https://i.stack.imgur.com/yOj9R.png)
I added hover effects with css and made the whole card clickable, now I want to implement a frame/border after the card get clicked (as shown in the image).
Does anyone knows a way to do this ?
Best Regards
tschanni
.....................................................................................................
your question doesn’t contain any example of your code but you could do something like adding an onclick or add an event listener to toggle a “clicked” class with the desired border: i.e.
<div class="card" onclick="this.classList.toggle('clicked')">card</div>
With CSS
.card {width: 50px; height: 100px;}
.clicked {border: 1px solid red;}
an example
You can do it in simple and code-readable way, for example add this CSS:
.card.selected {
border: 2px solid blue;
}
And JavaScript click event:
const card = document.querySelector('.card');
card.addEventListener('click', function() {
this.classList.toggle('selected');
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have several pictures of the same button, each one representing it in a different sate: normal, pressed, focused, disabled.
How can I make it into an html button that automatically shows the correct picture (and also has an onClick event) ?
Feel free to use html / css / javascript.
The tag also doesn't need to be a button, it could be an image, , or whatever you want, but hopefully written in a generic enough way for others to use your solution too
Thanks!
Just add a class to a link:
<a href="#" class='styledbutton'>Buttontext</a>
... and some CSS:
.styledbutton {background: url(defaultstate.png); display: inline-block;}
.styledbutton:hover {background: url(hoverstate.png);}
.styledbutton:focus {background: url(focusstate.png);}
You can make use of the CSS pseudo-selectors :hover and :focus to change the state of a button at various different interaction points, and simply tie a function into the onclick event in order to run additional JavaScript if required:
function buttonClick() {
console.log('Button clicked');
}
button { /* Default state */
background: white;
}
button:hover { /* On hover */
background: red;
}
button:focus { /* After a click */
background: blue;
}
<button onclick="buttonClick()">Button</button>
Keep in mind that this can also be done with an image by simply passing the image's path into background-image as a url() value.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My goal is to display text on a screen as a user types it, with an underscore cursor showing after the text. The best way I can describe what I'm trying to do is a similar look to using the command line.
What is the best way to do this? I haven't been able to get it to work using a simple text input with css.
Here's something to get you started with jQuery.
$('input').on('input', function(e){
$('div').empty().text($(this).val());
});
Edit: blinking underscore can be done with CSS
div:after{
content:"_";
opacity:0;
animation:blink .500s linear infinite;
}
#keyframes blink{
from{opacity:0;}
to{opacity:1;}
}
The best way? Read the content on every keyup and then inject it into a destination container to show it to the user. Easy.
Check this: http://jsfiddle.net/VDd6C/8/
Show us your code. We'll help.
A basic one, try this (tested in Chrome and FF)
Play it here
HTML
<div>
<span contenteditable="true">Enter your input: </span><span class="blink">_</span>
</div>
JavaScript
window.setInterval(function(){
$('.blink').toggle();
}, 450);
CSS
body {
background-color: black;
color:white;
font-size: 15px;
font-weight:bold;
font-family: courier;
}
span {
border: none;
}
div {
max-width: 200px;
}
div:focus, span:focus{
outline: 0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Is it possible to make the trimmed borders by "border-radius" unclickable, and also not detecting you are hovering over it?
One way is to make the wrapping div and a tags also have a border radius...
.blackground > div, .blackground > div a {
border-radius: 100%;
}
.blackground > div a {
display:block;
}
The trick is to make the <a> tag the one whose size changes, because that's the element that determines the click area.
So you can do
.backgroud > div > a {
display: inline-block;
border-radius: 100%;
overflow: hidden;
}
Then remove the border radius (if you want) on the actual image.