I have a sequence of letters with numbers on top of each letter. I want to disable text selection, so that when the user copy paste the sequence of letters from the screen, he does not get numbers.
I'm actually using no select css trick and the numbers are excluded from selection, but I get a space where the number was. Like so:
T
QD
The desired output is instead:
TQD
Here is my code:
<div style="margin-bottom:0px;font-size: 0.65vw;">
<div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size:0.6vw;padding-top: 2px; height:0.6vw;">1</p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">T</span></div>
<div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size:0.6vw;padding-top: 2px; height:0.6vw;">2</p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">Q</span></div>
<div style="display:inline-block;width:1.3vw;font-size: 0.8vw; text-align: center">
<p style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none; -webkit-touch-callout: none;background-color:#ededed;margin: 0px;font-size: 0.6px;padding-top: 2px;height:0.6vw;"></p>
<span style="background-color:hsl(60,100%,60%);width:1.3vw;font-size: 0.8vw;display:inline-block;text-align: center;padding-top:2px">D</span></div></div>
Is there any css trick for this?
If you can disable the ctrl button and right click from a webpage then the functionality copy paste will automatically disable. I think the following code will help you.
<script>
$(window).on('keydown',function(event)
{
if(event.keyCode==123)
{
alert(' Developer Tools is disable from this website.');
return false;
}
else if(event.keyCode==17)
{
alert('Control key is disable from this website.');
return false;
}
});
$(document).on("contextmenu",function(e)
{
alert('Right click is disable from this website!')
e.preventDefault();
});
</script>
I've found the solution! I'm using the tag p which is a block element, this is why it will leave a space where the tag was. On the contrary, using some inline element such as b or span will not leave any space.
Related
I am struggling to get a break to work in my code. The break is not being recognised at all and just displays all text in one line.
I have tried a combination of using divs, spans and p tags, but still the same problem. I can only assume that the code i am using is illegal. I would be grateful if someone could clarify where I am going wrong. Thanks
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br>
Thank you
</p>
</div>
You probably have display:none on all <br>. If using this doesn't work:
br {display:block}
try using JavaScript to override any display properties on all <br>
Demo
var brArray = Array.from(document.querySelectorAll('br'));
brArray.forEach(function(brk, idx) {
brk.style.display = 'block';
});
/* There's a possibility thisproperty might be somewhere */
p {
white-space: nowrap;
}
/* More than likely this is the culprit */
.message br {
display: none;
}
<div class="alert message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app <br>Please continue by turning your device to protrait<br> Thank you
</p>
</div>
<p>Click the text above</p>
OPTION 1: Add one more <br> in the second line.
The primary purpose of <br> is to insert a single line break. And this is how it is exactly working in your code. If you need an empty line above Thank You, just add one more br>.
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br><br>
Thank you
</p>
</div>
OPTION 2: You can wrap your text inside <pre> tag and style it
accordingly.
.no-format{
font-family: initial;
}
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<pre class="no-format">Landscape mode has been disabled in the app.
Please continue by turning your device to protrait.
Thank you
</pre>
</div>
In my case I have applied the following style to my label:
white-space: pre-line;
#divWithPreline {
white-space: pre-line;
border: solid 2px red;
}
#divWithoutPreline {
border: solid 2px blue;
}
<div id="divWithPreline">
This is a div
whose content has line breaks
and the <b>white-space pre-line</b> has been applied
</div>
<br>
<div id="divWithoutPreline">
This is a div
whose content has line breaks
and <b>no styling</b> has been applied
</div>
My goal is to come up with a dropdown menu:
$(document).on('click', '.dropdown', function() {
var is_visible = $(this).find('.dropdown-content').is(":visible");
$('.dropdown-content').toggle(false);
if (is_visible == false){
$(this).find('.dropdown-content').toggle(true);
}
});
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
div.dropdown-content {
display: none;
white-space: nowrap;
position: absolute;
padding: 12px 16px;
z-index: 1;
margin-top: 15px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='dropdown'>
<i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i>
<div class="dropdown-content">
<div><i class="fa fa-share-alt" aria-hidden="true"></i> Share</div>
<div><i class="fa fa-trash-o fa-fw"></i> Delete</div>
</div>
</div>
The question is, what is the semantic role of <a> tag in the dropdown-content item definition (provided I don't use its href attribute and use JavaScript to handle the click event)?
In other words: if I want to have a clickable icon, in which cases should I surround it with an <a> tag?
if I want to have a clickable icon, in which cases should I surround it with <a> tag?
The only case where you should wrap anything with an <a> tag is if it's a link, or a placeholder for where a link could be.
Otherwise, if you want to make something clickable, the appropriate element is <button type="button">.
The one exception to that is if you need to wrap anything that's not phrasing content, in which case I recommend using <div role="button" tabindex="0> with a keydown handler to trigger click events on Enter, and Space.
Additional notes about accessibility for icons, and icon fonts in general: If a network request fails and the icon font fails to load, your sighted users will find themselves in the same situation as your non-sighted users, where it's unclear as to what the button should do.
Generally speaking it's better to pair icons with textual labels, but if that's not possible, consider using an <img> element with [alt] text instead of the icon.
If that's not possible, at least add an [aria-label] attribute.
I want the user to see that the text is clickable. As of now I have changed cursor to a pointer, and added an underline to the text on the <span> element, I have also tried different borders and highlights on text (basically changed colors), but I was unable to make that look good.
I am using panel panel-primary from bootstrap, and I know they have have a Tabs component also, but I can not use that due to other reasons.
Simple plunker
<div class="panel panel-primary" >
<div class="panel-heading"> SomeHeading <span style="text-decoration: underline; cursor: pointer" >Tab1</span> <span style="font-size: 8px;" class="badge">1</span> / <span style="text-decoration: underline; cursor: pointer">Tab2</span> <span style="font-size: 8px;" class="badge">3</span>
</div>
<div class="panel-body">
Some content here
</div>
What more can I do to make the user understand that these are actually tabs?
I want the user to see that the text is clickable. As of now I have
changed cursor to a pointer, and added an underline to the text on the
element.
These are both pretty standard conventions. Other visual cues (usually activated on :hover) might include:
bolding the text with font-weight:bold
changing the color of the text
changing the background-color of the text
changing the border of the text
You might even:
give the text a text-shadow
give the text's containing element a box-shadow
In addition to what Rounin said, you could also add a border:
border-style: groove; border-color: #3377ff;
See the new plunk.
EDIT: I realized he also mentioned borders.
I am using Bootstrap 3. Here is my HTML page:
As you can see the star is downside to the title. I want to align with title
Here is my html code:
<p class="pull-right visible-xs">
<h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500
<button type="button" class="btn bookmark" id="1799" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</center>
</h3>
</p>
and css:
button.bookmark {
border:none;
background: none;
padding: 0;
}
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
My answer to your previous question only works when the icon is adjacent to a .btn.
The idea being that the two align perfectly as if they were two .btns.
In this case you don't need the .btn class, you can just set the vertical align on the button.
<button type="button" class="bookmark" id="1799">
button.bookmark {
border:none;
background: none;
padding: 0;
vertical-align: middle;
}
Demo
I believe the line-height in your css that's causing it. It is inheriting the attribute and it might be smaller causing it to have too much space above it. If you have a link I can check it in firebug. If not try messing with that. You can also find some cool info about it Here
Hopefully that helps, Let me know if that does it
I was wondering if you could display a link as normal text.
<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>
I'm trying to overlap an image that is also a button, with the text "Log in", it works as it is with the code above, but I was wondering if I can change the "log in" which displays as blue and underlined to appear as normal text.
In css:
a {
color: inherit;
text-decoration: inherit;
}
These values can also be stuck in your anchor tag's style attribute.
Should result in your anchor tags looking the same as the text color and decoration of the parent(s).
If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.
In your example, you could use
<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
<div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font>
</div>
</a>
However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:
<link rel="stylesheet" href="link-to-your-css-file" />
in your css file have
a.imgLink{
color: white; text-decoration: none;
}
div.imgLink{
position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}
Then your html would be
<a class="imgLink" id="" href="" target="_parent">
<img src="" width="121" height="20" alt="">
<div class="imgLink">
Log In
</div>
</a>
Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.
If you don't want the link to be underlined,
set " text-decoration:none"
use this code in your html file
<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>
Short answer: yes.
Longer answer:
Yes, here is a fiddle, but you probably don't want to hide links from your user.
stslavik makes a good point with "text-decoration: inherit". Here is another fiddle. On my browser the "blam" and "stslavic" both show with strike-through, but I'd go with the "inherit" versus the "none"; just seems better to me.
(P.S not advertising this and no spam. Click on 'Hate AI' to reach my project)
You can do this =>
<h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
<p>A personal assistant that hates you but still helps you.</p>
The logic here was adding a style to the a tag which contains the following:-
text-decoration: none;
color: inherit;
text-decoration for removing the underline under the text.
color: inherit for removing the usual purple color of links.
Sure - just adjust the CSS for 'a' elements on the page.
Just a simple snippit to show some size/coloring possibilities, to make your link fit thematically when the rest of your text a bit better.
Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>