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.
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 want to insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');
I'm developing a Tumblr site.
When the user clicks on the "read more", the content is revealed and expanded on the same page,how can I do this?
As Tumblr is reworking the UI for editing, the Read More tool may have been hidden from you. Reset your preferences to use the Rich Text Editor to edit posts. The Read More tool is between the bulleted list tool and the image tool. See the screenshot.
Ok, It's a simple script, but it works. Add this code in your theme before tag (or as it should be):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spa').click(function(){
$(this).parent().children('div.spb').toggle('normal');
return false;
});
});
</script>
<style type="text/css">
.spb{display:none;}
.spa{cursor:pointer;display:block;}
.spa:after{display:block;content: "{lang:Read more}";margin-bottom:10px;}
</style>
Now, when you write a new text, add to it those things.
Text before Spoiler
<div class="spb">
Text after Spoiler
</div>
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
I have an iframe application build up on php.
I have set iframe size as resizable.
There is a problem the display is not proper if the content is too large.
I have applied the code available on http://wiki.developers.facebook.com/index.php/Resizable_IFrame
My xd_receiver.htm file is inside my templates folder where my php files are residing.
The code which I am using is:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Please guide on how to make the display correct.
even though In am not sure about this, but Large content could be the the real issue,
try to move this part to the end of your page
FB_RequireFeatures(["CanvasUtil"],
function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
} ); </script>