I am using ddlevelsmenu.js from dynamic drive to display menu items on mouseover. everything works fine. just i have one very long list which appears little bit odd. Can i split the list items into different columns?
Below are my HTML codes followed by CSS codes:
<ul>
<li>Indian States</li>
</ul>
The above codes will trigger the below list items on mouseover
<ul id="stts" class="submenustyle">
<li>Andhra Pradesh</li>
<li>Arunachal Pradesh</li>
<li>Assam</li>
<li>Bihar</li>
<li>Chattisgarh</li>
<li>Goa</li>
<li>Gujarat</li>
<li>Haryana</li>
<li>Himachal pradesh</li>
<li>Jammu Kashmir</li>
<li>Jharkhand</li>
<li>Karnataka</li>
<li>Kerala</li>
<li>Madhya Pradesh</li>
<li>Maharashtra</li>
<li>Manipur</li>
<li>Meghalaya</li>
<li>Mizoram</li>
<li>Nagaland</li>
<li>Odisha</li>
<li>Punjab</li>
<li>Rajasthan</li>
<li>Srinagar</li>
<li>Sikkim</li>
<li>Tamil Nadu</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
<li>Uttaranchal</li>
<li>West Bengal</li>
</ul>
Below are the css codes
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 1.2vw;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 180px; /*width of menu (not including side paddings)*/
color: white;
background-color:#999999;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
.ddsubmenustyle li a:hover{
background-color:#333333;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 180px; /*width of menu (include side paddings of LI A*/
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
have you tried setting widths on the li?
ul{
width:800px;
}
li{
width: 40%;
display: inline-block;
}
this was already answered here: How to display an unordered list in two columns? by Gabriel. Following css should resolve your issue:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
I have created jsfiddle to test it and it works nicely. Have a look http://jsfiddle.net/tralala/jg0zycfw/1/.
Related
I am not getting the on-hover dates but it is rendered to the page on inspecting I suspect it may be due to the responsive problem of CSS, or class breakage. How to resolve?
CSS code:
/* Adding for slick tool tip on hover */
.hover_slick {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.hover_slick .hover_slicktext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
/* font-size: 15px; */
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
/* position: absolute; */
margin-top: -20px;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.hover_slick:hover .hover_slicktext {
visibility: visible;
}
JS code
function slider_config() {
// Array conversion from the doc element
var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
// console.log(dateList);
// Loop through its value and index since it is array
dateList.forEach((value,index)=>{
$("#hover_slicktext"+index).html(value);
});
DIV
div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center></div>";
This is due to the relative position of the hover. Reducing the relative position and reducing the font size will solve the issue.
.hover_slick {
/* position: relative; */
display: inline-block;
/* border-bottom: 1px dotted black; */
}
.hover_slick .hover_slicktext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
font-size: 20px;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
/* position: absolute; */
margin-top: -20px;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
#I edit the question:#
I have attached the html:
<div class="mainDiv">
<ul id="myUL">
<li id="li-1" class="myLI"></li>
<li id="li-2" class="myLI"></li>
<li id="li-2.1" class="myLI"></li>
<li id="li-2.2" class="myLI"></li>
</ul>
</div>
My UL is formatted dynamically, based on what comes back from the DB.
#-------------------------#
I have a UL, in which all the LIs within it are linked by an arrow.
In addition, I have LIs that consist of several LIs that are their subcategory, and when clicked on, the LIs subcategory - will go from dispaly: none mode, to display: inline-block mode.
My problem is when I have an LI that consists of several LIs, but is located at the end of the UL.
According to my CSS, after this LI, an arrow will appear, because basically, there is another LI in UL, it is just doesn't appear...
I have attached a picture that illustrates this.
As long as the LI that contains some LI is in the middle of the UL- everything is fine (like example A).
Once it's at the end of the UL (as in example B), I have an "unnecessary" arrow, which I would like not to show now, but only when my all LI are in display: inline-block.
I also attached my CSS.
ul#myUL {
list-style: none;
margin:auto;
}
li.myLI {
display:inline-block;
xpadding: 10px 25px;
xborder: 1px solid black;
margin: 0 25px;
position: relative;
}
li.myLI:not(:last-child):after {
content: '';
height: 1px;
background: black;
width: 50px;
position: absolute;
right: -50px;
top: 50%;
}
li.myLI:not(:last-child):before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
border-style: solid;
border-width: 7px 0 7px 20px;
border-color: transparent transparent transparent black;
right: -50px;
transform: translateY(-50%);
}
div.mainDiv {
display:flex;
width:60%;
margin: auto;
border: 3px solid #73AD21;
}
I will really appreciate your help to resolve this.
Thanks!
I am trying to distribute elements with equal spacing in between while keeping the first and last items left- and right-aligned.
I believe flex-based layouts have an easy solution for it but I want to support older browsers, too.
I have already made a JS-based solution which I will be posting but feel free to suggest better solutions & if it's possible via only CSS.
Here is a fiddle.
ul {
position: relative;
margin: 0;
font-size: 0;
padding: 0;
display: table;
width: 100%;
list-style: none;
}
ul:after {
content: '';
display: block;
position: absolute;
top: 50%;
background: #000;
left: 0;
height: 1px;
width: 100%;
z-index: -1;
}
li {
display: table-cell;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
span {
font-family: sans-serif;
display: inline-block;
font-size: 15px;
line-height: 1em;
color: #fff;
background: #000;
padding: 6px 9.34px;
border-radius: 999px;
}
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
Here's a flex-based solution for people finding this post via search.
See below for browser support data.
ul {
display: flex;
justify-content: space-between;
position: relative;
margin: 0;
font-size: 0;
padding: 0;
list-style: none;
}
ul:after {
content: '';
position: absolute;
width: 100%;
top: 50%;
background-color: #000;
height: 1px;
z-index: -1;
}
span {
font-family: sans-serif;
display: inline-block;
font-size: 15px;
line-height: 1em;
color: #fff;
background: #000;
padding: 6px 9.34px;
border-radius: 50%;
}
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
CSS
div {
width: 500px;
background-color: black;
font-size: 0;
}
span {
color: black;
width: 20px;
height: 20px;
display: inline-block;
background-color: red;
font-size: 15px;
margin: 0 calc( ( 500px - 8 * 20px ) / ( 8 + ( 8 - 2 ) ) ); // 8 -> count of elements
}
span:first-child {
margin-left: 0;
}
span:last-child {
margin-right: 0;
}
HTML
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
https://codepen.io/N11/pen/MvzeGM
I have used a javascript based solution which does this:
Counts the number of items (5)
Excludes first and last item (5-2=3)
Counts them (3) as double (3*2=6)
Adds the first & last back (6+2=8)
Now gets a percentage division (100/8=12.5%)
Then gives that percentage based amount of total width to first and last element & rest get twice (12.5*2=25%) of that.
[1 = 12.5%] [2 = 25%] [3 = 25%] [4 = 25%] [5 = 12.5%] = 100%
You can view the fiddle here.
<div class="wrap">
<ul class="js-equal-dist">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
CSS
.wrap{
padding: 0 14px;
}
ul {
position: relative;
margin: 0;
font-size: 0;
padding: 0;
display: table;
width: 100%;
list-style: none;
}
ul:after {
content: '';
display: block;
position: absolute;
top: 50%;
background: #000;
left: 0;
height: 1px;
width: 100%;
z-index: -1;
}
li {
display: table-cell;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
li:first-child span {
transform: translateX(-50%);
}
li:last-child span {
transform: translateX(50%);
}
span {
font-family: sans-serif;
display: inline-block;
font-size: 15px;
line-height: 1em;
color: #fff;
background: #000;
padding: 6px 9.34px;
border-radius: 999px;
}
JS
// js-equal-dist
var totalWidth = $('.js-equal-dist').outerWidth();
var itemsLength = $('.js-equal-dist li').length;
var percUnit = 100 / (((itemsLength - 2) * 2) + 2);
percUnit = percUnit / 100 * totalWidth;
$('.js-equal-dist li:not(:first-child):not(:last-child)').width(percUnit * 2);
$('.js-equal-dist li:first-child(), .js-equal-dist li:last-Child()').width(percUnit);
Note that I had to add a wrap div with padding that of half of element & translated first and last element to offset 50% in order to truly be center.
Before I put the html and css, I am having 2 problems, please keep in my that I am almost a complete amateur at html and css, and have no idea what the javascript means.
Problems:
My 1st problem is that the content sider, doesnt slide far enough to the next content, but instead when clicking the button only brings the content over halfway (you will see what I mean when you paste the html and css into a page).
My second problem is that the buttons are meant to be horizontal with eachother, and I also want to add more in the future
so if someone could tell me how to do that in elaboration with the javascript problem that would be great!
here is the working demo jsfiddle please check-out
Working code
Thank-you in Advance..!!
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 1250px;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 100px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>
The main areas to update;
1) your "#contentContainer". This is basically the window of your slider. The height and width need to be updated to match the slider items.
2) the "data-pos" values of your list items. This should be the same as their width * their index starting at 0 and negative.
3) the list container is too narrow. make it as wide as your #contentContainer.
CSS Changes:
#contentContainer {
width: 1250px;
height: 600px;
}
#navLinks {
width:1250px;
}
#navLinks ul li {
width:80px;
}
HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>
https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/
I assume that the CSS posted in the bottom of your question is the content of the main.css file. As matt points out in the comments, experiment with changing the sizes of the divs. Particularly the #wrapper, which is specified by it's ID using tha hash tag (#):
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
And referenced in the javascript here:
var wrapper = document.querySelector("#wrapper");
where it is assigned to the variable wrapper. It is 5000 pixels wide. The typical desktop web screen is around 1200 - 1700 pixels wide, I believe, for reference. This is about the size you want the .content, referenced by class using a . and what holds each displayed "slide" to be - keeping in mind that a responsive site that displays properly on phones and other mobile devices would need to have variations on the size using #media queries.
So I would add visible css borders where applicable (for development and to be removed later) and change around the numerical variables (data-pos, #wrapper and .container sizes) to find the optimal solution. As mentioned above, jsfiddle is a great resource, whether or not you're needing to share publicly.
For the navlinks, which should be displayed in a row, try the following CSS on the div that holds the list (<ul>):
#navLinks {
text-align: center;
width: 90.5%;
border:1px solid white;
}
The border:1px solid white; will help you to see where the div is. Then experiment with a smaller padding size in #navLinks ul li to be sure you have room on the page to display horizontally.
I believe the last step is to adjust the <li class="itemLinks" data-pos="0px"></li>, where the data-pos attributes are just holding information for the javascript to use in the changePosition function, which is the last few lines of the javascript.
eloquentjavascript.net is a wonderful, free source to learn all of this.
<!DOCTYPE html>
<html>
<head>
<title>Dinosaurs 4 Kids!</title>
<style>
#wrapper {
width: 98%;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 100%;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
background-position: center;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 20px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
</script>
</body>
</html>
I am new to web development and needed to provide navigating to images with left and right arrows. I need the arrows to fade in when the mouse is hovered over the image and fade out when moved out of the image. I can see the arrows fade in but not fade out. Somewhere near the image tip I see a small flicker but not really the fadeout and fade in as I hover in and out of the images. I tried to change the opacity to 1 and 0 as suggested by related articles in stackoverflow but it doesnt seem to work. Can someone please tell me where I am going wrong?Any help is appreciated?
Here is a sample html:
<div id="centralcontent">
<div id="slideshow">
<ul id="nav">
<li id="prev"></li>
<li id="next"></li>
</ul>
<div id="slides">
<img src="images/nature/imageone.jpg" width="1200" height="750">
</div>
</div>
</div>
The CSS is :
#centralcontent
{
padding-top:40px;
}
#slideshow {
width:1200px;
height:750px;
padding: 15px 0 0 12px;
margin: 0 auto;
position: relative;
z-index: 5;
margin-bottom:0px;
}
#slideshow ul#nav
{
display: none;
list-style: none;
position: relative;
top: 300px;
z-index: 10;
}
#slideshow ul#nav li#prev
{
float: left;
margin: 0 0 0 20px;
}
#slideshow ul#nav li#next
{
float: right;
margin: 0 50px 0 0;
}
#slideshow ul#nav li a
{
display: block;
width: 80px;
height: 80px;
}
#slideshow ul#nav li#prev a {
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 40px solid gray;
width: 0;
height: 0;
}
#slideshow ul#nav li#next a {
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid gray;
width: 0;
height: 0;
}
#slides {
margin: 0 0 20px 0;
}
My javascript is :
$(document).ready(function() {
$("#slideshow").hover(function() {
$("ul#nav").fadeIn("slow");
},function() {
$("ul#nav").fadeOut("slow");
});
});
You code seems to work for me here: JS Fiddle
However, I would recommend using a CSS only approach. Instead of giving the arrows display: none;, give them an opacity of zero and transition that to full opacity when the wrap is hovered:
CSS Only Approach - JS Fiddle
ul#nav {
opacity: 0;
transition: 1s;
}
#slideshow:hover ul#nav {
opacity: 1;
}