I'm using addthis.com to generate social media share buttons, however, their buttons come with an animation on hover which I really don't like and would like to remove it if possible.
You can see the issue live here - http://onyx.space/image/4
The problem is that the only code I've been given is this:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b50a10e742393c0"></script>
And the code for the buttons:
<div class="addthis_inline_share_toolbox"></div>
There is some customization on their website, however, there's nothing about animations. I've googled this issue and found nothing about it.
I wonder whether the animation comes from the JavaScript and how would I go about finding it and removing it.
you can override that animation with more specific selector. for example add below css code in your css file
div .at-resp-share-element .at-share-btn:focus,
div .at-resp-share-element .at-share-btn:hover {
transform: none;
}
Related
So, I'm working on a page and am having a slight issue with setting up a hover funtion dynamically. What I am trying to do is for each entry, create a hover function. I tried everything I could think of but it always seems that each entry gets assigned the same hover function. So, I came to the solution I have now which works in jsfiddle but not on the website I made.
Is there a better way to create a dynamic hover function, or how can I get this to work? Any help is appreciated.
Link to fiddle
Link to website
This has nothing to do with ExpressionEngine, it doesn't even need to be done with Jquery and can be done purely with CSS.
The problem is you're outputting the JS with every loop of the channel entries instead of using a centralised JS file in your head or bottom of the body html, similar advice would be to move the CSS into a general CSS file instead of inline.
.MF {
hide the rollover text
}
.MF:hover {
hide the title and sub-title
show the rollover text
margin-left the arrow
}
I often find myself showing/hiding elements with jQuery, for example a simple tabbed content area where the first tab is visible and the others are not until they are displayed with the javascript. I know it's not good practice to hide the initially hidden ones using CSS (display: none) and then showing the correct ones with JS as non-JS users will never see a thing. So by default I show all and then hide the relevant ones with JS.
In doing this though, the hidden elements will load and then only hide when document is ready. How can I stop this happening? Is there a way of doing this in a way that will degrade gracefully but also not have elements appearing whilst loading, and then promptly disappearing as this looks a bit shoddy.
Unfortunately, the way that Javascript works, this doesn't seem to be possible. There will always be a fraction of a second between the first rendered frame and by the time the JavaScript to hide the element gets executed I was wrong about that, jQuery seems to be able to do that. So, CSS is the best means for this. Luckily, you can add an alternate CSS stylesheet within an infamous <noscript> tag:
<style type="text/css">
#jquery-thing {
display: none;
}
</style>
<noscript>
<style type="text/css">
#jquery-thing {
display: block !important;
}
</style>
</noscript>
Here's the JSFiddle link:
http://jsfiddle.net/kylewlacy/dbWuc/
a few thoughts...
If you don't mind jQuery being littered all over the page as opposed to being all in a separate file, you can call $('#divToHide').hide(); immediately after the element appears. Not very good practice though. Although it depends on the use case, if you are largely a designer/themer creating a 5 page brochure site, you should choose what is right for you!
Or if you're a bit more of a techie, you might like to mess around with .live()/.livequery() and catch the element's insertion with JS and hide is straight away. See this post Is there a jquery event that fires when a new node is inserted into the dom?
I am trying to add a single most recent tumblr post to another page.
I found the easiest way is to use the Javascript code provided by tumblr
here is what they offered:
<script type="text/javascript" src="http://occupy837.tumblr.com/js"></script>
adding ?num specifies the number of posts, so I can see that I am almost there
<script type="text/javascript" src="http://occupy837.tumblr.com/js?num=1"></script>
when I go to the page
(www.Occupy837.com) One single post shows up!
my only issue now is that it has a single 1 on the left of the post
tumblr quotes "[use the] code to embed your posts as basic HTML that you can skin with CSS:"
Does anyone have any idea how I can remove that number?! what do I have to do with CSS to make that disappear!
Add this to your css
li.tumbler-post {
list-style: none;
}
Here is the answer!
after doing some research I found this to be the solution:
ol.tumblr_posts{
list-style:none;
}
be careful not to type "tumbler" because it is always without the "e"
My friend ran into this last night and tumblr exactly provides something that is pretty decent but with very few documentation. Every tumblr post has CSS classes. The above answers work. If you need to know more about the classes tumblr provides right click a post and click inspect element.
You can add these classes to the CSS of your website. Adjusting the CSS of tumblr doesn't effect it.
Adding the above CSS will fix this issue.
I like the idea of the Twipsy plugin that is bundled as part of Twitter Boostrap, but it doesn't seem to work correctly.
Here's a jsfiddle: http://jsfiddle.net/burlesona/DUPyR/
As you can see, using the default settings as prescribed by the docs, the tooltip appears when you hover over the tool-tipped anchor, but it doesn't go away when you move the mouse away.
I understand that the appearance of the tooltip relies on CSS, but on the Twitter docs page the tooltips are being added and removed from the DOM by the script, whereas in this example and in my own local tests the script adds the tip but never removes it.
Here's a link to the script: http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js
Any ideas / suggestions? I'm pretty confused as to why this is behaving as it is.
Alternatively if anyone has a better suggestion for a clean, lightweight jQuery tooltip plugin, please let me know.
Thanks!
As you have noted, your code is not working because you have not added the CSS file to your resources.
Working example: http://jsfiddle.net/DUPyR/1/
Because in that CSS file there are two classes called
.fade {
-moz-transition: opacity 0.15s linear 0s;
opacity: 0;
}
.fade.in {
opacity: 1;
}
When you move mouse in, the Tool-tip gets prepended to body and it gets class="twipsy fade in" The in gets removed on the hide function of the tool-tip making it invisible (opacity=0).
Working example with minimal CSS: http://jsfiddle.net/DUPyR/3/
Please note that its not removing the element from DOM as in the original example. More investigation of the CSS will surely shed some light there.
If you ask me my favorite tool-tip plugin, I use Jörn Zaefferer's lightweight tooltip plugin (4kb compressed). It suits my purpose well.
Link here: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
I am not sure why twipsy is not working, but tipsy works: http://jsfiddle.net/X6H2Y/
Tipsy is the original jQuery plugin which was modified by Twitter for these:
(Twipsy is) Based on the excellent jQuery.tipsy plugin written by Jason Frame;
twipsy is an updated version, which doesn't rely on images, uses css3
for animations, and data-attributes for title storage!
Or you can use "tooltip" like this:
<div rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" data-original-title="hi">I'm here</div>
<script type='text/javascript'> $(window).load(function(){ $('div[rel=tooltip]').tooltip(); });</script>
rel: http://twitter.github.com/bootstrap/javascript.html#tooltips
Yeah, it seems to be removed as a separate plugin now (2.3.1 at the time of writing) but there is a ToolTip plugin that comes with the main bootstrap.js file so that should do you.
When adding JQuery to hide a class it of course waits for the page to load then hides the class, same thing for 'addClass'. There has got to be a better or faster way for it to 'load' as the page is loading. Anyone know of any ideas? I have given my sites JQuery scripts below with links to see them in action:
Hides sub filters: Link to example of my script to hide sub filters (notice left navigation filters)
if(jQuery('.refinement_category_section').length){
jQuery('.refinement_custom_category_section').hide() &&
jQuery('.refinement_filter').hide();
}
jQuery(document).ready(function(){
if(jQuery('.refinement_category_section').length){
jQuery('.refinement_custom_category_section').hide() &&
jQuery('.refinement_filter').hide();
}
});
OR
Adds a Class:Link to example of my script adding Class (notice left navigation filters)
$('.refinement_brand_section').parent().addClass('filterresults');
Using Firebug, it appears that the issue is with the number of images that you are loading. My suggestion is to dynamically load pictures for your items using javascript after applying your style changes or have a smaller number of items on the page (or both). This will result in a degraded, but still functional interface for non-javascript users. For javascript-enabled browsers, you can adjust how and how many images are loaded to still achieve a nice effect.
You should also use sprites for your small interface elements so that you're downloading a single image and using CSS to display various portions of it. Combining your javascript files and stylesheets for your production site would also help quite a bit -- you've got 20+ js files and 13+ stylesheets, each of which requires a separate request. You might want to run YSlow and follow it's other recommendations.
you can add CSS rules to hide these classes and then change it after jquery loads
.refinement_category_section, .refinement_custom_category_section, .refinement_filter {
display: none;
}