I want to write content in a post editor and display it somewhere in the same page only.
Previously I tried:
<div class="post-header-title"></div> - Where I like to display my content.
In Post Editor:
<style>
.post-header-title:after
{
content:"Content that I'd like to display.";
display: block;
padding-top: 10px;
font-size: 40px !important;
color: rgb(187, 185, 185) !important;
font-style: italic;
}
</style>
The above step using Pseudo-elements worked perfectly and it rendered the text that I want to display in my desired place.
But it can not be highlighted and search engine can not index it. So it became useless. Here is a codepen:
http://codepen.io/anon/pen/Ggwjpj
This is just an example.
I want to do something like this.
So how can we do that? Can anyone help me please.
Jquery has many functions to add html to your web page. To reproduce something like what you did, just use the after method.
$(".post-header-title").after("<span class='text'>SomeContent</span>");
See an example
Related
I recently figured out sharethis.com offers free reaction buttons that can be embedded into any site. The size of the reaction buttons is too large. Good for blog posts but not good for discussion forums as there are too many replies/posts in each topic. I embedded the buttons into my forum. I want to reduce the size of the buttons from 45x45 to 16x16. I tried modifying CSS but unfortunately, it doesn't help. Is there anybody who can help to reduce the size of the reaction emojis? I'd really appreciate the help.
I tried looking for the support of sharethis.com. But there is no support/ticket/contact system there.
This is the code I'm using:
Javascript
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5ed622e4c2a2080012eb58e8&product=inline-reaction-buttons" async="async"></script>`
HTML
<div class="sharethis-inline-reaction-buttons" stlye="font-size: 10px;"></div>
I tried adding CSS modifying the button's class.
.st-btn {
font-size: 16px;
line-height: 16px;
}
Also tried
.st-btn {
height: 16px;
width: 16px;
}
But it's having no effect. Any solution to this will be appreciated.
You can test it out at my website testing website in case you need to inspect the element and modifying CSS. http://tvpsite.ml/forum/index.php?topic=1
Just found how the size can be reduced via CSS.
.st-btn > svg {
height: 20px !important;
width: 20px !important;
}
Above code does the job of changing size of a reaction emoji.
I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?
First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.
can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>
For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}
Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.
So I've been having a strange issue with JQuery's .text() method. What I have right now is some JS code that generates a random phrase from a few banks of random words, which I believe has no problem (it basically just produces a string). When you click a link in the browser, that link's text is replaced by a random phrase produced by the random phrase generator. So far, there is nothing wrong with the generated random phrase. However, it tends to garble the text behind it:
It seems that the browser is having difficulty when pushing text to the next line, causing it to overlap with the text that was already there.
When I highlight the paragraph, it "resets" correctly and it's fine until I try clicking the link again. If I zoom in or out, it seems like it's fine until I return to 100% zoom. If I make the text font size smaller, it seems to work fine too.
Here is the Javascript code:
//Initially get random phrase and display it on the page
getRandomPhrase();
$('#phrase').text(finalPhrase.new);
//On click, get the random phrase and display it on the page
$('#phrase').click(function () {
getRandomPhrase();
$('#phrase').text(finalPhrase.new);
});
Here is the HTML tag that I'm trying to replace:
<a title="Click!" href="#about" id="phrase">(the random phrase should be in here)</a>
The tag is in the middle of a paragraph of text. If anyone has any idea how I could fix this that would be great!
Edit: Here's all of the CSS, don't know what the problem could be. I'm using this on top of Bootstrap:
#import url(http://fonts.googleapis.com/css?family=Roboto);
#import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
body {
font-family: 'Roboto', sans-serif;
background-color: #FFF7E4;
font-size: 14px;
}
h1 {}
hr {
border-color: #9A9A9A;
}
#name {
font-family: 'Roboto Slab', serif;
margin-top: 0px;
font-size: 80px;
color: #DB1C00;
}
#header {
font-size: 20px;
color: white;
padding-top: 70px;
padding-bottom: 40px;
background-color: #CCC6A6;
}
#about {
font-size: 20px;
}
#phrase {
color: #DB1C00;
}
I've just managed to fix the problem. The solution is very strange, though.
I should've added more HTML to the original post.
Here is a basic view of the frontend HTML:
<div id="about">blah blah blah about me stuff
<a title="Click!" href="#about" id="phrase">(the random phrase should be in here)</a>
</div>
I had sent the link in the tag to go to #about, which did not seem wrong at all. (The reason I did this was because the user needed to be able to click on the link and stay there to see the result). I changed the href to #phrase, thus linking the link to itself:
<div id="about">blah blah blah about me stuff
<a title="Click!" href="#phrase" id="phrase">(the random phrase should be in here)</a>
</div>
This fixed the whole garbled text issue somehow. My hypothesis is that linking to the entire div was somehow not allowing it to reset properly, or that it was caching the div's original content in some way. Anyways, if someone could properly explain why this works that would be great haha. If anybody has a good explanation, please let me know! It's a really weird solution and I have no idea why it works (or why there was a problem in the first place!
I'm trying to use a dijit/layout/TabContainer with a modified dijit theme. I need to modify some of the styling of the TabContainer tabs such as the padding of the tabs, boldness, etc. However the styling commands specific to the pages that use the TabContainer are not working.
This piece of code is on my home page's CSS file.
.myTheme .homeTabContent
{
font-weight: bold !important;
}
.myTheme .homeTabContent .dijitTab /* The .dijitTab is the original CSS class of the tab*/
{
font-weight: bold !important;
padding-left: 3px !important;
padding-right: 3px !important;
}
The tabs' padding and font-weight remain unchanged despite the !important. Editing the TabContainer CSS file in myTheme isn't a practical solution because I that will just mess up the styling of a different page. What happens is that as I load the page with the styling, my commands appear to be working for a split second, however all of that is undone when the TabContainer finishes loading. Can anyone tell me why or offer me a solution? Thanks in advance!
Here is a working solution. http://jsfiddle.net/oamiamgod/rd58M/
I have included class myTheme to body tag. Like this
<body class="claro myTheme">
I'm not good at english but I will try to explain.
If you write css like this .myTheme .homeTabContent .dijitTab that mean an element of class homeTabContent have to stay inside some element that has class myTheme
Like this
<body class="claro myTheme">
<div class="homeTabContent">
<div class="dijitTab"></div>
</div>
</body>
But if you write css like this .myTheme.homeTabContent.dijitTab (with no space) it will be
<div class="myTheme homeTabContent dijitTab"></div>
I'm trying to change the style from my AutoComplete result.
I tried:
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.
Thanks.
Using:
jQuery-UI AutoComplete
EDIT: I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.
EDIT2: I'll use the autocomplete from jQuery UI as example.
Check this to see the jQuery-UI auto-complete page
After I type "Ja" in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.
This little box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).
I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.
The class for the UL that will contain the result items is what I need.
SOLUTION
As Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file.
This will make all the the results box css have width:300px (like the sample).
I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to $('...').css(). You'll actually need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file, so that it will take effect when the results are generated and inserted into the page.
– Zikes
Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
Fiddle
HTML
<input type="text" id="auto">
jQuery
$('#auto').autocomplete({'source':
['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});
CSS
ul.ui-autocomplete.ui-menu{width:400px}
/*
targets the first result's <a> element,
remove the a at the end to target the li itself
*/
ul.ui-autocomplete.ui-menu li:first-child a{
color:blue;
}
I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
<style type="text/css">
/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }
/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>
If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.
Just so you know you have two options for optimizing your code:
Instead of this:
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
You can do this:
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
Or even better you should do this:
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});