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']
});
Related
/* 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 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.
so I have a jQuery accordion menu that I want to implement to my wordpress homepage, the problem is everytime I put the menu there, it extends my page way down like 1200 px height, and it`s the only one that does this.
How can I stop it from declaring that height and let me make it exactly how long the menu is extending, or even better go once with it. Again, I am talking about a wordpress plugin.
The theme I want to implement the menu in is : http://themeforest.net/item/celta-business-modern-corporate-wordpress-theme/full_screen_preview/218824?ref=lvraa
Left column
First you should try to set autoHeight to false , this will fix the height problem.
Then I could find the problem regarding HTML lists, I grabbed your HTML, put it locally and used the demo source for jQuery UI accordion (the section 3 have some HTML list inside) and it seems to work fine.
Hope it will Help :)
We all need your code to see the actual problem. You can jsfiddle it.
Also, try making the autoHeight to false.
$(".yourselector" ).accordion({ autoHeight: false });
When you initialize the accordion, include autoHeight: false in the options. It will then use the native heights specified in each div.
It is impossible to give you a sure answer without knowing which accordion plugin you are using. It would have been very helpful for you to give a URL that showcases your issue.
If you are using the jQuery UI Accordion, you can try:
initializing the accordion with autoHeight set to false.
explicitly set a height for the container of your accordion. for example:
< style>
#accordion {
height:200px !important;
}
< /style>
< div id="accordion">...< /div>
initialize the accordion with fillSpace set to true and then explicitly set the height of the accordion's parent element.
If you are using another library or if you developed the accordion functionality yourself, please tell us what library you are using and share your code with us.
You need to change autoHeight to false. Doing so may reduce the quality of animation, but should fix the height issue.
It is caused by the accordion taking the height of the largest div. Lots more about it here:
http://docs.jquery.com/UI/Accordion#option-autoHeight
$( ".selector" ).accordion({ autoHeight: false });
To overcome this issue, You must set two properties as below :-
$( ".selector" ).accordion({ autoHeight: false });
and
$( ".selector" ).accordion({ clearStyle: true });
Refer the - official jQuery accordion documentation
we are looking to place a semi-transparent welcome image on a clients Wordpress main index page, exactly like this http://www.editionsof100.com/.
I suspect this has been created using Jquery, would be possible to create something similar by adding to the CSS or index.php on WP?
This is quite simple, but pointless IMHO:
Create a div wherever you want the image located:
<div id="hello"><img src="http://tonkapark.com/projects/hello.png"></div>
Then you just use .fadeOut() on the element. Standard & simple jQuery
References:
http://api.jquery.com/fadeOut/
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Have you tried using rgba values?
Example:
div { background: rgba(200, 54, 54, 0.5); }
If you need some animations, check out this cool css library which it is very easy to use.
enter link description here
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.