I have a requirement to create below component by CSS or Javascript.
I will receive an array like [{'label':'status1'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].
And it also support support the highlight red like below.
In this case, it will receive an array like [{'label':'status1', 'priority': 'high'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].
It also support the click and hover event like below.
Actually I mainly does not understand how to implement the shape like below small one.
Here, The solution only for shape and hover effects.
Fiddle
<ul class="status">
<li><span>#</span>Status 1</li>
<li><span>#</span>Status 2</li>
<li><span>#</span>Status 3</li>
<li><span>#</span>Status 4</li>
<li><span>#</span>Status 5</li>
<li><span>#</span>Status 6</li>
</ul>
To create boxes with arraows there are a couple of solutions: SVG, CSS3 or image (the worst). See above comments for CC3 examples.
Using the :hover in CSS , it is possible to make it change color in CSS.
To make it select-able, add a click event listener on each box that changes the component state. Use that state in the render to add or not a class like .selected. Then again in CSS give this class some other colors
Here's another solution for that shape using pseudo element, position and transform.
.container {
font-size: 0;
}
.box {
position: relative;
font-size: 13px;
display: inline-flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 75px;
width: 100px;
border: 3px solid black;
background: white;
}
.box:not(:last-of-type) {
border-right: none;
}
.box:not(:last-of-type):after {
content: '';
background: inherit;
height: 8px;
width: 8px;
position: absolute;
left: 101%;
top: 50%;
z-index: 1;
border-top: 3px solid black;
border-right: 3px solid black;
transform: rotateZ(45deg) translate(-50%);
}
<div class="container">
<div class="box">
<span>#</span>
<span>Status 1</span>
</div>
<div class="box">
<span>#</span>
<span>Status 2</span>
</div>
<div class="box">
<span>#</span>
<span>Status 3</span>
</div>
</div>
Related
I am trying to show the .right-text1 element (which is inside .right-container div) when the mouse hovers over .project1 element (which is inside .left-container div). However, I am unable to code it with CSS since selectors work only inside the current parent div.
I have the following code:
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
}
/* This is where I try to show RIGHT-TEXT1 upon hovering on PROJECT1 div,
but the selector does not work due to trying to access .right-text1 but it is outside the current DIV */
.project1:hover~.right-text1 {
display: none;
}
<div class="left-container">
<ul>
<div class="project1">
<li>Project 1</li>
</div>
<div class="project2">
<li>Project 2</li>
</div>
<div class="project3">
<li>Project 3</li>
</div>
<div class="project4">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;">
Information about Project 4
</div>
</div>
It is imperative to keep the format, where the two containers reside next to each other and 25% and 74% width stays.
It might be super easy, but I am learning CSS for a week now and this stumbled me.
Any help would be greatly appreciated.
As explaned in the comments, you'll need JS for that.
Here a sample that adds a class on mouse enter, and remove it on mouse leave, mimicking the hover effect.
document.querySelectorAll('[data-project]').forEach(project => {
const name = project.dataset.project
const infoElement = document.querySelector(`[data-project-info="${name}"]`)
// Mouse enter
project.addEventListener('mouseenter', () => {
infoElement.classList.add('is-hovered')
})
// Mouse leave
project.addEventListener('mouseleave', () => {
infoElement.classList.remove('is-hovered')
})
})
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
display: none;
}
.right-text1.is-hovered,
.right-text2.is-hovered,
.right-text3.is-hovered,
.right-text4.is-hovered {
display: block;
}
<div class="left-container">
<ul>
<div class="project1" data-project="1">
<li>Project 1</li>
</div>
<div class="project2" data-project="2">
<li>Project 2</li>
</div>
<div class="project3" data-project="3">
<li>Project 3</li>
</div>
<div class="project4" data-project="this-text-matches-here">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;" data-project-info="1">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;" data-project-info="2">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;" data-project-info="3">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;" data-project-info="this-text-matches-here">
Information about Project 4
</div>
</div>
In my web app I have a vertical CSS menu, to show it. My code works as expected, with one issue, when I mouse out on all a.menutoggle elements the last dropdown remains open.
I am not getting a clue on how to hide that? Please help!
$('.menutoggle').mouseover(function(event) {
$('.menucontainer').hide();
$(this).next('.menucontainer').toggle();
});
$('#menutoggle').mouseout(function() {
$('.menucontainer').hide();
});
#menuwrap {
padding: 50px;
}
.menutoggle {
display: block;
z-index: 99;
border: 1px solid red;
}
.menucontainer {
display: none;
position: absolute;
left: 150px;
top: 50px;
z-index: 999;
border: 1px solid blue;
background: #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="menuwrap">
Menu Toggle
<ul class="menucontainer">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Four</li>
<li>Five</li>
<li>Siz</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
I've created a fiddle here: https://jsfiddle.net/rz3g78h1/1/
The primary issue is because your #menutoggle selector on the mouseout event needs to use a class selector, not an id. Change it to .menutoggle.
However this raises another issue where the menu rapidly flickers as the mouse moves between the elements due to the use of mouseout. To fix this you can amend the logic to use CSS alone to show/hide the submenus, like this:
#menuwrap {
padding: 50px;
}
.menutoggle {
display: block;
z-index: 99;
border: 1px solid red;
}
.menucontainer {
display: none;
}
.menutoggle:hover + .menucontainer,
.menutoggle + .menucontainer:hover {
display: block;
position: absolute;
left: 150px;
top: 50px;
z-index: 999;
border: 1px solid blue;
background: #999;
}
<div id="menuwrap">
Menu Toggle
<ul class="menucontainer">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Four</li>
<li>Five</li>
<li>Siz</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
I'm using Slide of bootstrap jquery and css, It runs normal and no problem happens.
this is my source:
<div id="photos" class="tabcontent">
<div id="ninja-slider">
<div>
<div class="slider-inner">
<ul>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/car1.jpg"></a></li>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/ban-xe-honda-civic.jpg"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail3}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail4}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail5}"/>"></a></li>
</ul>
<div class="fs-icon" title="Expand/Close"></div>
</div>
</div>
</div>
this is my css:
#ninja-slider .ns-img {
background-color: rgba(0,0,0,0.3);
background-size: contain;
border-radius: 3px;
cursor: default;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
padding-top: 67%;
}
#ninja-slider .slider-inner {
width: 727px;
margin: -2px auto;
font-size: 0px;
position: relative;
box-sizing: border-box;
}
When I check and run on firebug on browsers, it seem auto generated some line at tag:
<ul style="overflow: hidden; padding-top: 50%; height: 0px;">
How Can I remove those lines auto generated or Can I change: padding-top:50% to padding-top:67%
Or any solution for me to fix the problem..
you can use !important for that.
<ul class="myul" style="overflow: hidden; padding-top: 50%; height: 0px;">
too override inline style you can do this
.myul {
padding-top: 67% !important;
}
or you can use javascript solution provide by #Renzo Calla
As #Terry said those inline styles might be added by the library, if you still want to overwrite them you can use the jquery css
$('#ninja-slider ul').removeAttr('style');
$('#ninja-slider ul').css("color","blue");
Based on this answer:
https://stackoverflow.com/a/38194916/2894798
In that case, I have to suggest you an easy and dirty way:
add in your css
#ninja-slider ul{
padding-top: 67%!important;
}
That will fix the problem.
If you will provide js in that page, i will provide an answer editing what is setting that css in ul element to padding-top:67% without overriding it.
I need a drop down menu for my asp.net website where I can have menu items as well as images. I need one like http://www.petcarerx.com/. If I keep mouse on any of menu item on blue bar ( Dogs, Cats, Other Pets, A drop down menu opens with menu items and some images. I want it to expand to full length horizontally. Please suggest me which control should I use?
Regards,
Asif Hameed
I have had good experiences with the Kendo UI menu by Telerik.
searching a little google, i stumbled upon this website:http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
have a great tutorial for a great kind of jquery drop down menu
I use Superfish for this purpose.Multilevel and Image supported when slightly customize it.
use telerik menu control...
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx
A quick example for you:
HTML:
<ul id="menu">
<li>Home</li>
<li>
about
<div class="submenu">
<div class="col1 border-right">
<ul>
<li>about link 1</li>
<li>about link 2</li>
<li>about link 3</li>
<li>about link 4</li>
</ul>
</div>
<div class="col2 border-right">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
<div class="col3">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
</div>
</li>
...
...
...
</ul>
jQuery:
$("ul#menu li").hover(function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})
CSS:
ul#menu {
width: 100%;
position: relative;
height: 30px;
background:#ccc;
border-bottom: 1px solid #666;
}
ul#menu li {
display: block;
float: left;
height: 30px;
line-height: 30px;
}
ul#menu li a { display: block; padding: 0 20px; }
.submenu {
position: absolute;
width: 100%;
left: 0px;
display: none;
border-bottom: 1px solid #ccc;
}
ul#menu li div.submenu ul li {
float: none;
}
.col1, .col2, .col3 {
width: 33%;
background: #f4f4f4;
float: left;
}
.col2, .col3 {
text-align: center;
}
.border-right { border-right:1px solid #ccc; }
DEMO
Disclaimer: I'm relatively new to jQuery and JavaScript. The openStatement() function below executes whenever it is determined that the #statementTab is not already open. If the code below isn't enough information, simply check out the source below.
Basically, the UL containing the various tabs flickers and disappears whenever the user opens the #statementTab. I'd like to fix this.
Source: http://www.cameronhermens.com/dbunkr/brochure.html
// The openStatement function opens the statement tab when the user clicks
<a id="openIt"> (if the statement tab isn't already open).
function openStatement() {
$('#explore').animate({width: '70%'}, '200');
$('#statementTab').animate({width: '213px'}, '1000');
};
// Here's the DIV.
<div id="explore" class="brochure">
<ul id="brochureTab">
<li><a href="welcome.html" >welcome</a></li>
<li>our mission</li>
<li>what is dBunkr</li>
</ul>
</div>
<div id="statementTab">
<a id="openIt">
<img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
<span class="statementBar">Statements</span>
</a>
</div>
The UL#brochureTab is being hidden during animation because as #explore is animating, the jQuery is applying a style of overflow: hidden to it. This style is then removed upon completion of the animation.
A quick solution (i.e. without addressing the way that you have styled the rest of your elements) would be to add the style overflow: visible !important; to #explore.
You have the ul#brochureTab outside the div#explore by using the CSS top: -45px;.
Whenever you animate the div#explore with jQuery .animate(), the ul#brochureTab gets "flashed" because the jQuery .animate() automatic switches to overflow:"hidden" while performing the animation.
The solution is to use a DIV to serve as a wrapper to the div#explore, and have it with the visual look you've got on the div#explore:
CSS
#wrapper {
background-color: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
box-shadow: 3px 3px 3px #CCCCCC;
float: left;
height: inherit;
padding: 5px;
}
THE MARKUP WOULD BE:
<div id="wrapper">
<div id="explorer">
<ul id="brochureTab">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div id="ui-tabs-3">...</div>
<div id="ui-tabs-10">...</div>
<div id="ui-tabs-12">...</div>
</div>
<div id="statementTab">...</div>
</div>
AND TO PREVENT THE FLASHING:
#brochureTab {
float: left;
left: 10px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
/* top: -45px; remove this line */
}
.ui-tabs-panel {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
float: left;
left: 30px;
margin: 0 auto 30px;
min-height: 410px;
padding: 10px;
position: relative;
/* top: -20px; remove this line */
width: 90%;
z-index: 1;
}
To your current animation method, no changes need to be made.
To your new CSS for the wrapper, may require some "tunning".