I had implemented static web pages and I want to move them to AMP. I am using SPOT.IM (http://www.spot.im/) . Is there a way to use spot.im in AMP pages? or do you know of any different services to use for the same purpose in AMP pages?
Yes, it is a way: https://github.com/SpotIM/spotim-integration-docs/blob/master/google-amp/README.md
You will have to use an amp-iframe component: https://www.ampproject.org/docs/reference/components/amp-iframe
Add this script link to the head of your page:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
And use amp-iframe in the body of your page:
<amp-iframe width="375" height="815" resizable
sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation"
layout="responsive" frameborder="0"
src="https://amp.spot.im/production.html?spot_im_highlight_immediate=true&spotId=SPOT_ID&postId=POST_ID">
<amp-img placeholder height="815" layout="fill" src="//amp.spot.im/loader.png"></amp-img>
<div overflow class="spot-im-amp-overflow" tabindex="0" role="button" aria-label="Read more">Load more...</div>
Use Your SPOT_ID and POST_ID
Related
I would like to know if it's possible to make a temporary void link in Ember <LinkTo #route=""> like HTML <a href="#">, thanks for helping.
While <LinkTo> provides some interesting features when you use it with a route (navigation without reloading, active route recognizing, query param and model passing). You don't need to use it to create a link. You can use <a href="#"> directly in a template with no ill effects if it is what you need.
I've incorporated the following automatic slideshow into a webpage that I'm developing...
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
...but would like the ability to manually move to the next slide or go back as shown here...
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
W3schools provide both types of slideshows (manual and automatic) but not one where the manual and automatic features are combined. I've tried incorporating the CSS and JS of one in to the other but can't get it to work - presumably because both JS scripts are calling on the same functions. Can anyone help?
Add two links to HTML :
<a id="prev" href="#" >Prev</a>
<a id="next" href="#" >Next</a>
JS:
$("#next").click(function(){
$('#slideshow > div:first-child')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
});
$("#prev").click(function(){
$('#slideshow > div:first-child')
.fadeOut(1000)
$('#slideshow > div:last-child')
.prependTo('#slideshow')
.fadeOut();
$('#slideshow > div:first-child').fadeIn();
});
I am using Facebook's share button on my Django app.
I'm using Facebook's SKD instructions which tell me to place this code wherever you want the plugin to appear on your page:
<div class="fb-share-button"
data-href="https://my-website-full-url"
data-layout="button" data-size="small" data-mobile-iframe="false">
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">Share
</a>
</div>
So I placed that code in my template but how do I add the full URL of the web page with the FB share button in the data-href attribute?
As long as you have django.template.context_processors.request enabled you should be able to use request.build_absolute_uri() in your template:
data-href="{{ request.build_absolute_uri }}"
This should work out of the box if you're using a fairly recent version of Django.
I am trying content dropdown from Foundation 5: http://foundation.zurb.com/docs/components/dropdown.html, but it does not work as you can see on this fiddle: http://jsfiddle.net/AQGd9/2/. Basically, the content does not appear upon clicking the link when it should.
Has Content Dropdown
<ul id="drop2" class="f-dropdown content" data-dropdown-content>
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
Thanks
You need to explicitly initialize foundation with this piece of code before the end of your body, like this:
<body>
...
<script>
$(document).foundation();
</script>
</body>
I have the same problem right now. The doc says that you need include the javascript required files, there are two ways to do it:
1) All Js (core + plugins): foundation.min.js
2) Only the core, and add the plugins on demand: foundation.js + foundation.dropdown.js (in this case).
So, launch foundation Js:
$(document).foundation();
Source: Foundation 5 Js Doc
This work for me.
I'm trying to develop a reporting system using Django. I have to display reports about various categories of data.I have put each category as a tab-tab1,tab2, etc. Is it possible to have different template for each tab without having to change the url.
I have tried template inheritance but that requires have separate url for each tab.
My concern is that if the number of tabs grow, then the number of urls will also increase.
Any suggestions please?
Thanks in Advance.
Why is it a problem for the number of URLs to increase?
Presumably you don't need separate URLconf entries for each tab, you can just capture the tab name in the URL and send it on to the view:
url(r'^reports/(?P<tab_name>\w+)/$', views.reports, name='reports')
...
def reports(request, tab_name):
... do something depending on tab_name ...
You can just use {% include %} tag and include different templates.
And I think it's better to have unique URL for each tab, it least with hashtag.
You can use a library like jquery tabs to create the tabs, then load each template individually either through include as suggested by #DrTyrsa or by a custom template tag (which would be my personal preference).
Here is an example (from the excellent bootstrap framework from twitter):
<ul class="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="pill-content">
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
<script>
$(function () {
$('.tabs').tabs()
})
</script>