I have a problem with my verified icon.
So what I actually want is that the verified Icon like on Twitter or Facebook is besides the Username and not in the next line under my username.
But it does not work.
<ul class="line">
<li>
<h3 align="center">Username</h3>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
Here is my CSS:
li.line {
list-style: none;
}
ul.line {
display: block;
}
h3 is a block element
change it to inline element
<ul class="line">
<li>
<span align="center">Username</span>
<span class="label label-info">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</span>
</li>
</ul>
If you don't want the list point, then I don't think li is what you'll want to use. A span or even a div could probably give you the look you're going for.
As for having them on the same line, try using the inline-block option for your css display element. It is similar to display: block, but it allows you to keep your elements on the same line.
Related
I need help getting the right selectors and restrictions to retrieve child elements at a certain level given the beneath bit of HTML.
I have the first element which is the li at the top.
I need to get it's children under the child ul, which have class "subtree-checkbox".
An image is attached for clarity.
Many thanks.
<li class="green checked" style="color: yellow; border: 2px solid yellow;">
<span class="accordion-heading" data-toggle="collapse" aria-expanded="true" data-target="#Smenu_0_1__1">
<span id="sp_SM_0_1" class="checkbox subtree-checkbox styled red"><input name="SM_0_1" class="subtree-checkbox styled red" id="SM_0_1" type="checkbox" iid="1" value="false" style="display: none;"></span>
Users
</span>
<ul class="nav nav-list collapse in" id="Smenu_0_1__1" style="padding-left: 60px;" aria-expanded="true">
<li>
<span class="accordion-heading" data-toggle="collapse" data-target="#Smenu_0_1__10" aria-expanded="true">
<span id="sp_SM_0_1_1" class="checkbox subtree-checkbox styled grey checked" style="color: yellow; border: 2px solid yellow;"><input name="SM_0_1_1" class="subtree-checkbox styled red" id="SM_0_1_1" type="checkbox" iid="2" value="false" style="display: none;"></span>
new subby tst3
</span>
<ul class="nav nav-list collapse in" id="Smenu_0_1__10" aria-expanded="true" style="padding-left: 20px;">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
I tried this but obviously fails.
var kiddieEls = $(SpanParent).children("input[type=checkbox]");
and this
var kiddieEls =$(SpanParent).children('ul').find("subtree-checkbox:first-child");
How would i get one or all the children elements at that level?
This is what I came up with, probably not near the best way, but it works.
I have the Parent Li in a 'LiParent', which is my starting point.
// finds the ULs under this li element
var childUL = $(LiParent).children('ul .nav-list');
// gets the first level of children (li's)
var FirstLi = $(childUL).children().first();
//use that first child to find the required spans
var ChkBoxSpanS_ToAccumulate = $(SpanAccordionchild).children('span').first()
its a sample HTML and I want to get links with mechanize-firefox,which is in <div class="testclass2"> not from others, how can I do it?
<div class="testclass1">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link1</span>
</a>
</span>
</div>
<div class="testclass2">
<span class="SelectItem">
<a class="SelectLink">
<span class="SelectText">link 1</span>
</a>
</span>
<ul class="SelectList">
<li class="SelectItem">
<a class="SelectLink">link 2</a>
</li>
</ul>
</div>
You can use $mech->xpath to do that. All you need to do is build the right xpath expression to get all a tags under class="testclass2".
my #links = $mech->xpath('//div[#class="testclass2"]//a');
The expression is the most tricky thing about it. The // means anywhere under where you are. This is like div.testclass2 a in CSS.
I have this code that overlaps within the box range and I am wondering how can I line break when it overlaps within the box range.
Html:
<%
for(Notification n: notifications) {
%>
<li>
<a href="#">
<span class="message">
<%=n.getMessage()%>
</span>
<span class="subject">
<span class="time">
<%=n.getTime()%>
</span>
</span>
</a>
</li>
<%}%>
Image:
Not sure why the link isn't loading,
but you can use CSS
<div>
<h4>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<h4>
</div>
div {width: 100px;border: 1px solid red;word-wrap: break-word}
or JS
string = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
string = string.replace(/(.{1,20})/g, '$1<br/>')
document.write(string);
CSS would be the better option
https://jsfiddle.net/ednmstpz/
Try adding
white-space:nowrap;overflow:hidden;
To the li tag
Hi there i have 5 star rating system and i would like to make it so that i can add say 4.3 stars rather than just 4. How would i do this? My current code is listed below:
<center>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
<span class="glyphicon glyphicon-star"></span>
</center>
You could overlap 2 absolute positioned divs. Each would contain all 5 stars. Then the top div could have an overflow:hidden div in it, where you set the width equal to a percentage (based on the rating).
Here is a codepen that I put together that illustrates it: http://codepen.io/anon/pen/ogBWwX The code snippets are copied below for reference and includes a little extra than what is needed, for the purpose of the demo.
HTML:
<div class="container">
<div class="flt_left">
<form id="star_form">
<label for="star_input">Stars:</label>
<input type="text" id="star_input" />
<button id="setStars">Set Rating</button>
</form>
</div>
<div class="flt_left">
<div id="star_box">
<div class="star_limiter">
<div class="longbar">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<div class="star_bg">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
<div style="clear:both;"></div>
<p id="rating_data"></p>
</div>
CSS:
.container{
padding: 15px;
margin: 10px;
}
p{
margin: 10px 0;
}
.flt_left{
float: left;
margin-right: 10px;
position: relative;
/*min-width: 250px;*/
}
#star_box,
.star_bg{
color: #BBD41C;
position: absolute;
margin: 4px 0;
top: 0;
left: 0;
display: table;
}
.glyphicon{
display: table-cell;
padding: 0 0 0 2px;
font-size: 18px;
}
#star_box{
z-index: 2;
}
.star_bg{
color: #555;
}
#star_box .star_limiter{
width:100%;
overflow: hidden;
position: relative;
}
Javascript:
function setWidth(perc){
$('#star_box .star_limiter').css('width',perc+'%');
}
function starToPercent(amt,outof){
if(typeof outof == 'undefined') outof = 5;
var percent = Math.round(amt*100/outof);
if(percent > 100) percent = 100;
$('#rating_data').text(amt+' of '+outof+' stars, or '+percent+'%');
setWidth(percent);
}
function setRating(){
var input = parseFloat($('#star_input').val());
var num_stars = $('#star_box .star_limiter .glyphicon-star').length;
if(!isNaN(input)) starToPercent(input, num_stars);
}
$(document).ready(function(){
var star_width = $('#star_box').width();
var star_height = $('#star_box').height();
$('#star_box').css('width',star_width+'px');
$('#star_box .star_limiter').css('height',star_height+'px');
$('#star_box .longbar').css('width',star_width+'px');
$('#setStars').click(setRating);
$('#star_form').submit(function(e){
e.preventDefault();
setRating();
});
});
Notes:
The overlapped stars don't look great, since you see a bit of the color of the background stars around the edges. So, it looks better if you get rid of the background stars and just use a solid color. It also is less noticeable the more you match the color.
I set the CSS of the glyphicons to display:table-cell to prevent them from wrapping and to position them closer together. More space between the stars creates less accurate results on floats.
You can't use multiple colors on an icon font, so what you ask isn't possible. You could use a partial background fill, but that doesn't seem very desirable.
If you switch to Font Awesome you would at least have access to half-star symbols.
I found this works, the major drawback being that you need to style specific classes based on the font size:
HTML:
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star half-star"></i>
CSS:
.half-star {
width:5px; // Roughly half the font size
overflow:hidden;
}
While these answers are both correct (regarding multiple colors) and long and perhaps too exact (overlapping divs, which uses pixels to move things), I found a great hack just now involving the :after selector.
Basically, if you know what the background color is going to be, you can just cover half (or whatever percentage you need) of a character this way:
HTML:
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star half-star"></span>`
CSS:
.half-star {
letter-spacing: -0.5em;
&:after {
position: absolute;
content: "";
left: 0.5em;
width: 0.5em;
height: 1em;
background-color: $body-bg;
}
}
First, I set the letter-spacing to half the font's default, which aligns the following text, stars, or other elements correctly. Then, I create an absolutely positioned block of $body-bg half the width of the star and half-way over the star (this is for a 4.5 star rating). You can change that decimal to match your desired rating.
You cannot change the color of the glyph, and it would take much more hacking to add a different color or glyph over the first (think the same way as I showed but from the other direction) but it could be done without any Javascript and purely with HTML and CSS this way.
Font-awesome has a ready star-system solution:
Look at "Star Ratings (inspired by CSS Tricks)"
in their website
Disclaimer
This question is a repost. I originally asked it here. While there was one person who was kind enough to help me, he ultimately couldn't find an ideal solution. The reality of the situation is Doctype just doesn't have the huge number of users that Stack Overflow does. This is an important problem for me, and I really need more opinions on it.
The Problem
I've implemented a tree view using HTML and CSS. When an item in this tree view is hovered, a tooltip appears under it. Everything's works great in Firefox, but not in Chrome or Firefox.
My problem is the tooltip is using absolute positioning to allow its content to display over other elements. When I scroll in Firefox, the positioning of these tooltips moves to reflect their new locations. However, Internet Explorer retains the original position of the elements. Thus if I hover over a scrolled elements, the tooltip displays under wherever the element was originally located.
I've read this could be fixed by adding position: relative to my tree view, but this would prevent the tooltips from hovering over the entire page.
Here's some example code to illustrate my problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<!-- import css files -->
<link href="example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="tree-view">
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
</div>
<div id="main-content">
main
</div>
</div>
</body>
</html>
And here's the CSS for the example:
#wrapper
{
}
#tree-view
{
float: left;
width: 200px;
height: 400px;
background-color: #BBFFFF;
overflow: auto;
}
#main-content
{
float: left;
width: 600px;
height: 400px;
background-color: #FFFFBB;
}
#tree-view a
{
display: block;
position: relative;
}
#tree-view a span.tooltip
{
position: absolute;
z-index: 100;
display: none;
}
#tree-view a:hover span.tooltip
{
/* positioning */
margin-left: 1em;
margin-top: 1em;
display: block;
position: absolute;
/*formatting*/
text-decoration: none;
background: #DDD;
border: 1px solid #BBB;
padding: 5px;
white-space: normal;
width: 300px;
color: black;
}
#tree-view .tooltip strong
{
display: block;
}
#tree-view .tooltip .tooltip-info
{
display: block;
}
If the position: relative tag is removed from the tooltip anchor, the tooltips display correctly in Firefox. However, without it the tooltips don't display correctly in Internet Explorer.
Thanks for the help.
I stopped using my own Tooltips and switched over to Qtip (http://craigsworks.com/projects/qtip/)a while back. It's cross-browser tested, simple to instantiate, and looks outstanding. If you happen to be a ThemeRoller user, the beta version (available in the nightly builds) fully supports ThemeRoller styling. Overall, I'd highly recommend considering it to make life easy....it's just less brain-damage.
In the upcoming release of JQuery UI, there will be a similar feature built into the core. Similar scripts are available for Dojo, Prototype, and MooTools.
The code you posted works straight away in Firefox.
The tooltips don't show up in IE6, rather strangely you can fix this by giving the hover state of the anchor a background color...
#tree-view a
{
background-color:#ff0000;
}
I guess it just needs to have layout but the usual zoom:1; or position:relative; don't have the same effect
You can remedy the scroll bars by using...
#tree-view
{
overflow: display;
}