I would like to know, does anyone know how to add ghosted (light gray) text to a Drupal webform text area to give a description? The ghosted text should disappear once the user enters something into the text area.
Very Simple no need to install any module, use javascript for place holder
paste this code in head section in page.tpl
<script language="javascript" type="text/javascript">
function placeholder()
{
var input = document.getElementById ("edit-message");
input.placeholder = "Add Your Text Here";
}
</script>
Replace "edit-message" with your text area id(use fire bug)
Add this onload="javascript:placeholder();" in body tag
<body onload="javascript:placeholder();" class="<?php print $body_classes; ?>">
Simplest method to use place holder, hope it helps!
The behavior you're looking for is resolved by the HTML5 'placeholder' attribute, implemented for input fields in modern browsers: Firefox 4+, Opera 11+, Safari 4+, Chrome 4+ ... and only in IE10+ :(
So IMHO you have 2 ways to implement the 'placeholder functionality' in input fields:
1) The quick & dirty way: using Javascript event handlers. In this way you can support old and modern browsers at the same time, if JS is enabled.
2) The right & up-and-coming solution: using the HTML5 'placeholder' attribute.
As you may guess, 2nd approach is harder to implement, because the placeholder attribute is not natively supported in Drupal 7 forms. To get Drupal to render fields with the placeholder="hint..." attribute:
a) If you use Webform Module v.7.x-3.x or 7.x-4.x for building your forms, just apply to it the patch published in this thread: http://drupal.org/node/1305826, and/or...
b) Pre-process the forms markup in your theme's template.php file, as described in: http://nathanbuskirk.com/drupal7-placeholder-text-and-html5-forms
In both cases, support of IE6-9 and other old browsers will need you to additionally use some pollyfill JS library, like Placeholder.js ( https://github.com/jamesallardice/Placeholders.js ) or JQuery' Simple-Placeholder.js ( https://github.com/marcgg/Simple-Placeholder )
Hope it helps.
Related
In a PHP file which outputs an HTML form, I am wondering if I can use new HTML5 tags, for example the email input type. Will oldest browsers show some error or should I somehow discriminate with PHP, through USER_AGENT for example, and render:
<input type="text" />
instead of
<input type="email" />
in old browsers (BTW, the same question would apply to the DOCTYPE itself, I guess). Which is the most appropriate according to specifications?
Fortunately for us, a workaround exists that allows old browsers to recognize these new elements allowing them to be styled, and thus giving us full use of these new semantic tags. It’s a tool called HTML5Shiv.
As noted on the linked Google page, “shiv” and “shim” are interchangeable terms in this context.
But how did we go from IE not even acknowledging the existence of this element, to now being able to use it?
The trick is that calling document.createElement("section") will suddenly cause IE to recognize the section element. No one knows why, but it works and you don’t even need to use the node returned by that function.
But you need to make sure to call it early on in your website before any of those elements are used, otherwise it won’t work.
You will need to call it for each and every new HTML5 elements like the following code:
"abbr article aside audio bdi canvas data datalist details figcaption figure "+
"footer header hgroup main mark meter nav output progress section " +
"summary template time video"
.replace(/w+/g, function(a){ document.createElement(a) });
Notice we’re using the replace method of the string object to succinctly iterate over each contiguous length of characters matched by the regular expression and executing the callback function for each character block which in turn calls createElement.
Here on in, we’ll call this method, “shivving the document”, so that the document can render the new HTML5 elements.
And its better to you use newer versions of browsers unless you're reaserching something with old browsers! :D
Thanking you!
In case there is a library that could help you to use the "new tag" on older browsers HTML5 Shiv
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Icons';
content: attr(data-icon);
speak: none;
I saw this code in one of the bootstrap theme template. How does data-icon or attr(data-icon) works? i cant seem to display the "image/words" of the example i had, it's empty now. I tried
text here
The text here's font doesnt seem to be the same as the example's one and also , the example didnt have anything between the a tags.
Please advice. Thank you
The css above will affect what happens before each instance of data-icon and not the link shown
They are a css3 feature. Attribute selectors alow you to to apply formatting to elements based on certain attributes.
[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
good description here which is where above taken from and here
I want to store html that isn't to be rendered until needed either within a tag that can hold raw html code without rendering it on page load or store it within a php or jquery variable for later use. I then want to be able to insert the html into the DOM on button click and have it render.
I've tried storing it within an xmp tag as that can store html code with the < and > characters without using character codes for them, but when trying to insert it into the DOM, the updated source shows it had been copied but it wouldn't render on screen. Also tried storing it within a code tag, which worked on a desktop browser but not in mobile safari. Since this is a webapp mobile browser compatibility is important.
Anyone know of a good method of doing this?
Try <script> tags with a type of text/plain or text/html:
<script type="text/plain" id="example">
<div class="example">
<h2>Hello</h2>
<p>World</p>
</div>
</script>
$(".button").click(function () {
var html = $("#example").text();
$("#destination").html(html);
});
It depends on where do you want to generate the content in question. If it's easier for you setup to generate it on the server side, you can use css to hide those parts (like display:none) and just remove the css property or grab the nodes with javascript and put them elsewhere with something like this:
$('.target').html($('.hidden_node').html());
If you want to generate the content on the js side, you can build it as a long string and just shove it into the target, or you can use jquery's node generation syntax like:
$('<div />').attr({
class: 'test'
}).appendTo("body");
Or you can use one of the various javascript templating solutions like mustache or handlebars.
I am building a website that displays recipes. Each recipe appears as part of a blog entry, and will have a link at the bottom to Print this recipe.
What I want to happen is a click on the link opens a new window and fills it with a print-friendly-styled version of the recipe, which is already inside its own <div class="recipe">.
Can I do this with JS/jQuery alone, or do I need to process from the server side? Any ideas how to do this?
EDIT: What would be ideal would be to generate a PDF on the fly, but in lieu of that I'd like a new window, containing only the recipe, for the visitor to print out or save, as they see fit. Print-styles are nice, but most people don't know they exist and can't be bothered to check and see by printing out a page that doesn't look print ready.
There is no need to load a different stylesheet and the only javascript you will need is for triggering the printing dialog.
With CSS alone you can add rules that are only used when printing, you can either use media queries
<style type="text/css">
#media print{
//css printing rules
}
</style>
or use the link tag:
<link rel="stylesheet" media="print" href="styles.css" type="text/css" />
UPDATE: If you want to update the stylesheet on the fly without openning a new window i suggest you check out this Nettuts article or a simpler solution:
$("#css-switch").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});
You can do this simply with CSS alone if you have it load the exact same page but with a different stylesheet.
Yes, you can(Hello Mr. Obama).
Most browsers allow you to pass in a data: format string, like
window.open('data:text/html;charset=utf-8,text%20to%20show');
which would open a new window / tab (that is browser config dependend) with the Content "text to show". You can pass in HTML code in the same manner, probably escaped.
var print = $('<div>', {
id: 'foobar',
html: 'Hello world',
css: {
backgroundColor: '#ff0000',
color: '#ffffff',
width: '200px',
height: '200px'
}
}),
opener = $('<div>').append(print);
window.open('data:text/html;charset=utf-8,' + opener.html());
Demo: http://www.jsfiddle.net/4yUqL/73/
You'll probably need to do a request to the server on the print page and fill in the form fields with the data.
If i was you, i'd go for the pdf creating solution. It is fairly simple to create pdf's on the fly in php, and it will almost certainly give a better user experience to your main audience.
If you want to skip that excersise, i'd do it the following way:
1: fetch the data you need as JSON on the original non-printerfriendly page, and use clientside templating to build the ui. Store the JSON for use on the printerfriendly page
2: when you open the new window, use the exact same method, but use another template optimized for printing.
How would I go about displaying a tooltip when the user hover overs some text? These text are keywords. I don't want to manually add these tooltip for each keywords. I am looking for a way to create a script of some sort to automatically do this either on the client side or server-side. When a user hovers over these keywords, and if the keyword exists in the database or an array it should retrieve the information from the database.
Please let me know if there are any good tutorials available on how to solve this problem.
There are many useful plugins to create nice tooltips.
I know two of them that use the jQuery framework:
mb-tooltip: [http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/]
jquery-plugin-tooltip: [http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]
You have to surround your keywords with a span element and a class to apply the jQuery selector.
Maybe it's preferable to query for keyword presence server-side creating the ad-hoc html code for displaying the right tooltips, otherwise you have to create a tooltip in an AJAX way, handling the mouse hover event on the keyword.
You can also use YUI as an alternative to JQuery plugins. Here there is an example of what you want to do Simple Tooltip Example with YUI
You might consider using the HTML Global title Attribute. If you're looking for something simple that's already built in to HTML (and thus usable in PHP without addins) then that would be my go-to solution. I'm considering it's use in a project myself.
Use the jQuery tooltip plugin, which can be found here.
Code looks like:
$("img[title]").tooltip()
There is a very popular Jquery Plugin "Beauty Tips" for this:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Example of Beauty Tips with options:
$('#example3').bt({
contentSelector: "$(this).attr('href')",
fill: 'red',
cssStyles: {color: 'white', fontWeight: 'bold'},
shrinkToFit: true,
padding: 10,
cornerRadius: 10,
spikeLength: 15,
spikeGirth: 5,
positions: ['left', 'right', 'bottom']
});