Develop Reference

Wordpress: Need help to customize .js code to call out specific dynamic class within Visual Composer

The site in question is www.topcatsmusic.com
At the bottom ive coded a player which utilizes js. Beneath the player Ive included a dynamic slider to display .jpg files or album covers. As it is now, Ive been using a simple href tag to send to external soundcloud source.
However, the plugin allows you to make API calls to en-queue the song within the player instead of sending to new window, outside source.
Sample API usage:
ToneDen.player.getInstanceByDom("#player").getTrack("https://soundcloud.com/top-cats/treee-city-fzpz-pines?in=top-cats/sets/releases");
Custom JS file in use "Clickfunction.js"
$('.ult-item-wrap a').click(function(e) {
var sound = $(this).attr('href');
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
ToneDen.player.getInstanceByDom("#player").removeTracks(0, 1);
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
alert(ToneDen.player.getInstanceByDom("#player").getAllTracks());
return false;
});
So, if I load the JS file using the
<script> </script>
within my header - what do I need to do to customize this code so I can identify which song to load based on the custom class assigned to each image?

Try to modify your code a little and see if that works:
jQuery( document ).on('click', '.ult-item-wrap a', function(e) {
e.preventDefault();
var sound = jQuery(this).attr('href');
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
ToneDen.player.getInstanceByDom("#player").removeTracks(0, 1);
ToneDen.player.getInstanceByDom("#player").addTracks(sound);
alert(ToneDen.player.getInstanceByDom("#player").getAllTracks());
return false;
});

Woo hoo! Got it to work. Thanks for the help from everyone. Here is the code I ended up adding to my images to en-queue. Hopefully this method proves to be helpful for any other bands / blogs / musicians wanting to use this cool toneden player.
<span data-href="https://soundcloud.com/top-cats/autumn-keys-long-shadows?in=top-cats/sets/releases" class="toneden_song"><img src="YOUR DIRECTORY HERE/long-shadow-cover-150x150.jpg"></span>

Load a page via .load in pop-up

I'm trying to load a PHP page via jQuery. I want it to have a pop-up effect. I tried using the code below, but when the click event is triggered, it seems as if only the CSS from the imported page is being imported. The page content does not appear, but the look changes due to CSS conflicts.
I'd like the page to load and not conflict with the other CSS
function previewPop(){
$(".pop").click(function(){
$("iframe#preview").load("templates/1.php",
function(){$("iframe#preview").fadeIn(300); })
});
};

<div id="frame_wrapper">
</div>
$(".pop").click(function(){
var the_iframe = '<iframe id="my_iframe" src="' + templates/1.php + '" height="500px" width="500px">';
$('#frame_wrapper').append(the_iframe);
});
I hate dealing with iframes, so sometimes it's just easier to create a new one and destroy it as necessary.

Javascript replace( ) function running more than once on the same image

I'm running a Javascript replace function to replace standard images with class="replace-2x"on my jQuery Mobile site with Retina-quality images if the user is on a mobile device with Retina display. For example, on a Retina device, logo.png will be replaced with logo#2x.png. The JS function is here:
function highdpi_init() {
$(".replace-2x").each(function () {
var src = $(this).attr("src");
$(this).attr("src", src.replace(".png", "#2x.png").replace(".jpg", "#2x.jpg"));
});
}
$(".page").live('pageinit',function(event){
highdpi_init();
});
I'm now running into an issue where the replace function is running more than once. So for example, it replaces logo.png with logo#2x.png as the page is loading, but then as the page continues to load, it KEEPS replacing .png with #2x.png in the img src over and over so that the image tag ends up looking like this:
<img src="mobile/images/logo#2x#2x#2x#2x#2x#2x#2x#2x#2x#2x#2x.png" class="replace-2x" alt="logo" width="200">
How can I prevent this from replacing on a single img element more than once? Keep in mind, I will have multiple images on the same page, so the function will need to apply to all images, but only one time each.

