I have a little problem with the "Flowplayer API" module. I activated it in the modules list and in my node template I'm using the "flowplayer_add" function to embed my video/audio.
What is strange is that no css or js for Flowplayer is loaded...
Maybe you have this answer to that.
N.B. I've already tried to remove all the other js files to avoid conflicts but nothing changed.
On the help section they explain the difference between theme('flowplayer') and flowplayer_add():
Calling theme('flowplayer') will not only add the correct JavaScript to the page, but also construct the markup for you.
Using flowplayer_add requires you to already have the markup created.
i.e. in the case of flowplayer_add() you have to set HTML like this:
somewhere on the page, where you want your video to appear.
Hope it helps
Related
I am currently trying to implement the Google Tag Manager but I run into a problem since the GTM appends the tags right before the closing tag of the body.
Whenever I have a template that needs to call a bit of code from one of the scripts in the Google Tag Manager I get an undefined error. This is obvious since it does not matter where I place my script in my view, GTM will always come after it since it appends right before the closing body tag.
Is there any way to fix this behaviour and why does Google do it like this? I understand that it helps with non-blocking but they might as well just place async attributes on the scripts and it will almost do the same?
An example I have Facebook Pixel as one of my tags in GTM and I need to be able to make a specific event call when I am loading a certain page as my view.
fbq('track', 'Search');
Ofcourse this needs a fbq instance to begin with. This leave me with only one option and that is to try and place my script in my footer which is a general template and it will get messy.
Any workaround for this behaviour?
The issue you are facing is that the Facebook library is not completely loaded when you are calling your function.
One method would be to migrate your Facebook code to GTM trigger it on all pages
and fire your specific code on dom ready
You could also use the code from below and see when the _fbq.loaded variable is set to true.
https://gist.github.com/chrisjhoughton/1dc91dd7bd95717e08d3
You would have to create trigger based on this javascript variable.
Hope this helps
I've briefly looked to find any similar questions and found non that are alike or that I understand, so first I apologise if this is a duplicate.
My problem is that I cannot use javascript on loaded (.load) html.
I call a navbar into a div by use of:
$(document).ready(function() {
$('.nav').load("navbar.html");
});
This works perfectly and I have no problems with this.
Problems arise when I want to, for example, add a class to my loaded html code.
The script I currently use (saved in a separate .js file and called at the end of my html code):
$(document).ready(function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
Here is what I intended to happen to the loaded html code:
This is part of the navbar and is loaded through the first code snippet ^.
<li id="profile">Profile</li>
After page is loaded: (Added: 'class="active")
<li class="active" id="profile">Profile</li>
(This is part of an unordered list using bootstrap nav-tabs.)
Anyway, when I directly put this code into my html page and remove the import through javascript, I can add class's such as the 'active' class.
Additionally, I have a slider on my page which uses arrows through the use of javascript to 'slide' through the pictures and I experience exactly the same problem:
When the code is imported I cannot edit through use of javascript, but when the code is present in the actual raw html code, I can.
I don't understand why this is as I am fairly new to javascript and its syntax.
Thanks in advance, I'd be happy to answer any questions as I'm sure this isn't exactly clear because I am not entirely sure where the problem lies.
What's likely happening is that your code is trying to operate on the loaded html before it has actually loaded. Try putting it in the complete callback:
$('.nav').load("navbar.html", function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
This will make sure that the code runs after the load has completed.
I'm very new to javascript, so this is confusing me. All of the settings charm tutorials only show how to put the controls into the settings charm, but none of them say how to find the information gotten in them.
I tried to do one of these (like I do in the main program):
var muteToggle = document.GetElementById("Mute");
where "Mute" is the id in the separate html file.
muteToggle just ends up being null all of the time. I tried putting it after
WinJS.UI.ProcessAll().then(function completed() {...
but that didn't work either. Everything else is the same as in this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx
Make sure you're doing it in the ready function of the js file that is referenced from your settings HTML. Try opening the JavaScript console or QuickWatch while broken at that line and also look at the DOM Explorer to see if you can find your toggle control. You should be able to access it though. Also, try element.getElementById instead of document.getElementById. Either should work actually, but as long as you're troubleshooting. Good luck.
Your problem is that you are trying to get a reference to the HTML element from the code running during the app activation. Although that piece of code may define the HTML to be loaded for a settings pane, it does Not actually load the HTML into the DOM. You just simply can't get the instance from that location.
What you need to do is have the settings flyout have its own js file that implements IPageControlMembers. In particular, you need to implement the ready method. This method is called once all the HTML and controls are loaded for the page, including your toggle. The link has an example of how to do this.
Also see:
WinJS.UI.Pages.define
Using single page navigation
I am inspecting a website, which has tons of JS files loaded from several servers along with jQuery. Number of js files is really big. Some are within the regular scripts tags. Others are loaded dynamically via ajax.
I am interested in certain elements of the DOM which are manipulated because of some js file. I see the dynamic loaded elements in firebug. I needed to know exactly which JS script creates/updates them.
I searched the js files for the classes and the IDs of the elements,so I can have some clue about which js file affects them, but I found nothing.
Is there any direct way using Firebug to know exactly which JS file manipulates certain DOM elements?
Thanks in advance.
Not in a direct way.
Use EventBug addon
Then search by the function signature in your script panel to drill down to the js file
Hope this helps!
You should be able to go to Script tab in firebug, then look at the toolbar right below the script tab you can select all the javascript files included on the page.
If you have an idea which file it is coming from then select that file and then look through the code and set break points on functions you think the event is coming from by clicking on the respective line number, then refresh the page and perform the event that calls the javascript.
You might have to put in a few before you narrow it down, but the break points will make it alot easier to tell which functions are being called for which events.
I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.