I am making an HTML5 video player, but I need to put a play icon on my button and the old method no longer works. Also, I cannot use background-image:url('Filename'); because I also have a gradient, and when I add the background-image it overrides my gradient. Any suggestions?
you can do what twitter bootstrap does and use an <i class="some-icon-class"></i> in the content to easily add icons.
the CSS for that <i> tag is set to a block with a certain height and width, and has a background image.
they use it like this:
<button ...><i class="plus-icon"></i> Add New Item</button>
check it out: http://getbootstrap.com/2.3.2/base-css.html#icons
You have not specified what your button element tag is exactly. But since you say "html5" I will assume you are using the actual "button" tag. Maybe try this:
<button onClick="eventHandler();"><img src="button_image.png" /></button>
Or perhaps you are looking for "more proper" html5 where img tag is not used and all styling is strictly in the CSS?
Related
see this link
http://www.w3schools.com/html/html_attributes.asp
observe the HTML code.inside the tryit editor.
what should we use for it?
we any plugins or javascript for it?
use style attribute to give any type of style to any of the html element. Eg
Some link here
The best way of styling is using css. Here is a the turorial for that.
If you want to change the color of the background you can add
style="background-color:COLORHERE"
eg:
<body style="background-color:red">
or if you wanted to change the color of your font you can just add
style="color:COLORHERE"
eg:
<p title="About W3Schools" style="color:orange">
This all are attributes on that page that are added to a tag as in a and p they have used.
They are used for styling. When you are using style in your <p style="color:red"></p> , so over-here you are changing the color of font i.e. content that is present in-between p tag, font-color gets change from black to red. Same way we always add alt attribute to <img> and title has they have used in <p>. This two are not visible but plays main role with search engine.
i have a tinymce editor instance and by default the tooltips are positioned to the south of the object (buttons menuitems etc)
i would like to position them to the right (or east)
i can see in the css for the tooltips that there appear to be classes that operate this behaviour, but i simply can not work out how to use them
default css snippet
.mce-tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-nw .mce-tooltip-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-ne .mce-tooltip-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-s .mce-tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-sw .mce-tooltip-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-se .mce-tooltip-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-e
can you see things like .mce-tooltip-ne in there - i assume that controls placing the tooltip to the north east
but i literally cant even make it happen
please help
i couldnt work out how to call the styles with the compass bearings
so i just shifted the tooltip using a couple of styles in the default tooltip class
highlighted in bold below
.mce-tooltip{position:absolute;left:100px;padding:5px;opacity:.8;filter:alpha(opacity=80);zoom:1}
.mce-tooltip-inner{ position:relative;top:-10px; font-size:11px;background-color:#000;color:#fff; min-width:400;max-width:600px; padding:5px 8px 4px 8px;text-align:center;white-space:normal}
this is from /tinymce/skins/lightgray/skin.min.css
the additions to the code pushed the tooltip to the right enough for what needed
If you are referring to the tooltip shown in image above, that is simply a native browser tooltip displaying the title attribute of the anchor tag containing the icon.
Here's the HTML for that button:
<a title="Bold (Ctrl+B)"
onclick="return false;"
onmousedown="return false;"
class="mceButton mceButtonEnabled mce_bold"
href="javascript:;" id="story_content_bold">
<span class="mceIcon mce_bold"></span>
</a>
Based on the above, the short answer to your question is: no you cannot change the position of the browser's native tooltip.
However there may be ways to manipulate the way the tooltips are displayed, which will require you to make changes to tinyMCE source code.
One idea is to use another attribute to contain the title text. This way you can use CSS to style the tooltip based on the alternative attribute rather than having the native browser tooltip.
For example you can use data-alt attribute:
<a data-alt="Bold (Ctrl+B)" class="specialtooltip"></a>
Then use CSS to style it as tooltip:
a.specialtooltip[data-alt]:hover:after {
/* style to achieve tooltip effect */
}
Please refer to this fiddle for example: http://jsfiddle.net/va3jn2qy/1/
I'm using FontAwesome 3.1.0, and this simple code doesn't work as one would normally expect:
<a href="/">
<!-- other html content -->
<i class="icon-spinner icon-spin"></i>
</a>
Simply changing the a tag to div makes it work.
How to make the CSS3 animation work? Or is this not possible? I would rather not change it to div and make a link-like behavious via JS.
UPDATE:
The code above actually works, like on jsfiddle. It doesn't work on my page, though. There must be some underlying conflict that I can't figure out.
Example: http://www.iroquote.com/games/Udws8uZWCgAH6vfM/gta-5-gameplay-video-released
Try editing a.post-agree-amount:first where there is a <i class="icon-thumbs-up"></i>. When I change that to <i class="icon-spinner icon-spin"></i>, it doesn't animate. If you move this <a> around the DOM with the browser code inspector, it still doesn't animate. But once I change <a> to <div>, it animates.
I'm using Google Chrome 28.0, but also saw this behaviour in Firefox 22.0.
Found the problem and the solution.
CSS3 animations apparently don't work with display: inline elements, and Bootstrap's css had a rule that made <i> icon elements have display: inline. Except for <i> icon elements inside a.btn, Bootstrap's css had a rule to apply display: inline-block to them.
So all we need to do is apply display: inline-block to those i.icon-spinner.icon-spin inside the links.
(Thanks Praveen for useful comments)
Your code works, fiddle. But you should have the icons tag <i> outside the anchor tag, otherwise it will be hyper linked.
Change your like this
<i class="icon-spinner icon-spin"></i>
Google
Working Fiddle
I have the next two elements on an HTML file:
<a id="a1" href="?cssfile=css-folder/015/styles.css">Style number 015</a>
<div id="a1Preview"></div>
The first one (anchor) is a reference to a CSS that will be loaded dynamically by the page. The second one (div) pretends to be a preview (thumbnail) of the style sheet.
THE PROBLEM IS I need a way to set the div background dynamically from the CSS, something like:
#a1Preview
{
background: url(css-folder/{"015" extracted from the <a> element}/preview.png);
}
Is this possible? Any ideas? Of course the HTML is untouchable. I can only change the CSS.
Thanks in advance.
You could use jQuery to change the css content dynamically. jQuery is a extension to javascript. From there you could then use the system you use to skin, but generally to extract href attributes from tags and change CSS, you can use such a thing.
It looks like a button, but it is not an input element. How can such an element be created?
Maybe it is a button element? Or img element with a image of a button?
it can be a <button>
It can be anything with the right border
it can be an image.
You could use an image, or you could style a div (or other block level element) around some text. You could then make it behave a bit more "buttony" with javascript effects. Quite why you'd want to do that is beyond me though.
They're normally created by adding CSS styling to a standard hyperlink, sometimes in combination with javascript. Check out Top 10 CSS buttons tutorials.