Hiding a textfield on an external website form - html

Is it possible to hide a text field on the form of a website. The text field is currently not hidden and I've heard that I could be able to hide it from view by overlaying an external style sheet.
EDIT: The website isn't mine and I have no control of the source etc, I need to be able to do this without touching their code. The reason we need to be able to do this is to send a credit card number to this field from a session variable (obtained by DTMF tones and an IVR) without the person sat in front of the computer being able to see what's been inputted.
I don't want to hide it from EVERYONE, just the people who work for us and access it through our PC's.
Is this possible?
Thanks,

Yes. Add the following css class:
display:none;

yes you can
CSS Approch
use css display:none;
Or use javascript
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);

Depending on what you are allowed to do, and whether these machines are only used for that site, you can create a page with an iframe holding the site you want and then overlay what you need.
It might be tricky if the page is scrollable, or the user can alter the size of text etc (cause reflows to the content)
<iframe src="http://url.to.actual.page"></iframe>
<div class="distractor">Position me on top of the iframe to hide some content</div>
and
iframe{
width:600px; /* as needed */
height:300px;
overflow:hidden;
z-index:1;
position:relative;
}
.distractor{
position:absolute;
background-color:red; /* color it as the background of the page */
top:80px; /* position it where you need it */
left:100px;
width:100px; /* size it as you need it */
height:100px;
z-index:1000;
}
demo at http://jsfiddle.net/gaby/GemC2/1/
Not a great solution, but might give you some ideas..
Another solution, if you are allowed to use plugins to browsers is to set Greasemonkey, and install a custom script that will hide the input you need.
Or Stylish and set a custom CSS style to override the page's style.

Related

Permanent visual change via pure CSS/HTML once input button (type=file) is pressed

In a web application I maintain, I customized an input button (of type file) by making it transparent and positioning it over an img. Doing it this way has vast browser compatibility compared to some more sophisticated ways involving label and such.
I also wrote simple JS to display the name of the selected file.
Now here's a situation: some users access this app through a forward proxy that strips out JS. In other words, those users don't have access to any JS capabilities.
The problem:
My problem is that for such users, the customized input button is unable to display the filename at all. This causes some of them to think the button is broken.
One solution is to detect all these forward proxy users and serve them a different page (one where the input button is unstyled). This task has server-side complications outside the scope of this question.
Hence I'm looking for a pure CSS/HTML solution first. I know I can't use CSS/HTML to show the filename. That's fine.
But is it possible to show any visual change in the customized button once the user has pressed it (e.g. change in opacity, width or even positioning a new div over it)? I'm looking for cross browser compatibility in this solution - especially mobile web browsers including Chrome, Android and Opera. Illustrative examples would be great. Also see below to find out what I tried and almost got to work.
Here's the code I've written to customize the button:
<style>
.outer{
position:relative;
overflow:hidden;
height:60px;
max-width:132px
}
img{
position:absolute;
z-index:3;
}
input[type=file]{
position:absolute;
z-index:4;
opacity:0;
max-width:132px;
height:60px
}
</style>
<div class="outer">
<img src="cam.svg" width="60" height="60">
<input type="file">
</div>
Here's one thing I tried that actually works (but isn't cross browser):
<style>
#input:target + span:after{
content:"File Selected";
position: absolute;
z-index:5;
}
.outer{
position:relative;
overflow:hidden;
height:60px;
max-width:132px
}
img{
position:absolute;
z-index:3;
}
input[type=file]{
position:absolute;
z-index:4;
opacity:0;
max-width:132px;
height:60px
}
</style>
<div class="outer">
<img src="cam.svg" width="60" height="60">
<input id="input" type="file"><span></span>
</div>
Ergo, I called file input via <a href="#input">, and then styled the empty span occurring right after the target. This patterns breaks down in some older browsers I must entertain. Maybe I should have used a basic label?
Any innovative solutions that solve my problem are most welcome. I'm okay with hacky stuff, as long as it's cross-browser compatible.