The problem is surely that your 'pageinit' event is being called more than once. You can either follow MДΓΓ БДLL's idea (which won't work if images are dynamically added) or you can make your handler smarter so that it doesn't replace the src if it already was replaced
function highdpi_init() {
$(".replace-2x").each(function () {
var $this = $(this);
var src = $this.attr("src");
$this.attr("src", src.replace(".png", "#2x.png").replace(".jpg", "#2x.jpg"));
// Remove the class so it doesn't replace it again
$this.removeClass('replace-2x')
});
}
You don't need JS for this, you could do it in CSS only.
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="/css/highdpi.css"/>
You could make your images look like
<img src="transparent.gif" class="logo-a" alt="logo" width="200" />
And in highdpi.css you could do
img.logo-a {
background-image: url('file#2x.png')
}
And in lowdpi.css
img.logo-a {
background-image: url('file.png')
}

Using .one() should work since it is just a binding and if you are using Jquery Mobile the way that is suggested it will be just fine. That is unless you are passing back the html from the server. In which case it would be a good idea to add an extra condition to make sure that the src doesn't already have #2x.png before replacing.

There is disappointingly little documentation on pageinit on the offical jQuery Mobile docs. So I'm going to speculate here. It looks like pageinit is used to fire events for when a specific DOM element has finished loading, since it may not have been loaded on the initial page load (deferred until needed). That being said, it may be that adding/altering images to the DOM element in question fires the pageinit again. Could you tag each updated image with something that says, 'hey, I've already been updated to 2x'? Something such as
$.data(targetimg, 'retinafied', true);
And then check for that value before replacing the src?

clickTAG doesn't fire in FancyBox when scripted with AS3

I work for an internet media company. We use fancybox to load the ever-infamous "roadblock" ad placement.
When we load ads that have a clickTAG scripted in ActionScript 3, FancyBox fails to initiate the click. Yet, clickTAGs done is AS2 work just fine. We've tested this issue in ad placements that do not require the use of FancyBox and everything checks out. Both placements (regular site placements and FancyBox) use the Javascript, "onclick" event, but also have standard embed parameters (<object>xxx</object>).

you could try setting flashVars in the html and then grabbing them like this:
function onSomethingClicked():void
{
var req:String;
if ((req = root.loaderInfo.parameters.clickTag))
{
openWindow(req);
}
}
function openWindow(req:String):void
{
//
}
EDIT: After looking at Fancybox I'm not sure if this will help but I'll leave it here just in case.

Dynamically loaded <script> tag not being used in WebKit browsers

It seems this is a known problem and has been asked several times before here in SO however I do not see anything specific to jQTouch so I thought I would give it a try.
jQT will dynamically load pages when a link is clicked. In this page I would like to include something like
<script>
$.include('javascriptfile.js', function() {alert('do something with results of this file to an already existing div element');};
</script>
The $.include is a jquery plugin I found that mimics the $.load with a few more smarts added to it. Tested to work on FF but not in Chrome or most importantly, Safari.
The alert is never displayed. FireBug never shows the javascript even being loaded. If I put an alert before the $.include I still do not see anything.
I have tried an onclick/ontap event that would then run this code that was included in the head tag, no luck.
Edit: I am using the r148 revision of jQT. This was working prior to moving to this version, i believe.

Did you try to add the javascript file using one of these two methods:
Static Way:
<script type="text/javascript">
function staticLoadScript(url){
document.write('<script src="', url, '" type="text/JavaScript"><\/script>');
}
staticLoadScript("javascriptfile.js");
modifyDivFn(processFnInFile());
</script>
Dynamic way:
<script type="text/javascript">
function dhtmlLoadScript(url){
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
onload = function(){
dhtmlLoadScript("javascriptfile.js");
modifyDivFn(processFnInFile());
}
</script>
After the include you can call a function that does the processing you want (that being processFnInFile()) which result will be passed to modifyDivFn (and modify the div you want.) You could do this in one function, just to illustrate the idea.
Source: Dynamically Loading Javascript Files

Well Geries, I appreciate your help but ultimately the answer required a drastic rethinking of how I was using JQTouch. The solution was to move everything to an onclick event and make all the hrefs link to #. This might be what you were talking about Geries.
In the onclick function I do the logic, preloading, loading of the page through my own GET through jquery, then use the public object jQT.goTo(div, transition). This seems to get around the WebKit bugs or whatever I was running into and this now owrks on FireFox, Chrome, Safari, iPhone, and the lot.
I do run into a few animation issues with JQT but I think these are known issues that I hope Stark and the gang at JQTouch are working on.