I'm trying find a way to implement dashed list ("–") in CKEDITOR.
Standart html only allows to use squares and circles.
Is there a way to be able to use dashed style for unordered list?
If you're not worried about supporting IE7 and older, you can use the :before pseudo selector to replicate bullet behaviour.
CSS:
ul.dashed li {
list-style: none;
}
ul.dashed li:before {
content: "- ";
}
HTML
<ul class="dashed">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Related
This question already has answers here:
Is it possible to change the order of list items using CSS3?
(3 answers)
Closed 8 months ago.
I have an unordered list like this -
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I would like the first item of the list be automatically moved to the last when the website is being browsed in tablet/mobile screen view, and automatically moved back to the top when changing back to desktop screen view, i.e. responsive. The output in tablet/mobile screen view should be like this -
<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 1</li>
</ul>
May I know it this can be achived by using JavaScript/CSS? Thank you.
Use order properties to achieve this
#media(max-width: 991px){ /*you can change width according to your requirement*/
ul {
display: flex;
flex-direction: column;
}
ul li:first-child {
order: 4;
}
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
I am using it in a drop down menu system. on mouse hover on a link the image of a parent div got switched and on mouse out it reverts the image. this variable I am using in html. Is there a way I can put this variable in my css sheet and call through an id or class?
In <li> tag you can see the mouseover and mouseout, I want to give an class ot id to call this variable.
This is my html
<div onmouseover="changeImage(fashionSrc)" onmouseout="changeImage(fashionSrc1)">
<h3>Casuals</h3>
</div>
<ul>
<li onmouseover="changeImage(fashionSrc2)" onmouseout="changeImage(fashionSrc1)">Menu 1</li>
<li onmouseover="changeImage(fashionSrc3)" onmouseout="changeImage(fashionSrc1)">Menu 2</li>
<li onmouseover="changeImage(fashionSrc4)" onmouseout="changeImage(fashionSrc1)">Menu 3</li>
<li onmouseover="changeImage(fashionSrc5)" onmouseout="changeImage(fashionSrc1)">Menu 4</li>
<li onmouseover="changeImage(fashionSrc6)" onmouseout="changeImage(fashionSrc1)">Menu 5</li>
<li onmouseover="changeImage(fashionSrc7)" onmouseout="changeImage(fashionSrc1)">Menu 6</li>
</ul>
onMouseOver = "this.src="../your_path/image1.png"; //or anything else
onMouseOut = "this.src="../your_path/image2.png"; //or anything else
Consider unobstrusive javascript, link 1 link 2
Is there a way I can put this variable in my css sheet and call
through an id or class?
No afaik. What you can do is modify the element's class and define those in your CSS. You should use the :hover pseudo-class instead of JS tricks in this case anyway.
Here is the simple way to create a menu with drop-down. try this.
HTML like this.
<div class="drop-down">
<h2></h2>
<ul>
<li>Menu 1</li>
...
</ul>
</div>
Style like this.
.drop-down {
position:relative;
height:40px;
}
.drop-down h2 {
... //Some style for heading
}
.drop-down ul{
display:none;
position:absolute;
top:40px; // Equal to drop-down height;
left:0;
}
//Display the submenu, when hover
.drop-down:hover ul {
display:block;
}
This question already has answers here:
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
(16 answers)
Closed 9 years ago.
it is possible to open drop down list without mouse click and using pure JavaScript ?
This is assuming you mean a dropdown nav menu, not a <select>.
<ul>
<li><a>hover here</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
</ul>
css:
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
Live demo here (click).
Sorry, but is not possible. Best thing you could get is select a option from the list.
I am using css3 columns to display an unordered list in 3 columns. The list items contain lists as well that can be shown or hidden by clicking on the title using jQuery.
The html looks like (with class names to describe the layout and interactions):
<ul class="i-display-in-3-columns">
<li>
<h3 class="slide-toggle-sibling-list-on-click">column title 1</h3>
<ul class="i-am-initially-hidden">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>
<h3 class="slide-toggle-sibling-list-on-click">column title 2.</h3>
<p>This can be very long with perhaps an additional paragraph as well.</p>
<ul class="i-am-initially-hidden">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
/* some more items */
</ul>
This works, but every time a sub-list is opened or closed, the columns get redrawn.
I would like to freeze the columns after they have initially been drawn to avoid this reflow so that every item stays in the column it is initially drawn in.
I can of course write a masonry-like solution in javascript to convert my list in 3 lists that are displayed next to each other, but I was hoping that there was an easier solution, preferably in just css or in javascript that keeps my list as a list.
Is that possible or would I just have to rewrite the DOM?
I don't think you can achieve that with CSS columns. There is the option to toggle visibility instead of display of the child lists, but I'm assuming you don't want that.
Another possible CSS solution is using the flexbox module (and deal with the browser support issues). For example, I believe this might be what you want (working on Chrome 29):
.i-display-in-3-columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.i-display-in-3-columns>li {
flex: 1 1 200px; /* 200px is the column width */
}
Demo
I'm trying to take group of headers and lists, and contain them individually so I can style them. ie:
<h2>Title 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Title 2</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I attempted this by using .before() and .after to add a div before the h2 tag, and close it after each ul however I found out that jquery cleans and closes the tag automatically. So I'm guessing I need to use wrap() just not sure how to group the title and list together.
Use
$('h2').each(function(){
var self = $(this);
self.add( self.next() ).wrapAll('<div/>');
});
demo at http://jsfiddle.net/gaby/e4f9h/
You want to create a jQuery collection that contains both elements. For this you would select the h2 elements. You than would need to find the next() element that is a ul. After you get both of them linked, you would wrapAll() with your containing div.
$("h2").each( function(){
var h2 = $(this);
h2.add(h2.next("ul")).wrapAll('<div class="madWrapper"></div>');
});
jsFiddle