Select text except empty white space using CSS

I'm having a bit of trouble with text selection on my website. I want to be able to select the text-only & not the excess white space between paragraphs on any sides of the text.
At the moment, I can, with using the ::selection & having it's own background colour. However I believe my code is all screwy & I just can't find out how to do it.
This website below is exactly what I want it to do, when selecting the text, the white space between paragraphs is never selected.
Demo site - Formula one
Any & all help is greatly appreciated, thank you!
If you just use <p> element to wrap each paragraph (that's what the <p> element exists for, that's its destiny. Do you want to deny it from doing what its meant for???), the browser will do the magic himself :-)
Check out the simplest JsFiddle i've ever created :-)
If you are interested in how they achieved the effect in the formula website, here are all relevant parts - jsfiddle. (I altered fiddle by #Ronen Cypis).
As you can see, thay use an hidden overlay layer
.fom-modal-shim {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
z-index:1000;
-moz-opacity:0;
-khtml-opacity:0;
-webkit-opacity:0;
opacity:0;
-ms-filter:alpha(opacity=0);
filter:alpha(opacity=0);
visibility:hidden
}
The final effect is achieved by setting position of the page container to relative.
.site-wrapper {
position:relative
}

Website Development: How to make the text/image emerge when a user click on the another text/image?

How to make the text/image emerge when you click on the another text/image? For example, a bottom "help" on the top of this website makes appear the image and the text when you click on it. I'm trying to do the same effect with my personal website. Anybody know the way to get it?
Consider using the JavaScript onClick(); event: http://www.w3schools.com/jsref/event_onclick.asp.
Set your the element that you want to show to display:none; then set to display:block; onclick or even use the jQuery fadeIn effect.
I'm not entirely too sure what you're after, but I hope that this is a start.
Set an ID to the element (like ). In your CSS stylesheet, simply add the following:
#hideMe { display:none; }

Displaying only one div from an external website using iframe?

is there any way I could pull only a portion of an external website using iframe?
This is the page I am trying to pull..
http://clep.collegeboard.org/search/test-centers
The div I wanted to get specifically is the white box in the center (#mainContentWrapper).
I already have a solution myself although it has some flaws. The trick I made was I made an outer div and disabled the iframe and I tweaked the height/width and the positioning where it would only show that portion ...
#outeriframe
{
width:960px;
height:1415px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-300px;
left:-160px;
width:1280px;
height:1415px;
}
The problem is, if the iframe is too big, the footer would show up, if it's too short, the results would be cut off and you can't see them all...
Is there any way I could get around this? Maybe Hide the footer? or grab only the Div I need? Please help me...
Thanks!
You can't, the same origin policy forbids you to interact with a Web page located in a different domain.
Some techniques like CORS or postMessage allow you to work around this limitation, but require some level of control on the other domain.

Clicking through layers/divs

If I have two layers on a page, split horrizontally, with the second layer overlapping part of the first layer, is it possible to make it "click through"?
I have links in the first layer, which the second layer overlaps, which stops the links from being clickable. Is there a way to make the layer display, but be click through, while still having it's own links clickable?
edit:
Here is an example, with html and a stylesheet.
The test links become unclickable when inline with the header in Layer3, but below that they are fine. Is there a way to rectify this?
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
</div>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>
And the css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
position:absolute;
left:10px;
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}
Thought I would update this as I'd been struggling with this for a few hours and think i've found a solution. Looked into using Jquery but the CSS property:
pointer-events:none;
...did exactly what I wanted.
It is not possible if you want the divs to stay in their current x,y, (and most importantly) z - only the "top" layer is clickable.
Addendum post OP edit:
Think of CSS layout as if you were physically working with bits of paper (this is much easier to visualise if you give all your "layer" divs a different background colour). The rendering engine cuts out a bit of paper in the dimensions you give it (or it works out) for each element it finds. It does this in the order it encounters them putting each bit of paper on the page as it goes - the last item is going to be on top.
Now you've told the rendering engine to put your 3rd div in a position where it overlaps the 2nd. And now you expect to be able to "see" the covered content. Wouldn't work with paper, won't work with HTML. Just because it's transparent doesn't mean it's not taking up space.
So you have to change something.
Looking at your CSS and markup (which honestly could be cleaned up, but I'll assume there's other mark-up you're not showing us which justifies it) there's a couple of easy win ways:
1). Set a z-index of -1 on Layer3 - z-index is how you can change the layering order from the default (as encountered). This just moves the entirety of Layer3 below the rest of the page so what was hidden becomes exposed, but also vice versa depending on content.
2). Change the width from 100% to e.g. 80%, or more likely given your use of pos:abs set left:0px and right:199px; (I'm guessing that padding-left on Layer2 is an intended column width?). The cost of this is that your Layer3 is no longer 100% width
3). Google "CSS column layout" and find a pattern that reflects what you need and adapt that. Every CSS layout which can be done has been done a million times already. Standard techniques exist which solve your problems. CSS is hard if you haven't built up the experience, so leverage the experience of others. Don't reinvent wheels.
It would be a mammoth job, but it is possible.
You would need to capture the click event on the top layer/div, and find the cursor x-y position.
Then find all links in the layer/div underneath the top layer, and see if it's position on the screen falls around the current mouse position.
You could then trigger the click of the matched link.
I would use jQuery (if you are not already) for this and then re-post with a jQuery tag if you run into troubles.
It is hard to tell without seeing some code.
You could try setting z-index on the bottom layer but that works on elements that have been positioned with absolute, relative or fixed (position:absolute).
edit after seeing code:
Add position:relative; z-index:100; to #rightLayer.
Or you could remove the width:100% from .Layer3.
You may want to refactor your code and go with a two column layout for #rightLayer and .Layer3.
css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
}
html
<div id="Layer0">
<div id="Layer2" class="Layer2">
<h1>TEST</h1>
</div>
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div class="content">
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
<div id="Layer3" class="Layer3">
<h1>Ed Hardy Auctions</h1>
</div>
</div>
</div>
I'm assuming from the example that the links in the rightlayer are the only links that need to be clicked, and that you don't have links in the other layers. If so, you could solve the problem by changing the z-index order of the divs.
Layer1 and Layer3 have position absolute, so if you add a position style (absolute or relative) to Layer2, you will be able to pull that div to the front, also pulling the rightlayer div to be in a higher layer than Layer3.
I added the following to the CSS:
#Layer2 {
position: relative;
z-index: 1;
}
From what I can see that leaves the current page setup just the way it is, but pulls all the elements (including the rightlayer with the links) to the front, so you'd be able to click all the links in it.
For debugging purposes I suggest adding background colors to all the different layers to get an idea of the z-index order of the different layers. With the background color in place it was quite easy to spot the layer that was falling over the links, but also to verify that the new z-index order makes the links available.
Hope this helps!
I submitted a bug years ago to the Firefox Bugzilla saying that there was this very bug in Firefox.
I was told by a Mozilla engineer that this was not actually a bug and that it is the correct behaviour as per the HTML/CSS specifications.
Unfortunately I can't find the original bug to reference as it was about 6 years ago.
The reason I submitted the bug was because I could click through the top div onto the links below when using IE (6 I think) but Firefox would not let me.
As usual, it turned out hat IE had the incorrect implementation and Firefox was working as intended by the spec.
Just because a div is transparent does not mean you should be able to click through it.
I'm not sure how you could get around this with JavaScript or CSS. I would take a step back and have a re-think about what you're trying to achieve and how you're trying to achieve it.
Greg
Can you not simply set the width of the div to auto (the default for absolute positioning - i.e. just delete the width:100% from .Layer3).
That way the div will only be as wide as is necessary, rather than unnecessarily overlapping the links.