We Keep Coding

How to make this grid work

I purchased a html5 theme that I am customizing for my church website. It has two cool features:
A tab script that allows for multiple items to displayed on one page.
a grid that will allow me to display sermons in a series in a neat and orderly way.
Both of these work well when used alone, but when I try to use the grid inside the tabs, no dice.
I am a design guy and know very little about Javascript functions and need help. Here is what the developer, who has not got back with me said to do:
"The grid function is built to run on page load and when you put it inside a tab it doesn’t initialize on page load so don’t work when you change tabs. A custom function needs to be built for this which will run the isotope grid on tabs change. Like:"
$(".nav-tabs li")click(function(e){
ADORE.IsoTope();
e.preventDefault();
}
I do not know where to add this or even if something else needs to be added. I have also attached a link where you can download my code (html/php and .js file) so you can see what is going on. Any help would be appreciated. Remember, I know very little about Javascript.
https://www.dropbox.com/s/jypfjz3a89soxh7/example.zip?dl=0

Add:
$(".nav-tabs li a").click(function(e){
$('a[href="' + $(this).attr('href') + '"]').tab('show');
var IsoTopeCont = $(".isotope-grid");
IsoTopeCont.isotope({
itemSelector: ".grid-item",
layoutMode: 'sloppyMasonry'
});
});
at Line 469 of your init.js and it should work for you. Thanks

You can try the following: inside your init.js add the following:
$(".nav-tabs li").click(function(e){
e.preventDefault();
ADORE.IsoTope();
});
e.g. in the first line after var ADORE = window.ADORE || {};
As you mentioned that you don't know much about javascript: the first line starts with
jQuery(function($){ ...
This takes care about that everything inside the { will get executed when jQuery is loaded.
I'm not sure if the e.preventDefault(); is necessary - this is used e.g. to prevent links from getting executed and attach a different function to the click() event, so it could be possible that Isotope is working when a tab is clicked, but the tab is not working anymore.
If this won't work, you can check with web dev tools if there are any script errors. In case you're unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console

How to Upgrade to dojo 1.10 inside <div> tag?

Anyone knows how can I upgrade the following line of dojo code? The problem is in dijit.popoup.close() that the dijit/popup.close() which is the upgraded of it doesn't work there
var findContent = "<div class='findTTheader' ><span class='findTTheaderLabel'>Find " + curMapLyr.layerInfos[layerID].name + "</span><img class='closeToolTip' src='../genCode/images/Close16.png' onclick='dijit.popup.close()'></div>";

I'm not actually sure where to download a copy of Dojo 2.0 to test this, but I think one of these will work for you:
First up, try the "stupid version":
onclick="require('dijit/popup').close()"
If that doesn't work, then you'll have to add the click handler in JavaScript rather than HTML - so render your div without any onclick attribute, and then do something like this in JS:
require(['dojo/query', 'dijit/popup'], function (query, popup) {
query('img.closeToolTip').on('click', function() {
popup.close()
});
})
That's might not be exactly correct syntax, but it should give you the idea.
Update - this variation might actually work better than the above. Try it out and let me know:
require(['dojo/query', 'dijit/popup'], function (query, popup) {
query('img.closeToolTip').on('click', popup.close);
})

Responding to Touch events with hammer

Currently I'm using code-A to create a color box and pass it's value to another function colChg(). This works perfect.
Now I need use this with hammerJS
Code-B is a sample code I found from their documentation. But I'm not understanding how to replace .on("click" with Hammer(element).on("tap" so that my current code Code-A will respond to touch devices as well.
Code-A
$.each(["#ff6600", "#ff0000", "#00ff00"], function(i, color) {
$('<input class="colBtn" type="button">')
.css("background-color", color)
.on("click",$.proxy(colChg, null, color))
.appendTo("#colSw");
});
Code-B
var element = document.getElementById('test_el');
var hammertime = Hammer(element).on("tap", function(event) {
alert('hello!');
});
Thank you!

With the jQuery plugin
If you want a neat jQuery integration, I would advise to use this plugin. It is developed by the same developer as Hammer's, it has just been split so as to lightweight the core release. You will be then able to use the Hammer methods directly on a jQuery object.
$('body').on('tap', callback);
See this JSFiddle.
Without the jQuery plugin
Otherwise you would have to access the raw DOM element from the jQuery object (which is really just a wrapper).
See this JSFiddle.

jquery tools overlay - Two on same page

I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.

Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.

This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).

Add javascript action to all links on a webpage

Good morning, I would like to know if is possible add automaticalliy a javascript action to all links (or classes) on a webpage, for example I wanna add the following javascript action: "PlayFlashSound();", so the links on my web page should be:
<a onmouseover="PlayFlashSound();" href="#">Link Text</a>"
The problem adding manually the javascript action is that I'm using Joomla, and I don't know how to do it.
Thanks.

with jQuery you could do it like this.
$(document).ready(function() {
$('a').click(function() {
PlayFlashSound();
return false
});
});

Something like this could easily be accomplished using jQuery:
$('a').mouseover(function()
{
PlayFlashSound();
});
Example available here.

I assume since one of this question tags is "joomla" the author would like to accomplish what's needed using Mootool that is included into Joomla CMS. The code could be, for instance, like this one:
window.addEvent("domready",
function() {
$$('a').each(function(item, index) {
item.addEvent('click', PlayFlashSound);
});
})
Keep in mind that if you wish to block the default actions of those links the PlayFlashSound function must return "false";