Twitter Bootstrap / Twipsy - javascript

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.

Related

How to turn elementor section into clickable button

Link: http://up8.431.myftpupload.com/services/
I need to turn the section on the page above into clickable buttons. I'm using WordPress with the elementor plugin installed.
I've already added some extra CSS to make the sections appear to clickable. I just need to add the actual functionality. I understand this is done with javascript. I haven't tried adding any javascript code yet. I'm a little hesitant too because I don't think I have the skill and knowledge to do it properly. I don't want to just start adding code everywhere. Past experience has thought me that's a bad idea.
I'm hoping someone experience with elementor can help me out. Here's where I'm stuck:
Where do I add the javascript? There's nowhere for me to add javascript like there is a section for CSS for each element. Should I add it in the customizer (Appearance --> Customize --> Custom CSS/JS)? Should I get a plugin for custom javascript? I've already given each element a custom class. I could attach some JS to these classes.
EDIT: Thought about it a little more. I don't think adding the JS in the Customizer is the way to go. I'm thinking any CSS/JS I add there should be exclusive for the topbar, header, and footer. My reasoning is because these are the sections that will show up the exact same way on each page.
That leaves me with the option of getting a JS plugin. Is this the best way?
What would be the best way to accomplish what I need to. I definitly don't have the skill to understand the Elementor Developer Docs. It's way too advanced for me. That's why I'm asking here.
Thx in advance
if you know how-to and it's through javascript you can do it this way:
Drag and drop HTML widget-> insert your js between script tags.
I recommened using html in your footer(made with elementor) so the script will be available in entire site.
I managed to find a way to do so without any plugin or js, just CSS:
First we need to set a minimum height for our Section/Column (I set 50vh);
then we have to add an element which has link/a tag (e.g. Title Widget) and set a CSS class for that (in my example .mhdizmni_title);
now we have to write a bit of css:
.mhdizmni_title a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}

Can I somehow remove the animation from buttons generated by addthis.com?

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;
}

Using Angular 1.2 and Animate.css for loading animation?

I'm trying to get a page to animate in on load using Angular 1.2 and Animate.css.
Here's the Plunker: http://plnkr.co/edit/oDiDfRCO2Msc0StNrtqH
I'd like the background to crossfade in and the yellow menu on the right side to slide in from the right.
In main.html:
<div>
<div class="background-container">
<my-Background></my-Background>
</div>
<div class="menu-container">
<my-Menu id="menu"></my-Menu>
</div>
</div>
In main.css:
.menu-container.ng-enter {
animation:3s fadeInRightBig;
}
.background-container.ng-enter {
animation:3s fadeInDown;
}
The animations defined in main.css don't seem to get fired. I'm pretty sure its due to the order and/or timing of css being loaded although I might be dealing with more than one issue.
What's the "right" way to ensure everything, from an animation standpoint, is loaded and ready in order to make the animations work on load?
Have you looked at something like an HTML5 loader to load your initial assets when the DOM is loaded. There is a jQuery plugin, I know it is not Angular and another library, but it may help your order of operation.
http://gianlucaguarini.github.io/jquery.html5loader/
You can try nganimate , an easy documentation for you to refer
https://docs.angularjs.org/api/ngAnimate

How do these elements fade out on this site?

How do these sites implement fading effect?
Notice this site carefully:
http://blog.insicdesigns.com/2010/06/best-html5-media-player-implementations/
As you scroll down, you see a little fade effect for images/videos etc. It only happens once. Can anybody let me know how is this done?
Thanks.
Looks like this is done with jQuery and the lazyload jQuery plugin. The plugin is available here: http://www.appelsiini.net/projects/lazyload
It's very simple to use, you tag all the images you'd like to load with a class, like .lazy. Then you use this to "select" for those tagged images and the plugin does the heavy lifting. You have to include the jQuery library file and the plugin file with <script> tags, and then a simple script kicks it off:
jQuery(".lazy").lazyload({
placeholder : "http://mysite.com/placeholder.gif",
effect : "fadeIn"
});
This puts the placeholder image in until you scroll into view, and uses the fadeIn effect to display the image.
Looks like they are using jQuery LazyLoad plugin for this effect.

Problems with jQuery UI Datepicker

Ok, I've rolled my own theme, I've made a custom jQuery UI pack (progress bar, date picker, slider) and installed it all. Seems to (mostly) work except for two things:
When my page first loads the datepicker div is visible; and
The text "Next" and "Prev" are visible in large font underneath my icons. None of the examples seem to have this problem.
Now (1) I'm currently solving by:
#ui-datepicker-div { display: none; }
in another CSS file but again none of the demos seem to need this.
What am I missing?
I fixed it using #ui-datepicker-div { display: none; }
Ok many thanks, It's Work bro, here what I've did to resolve :
write this style to file jquery-ui-1.7.1.custom.css (or anye css file that you loaded) :
#ui-datepicker-div { display: none; }
then refresh your page
make sure your javascript files are properly loaded, check for missing files or incorrect path.
make sure that your script run after the document is ready, try putting your script before and/or inside the $(document).ready(){}
try stripping out your own css to see if there's any css conflict.
post some code for us here. :)
I had a similar problem because I was using the wrong version of the stylesheet for the version of jQuery UI I was using (I'd upgraded the jQuery UI without upgrading the stylesheet). If you're using jQuery UI 1.8.17, make sure that the stylesheet being used is also version 1.8.17.
Knowing nothing else about your problem, I believe it may be other css on your page conflicting with the picker.
For me the css was not included (jquery.ui.datepicker.css). So I saw a div (ui-datepicker-div) at the bottom of the page and I got the following error with FireBug: instActive is undefined.
Please change from
instActive.inline
to
(typeof(instActive) == 'undefined' || instActive.inline)
in your jqueryui.js
For discussion on this goto->http://code.google.com/p/jquery-datepicker/issues/detail?id=285
Since no one answered the second part of the question...
Add the following two lines to your .ui-icon CSS:
text-indent: -99999px;
overflow: hidden;
That should fix "Prev" and "Next" showing up.

Categories