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
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 have a delegated popup that is designed to display a modal on tablets and phones. Unfortunately, the modal appears to wait until the ajax call to #href is complete before it displays anything. From the docs it appears the modal should pop up with ajaxText filled in during the ajax call, but I see nothing until the popup suddenly appears. The call is predictably long enough (~5sec in development) that I know there isn't a chance that the loader isn't appearing for a split-second.
$('a.word').on(touchstart: touchWordPopup)
The following is in CoffeeScript, but follows convention from the official docs.
touchWordPopup: (event) ->
event.preventDefault()
// another function handles mouse hover popups,
// so let's disable that stuff.
$(this).off('mouseover mouseenter mouseleave')
$('#popup').jqm(
closeClass: 'close'
ajax: #href
ajaxText: '<h2>Loading...</h2>'
modal: true
).jqmShow()
HTML:
<html>
<head>...</head>
<body>
<div class='subscription'>
<a href="/words/foo" class='word'>Foo</a>
<!-- several more words... -->
</div>
<div id='popup' class='jqmWindow'></div>
</body>
</html>
I'm wondering whether delegation or CoffeeScript could be to blame, but I can't tell where the problem might be fixed.
The CoffeeScript is not to blame.
I've released jqModal 1.3.0, which immediately shows (displays) ajax enabled modals.
Documentation has been updated, and I've included an example (#5) to test for slower remote responses.
Because the equivalent of jqmShow() is now triggered immediately, if your ajax response includes elements that match closeClass, they will never attach. This is best corrected by patching jqModal and binding the event handler to the modal iteself, but for now you can use onLoad:
onLoad: function(hash){
var modal = hash.w;
$(hash.o.closeClass, modal).click(function(){
modal.jqmClose();
return false;
});
}
I am using jqueryui api's from google, but the items I am using are rendering improperly. Here is my referencing:
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
I literally just copy-pasted the code for the modal form dialogue, found here: http://jqueryui.com/demos/dialog/#modal-form
And my datepicker code is:
$(document).ready( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "MM d, yy"
}
);
});
However, these items rending without any discernible background, as shown in the screenshots. I have been desperately trying to figure out why. Thanks.
Are you using a jQuery theme CSS? The jQueryUI demo page is. It's located here: http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css
You need to reference the jquery UI CSS files, you can get them as a theme from the jquery UI website.
You should also look at this and this.
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.
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
}
});