I would like to have 2 different configurations of addthis on the same page.
Take note that I'm using the new Addthis, where the code looks like this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx" async="async"></script>
<div class="addthis addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
What I'm trying to do is have 1 that have the share numbers tooltips and the other doesn't
Is it possible?
Since AddThis creates HTML elements that contain the count 'tooltip' (it's not actually a tooltip) with a single class or ID element, if you want to be really specific (i.e. choose what to hide exactly where you have two or more AddThis instances on a page) you could:
add the instance where you want to hide the count inside a div with a CSS ID or unique class;
use display: none to hide the parent social media count element only inside that div.
Target the AddThis where you want to hide the count elements
Seems obvious, but For example, on this page if you inspect (e.g. in Chrome) the rendered Facebook and Twitter AddThis elements and add 'display: none' to the .pluginCountButton and .count-o styles that contain the elements you want to hide, as expected: they vanish from the display.
So if you nest your AddThis instances inside a uniquely-identified div (or any parent element) then you could simply target the one you want to hide like this:
#hiddencount .pluginCountButton,
#hiddencount .count-o {
display: none;
}
You'd need to locate the equivalent .pluginCountButton and .count-o elements for your version and instance—each social media icon has it's own so you'd have to identify each, as in the above example. You may also need more specificity between #hiddencount and the count container to get the style to apply.
NOTE: without a working example with the count links showing, this is untested. If you have a working example, I'd be happy to test it.
Through some digging I discovered the answer.
You need to add the class addthis_toolbox to your divs like so:
<div class="addthis addthis_toolbox addthisBlogue clearfix">
<div class="addthis_sharing_toolbox"></div>
</div>
source: http://support.addthis.com/customer/portal/questions/5024966-multiple-share-button-on-same-page
Related
I'm using Bootstrap and making a simple form with col-sm-4 grid. Now it looks as:
Also when I resize browser width to 507px, C1 and C2 elements slide down to the next line:
And by some reason my dropdown lists look as plain HTML without any styles, despite I add class="selectpicker" to them. I expect them to be like:
I want to get something like this:
This is my fiddle: https://jsfiddle.net/j96vaokc/
What Bootstrap classes should I use?
Thank you in advance.
You have a couple simple problems. First off, the selectpicker class is part of this Bootstrap jQuery plugin, bootstrap-select. You would have to download and include that script and stylesheet. Before that, you would also need to include the jQuery script.
Here's a working fiddle to demonstrate what it'll look like with your code and the included scripts. Go to the 'External Resources' tab on the left to see which scripts/stylesheets I included and in which order:
https://jsfiddle.net/j96vaokc/5/
I added
.dropdown-toggle {
width:60px !important
}
just to make the presentation neater on jsfiddle.
In regards to the wonky placement during window resize, that has a lot to do with your use of the bootstrap grid classes. In my fiddle you'll see that I removed alot of column classes since they weren't necessary. What I'm doing with the CSS is important because I have to override the default bootstrap-select styling for width in order to properly center. Also, in case you missed it I explicitly added a line break between the labels and select options.
When using a CSS framework's grid system, like that of Bootstrap or Materialize for example, I find myself typing the following HTML very very often:
<div class="row">
<div class="col s12">
<!-- Some text/ a button / something -->
</div>
</div>
Essentially I need to put one item, say a paragraph or a button, on it's own row on the page, and in order to do so I need three tags instead of just one. This over time creates a lot of bloat in my HTML.
I have considered creating an angular directive to make it one extra tag instead of two, but I feel like that's a sloppy solution. Does anyone know of a better way to solve this problem?
One OPTION will be to create a code snippet so if you type, element it will expand in the full HTML, snippets are available in sublime text, atom text editor.
Another simple option is to use emmet, it is available in the two mentioned before and brackets, like this:
.row>.col.s12>element TAB
try something like this..
.parent {
display: flex;
}
.child {
flex: 1; /* will grow and shrink with the screen size
min-width: 20ems ; /* optional if you want the element to not fall below a certain width
}
This is just a small example..look into flexbox and see how you can style your rgrids better..
Just wondering if its possible to store invisible data in a HTML tag that activates the element but doesn't show data.
For instance, if I had a <h1></h1> element and I wanted the element to be active so the DOM would think there was a real header there and therefore include any additional properties (ie padding, margins etc) is it possible to have the element active by putting in something between that tags that wont display on the view?
I remember seeing something ages ago that did this but can't remember where from...
You can use visibility: hidden CSS like so:
<h1 style="visibility:hidden">...</h1>
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/visibility for information about visibility.
EDIT:
In order to hide the contents of the heading, you could use JavaScript or a library like jQuery. Let's take jQuery for example. You could do something like this: https://jsfiddle.net/yanpbw1v/. In this example, I am saving h1's data into a variable and then clearing h1's data out.
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 8 years ago.
Ok, so I posted this up in this thread (Difference between div id and div class) but was instructed to post it up as an individual question. I get the answers in the previous thread but wanted more clarification on the subject.
I am fairly new to css, so the conversation over DIV and CLASS interests me. I have built a site using wordpress which has allowed multiple ID's. I am interested if there really is anything wrong with this? For example, this code displays four boxes in two columns, two rows within the container...
<div id="container">
<div id="sub_container"
</div>
<div id="sub_container"
</div>
<div id="sub_container"
</div>
<div id="sub_container"
</div>
If I have specific styling that is different to the WP theme, obviously then it can be applied to the div or the class?
So in the case above I might have
#sub_container {background: #ffffff; position: relative; float: left;}
So I want to figure is this OK? If not, what is the benefit of having the sub container as a class rather than a div? I get the 'unique' argument, but if this works fine, why not use it?
In my code I have used classes for some headings and sections where I want specific formatting that varies from the built in formatting, but that's about it..
..I figure I would use class if I wanted to apply different styles to the sub_container div? e.g. might want the second one to have red fonts, or have the boxes a different size on another page etc etc?
An id should be unique in the page. That's not just a rule that the standars tell us, it's the entire point of setting an identifier on an element.
You should use the id when it is an element that really only appears once in the page. If you have a page footer that would be a good use of an id, as you only have one footer. For any element that can appear more than once, a class is better used. This applies even if the element actually only appears once, it just goes along with the intention of the attributes.
"I get the 'unique' argument, but if this works fine, why not use it?"
There is two problems with this:
You don't know that it works fine in all current browsers, not to speak of all the browsers and browser versions coming in the fututre.
It dosn't work fine when you go beyond CSS. If you for example want to access the element using Javascript, you see that the id gets almost completely useless if you have duplicate id attributes in the page.
Id's should always be unique, having the same Id may "work" from a css point of view but two vehicles do not have the same registration number and two people do not have the same social security number.
ID = Identity.
If you want to apply the same style to multiple elements use the class instead
markup
<div id="container">
<div class="sub_container">
</div>
<div class="sub_container">
</div>
<div class="sub_container">
</div>
<div class="sub_container">
</div>
css
.sub_container {background: #ffffff; position: relative; float: left;}
Other developers will expect ids to be unique. This means that if you use what is expected to be a unique id when you should use a reusable class, you will at some point experience unexpected behavior when using 3rd party software.
For example, with jQuery you will find this behavior.
//jQuery selecting by id
$('#sub_container') //will find one of the elements with the sub_container id.
//jQuery selecting by class
$('.sub_container') //will find all elements with the sub_container class.
I just skinned jquery UI Accordion. Everything works fine. But as soon as a add a div or a hr between 2 items it goes all wierd
here is my fiddle
http://jsfiddle.net/cancerian73/bgkCg/1/
.divider{width:100%; height:15px; background-color:#F00;}
As described in the jquery-ui accordion documentation, you must have pair of header/content in your markup :
The markup of your accordion container needs pairs of headers and content panels
[...]
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.
Because you are adding elements between header/content pair :
<div class="divider"></div>
you must use the header option. All you need is to specify which elements are headers in your markup and add your content as siblings of those elements.
Have a look in this jsFiddle and tell me if it feet your needs.