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');
});
Related
Apologies about the vague question in the title, but I've been learning how to build and style dashboard's in plotly dash using CSS for several months now and I've always struggled when trying to style dropdown menus. That is until I tried to replicate this dashboard using this code because I liked how the dropdown looked:
It appears that the code that controls this is in the custom-styles.css file and looks like:
.Select-menu-outer {
background-color: #2f3445;
border: 1px solid gray;
}
.Select div {
background-color: #2f3445;
}
.Select-menu-outer div:hover {
background-color: rgba(255, 255, 255, 0.01);
}
.Select-value-label {
color: #a5b1cd !important;
}
But neither '.Select-menu-other', '.Select div' or '.Select-value-label' appear in the python files as a className (or at all for that matter), so I'm a bit confused because I thought in CSS the dot notation was used to create a class that would then have to be called from Python but it's as if these are pre-assigned classes.
So my questions are:
What are these classes? Are they pre-assigned and in what language? Is there any documentation on them?
Are there any other classes of this type that can used to control the styling of Radio Items, Sliders or Date Range Pickers etc?
If I'm following somebody else's code how do I know if they're using a pre assigned class or a class that needs to be called explicitly
It looks like they might be something to do with Javascript but I couldn't find any documentation on them but I could be wrong so any help would be appreciated.
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
This question already has answers here:
Animate element transform rotate
(7 answers)
Closed 8 years ago.
What is wrong with this Code?
$("button").click(function(){
var div=$("#oarm2");
div.animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow");
});
When I press the button, an div Element should be go down in the Page and change the Form.
The "marginTop" is functionally, but the transform skew not..
What is wrong? How I must write this?
Check this Demo Fiddle
Js
$("#go").click(function(){
$("#oarm2").animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow"); });
HTML
<button id="go">» Run</button>
<div id="oarm2">Hello!</div>
CSS
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
Here I include jquery library file jquery-1.8.3.js
I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.
I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.
I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.
From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.
My CSS so far looks like this
.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.
.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.
However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.
Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png
URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2
Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.
I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.
update
Updated the code so it uses your images.
HTML
<a class="play_pause">PLAY</a>
CSS
.play_pause {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing {
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}
And the JS:
$(document).ready(function() {
$(".play_pause").click(function() {
$(this).toggleClass('playing');
});
});
JsFiddle example
If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})
But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:
document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.
The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.
MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.
That is simple where have you read?
jQuery('.testclass .stratus').click(function{
jQuery(this).toggleClass('played');
})
css:
.played{
background-position: -1px -29px;
}
Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.
var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
e.addEventListener('click', function () { // this fn generates the listener
var pause = false; // captured in scope, not global
return function () { // this is the actual listener
this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
}
}(), false); // the () invokes the generator
I have an ASP page that has 5 ASP ImageButtons. The images can be clicked and then a few things happen in the code behind. I also want the images to be outlined with a border when the user clicks it so they know that one has been selected. I am using javascript to accomplish the outline with a border. But my problem is that the border applies then the page refreshed and the border is gone. I know that the Imagebuttons are causing a post back, but how can I keep my ImageButtons outline after the postback?
Javascript:
<script language="JavaScript" type="text/javascript">
function chnageborder(imageid)
{
document.getElementById(imageid).style.border = "solid 2px #2F74D0";
}
</script>
ASP Imagebutton:
<asp:ImageButton
ID="Image1" runat="server"
style="width: 48px; height: 48px; margin-right: 5px;" OnClick="Image1_Click" OnClientClick="javascript:chnageborder('Image1'); return true;"/>
You have to handle that in the server side. Basically the style can be applied in the postback of the particular image button click event.
void Image1_Click()
{
Image1.Styles.Add("border" , "solid 2px #2F74D0");
//And you need to revert the styles of the other buttons if they already have the selected style
Image2.Style["border"] = "";
.
.
Image5.Style["border"] = "";
}
Or if you want to do it in a more cleaner way, you can adopt one css class and apply that class in the code behind as one answer suggest below. You might need another css class to have the un-selected style and apply that same as above to make them look normal.
Define your border within a class selector in CSS, then apply that class to your image in the code-behind on PostBack.
CSS
.selected { border: 2px solid #2F74D0};
C#
Image1.CssClass = "selected";
It's worth noting that this is a basic example and will overwrite any existing classes. If you want to add to the class collection, this answer provides a solution.
Try this
void Image1_Click()
{
Image1.Attributes.Add("Style" , "Border:solid 2px #2F74D0");
}