Just a basic html link question.
I have an intranet setup, and I need to link to some network drives. They are located on drives such as \server_drive\blahblah\doc.docx
Using file:// does not work on either IE8 or Firefox. How can I link to these files?
To link to a UNC path from an HTML document, use file:///// (yes, that's five slashes).
file://///server/path/to/file.txt
Note that this is most useful in IE and Outlook/Word. It won't work in Chrome or Firefox, intentionally - the link will fail silently. Some words from the Mozilla team:
For security purposes, Mozilla
applications block links to local
files (and directories) from remote
files.
And less directly, from Google:
Firefox and Chrome doesn't open "file://" links from pages that originated from outside the local machine. This is a design decision made by those browsers to improve security.
The Mozilla article includes a set of client settings you can use to override this behavior in Firefox, and there are extensions for both browsers to override this restriction.
Setup IIS on the network server and change the path to http://server/path/to/file.txt
EDIT:
Make sure you enable directory browsing in IIS
Alternative (Insert tooltip to user):
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 240px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
</style>
<a class="tooltips" href="#">\\server\share\docs<span>Copy link and open in Explorer</span></a>
Related
I have a problem. I suspect that the problem is a browser-side rendering problem. Maybe even an expectable behaviour, but I have no idea, and that is why I am going to ask you:
I have an <a>-element and I place two other elements (a <span> and a <div>, the <div> has even more children) inside that element.
I upload my HTML-file to my server and can access and download it (e.g. via curl or wget). There is no problem and the file is exactly the same. When I open it in web browsers (I tested Firefox and Chrome) it is still the same, but only when I open it using the "debugging" tab where I can see the original files. The displayed HTML-file (which I can access using the "inspection" tab) is different. The <div>-element got moved out of the <a>-element. Here is the code-snippet:
<div class="navbar">
A link
<a class="dropdown">
<span>A dropdown</span>
<div class="dropdown-content">
Another link
And a third link
</div>
</a>
</div>
As you can guess, it is a snipped from a navbar ;) Maybe you need the CSS (I use SCSS-files) too:
.navbar {
background-color: $navbar-color;
overflow: hidden;
padding-left: 10vw;
padding-right: 10vw;
a {
position: relative;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: $navbar-text-color;
}
a.dropdown {
position: static;
display: inline-block;
span::after {
content: '\f0d7';
font-family: FontAwesome;
padding-left: 6px;
}
.dropdown-content {
display: block;
position: absolute;
background-color: $navbar-color;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: $navbar-text-color;
}
}
}
}
I know, the design is not perfect and not finished, but I expect I am facing an HTML problem and so I wanted to ask you first.
Do you have any hints, ideas, references, explanations or corrections for me? I would really appreciate it.
I am using the Caveat font for my headers on a page, however the Caveat font only shows up after I refresh the page.
.title {
font-family: 'Caveat' !important;
color: #b8b8b8;
font-size: 12vw;
position: absolute;
top: -25%;
left: 5%;
z-index: 100 !important;
}
.second-title {
font-family: 'Caveat' !important;
color: #b8b8b8;
font-size: 12vw;
position: absolute;
top: -50%;
left: 5%;
z-index: 100 !important;
}
When I restart my local server and then go directly to the page (site.com/about.html for example) it seems to work, but if I restart the server go to the page through a link on the home page, it still has the issue of the font not loading unless I refresh the page.
None of the other fonts or pages seem to have this issue.
.rk-adjust {
position: relative;
cursor: pointer;
font-size: 2em;
margin: 7px 0;
&__tap {
position: absolute;
width: 4000px;
height: 3000px;
top: -1500px;
left: -2000px;
}
&__adjustment {
width: 100%;
display: flex;
align-items: center;
padding-left: 9px;
padding-right: 0;
background: rgba(255,0,255,0);
height: 34px;
&:hover {
background-color: rgba(255,0,255,0);
}
}
}
When I try to hover, background color changes but extra weird lines appear on top of hovering box. Please tell me if its known issue. If not, suggest some workaround?
If the problem appears with Win 7 and IE10/11, then try Internet Options, Advanced in IE and set Use software rendering instead of GPU rendering. (Or vice-versa, maybe).
Hope that helps - I also had lots of problems with these effects especially in contentEditable elements.
Win 10, IE11 / Edge is fine in my experience.
Just a basic html link question.
I have an intranet setup, and I need to link to some network drives. They are located on drives such as \server_drive\blahblah\doc.docx
Using file:// does not work on either IE8 or Firefox. How can I link to these files?
To link to a UNC path from an HTML document, use file:///// (yes, that's five slashes).
file://///server/path/to/file.txt
Note that this is most useful in IE and Outlook/Word. It won't work in Chrome or Firefox, intentionally - the link will fail silently. Some words from the Mozilla team:
For security purposes, Mozilla
applications block links to local
files (and directories) from remote
files.
And less directly, from Google:
Firefox and Chrome doesn't open "file://" links from pages that originated from outside the local machine. This is a design decision made by those browsers to improve security.
The Mozilla article includes a set of client settings you can use to override this behavior in Firefox, and there are extensions for both browsers to override this restriction.
Setup IIS on the network server and change the path to http://server/path/to/file.txt
EDIT:
Make sure you enable directory browsing in IIS
Alternative (Insert tooltip to user):
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 240px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
</style>
<a class="tooltips" href="#">\\server\share\docs<span>Copy link and open in Explorer</span></a>
I'm trying to remove dots in a textarea which are present at the bottom-right corner.
Here's an example of what I mean (from Chrome):
How to remove those diagonal lines?
Just add in your CSS file
textarea { resize: none; }
Later (2019) edit:
Related to this answer of mine and the rising number of GitHub code search results on resize: none declarations applied to textarea elements, I wrote some lines on why I think CSS resize none on textarea is bad for UX:
Very often, the textarea is limited to a number of rows and columns or it has fixed width and height defined via CSS. Based solely on my own experience, while answering to forums, writing contact forms on websites, filling live chat popups or even private messaging on Twitter this is very frustrating.
Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.
from https://catalin.red/css-resize-none-is-bad-for-ux/
So you might want to check this out before adding the above to your stylesheets.
It is as simple as the following code. Just give the textarea the style resize: none
<textarea style="resize: none"></textarea>
html
sass
textarea {
position: relative;
z-index: 1;
min-width: 1141px;
min-height: 58px;
}
.resizer {
position: relative;
display: inline-block;
&:after {
content: "";
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
}
}
.arrow-resizer-textarea {
height: 0;
width: 0;
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
z-index: 2;
}