I was looking for jQ plug-in which gives same result as StackOverflow tags. Found one using Tokeninput. The problem is, it uses ul, li technique and when I use it inside form with another real textboxes, it looks totally different. For example take a look at this picture.
The first is - Tokeninput. And second is standard textbox. What I want to get is exactly same look and feel of textbox or another jQ plug-in that does same thing as Tokeninput but for textboxes (not ul li based).
Here is CSS for horizontal ul that plug-in authors tried to give same look and feel as real textbox.
ul.token-input-list {
overflow: hidden;
height: auto !important;
height: 1%;
width: 400px;
border: 1px solid rgb(240,240,240);
cursor: text;
font-size: 12px;
font-family: Verdana;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
clear: left;
}
Here is something similar, i wrote it a few month ago
It enhances a normal textarea and splits the initial textarea value on the "," character to create the tags.
It may not feet your needs 100%, but its a good starting point and can be easily modified.
Related
I would like to make a fancy looking button in CSS, where it displays a text overlay for a number on the left (see image below).
Is it possible in CSS (with or without the help of JS) to mask overlay text onto an element, similar to that of the Photoshop 'Clipping Mask'?
EDIT: As always you guys want to know I did some testing, which I did, but did not manage to position the number correctly where the button was on the page, using abosolute and relative position, so I asked here not only so that I could get help, but so that I could archive the answer in a format that can be easily found through Google. I have tried this. I want the definitive answer, so that I don't just use a way that 'works', but a way that works well.
I would try something like this
html:
<div class="number">1</div>
css:
.number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}
I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
I am at the beginning of researching how to do something and not sure what is the proper name of what I am trying to research and if there is something that can be done in jquery, or a mix of jquery and css. What I am looking for is something similar to a small pop up when you hover over something; similar to hovering over a hyperlink will reveal the full link. But it will be styled to something that looked like a dialog box and instead of hovering over it the user will have to click it to see that dialog box, but it will be displayed similar to hoovering over something. I hope this question is clear and that I am not over thinking this.
You can do this with pure CSS if you wanted
DEMMO jsFiddle
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
margin-left:100px;
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
.alert {
display: none;
}
span {
display: line-block;
position: absolute;
left: 10px;
top:45px;
}
span:focus ~ .alert {
display: block;
}
I would 2nd SiDiX's recommendation of qTip if you are looking for a jQuery based solution. It has numerous features and is fairly easy to implement.
Since you mentioned you are still in the researching phase, I would suggest a google search on "top jquery tooltip plugins" - you will find many solutions.
Are you talking about tooltip? Check out this plugin called qTip
http://craigsworks.com/projects/qtip/
I believe what you are looking to define is referred to as a 'tooltip'. I like to use PowerTip to implement tooltips. It relies on jQuery, has lots of useful options, and outputs easily styled tooltips.
Checkout Bootstrap and look at what they are calling Tooltip, popover, and modal. That should help clarify.
http://getbootstrap.com/2.3.2/javascript.html#tooltips...
tooltips and popovers by bootstrap...You can put in html in the tooltip if you want.
Here's an example of what I have so far as a demo:
link to demo
And here's the CSS that I'm using right now:
body {
background-color: darkgrey;
}
.container {
background: #ccc;
max-width: 300px;
overflow: hidden;
}
.label {
float: left;
}
.filler {
overflow: hidden;
display: block;
}
.filler input {
min-width: 150px;
width: 100%;
border: none;
}
What I'm trying to accomplish is a responsive way to add tags (almost exactly like the tag system on stackoverflow), to a div, whilst having the input always sit after the last entered tag div. So far I've accomplished this, except for when the last tag is pushed to the next line.
I'd really like a non-javascript solution, but if anyone has an elegant javascript solution I'm willing to take it!
Try this:
.label {
display: inline-block;
}
Here is the fiddle: http://jsfiddle.net/vGWCR/
Could this be of any use? I'm no pro with javascript and I haven't tested it, but it looks simple. Sounds like all you need is a way to get backspace to subtract width.
Create a text box with an auto-expanding width?
Use display: inline-block instead of float: left:
CSS
.label {
display: inline-block;
}
.filler {
overflow: hidden;
display: inline-block;
}
Demo
I know this isn't a code solution, but maybe an existing plugin can help. For example: jQuery Tags Input Plugin ? I am sure there are others, but maybe reuse, unless your use case is significantly different?
(I would have just added a comment, but my rep ins't high enough yet :) )
When searching with Ctrl + F in a website I'd like to exclude some text. Is there a way to solve this?
Apparently
Some quick testing shows that text content added via a pseudo-element will not be found. See this fiddle (search "Google" as an example) which uses the following example code (HTML5). I realize you may want to use a tags or something else, and may need to use javascript for functionality, but the point is, you can make small amounts of text, as you seem to require, that is invisible to searching.
HTML
<ul class="hideText">
<li data-cB="Google" data-cA="https://www.google.se"></li>
<li data-cB="GitHub" data-cA="https://github.com"></li>
</ul>
CSS
.hideText {list-style: none}
.hideText li {
width: 200px;
height: 50px;
padding: 2px;
background-color: #ddd;
border: 1px solid #bbb;
border-top-color: #eee;
border-left-color: #eee;
}
.hideText li:before {
content: attr(data-cB);
display: block;
font-size: 1.2em;
font-weight: bold;
}
.hideText li:after{
content: attr(data-cA);
font-size: .8em;
}
I have a feeling this is a little out of the scope of this question but there is a forum post on Mozillazine discussing how Google had overridden the Cmd-F. The post is here
forums.mozillazine.org/viewtopic.php?f=12&t=2011073
And here is a bug report discussing how websites should never be allowed to capture command shortcuts
https://bugzilla.mozilla.org/show_bug.cgi?id=459744
I would suggest that you use images or canvas for the text you don't want people to Cmd-F, as this will get your desired result.