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.
Related
I have a Wordpress site which displays the post's content using
<?php the_content(); ?>
there are images and text in the content which all get outputted in < p > tags
I want to style the margins/padding of the images and text differently. I can target the images but when I apply styles to the text, they affect the images as well.
The only options I can think of are using - margins (but that will cause problems later) and putting all text in block quotes but that will remove that functionality for future use.
can i 'pull out' the images and/or text out of the_content and display them another way?
HTML - currently
<div class="row">
<?php the_content(); ?>
</div><!-- /row -->
You can do it in several ways:
My prefered one is the follow:
Let's say that you have a div with a css class (i.e.: content wrapper)
So it will look like this:
<div class="contentWrapper">
My amazing conent <img src="amazing.jpg"/> <p>testing paragraph</p>
</div>
So in this example you can use simple css selectors to make any change that you want for the elements under contentWrapper i.e.:
.contentWrapper img, .contentWrapper p{
margin-right: 5px;
}
Another - but much dirtier way is using regex to replace some tags.
It's not a good practice at all, so I don't thing there is a point of an example.
Good luck!
Basically two sane ways to go about this:
Modify the existing CSS and tune it to target both the elements and the classes more precisely. That's the easier way.
Capture the output of the_content(); into a variable and then use preg_replace() etc. to modify the content. Or use a proper DOM parser in PHP to do the same. More work here.
(Use Javascript to modify the DOM after it's loaded. Less elegant approach.)
Use preg_replace to pull the images, remove the <p> tags and replace them with something else.
function filter_content_images($content) {
return preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<div class="content-image">\1</div>', $content);
}
add_filter('the_content', 'filter_content_images');
This will remove them and replace with which you can then mini
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; }
I am new to JQuery, and I am attempting writing code using PHP, HTML, and JQuery.
I want to replace all of the <?php echo $var; ?> in my HTML with tags that have id's, instead. For example, I want to have something like <div id="name"></div> which would then use a $("#name") to have it display something in that div field.
My questions:
Does it have to be a <div> tag with that id when I call the #name in jquery? Or can it be in any tag and still have the same effect? --Would this work as well: </div>.
What if I want to put tags with id's to replace the alink--What tags would be good for that?
Any help appreciated.
You can add an id to any field. However, you can only use that particular id ONCE per page.
Ex.
<div id="name"></div>
<p id="name"></div>
<a id="name"></a>
The above is invalid and will cause problems if you use $('#name') in your jQuery. If you want to alter multiple things, like shown above, you are better off using a class and a different kind of selector:
<div class="name"></div>
<p class="name"></div>
<a class="name"></a>
$('.name')
This will select both of the elements.
An id can be an attribute of any html tag (element).
It also must be completely unique to the html document at any given time.
<?php echo $var; ?> however is not html at all, it is PHP which is something separate all together.
It can be any tag (=element), not just divs.
I am dealing with HTML that's been generated with FCKeditor. So it will look something like this:
<p>Paragraph</p>
<ul>
<li>List item</li>
</ul>
No head tag, no body tag, just a snippet of HTML.
I am trying to add support for certain variables that, when inserted into the HTML, will be replaced with dynamic content. So the HTML, variable inserted, might look like this:
<p>Here's a variable: {widget}</p>
I want to replace {widget} with this:
<div class="widget">Hi, I'm a widget.</div>
FCKeditor encapsulates content (rightly) into paragraphs when you insert a line break. So if I did a straight replace, the resulting HTML would be this:
<p>Here's a variable: <div class="widget">Hi, I'm a widget.</div></p>
That's not going to work because the div tag is inside of the p tag. So what I want to do is close the paragraph and insert the DIV after it:
<p>Here's a variable: </p>
<div class="widget">Hi, I'm a widget.</div>
Let's take this example:
<p class="someclass">Here's a <strong>variable: {widget} more</strong> content
after</p>
I would want this result:
<p class="someclass">Here's a <strong>variable: </strong></p>
<div class="widget">Hi, I'm a widget.</div>
<p class="someclass"><strong> more</strong> content after</p>
At every instance of {widget} in HTML snippet, I need to make a "break" in the HTML. Which is to close every open tag, insert the widget code, then open them all again in order.
Is this possible using a PHP HTML parser? If so, how would I go about it?
I would suggest an entirely different approach. (F)CKEditor can already do what you want. Just try to add a table in the middle of a paragraph. It will close the inline tag stack, add the table, and reopen the stack again.
I suggest that, instead of having your users write {widget}, you write an (F)CKEditor plugin that adds the widgets for you. You can take a look at the code for the table button (or any other block-level element) to see how (F)CKEditor inserts them.
There are two things you can do when a user hits the "widget" button. Eitther you insert some custom tag such as <widget type="foo" />, or you insert a HTML tag that you can recognise later on, like <div class="widget foo"></div>.
With some extra elbow grease you can even make this fancier by actually loading the widget itself, wrapped in such tags. That way, the user would see exactly the same in the editor window as when it was stored. When the editor saves to the server, simply empty the tags wrapping the widget to get rid of it.
Example workflow (cursor marked by | sign):
User types text:
<p>foo bar| baz</p>
User hits "widget" button:
<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>|baz</p>
When saving, drop the widget contents:
<p>foo bar</p>
<div class="widget foo"></div>
<p>baz</p>
When displaying the saved contents, parse for div tags with a "widget" class and dynamically fill it:
<p>foo bar</p>
<div class="widget foo"> ... contents of "foo" widget ... </div>
<p>baz</p>
This could be done post-process when saving with regex if you were pretty careful about what you allowed. Alternatively, I do a fair amount of juggling on the front end with my editor (CKEditor) output, combining the user-input content plus things that I jam in both between and around the string that I parse and regex.
Another option to be explored is the BBCode plugin that CKEditor has added. Having been a longtime user of FCK plus a current user of CK, I can tell you that it's well worth the time to make the upgrade. And, according to the CK Developer site, it claims to be built-in. I also found a plugin that will allow BBCode. Both could easily be adapted for your purpose.
Finally, if you're adventurous and confident with Javascript, the HTML Processor can be hacked to do quite a few things. For instance, CK now outputs with styles rather than traditional HTML, and my editor does strictly HTML Emails which don't support style declarations so well. So, I hacked the HTML Processor's code to output everything with height=, width=, align= etc rather than style="height=x; width=x" etc.
here is the situation. I'm retrieving a page using curl into a variable. So I now have all the HTML in one snug variable. I need to however using code access a certain DIV notes contents actually its like this - there is one div node on the page with the ID of 'image' and its kinda like this:
<html>
<body>
..........
<div id="image">
<a href="somelocation">
<img src="location.jpg"/> <!-- I need to grab the src of this image object -->
</a>
</div>
<div> Other stuff blah blah</div>
</body>
</html>
I need to grab the src attribute of an image tag which is nested within a div tag of the id 'image' which is tucked away somewhere on an HTML page.
How do I do this server end considering I'm retrieving this page using curl.
Thanks again.
Have you considered using an HTML DOM Parser ?
This will handle all the parsing (even of irregular HTML) and the subsequent querying of elements.
(I wouldn't use regexps - HTML isn't regular and not suited to regexp usage. Huge numbers of edge cases exist to trip you up)