I'm currently working on a button like the "Facebook like" and "Twitter" buttons. Since it will be a bit more complex, involving a tooltip that is shown after a click on the button, I cannot place it into an iframe.
So I thought a bit about why everyone puts their buttons into an iframe. The first thing that came to my mind was that it makes it impossible to alter the appearance of the button. But are there any other (security) concerns that matter in this case?
I suppose it indeed prevents easy tampering with the appearance, but also with the behavior (all kinds of Javascript i.e.), it allows for easier statistics collection and it's probably an easy way to have it implemented widely. Simply saying "please put <iframe src="http://blabla" /> into your website" is a lot easier for users to do and understand than "please put <script .....> into the head of your code, and <form><input type="hidden" ..><input type="submit" ..></form> into the body"
Related
hCaptcha is a fairly popular captcha solution (see a demo.
Their systems works roughly like this:
Websites add a div to a form with a sitekey and also add hCaptcha's JavaScript
hCaptcha adds an iframe and 2 textareas to the form.
When a visitor solves the hCaptcha, the two textareas are filled with a token that is submitted to the site
The site can send the token in a server-to-server call to verify the user passed the captcha
The texteares added in step 2 look like this:
<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style=""></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style=""></textarea>
According to the pa11y these textareas are not accessible. Screen readers need to know that these form elements are not meant for human input, but are instead just for the functioning of the site. I believe one solution could be to add the HTML attribute aria-hidden="true" to both of these textarea elements.
Is there any solution that consumers of hCaptcha can do? Or what would the best thing for hCaptcha be?
Because these textareas are only used by hCaptcha and not meant to be interacted with by the user, they should be hidden. By using display: none on each textarea, hCaptcha will still be able to include the hidden token in the form submission without causing the accessibility issue.
It's not clear what framework you're using, but the output should look something like this:
<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style="display: none;"></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style="display: none;"></textarea>
I couldn't find anything in the angularjs docs, nor online, about this specific aspect of form validation. You know when someone writes something in an input field (example: name, phone number, email etc.), and then there is a green checkmark that appears? Or an X that appears implying it's wrong, incomplete etc.
So, I have those images in my folder and ready for use in either situation. Problem is, I can't find the documentation to properly achieve what I would like to achieve. I am thinking that angularjs would be the solution to use, as the rest of my code in is angular.
Since this is angularjs, the only post and documentation that presented a viable option (which does not work for a few reasons) are the following options:
How to put an image in div with CSS?
https://docs.angularjs.org/tutorial/step_09
I was thinking of using CSS to trick the browser into making the one or the other image appear as it validates. I thought it might force the image in my other div to appear, but to no avail.
For example, in this CSS, I tried this:
.ng-valid.ng-dirty .div.test{
border-color: green;
content:url(http://example.com/image);
}
Using this in my HTML:
<div class="test">
<label style="float:left">by:</label>
<input class="form-control controltwo" required ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="width:350px;" placeholder="Email Address"/>
</div>
As I said before, I am trying to achieve something using angularjs. As CSS can be used for styling, it cannot be tricked into being a styling option and a complex validator. I've tried a few tricks as show on the links, but they don't work. As for the second link, it just isn't made for this purpose, and considering they are made only for filters and images, the docs for the filters don't help a bit.
A simple way of achieving what you want is to look in to the $valid or $invalid properties of your form control.
For example, to show a small message when the email is invalid, you would put this element in your markup.
<div ng-show='reviewForm.email.$dirty && reviewForm.email.$invalid'>Invalid Email</div>
Where reviewForm is the name of your form, and email is the name of your input control.
Here is a plunkr demonstrating this: http://plnkr.co/edit/tUuToy99xjfMhbyMd3eV
You can replace the element with whatever else you want
You can do this with ng-show, ng-src and ng-model depending on what you're validating.
https://docs.angularjs.org/api/ng/directive/ngModel
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngSrc
The example under ng-model:text shows pretty much what you want. If you're not using forms, you should be able to use ng-change to fire off a check and change the image to the appropriate one.
https://docs.angularjs.org/api/ng/input/input%5Btext%5D
If ng-show watches the $valid attribute of the field in question you can hide the check mark when validation is false, and show it when true. You can flip the logic if you want an X.
I notice this as a frequent problem on many wbesites, even those of large corporations, so as a web developer applying for jobs, I think, I should know how to fix this.
Basically, for example, a username field will say "Username" until you click it to type in your username, at which time it should clear itself of the text "Username." But in most cases, it doesn't, and you end up typing in the middle of that pre-existing text.
I've looked this up, and the best solution I found was a 30+ line set of Javascript functions which did exactly what you'd expect: set up a system that clears the default value away when a user clicks on the field, and also puts it back when they click away so long as they hadn't entered anything.
But that's not really what I was looking for, because I already knew how to do that.
I feel like by now, with HTML5 and all, there should be a simpler fix to this. And not just a reduction of the JavaScript to a shorter jQuery script. I mean more of an embedded, inherent fix.
Does anyone know of any ways to stop this phenomenon from happening?
Simply use HTML5 placeholder attribute
<input type="text" placeholder="Whatever" />
Fiddle
Cross Browser Info :
Some Firefox versions clear the placeholder text on click of text box and Chrome clears it after the user starts typing, but later version of Firefox acts like chrome, it clears the placeholder text as the user starts typing in the input box.
You can use the HTML5 placeholder attribute http://www.w3schools.com/html5/att_input_placeholder.asp
Modern browsers now support the placeholder attribute for forms, which let you do just what your asking
Check out
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
For a article using modenizr for cross browser compatibility
just use the HTML5 placeholder attribute.
<input type="text" placeholder="Username" />
This will obviosuly not be completely cross browser compatible so for that you will still need the old Javascript / jQuery fixes.
I need to display part of the exposed form in my page's sidebar, and the rest of the form and content in the $content area. There's really no good way that I can find to do this. I sort of got it to show up in a way by making a "block" view with "exposed form" set and then trying to only show the part that i needed through .tpl files. The problem is that then, when the submit button is clicked (the submit button is in the $content area), then the filters that are in the sidebar are not taken into account.
Some lateral thinking... Why not explore CSS-only options? You can place that form element playing with position:absolute ? Or (considering is a right-sidebar) float:right and then some negative right margin to push it to the sidebar? If you are using 960 grid system, play with pull and push classes.
First I am going to answer your question, then I will explain why you are asking the wrong question:
If you build the form outside of the formapi, you might have some luck. This will get upgly and will require you to take a lot of extra care about attack-vectors such as mass-assignment.
views_some_view.tpl.php:
<form name="input" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
my_custom_exposed_view.module:hook_block()
City:
That would make a form, which in most situations will start with <form>, have some input fields, then have a lot of random HTML, then some more input fields and then the closing .
As you may know, a <input type="submit" value="Submit" /> will only post everything of the form tags it is enclosed in. The submit button in the following HTML:
<form name="input_1" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
</form>
<form name="input_2" action="/link/to/view" method="get">
City: <input type="text" name="city" />
<input type="submit" value="Submit" />
</form>
will only send the City. These are not the droids you are looking for.
It will need to be one, big form, but since everything between form and /form is very dynamic, and contains a large quantity of HTML, including potential other forms, this is really not what you want. Moreover: a blocks appearance (shown/not-shown) is controlled completely independent of the content. You will need a lot of sturdy code to ensure the block a) never shows up when the starting form tag is not present, and b) the block will guaranteed to be shown when that opening form tag is present. Else you have not just invalid HTML, but broken HTML that will truly render your page unusable in most cases.
You simply don't want a part of the form in a block and the other part in the content.
However, you want it visualised as if one part is in the body, the rest in a sidebar.
The good news, is that with HTML presentation structure are independant. That is where your solution lies.
Give your form-fields good ids and classes. You could use a hook_form_alter to change existing forms, but you probably simply just want to create the HTML for that entire form yourself. The theme layer allows that.
Use CSS to pick out either single form-fields by ID and position:absolute them into the correct place. Or pick out classes of fields by CLASS and position:relative them into the correct place.
Make a simple identification-routine that allows adding a class to the body-tag. (see below).
Add some CSS to shift the sidebar lower, making space for the form-fields to be moved in, when that class is in the body-tag.
<body class="<?php print $splitform ?>">
function my_themename_preprocess_page() {
if ($GET['q'] == 'path/to/view') {
$vars['spliform'] = "splitform"
}
}
From the above explanation I am assuming that you are printing same form in block and in content area and you are hiding some part of form in page.tpl , if this is true then you can use hook_form_alter() in your custom module then
Store the value of the form element(present in block) in global variable.
Now use that global variable and set form element(present in content area, this form element is not visible to user).
Provide more information if you implemented other way.
Regards,
Chintan.
There is a related issue here:
https://drupal.stackexchange.com/questions/3827/multiple-copies-of-views-filter-form-exposed-filters
which describes how to duplicate your filters. However it seems like an ugly hack.
A bit cleaner seems this solution mentioned in #6:
http://drupal.org/node/641838#comment-3247748
Haven't tested it out, but it looks good.
It will still give you some overhead (duplicate views) but it might be the easiest way doing this using views.
On the other hand you might write a module and build your own custom filter block which hooks into your view. Here is a blog post about this:
http://www.hashbangcode.com/blog/creating-custom-views-filters-exposed-form-element-drupal-6-561.html
If you use something like context you could get the exposed filters block to display twice in the same page. You could then use CSS to hide the fields you don't want to do display in each form.
The fundamental problem you're having is that to have the two forms in different places, they'll each have their own form element - when a submit is triggered, only the form fields within the same form element are sent. You need to move them into one form, or rely on JavaScript to gather the fields from both forms and construct the post.
You could create the block as an empty div and have javascript from the main page populate it with the secondary filter form and whatever else you need in there. Again, you could use javascript to copy the form values from the block form to hidden fields in the main form on submit. That gives you all the control you need from one place (the node output). Only caveat is that it relies a lot more on javascript to join it all together.
I am writing an intranet application and am considering the use of a pop up window. I am not worried about accessibility since it's an intranet app.
The scenario is such as I need to be able to have the same code be used in a server page as well as in the middle of a process; which is why I decided when using it in the middle of the process, it's best to have it as a pop up window to running out of the real estate on the screen.
Any thoughts on this? I am hesitant to use a pop up window in such a manner as I usually only use it for error messages.
I don't completely understand what you're trying to do, but I think a popup window might be somewhat of an issue if the user's browser automatically blocks popup windows. Plus, if you were trying to run a process in the popup window, the user could close it and no longer have a way to check on the process.
Would it be possible to use Ajax to call back to a web service that gives the page information about the process? You could give the user a way to make the Ajax call to check on the status of the process or just have it continually polling in the background.
Edit:
You said you weren't too familiar with Ajax. For the most part, there are libraries to handle all the of hard details. I'll recommend jQuery because that's what I've been using for a while now.
If you go the Ajax route you'll be able to contain everything on one page and make the updates you need to make when the Ajax call is successful. Depending on how you write the code, it should be pretty reusable if you do it right. It really depends on how specific the your needs on each page.
Take a look at the jQuery documentation though. It may have what you need already built into it. Otherwise, someone else might be able to suggest some reasons why their favorite JavaScript library works better for what you're trying to do.
I think you might want to do something like this:
Inside of the parent page:
<input id="btnShowModal" runat="server" type="button" value='Show Modal' onclick="ShowModal()" />
function ShowModal()
{
var retVal = window.showModalDialog("MyPopup.aspx?param1=value","","center=yes;dialogWidth=200px;dialogHeight=200px;status:0;help:0")
if(retVal != "" && retVal != undefined)
{
//This code will be executed when the modal popup is closed, retVal will contain the value assigned to window.returnValue
}
}
Inside of the modal popup:
<input id="btnSave" runat="server" type="button" value='Save' onclick="Save()" />
function Save()
{
window.returnValue = "Whatever you want returned to the parent here"
window.close()
}
The usual argument against popup windows is that they are unreliable. The user may have disabled script initiated popups, I know I have.
In a controlled environment, such as an inranet, you may be able to be guaranteed that this is not the case, but even so, why risk it, there is an alternative.
Instead of popping up a new window just insert a new, absolutely positioned <div> into the document and insert your content into that using ajax or even an <iframe>. There are lots of examples/libraries on the web.
Thickbox for jQuery for example. There are of course scripts that don't require libraries.
I generally use a div with a z-index and absolute positioning; the .show() can be written and called on demand, it would have a button to .close(), and AJAX can make it seem modal so it must be clicked to close if you so desire. Then again, I hate messageboxes.
I was trying to avoid AJAX, simply because I have never used and don't have the time frame to learn it now. However, I am not totally opposed to it.
In short what I need to do is for the pop up window interact back with the page. Imagine that on the page I am building the links of the chain. Each link has unique properties. When user clicks on "ADD LINK" button, I was thinking have a pop up window with the little form and a Save button. The only issue with this is that a pop up needs to interact with the page; we need to know when something has been saved or not saved.
A div on the same page is one way. A pop up is yet another way. Another catch is that this code (adding new link) needs to be reusable, because I am also going to have a page that just creates new links.