In jQTouch I am fetching a page dynamically from the server per the jQT demos per
The Page
It loads the HTML snippet into
<div id="page">
Normally I'd be able to do
$('#page').bind("pageAnimationEnd", ...)
to know when the page had finished loading, but it doesn't seem to work with dynamically loaded content. I've been trying to find a workaround but haven't been able to. I think that this question on SO is asking the same thing, but there didn't seem to be any conclusive answer.
If you have access to the "page", just put the javascript on that page and it will be executed when it is done loading. So in the page html you could just add ...
<script>
$(function() {
do something when im finished
});
</script>
$('#myid').live('pageAnimationStart', function(e, info){
//do something
}).bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in'){
//do something
}
});
Related
I want to track each time someone clicks on a link on my web (this click makes a file to be downloaded) to optimise my Facebook Ads (pay per conversion). After including the Facebook pixel in the head section of my web, I have to track this event, for example as a "lead", so I'm using this piece of code at the beginning of the body:
<script type="text/javascript">
$( '#link' ).click(function() {
fbq('track', 'Lead');
});
</script>
Please note that "link" is the id I've set for the link:
<a id="link" href="/content/file.zip">press here</a>
However, I'm tracking a "PageView" (because of the first code in the head section), but I'm not tracking the lead event (the click on the link).
I've also tried this one:
<script type="text/javascript">
$("#link").on('click', function() {
fbq('track', 'Lead');
});
</script>
And I've also tried with an onclick event in the link, like this:
press here
<script type="text/javascript">
function fileDownloaded() {
fbq('track', 'Lead');
return true;
}
</script>
Nothing works for me (I've also put the code of the event at the end of the body section). What am I doing wrong?
Thanks a lot.
I've found a solution that works for me, in case is useful for someone else:
Instead of putting the link inside an href, I've moved the link to the javascript function.
I've used an onclick method to call the javascript function in which I first call the Facebook event to track, and then the download of the file starts.
The result is something like this for the HTML (the text I want to link):
<div onclick="fileDownloaded()">press here</div>
And something like this for the javascript function I want to track with Facebook pixel when someone clicks on the link (at the end of the body section):
<script>
function fileDownloaded() {
fbq('track', 'Lead');
window.open("/content/file.zip","_self")
}
</script>
Best regards.
If you put the URL inside javascript, the link will be "dead" for any visitor that doesn't have scripts enabled in their browser.
You can just put fbq() inside a function inside separate script tags like so:
//pixel code above
fbq('track', 'PageView');
</script>
<script>
function Lead(){ fbq('track','Lead'); }
</script>
<body>
Click tracked by FB!
I use this with image;
<a href="https://downloadurl">
<img src="target image" alt="xxx" onclick="fbq('track','Lead')"/>
</a>
this works if you have installed the fb pixel code in the website header.
I need help on showing photos larger when you click them.
Let me explain better.
I am doing an art project. I am using MVC(model-view-controller) on CodeIgniter and I want ,if it is possible to show me the code,and where to put it...so when I click on the image it becomes larger,like the photos on facebook...they are small but when u click on them they became larger so you can better see the image.
Any idea ?
Would be appreciated :)
Ok here's the js fiddle:
http://jsfiddle.net/tK6up/2/
and here's the code. It assumes you're using the latest jQuery library:
HTML:
<img class="small_img" src="http://www.fleces.com/media/images/fleces_logo.png" style="width:100px;" />
<div id="large">
</div>
CSS:
#large{
display:none;
position:absolute;
z-index:100;
top:10%;
left:10%;
}
.small_img{
width:100px;
}
jQuery:
$(document).ready(function(){
$('.small_img').on('click', function(){
$('#large').html($(this).clone().removeClass('small_img')).fadeIn("medium");
});
$('#large').on('click', function(){
$(this).fadeOut("medium");
});
});
Keep in mind I just threw this together. I don't know what facebook does since I don't use that site. I just went by your description. In reality you might use lightbox to handle the popup and almost certainly you would re-style the css to fit your needs. But, as per your outline, this will work.
I'm using jQtouch to build a page where the user can enter a kind of an ID and
get information (exam result) for this ID.
Because I take the results from the server, I used a form in the first page
with a text field and a submit button, and the action of this form send the user to the next page. Or at least, supposed to...
The problem is that also I'm being transferred to page with the results, and see the results properly, the Back button do nothing! BTW, in the address bar (above) I still see the name of the first page.
How can I go back to the "form" page? Thanks
<div class="current" id="byUserId">
<div class="toolbar">
<a class="back" id="goBack" > Back</a>
<h1> Exam Results</h1>
</div> ...
where the id="goBack" has a javascript:
$(function() {
$('#goBack').click(function() {
location.href = "enterId.jsp";
});
});
Using the regular back doesn;t work either:
<a class="back" href="#"> Back</a>
I now this is pretty late, but I had a similar frustrations and finally figured it out. The problem is that jQTouch intercepts all AJAX and form submit commands and safely send them itself. This isn't a problem except for when it's expecting some sort of callback, and there isn't one. In my case, I wanted to submit a form without a callback. To do this, look in the jqtouch.js library (around line 434) and comment out the following line:
if (href != '#') {
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data) {
**// var firstPage = insertPages(data, settings.animation);**
This basically just tells jQTouch to submit the AJAX call but do nothing afterwards (don't change div's, don't show any callbacks and don't do any animations). Hope this helps.
The code I use to render share button is:
<a name="fb_share" share_url="http://www.XYZ.com" type="button_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
The above code exists in the page and works fine and when users clicks a button, that action will add the above code (with a different url) to the dom and My goal is to render another facebook button with count. However the problem is that the FB.Share js seems to somehow know it has already did the job and will not render again.
After poking around with the FB.Share script a bit I found this methoe FB.Share.renderAll() can force a re-render but without count numbers.
Anyone has any insights? Thanks!
try calling the JavaScript SDK's FB.XFBML.parse();
See: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
When you re-add facebook share script, it renders again the share button.
for example: $.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share");
has anyone fire up lightbox on pageload using Joomla 1.5?
I want to build a plugin to fire Lightbox of an article when page load, but have no idea hw to do that
It is actually quite simple, when you know what you are doing.
Below is a sample code that is native to Joomla 1.5 using Mootools 1.1 and modal behavior.
If you want to use only SlimBox, then you will have to figure things out on your own. All the SlimBoxes are little different...
In order for us to open up a modal window we need to do 2 things.
Fist, include JavaScript libraries and stylesheets. In our case we will include modal.js
<?php
// You do know need to include mootools explicitly
// JHTML::_('behavior.modal') will include mootools library.
JHTML::_('behavior.modal');
?>
Second, include JavaScript to open the modal window. IF you are including JS from PHP, better use JFactory::getDocument()->addScriptDeclaration("// JavaScript Goes Here"); to include the script into the HEAD of the document.
<script type="text/javascript">
// Use either domready or load event to open the modalbox
window.addEvent('domready', function(){
var myAnchor = new Element('a', {
'href': 'http://www.google.com',
'class': 'myClass',
'rel' : "{handler: 'iframe', size: {x: 800, y: 550}}"
});
SqueezeBox.fromElement(myAnchor);
});
</script>
Another scenario is when you have an existing modal link on the page and you want to display the modal on page load. Use:
window.addEvent('domready', function(){
SqueezeBox.fromElement(document.getElementById('modalID'));
});
Where link exists:
<a class="modal" name="modalID" id="modalID" rel="{handler: 'iframe', size: {x: 400, y: 400}}" href="index.php?option=com_mycomponent&task=mytask&tmpl=component">Link Text</a>"
This display the modal onload and has link to reopen modal