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 a shape which consists of 3 components:
* ***************************** *
*** * * ***
***** * * *****
******* ***************************** *******
As shown in the diagram above, the shape consists of a rectangle surrounded by two triangles (one on the left side and one on the right).
I would like the entire shape to change to the same colour whenever the user hovers over any one of its components.
I've tried using various methods to accomplish this task but without much success.
Here's what I currently have on JSFiddle.
The shape is kind of off, however my main concern is how to get the hover feature working for my object.
Even though I tried implementing JavaScript in the fiddle above, I will accept any other alternative methods that will get my code working.
I've done it like here:
<div class="container">
... your code
</div>
.container:hover .tabStyle{
background : #000;
border-color: #000;
}
.container:hover .slopeLeft, .container:hover .slopeRight{
border-bottom-color: #000;
}
where .container is parent element for your div's
JSFiddle: http://jsfiddle.net/svzrkdu6/12/
It is achievable using pure CSS. Modify your code line:
/* Just for an example */
.child {
height: 20px;
border: 1px solid black;
}
/* Your solution */
.parent:hover .child {
background-color: red;
}
<div class="parent">
<div class="child first">A</div>
<div class="child second">B</div>
<div class="child third">C</div>
</div>
First off, your JSFiddle was not displaying the .slopeRight, I added the following html:
.slopeRight {
border-bottom: 100px solid #D8D8D8;
border-right: 50px solid transparent;
position: absolute;
top: 10px;
left: 255px;
}
I then surrounded all the rectangle components under one div called .wrap, and added the following css:
.wrap:hover .tabStyle {
backGround: red;
border-color: red;
}
.wrap:hover .slopeLeft {
border-color: transparent red red transparent ;
}
.wrap:hover .slopeRight {
border-bottom: 100px solid red;
border-right: 50px solid transparent;
}
Here's a working fiddle...http://jsfiddle.net/svzrkdu6/10/
Moreover, are you sure you want 3 components to your shape? Because if not, you may create a trapezoid instead, which is much more concise...check out this fiddle
http://jsfiddle.net/383rksx6/1/
Related
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 5 years ago.
Improve this question
This is my first time asking a question on this platform so I'm no virgin anymore.
As you can see in the image:
I want the green triangle on each side to be responsive so they always cross each other in the middle no matter the size of the screen.
I came up with making a square rotating it and giving it a height: 100%; and width 100%vh so the block has the same height and width. But this didn't work I also tried a couple of other things but none of them seemed to work.
I hope that one of you guys can point me in the right direction. (Maybe using javascript and css combined)
Remember to post your code, so we have something to work from.
That said, heres how I would make your design: JSFiddle
HTML:
<div class="image--triangles"></div>
CSS:
.image--triangles {
background-image:url('http://via.placeholder.com/1500x1500');
background-size: cover;
background-position: center;
}
.image--triangles::before {
content: "";
display:block;
border: 50vh solid transparent;
border-left: 50vw solid green;
border-right: 50vw solid green;
}
EDIT:
To make the triangles start inside the container you can add a wrapper around, with same color as the border, and set a specified width for the image--triangles and centering it:
HTML:
<div class="image--triangles_wrap">
<div class="image--triangles"></div>
</div>
CSS:
.image--triangles_wrap {
background-color:green;
}
.image--triangles {
background-image:url('http://via.placeholder.com/1500x1500');
background-size: cover;
background-position: center;
width:80vw;
margin:0 auto;
}
.image--triangles::before {
content: "";
display:block;
border: 50vh solid transparent;
border-left: 40vw solid green;
border-right: 40vw solid green;
}
You can create that effect simply by using an SVG as a background:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2" height="2">
<g style="fill:rgb(89, 138, 132)">
<path d="M0 0L0 2L1 1Z" />
<path d="M2 0L2 2L1 1Z" />
</g>
</svg>
#container {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-image: url(/* svg */);
}
Detailed version: https://jsfiddle.net/DerekL/eo29ydtt/
Data URL version: https://jsfiddle.net/DerekL/68t0h9g5/
An SVG image works great because it is scalable and does not require new vw/wh units. It is also easy to understand and without border magics. The SVG image needs not be a separate file, it can be created on the go as in the fiddle or include a base64 dataURL of the file directly in the CSS. The appropriate dimension and offset are also calculated by the browser, which can be heavily optimized. Unlike the answer by rblarsen, this method can create any other arbitrary shapes and the ratio remains the same.
I am programming a web and i need to know when a Class was added.
I am using a JavaScript plugin and the plugin add a CSS Class in then deletes it and add it in other div (gallery). I need to know in every moment in which 'div' is this class.
Here you have an example of what I want to do
$('div').click(function() {
$(this).toggleClass('red');
});
if ($('div').hasClass("red")) {
$("div").addClass('border');
}
.box {
width: 250px;
height: 100px;
border: 1px #000 solid;
}
.red {
background: red;
}
.border {
border: 6px #000 solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
As you see in this example, I want to add the class border only when the class red was added, can not do it together with the class red because as i say in the real page I am using a JavaScript plugin.
Hi :) thanks four your Ideas.
As #T.J. Crowder writed Mutation Observer is a very good option for this question.
Hier a link with the Answer:
How to detect class changing by DOMAttrModified
How do you get a nice outline? This is similar to the question:
CSS/Javascript: How to draw minimal border around an inline element?
However, the accepted solution to that question results in jagged textboxes, as seen here:
http://jsfiddle.net/z9THQ/2/
/* p {
text-align: justify;
} */
.wrapped {
outline: 2px solid black;
box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
Even with justified text, the right edge is still jagged; it should look like a single line, like in the image below.
A pure CSS solution would be ideal, but if Javascript is necessary, that would be fine too.
A related symptom which a solution would ideally solve is the fact that the :hover attribute is not activated by the region in between two lines of text. Ideally, the whole section should feel like a text-area, only it is non-rectangular since it is inline with other text.
a outline box as below is needed:
The HTML code is:
<p>We <span>prefer questions that can be answered, not</span> just discussed.</p>
It is difficult to get the coordinate of the left-top point and right-bottom point of the outline box.
using:
outline: 2px red solid;
can only work in chrome, but failed in firefox. And also failed in chrome while the line-height of <p> is 300%.
Like so:
CSS:
p {
width: 220px;
}
span {
outline: 2px red solid;
}
So you have the span around what you want, just put outline on it and done. Pretty simple uh? :D
DEMO HERE
Note: As pointed out in the comments, this doesn't seem to work in Firefox. Looking into a solution now.
If you know how to use CSS3, use it. Else, please insert the following within your html page.
<style type="text/css">
span {
border: 5px solid red;
}
</style>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working on rebuilding my personal site and I have two elements which are floated side by side first at 80% and second at 20%.
http://codepen.io/anon/pen/xgask
SCSS
.container
width: 80%
margin: 0 auto
outline: 2px solid green
overflow: hidden /* Only used this here as a clearfix */
.text, .avatar
float: left
.text
width: 70%
outline: 1px solid red
.avatar
width: 25%
margin-left: 5%
outline: 1px solid blue
img
display: block
max-width: 100%
HTML
<div class="container">
<div class="text">
<p>Lots of text ...<p>
<p>Lots of text ...</p>
</div>
<div class="avatar">
<img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
</div>
</div>
On desktop sizes that is perfect. If the text in the first element is longer than the picture in the second the text does not wrap underneath which is what I want.
However, on mobile sizes I wish the text element to be full width and the picture to float right so the text wraps around.
With two separate elements as they are this is impossible, so is it appropriate to use javascript with something like enquire.js to react to the media query which then detaches the picture and places it at the beginning of the text element and have a style to float it right.
I know how to code it all, no problems there, just asking if it is appropriate to use a tiny bit of javascript to assist me getting the responsive layout I want?
With Responsive Web Design, there are many ways to accomplish the same thing; No one way is right.
Personally, I would try to work out a CSS-only solution or a solution that reorganizes my HTML markup to the best of my ability to reach the desired result. Only if I've exhausted all options in to making a CSS/Markup-only solution work would I turn to JavaScript.
In other words, yes, JavaScript is appropriate if it reaches your end result. However, if it's possible via Markup/CSS manipulation and no JavaScript, that is always the better choice.
If you don't mind putting the .avatar column first, you can get the exact results you want. Otherwise, I'd just hide and show with css, if it's just one image. Usually I avoid using jQuery unless it's absolutely necessary and after 3 years of responsive stuff, you get to know when to use it and when not to use it.
http://codepen.io/anon/pen/nfvmj
This is mobile first.
Put the .avatar before the .text in the html:
.container {
margin: 0 auto;
width:90%;
outline: 2px solid green;
overflow: hidden;
/* Only used this here as a clearfix */
}
.text {
outline: 1px solid red
}
.avatar {
float: right;
width: 50%;
margin:0 0 2% 2%;
}
.avatar img {
max-width: 100%
}
#media (min-width:600px) {
.text {
width: 70%;
float: left;
}
.avatar {
float: right
}
.container {
width: 80%;
}
.avatar {
width: 25%;
margin: 0 0 0 5%;
}
}