I am having following code.I want to display tooltip in BOLD.
$ToolTip = "test";
<td class="<?php echo BP_TBL_NUMBER_DATA_CLASS; ?>" Title="<?php echo $ToolTip;?>" ><?php echo $TotalStudentsCount; ?></td>
What you want it not possible with the standard tooltip (title attribute). It is up to browsers to display it any way they want.
You may have to resort to some javascript implementation of a tooltip.
UDPATE
Note that with CCS3 you may have a chance of doing it without javascript: https://stackoverflow.com/a/8788410/508666
Don't know about browser support for it though. Also it still displays the default title.
The other methods describes the way to make the text in the td cell bold, but what he wants is to make the tooltip bold.
Note that the tooltip is a browser depend feature, so i don't think you can't control the font-weight really. You might want to make build your own custom tooltips with some javacript. so you get full control of the markup.
You might want to try te following though in your external stylesheet
td[title] { font-weight:bold; }
Related
I am using this:
<?php echo ($rad['attended']?'yes':'no'); ?>
Any idea of the easiest way to "style" yes as green, bold text (on the website) and no to for example red, cursive text? I know how to style the text in css, but not how do I give the two alternatives different styles, can I mix inn div or something in some way inside this?
Based on your code example, it seems that you're not using any templating system and mixing PHP with HTML. So even though it's not a good practice (to mix PHP and HTML), the easiest solution is to wrap the text in a styled <span>.
<?php
echo $rad['attended']
? '<span style="color: #0f0;">yes</span>' // #0f0 is green
: '<span style="color: #f00;">no</span>'; // #f00 is red
You have many options to do that. But there is no direct way to give a condition to CSS.
One approach is to give yes manually a style and to no another style
<?php
if($rad['attended']){
echo '<span style="color:#4CAF50;">yes</span>';
}else{
echo '<span style="color:red;">no</span>';
}
?>
Another approach can be to give a class to span in a condition before your code. And then in your CSS file you can add your text color to each class.
<span class="
<?php
echo $rad['attended'] ? 'attended-green' : 'attended-red';
?>
">
<?php echo ($rad['attended']?'yes':'no'); ?>
</span>
There are many other approaches...
Notice: This is not a best practice to put your view and your logic all in one file. It is always better to separate your logic and your view
Hi everyone I'm currently using a basic div framework that loads data from other pages into a div. But now I want to move towards a solution where all the div content is stored and accessed on one HTML page. I've been thinking about using jQuery tabs. How would I go about implementing this solution.
Here is the code I'm currently using below:
<?php
if(isset($_GET['page'])){
$page=$_GET['page'];
}else{
$page='home';
}
?>
<div class="container">
<div class="header">
A Basic Div Framework
</div>
<div class="nav">
<div class="<?php if($page=='home'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=home'>首页 home</a></div>
<div class="<?php if($page=='page1'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=page1'>网页一 page 1</a></div>
<div class="<?php if($page=='page2'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=page2'>网页二 page 2</a></div>
<div class="<?php if($page=='page3'){echo 'nav-button-mark';}else{echo 'nav-button';} ?>"><a href='?page=page3'>网页三 page 3</a></div>
</div>
<div class="content">
<?php
switch($page){
case 'home':
echo '<h1>Home Page Content</h1>';
echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
break;
case 'page1':
echo '<h1>Page 1 Content</h1>';
echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
break;
case 'page2':
echo '<h1>Page 2 Content</h1>';
?>
<form method="post" action="?page=page3" />
<input type='text' size='40' name='user-input' />
<input type='submit' name='mysubmit' />
</form>
<?php
echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
break;
case 'page3':
if(isset($_POST['mysubmit'])){
$_SESSION['user-input']=$_POST['user-input'];}
echo '<h1>Page 3 Content</h1>';
echo '<h3>$_GET</h3><pre>';print_r($_GET);echo '</pre>';
echo '<h3>$_POST</h3><pre>';print_r($_POST);echo '</pre>';
echo '<h3>$_SESSION</h3><pre>';print_r($_SESSION);echo '</pre>';
break;
default:
echo '<h1>Error: Unknown Page!!</h1>';
break;
}
?>
</div>
If I understand what you want to do is load all your "pages" into one html document and use javascript to allow users to click menu links to display the pages as though they might be separate html documents.
If each "page" has minimal content then there is justification to load it all into one document to give the users instant satisfaction instead of clicking and waiting... I have used this technique on various websites. In all cases, I used a combination of CSS and javascript to help me pull it off... I don't know if a jquery tab is the right solution - perhaps it is but i find large libraries to be the shotgun approach to getting things done - perhaps you might agree from the tight solution i will offer below:
Every "page" should have it's own div but, ideally, share the same class.
The class you define should hide those div's using css's display:none directive
Your main page can have an inline style directive display:block to over-ride the class directive which hides it
Each "page", excluding the main page, should have their id set to a short word or Pascal-cased short phrase
Your anchor tags to these "pages" should share a class so that a javascript routine can find them and operate on them
Also, these anchor tags should have href set with fragment identifiers (http://en.wikipedia.org/wiki/Fragment_identifier) that point to the appropriate "pages", ie. if you have a "page" with an id set to "AboutUs", the corresponding anchor might look like this: < a href="#AboutUs" >About Us< /a >. You will want to use fragment identifiers in your urls so that google and other search engines can process this notion of "pages" within your html document. Also, people will be able to externally link to these pages and you just need a bit of javascript to make it all work (next step).
Ok, we need some javascript so that when a user clicks an external link to one of your pages then it will display. It will need to be run onload of the document... you can put it into body.onload:
// the hash has the hash mark which we can parse away using String.substr()
var hash = document.location.hash.substr(1);
// now to call a function to display the desired page
ShowPage(hash);
Don't forget, we'll need the function to show the desired page:
function ShowPage(hash) {
// iterate the pages and show/hide
var pages = document.getElementsByClassName('page');
for (var p in pages) {
if (pages[p].id == hash) pages[p].style.display = block;
else pages[p].style.display = none;
}
Note: Older browsers don't support document.getElementsByClassName ... there are some great cross-browser techniques to add the function when not supported. Libraries like jQuery also ensure the functionality for all browsers - again, I'm not a fan of shotgun approaches and i would just overload the document dom node with my own getElementsByClassName function if i found it missing.
More fun stuff: if you want to get fancy with CSS3, instead of using display:block|none to show|hide pages, you could set pages to be absolutely positioned and transparent. With CSS3 transitions, you can animate the change between opaque to transparent for a fade-in effect on the user's click of a link... or, if you like modal windows, you can use a library like nyromodal (or script something tighter to your needs by yourself which is my preference)
A fully functioning example can be found at: http://reinpetersen.com/examples/intlnk/#PageThree
i am using a tool tip plugin that works by displaying the title attribute see this
i have a image with a title:
<img class="tiptip tip_top" src="adv.jpg" height="111" width="186" title="<?php echo $first; ?>"/>
if my php looks like this, it works:
$first = 'Check out the new diggs!';
but if i use styles it doesn't:
$first = '<span style="color:#f200c8;">Check out the new diggs!</span>';
any ideas how to use styles into php?
Your code is resulting in invalid HTML/CSS. You can't place style tags within a title attribute, only plain text. Your plugin should handle the tool tip's appearance. According to the documentation you linked to, you can modify the plugin's CSS.
Here is the HTML produced by the plugin:
<div id="tiptip_holder">
<div id="tiptip_content">
<div id="tiptip_arrow">
<div id="tiptip_arrow_inner"></div>
</div>
</div>
</div>
Those are the id's you should modify the CSS for, mainly tiptip_content.
You can't embed styles inside of an attribute like that. You need to find the class or ID values for the actual tooltip popup and modify those. The maker of the tooltip plugin might have some documentation to help you figure out what the classes he/she used are or you might be able to use Firebug (for Firefox) or the built in Developer Tools for Chrome to help you figure out the classes/ID.
The title attribute is not a HTML box. There should be only test values. If you want to display a styled title you should display it outside a image tag, for example something like this:
<img src="file.png" <!-- some other attributes --> /><br /><?php echo $title ?>
In this case $title can be a styled HTML text.
According to the spec, the title attribute expects to be the "text" type. This is explained elsewhere as
text that is meant to be "human readable"
HTML markup isn't meant to be human readable (it's meant to be machine readable), so the tags are parsed as plain text.
What is the easiest way to set background color in PHP ?
just insert the following line and use any color you like
echo "<body style='background-color:pink'>";
<?php
header('Content-Type: text/css');
?>
some selector {
background-color: <?php echo $my_colour_that_has_been_checked_to_be_a_safe_value; ?>;
}
You must use CSS. Can't be done with PHP.
CSS supports text input for colors (i.e. "black" = #000000 "white" = #ffffff)
So I think the helpful solution we are looking for here is how can one have PHP take the output from an HTML form text input box and have it tell CSS to use this line of text for background color.
So that when a a user types "blue" into the text field titled "what is your favorite color", they are returned a page with a blue background, or whatever color they happen to type in so long as it is recognized by CSS.
I believe Dan is on the right track, but may need to elaborate for use PHP newbies, when I try this I am returned a green screen no matter what is typed in (I even set this up as an elseif to display a white background if no data is entered in the text field, still green?
You can use php in the style sheet. Just remember to set header("Content-type: text/css") in the style.php (or whatever then name is) file
This really depends on what you need to do. If you want to set a background colour on a page then you need to use CSS as per Jay's and David Dorward's answers.
If you are building an image with PHP then you can use the GD library to allocate colours yourself. I don't recommend this without thoroughly reading up on how to create images with GD. http://www.php.net/manual/en/function.imagecolorallocate.php
Try this:
<style type="text/css">
<?php include("bg-color.php") ?>
</style>
And bg-color.php can be something like:
<?php
//Don't forget to sanitize the input
$colour = $_GET["colour"];
?>
body {
background-color: #<?php echo $colour ?>;
}
You better use CSS for that, after all, this is what CSS is for. If you don't want to do that, go with Dorwand's answer.
I would recommend to use css, but php to use to set some class or id for the element, in order to make it generated dynamically.
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.