I have a swfobject below, that gets loaded in $(ocument).onready etc...
swfobject.embedSWF("http://www.youtube.com/v/ma9I9VBKPiw?border=0&enablejsapi=1&playerapiid=ytplayer", "DivYoutubeEntertainmentContainer", "464", "320", "8", null, null, params, atts);
But when i want the page to load, i dont want the movie to be instantiated on page load.
Is there any way i can do this?
Related
I'm playing with Kirby CMS and using it as a headless CMS. I'm using Blocks field to handle rich content.
In the API, this field is returned as an array of objects:
[
{
"content": {
"level": "h2",
"text": "test"
},
"id": "02d4a71b-cd02-4382-a78c-84ff1e68324b",
"isHidden": false,
"type": "heading"
}
]
Which is great, I think. But in my case, it's annoying, as I should do all the rendering by myself.
Is there a way, or an option, to tell Kirby to render this field as HTML content?
I know there is a $blocks->toHtml() method, but I'm using a standalone React frontend, so I can't use this in my JSX.
You don't have to use the Kirby API directly in order to get content from your Kirby site. Kirby has a few different ways to respond to an ajax request - and that response can be in any format, such as JSON, an HTML snippet, or anything else. Here are a couple of the most often-used ways to achieve what you want.
CUSTOM ROUTE
You could define a custom route, which is like a 'custom api point', that your React interface could send requests to, and which would respond with the block list as an HTML snippet, as required. You could set your route at a URL like:
https://example.com/block-api
In your route, you could then use the toHTML() method, or a snippet(), or any other method, to convert the blocks into HTML that you can then send back as a string in your response.
In your route definition, you could also use a pattern that would allow you to (optionally) request a single block by ID. Your custom route URL for that would look something like this - where the last segment is the block ID:
https://example.com/blocks-api/02d4a71b-cd02-4382-a78c-84ff1e68324b
CUSTOM CONTENT REPRESENTATION
When you try to reach a page in your Kirby site via its normal URL, Kirby will put the page's content into your page's template, and return it as an HTML document. That is the 'default' behaviour. You can, however, override that.
You can define a custom content representation for your page, which tells Kirby that you want to receive the content of your page in a 'different format' - such as JSON, XML, or anything you wish. That 'different format' can even be just an HTML snippet. All you need to do is define a new template for it.
In your case, you could create a content representation that tells Kirby to return a fully-formatted HTML snippet of your blocks only - by creating a template called something like "mypage.blocks.php", with just the HTML for the blocks in it. So, if to access the page normally we'd go to URL...:
https://example.com/mypage
...to get your 'blocks' custom content representation for that page, you'd now go to:
https://example.com/mypage.blocks
Your custom content representation can have its own controller, too. This is useful if you want to get Kirby to send you the HTML code of just one single block, instead of all blocks on the page. You could use a query parameter in your URL to tell the controller which block you want the HTML for. The controller would then check the URL for the query parameter, and if the parameter is there, it returns only the required block. This would enable your React app to get the HTML code for just a single block on the page, by sending a request to an URL like:
https://example.com/mypage.blocks?id=02d4a71b-cd02-4382-a78c-84ff1e68324b
I've got a two page jQuery mobile app, and within the init function, the following code..
Call to the init function
$(document).on('pageinit', function(){
MyPages.init();
});
init: function() {
$('td[id$="drops"]').each(function() {
console.log("Element: " + $(this).attr('id'));
}),
};
I have elements in page one that match the above, such as '#early_drops', '#late_drops', etc. These elements do not exist on page 2, but when page 2 loads, the elements are displayed in the console just like when page 1 is loaded. What am I missing here?
Thanks very much,
-Adam vonNieda
By default jQuery loads pages using AJAX into the existing page in order to allow the animated transitions. If you don't want this you just need to 'turn off' the AJAX loading.
See description here: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/links/
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with AJAX. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via AJAX.
You can also disable AJAX across the entire app by default using global configuration: http://api.jquerymobile.com/global-config/
The best example I can find of this is the URL of a google images page with a particular image selected. The URL changes for each image that is selected.
In my case, I have a Notebooks model and a nested Notes model. In the view showing all the notes, when the user clicks a note he/she is taken to the Note show view. Instead, I would like them to be shown a partial within the same view, but I'd like the URL to change to include info about the selected note.
How do I do this?
You can do this with replaceState() in javascript. When the user clicks on the notes you open the note any way you want (using an ajax call for instance) and then when it's open you use a callback to fire the replaceState() function that will replace the current url with whatever you want (I suppose the url of your note).
Then, when a user comes into you site with this precise url you can parse the url to show the note he requested (or let Rails default behaviour redirect him to your note show view).
Here is the documentation for replaceState(): https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_replaceState().C2.A0method
Here is a non working example of the corresponding view using jquery to illustrate my point:
= link_to "note", note_path(#note), id: 'x_link'
<script>
$('#x_link').click(function(e) {
e.preventDefault() //we do not let the event propagate
href = $(this).attr('href') //we get the href attribute of our note
$.get(href, function(data) {
show_partial(data) // write some method to display you partial
history.replaceState(null, null, href) //replace the current state
})
})
</script>
I have a button, that triggers JS and return different modals depending on random logic.
In order to maintain seamless flow, I can't reload page, but I need to track what modal is opened and what button is clicked in it.
I can change URLs by utilising JS window.location to track what is shown and clicked.
window.location.hash = 'clicked1'
which will alter my URL to this www.site.com/#clicked1 or www.site.com/#clicked2
Question is, how I can track it in Google Analytics?
Can someone guid me through this jungle so I can better understand the process. Should I use event tracking instead? Or I can track URLs without reloading the page.
Here is a great article about tracking a single page application with Google Analytics.
To track dynamically loaded content as distinct pageviews you can send a pageview hit to Google Analytics and specify the Document Path by setting the page field.
ga('send', 'pageview', '/#clicked1);
it's usually best to update the tracker object with any new page information prior to sending hits. This will ensure that all hits are associated with the correct page data.
To update the tracker object, use the set method:
ga('set', 'page', '/#clicked1);
If you want to update more than just the page field, you can pass an object of key/value pairs to the set method.
ga('set', {
page: '/#clicked2',
title: 'Clicked 2'
});
Once the tracker has been updated with the proper data for the new page, you can send a hit without overriding page related parameters. For example:
ga('send', 'pageview');
If you’re using analytics.js:
ga('set', 'page', '/your-own-path');
ga('set', 'title', 'Your custom title');
ga('send', 'pageview');
If you’re using gtag.js:
gtag('config', 'UA-0000000-1', {
'page_title' : 'Your custom title',
'page_path': '/your-own-path'
});
If you’re using GTM, you can use whatever dataLayer keys you wish; here’s an example:
dataLayer.push({
event: 'pageview',
page: {
path: '/your-own-path',
title: 'Your custom title'
}
});
A great article explaining those different techniques (examples quoted directly from it) : https://www.bounteous.com/insights/2018/03/30/single-page-applications-google-analytics/
I'm trying to get a getJSON result to update an HTML element on page load, within a jquery mobile loaded website.
Now, I've read I should not rely on ready(), but bind to pageInit. So I tried, but it just won't work. I've tried many other events that could be logical to try within the API event documentation, without any success.
The closest I come to success is after the page is loaded, via ajax, if I refresh the page manually (with the browser's refresh button), getJSON does update the corresponding HTML element. And you guess, it's not what I want to achieve. Here is what the code looks like now, and where it is placed...
<div data-role="page">
<script>
$( '#pageContainer' ).live( 'pageinit',function(event){
//an alert() here does fire right before the page is shown in the browser
//here is the getJSON code.
});
</script>
Now, I need help to try to figure how to make it work. I only want an element X in the page to update with the text returned from a jSON when the page appears in the browser! Like a normal ready() function would have done !
(Maybe it is relevant to specify I'm running RC2 ?)
If you can't use JSONP here, have you tried setting a setTimeout()? You have to trigger a callback after the json object is loaded so timing is essential.