I'm not that great at jQuery. That said I found this effect used in a template I wish to duplicate. It has a slide show running in a loop with fly up buttons at the bottom. I was trying to decipher the code but its pretty hard.
Questions:
Is this just custom code or is there a plugin out there that works like this?
Is this a combination of plugs?
Any suggestions on which plugin is being used here would be much appreciated.
Thanks!
Here is the example http://static.livedemo00.template-help.com/wt_34641/
Try using Nivo slider, I find its easy to use and pretty flexible :)
[http://nivo.dev7studios.com/pricing/][1]
[1]: Nivo Slider
seems to be:
$(function(){
$('.box4').hover(function(){
$(this).find(".m1").stop().animate({top:-143}, "normal")
}, function(){
$(this).find(".m1").stop().animate({top:0}, "normal")
});
});
If I understood the question correct.
Related
I am currently using Linkurious and need to accomplish the following function:
Hide/show the labels when clicking on a button.
Any idea how to do this?
Thanks in advance.
Well, I think Linkurious has provided a perfect solution.
s.settings({
drawLabels: false
});
s.refresh();
Cheers!
Is there an equivalent Greensock (GSAP) implementation or plugin that has similar behaviors to Metafizzy's Isotope.js (Masonry layout). Specifically, I have implemented a series of card and card promotion animations in isolation. I am now at the point of merging these into a single prototype. I am working behind a colleague who put together a separate prototype using Isotope that supports card shuffling even with cards "growing" to different states. I am unifying both internal efforts. Before I engage on GSAPifying Isotope, I would like to know if there is an existing or similar implementation that I can leverage.
Thanks in advance for your time!
Chris
For anyone still googling this, a quick solution to have gsap render the isotope animations is using the jquery-gsap-plugin that can be downloaded at their website. It needs to be added after all the other libraries, for example:
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.gsap.min.js"></script>
What this does is override all the jQuery.animate() methods - which is awesome. There are some exceptions however that are listed on the website as well.
Now the only thing that is left to do is tell isotope to use jQuery as the animation engine, details can be found in the documentation.
$('#grid').isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
//etc
animationEngine: 'jquery'
});
And viola! The only caveat here that jQuery is required, so for anyone using pure vanilla or whatever will have to override the animations manually - how that's done is a whole other topic.
can someone give me some help...
all example code on http://www.datatables.net/examples/styling/index.html are the same... I have hard time understanding this... please can someone really need help...
can anyone help me cause I'm new to these... but it gaves me always..
$(document).ready(function() {
$('#example').dataTable();
} );
all link sample on style I see are like these...
You need seriously read information about of Javascript, html, css and everything about of web page structure. The code that always you see refers to the overall structure of the datatable. If you want see the changes between examples simply select the tab css or html next to Javascript.
Sorry for my bad english.
regards.
There's a webpage with something annoying on it which I'd like to hide every time I visit it. I thought a good way to do this would be to make an add-on for Firefox.
I've never done this before, and came across the web-based Firefox add-on builder. I'm not too sure where to go from here though. I know it should be quite easy to do this though. I suppose all I need to do is check if a block with a certain id is used on a website, and if it is, then delete/hide it from my view.
Is that the best way to do about this? If not, what do you suggest? If so, can you give me any tips to help me accomplish this?
Right, I got it:
Using just a standalone Firefox Add-On use the following code:
exports.main = function() {
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.ca",
contentScriptWhen: 'end',
contentScript: 'document.getElementById("DIVID").style.visibility="hidden";'
});
};
Just replace DIVID with whatever you want.
Similarly, in Greasemonkey, just add this to the script:
document.getElementById('DIVID').style.visibility='hidden';
The only reason I didn't want to use Greasemonkey is that it isn't as easy to share. But it's convenience can't be beat!
Install the latest FF
Install the latest AdBlock Plus
Go to the website right click on specific element and then Inspect Element(Q)
Right bottom corner there is Hide with ABP(AdBlock Plus) button, click on it, then Add Element Hiding Rule
You can just use GreaseMonkey which is a very useful plugin for firefox. You can write your own script in JavaScript which operates on the page.
However, chances are that someone might have already written a script for the site in question that you can install from the http://userscripts.org/ repository.
In well-formed HTML, any particular value for the id attribute should occur at most once in a document. If your mission is to seek and destroy a recurring phenomenon, it might be labeled (if at all) with a class. This is the case with Twitter's "promoted tweets", for example.
var promotedTweets = document.getElementsByClassName("promoted-tweet");
for (k=0; k<promotedTweets.length; k++) {
promotedTweets[k].parentNode.removeChild(promotedTweets[k]);
}
Wouldn't Adblock Plus do the trick here? You can feed it an element hiding rule (based on the class or ID attribute) on any given website, if I recall correctly.
I used the up-and-coming jpm tool to write this, and incorporated the suggestions here. It is specifically for filtering certain div tags here on StackOverflow—how fitting. The code and the xpi add-on file is at Github.
An alternative in Firefox is to create a userContent.css file and add css which hides the div.
See https://superuser.com/a/319322/ and note the comment which points out that "Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true".
I wanted to have a feature in my Jommla based application, that when ever a user brings the mouse over a particular paragraph in article the color of text should change. so that the paragraph looks more prominent on the screen.
I want this thing to be dynamic. Just wanted to know which is the best place to do that. Where in the Joomla the article parsing takes place ?. If I am lucky is there any plugin that can help achieve that ? Kindly let me know
You can make a slight modification to Trev's solution and make it work without having to change any articles.
.contentpaneopen p:hover {color:#ff0000;}
By default, Joomla assigns the contentpaneopen class to articles, this would produce the effect on all P tags that are children of that class.
By far the easiest thing to do would be to add a style to paragraph in question in your article and then add an appropriate hover rule in the css, e.g.
<p class="highlight>some text in here</p>
and
p.highlight:hover
{
color: #ff0000;
}
Just tried it here and it worked for me on the last paragraph:
http://thelunarscape.com/blog/an-increasingly-active-sun
Better solution than using a plugin in this case, unless you want to something more fancy I guess as content plugins are run every time an article is loaded no matter if it's needed or not.
Another more advanced way to achieve this is with help of MooTools.
Include MooTools with in your application with:
jimport( 'joomla.html.html.behavior' );
JHtml::_('behavior.framework'); //MooTools core
JHtml::_('behavior.framework', true); //This is for MooTools more libraries
Next create a script that changes the css of the paragraph with id "myid":
$js = <<<EOD
window.addEvent('domready', function(){
$('myid').setStyle( 'border', '1px solid #000000')
});
EOD;
$document =& JFactory::getDocument();
$document->addScriptDeclaration($js);
Why use MooTools?
MooTools makes it possible to tweak the highlightning and even animate the highlight. It should also have better support for the older browsers.