I have a script that need to work only in mobile view in my blog in blogger (blogspot). How can I do it?
This is the script:
<!-- Beginning PassBack for Ad unit KartisimOnline_Android_MobileWeb_Transition_IP ### size: [[1,1]] -->
<script type='text/javascript' src='http://www.googletagservices.com/tag/js/gpt.js'>
googletag.pubads().definePassback('7047/KartisimOnline_Android_MobileWeb_Transition_IP', [[1,1]]).display();
</script>
the template is responsive.
Tx for anyone that can help....
You only need to put your script inside this conditional.
<b:if cond='data:blog.isMobileRequest'>
...
</b:if>
You can also use this one:
<b:if cond='data:blog.isMobile == "true"'>
....Your script here....
</b:if>
Related
I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource.
Below example code will give you clear idea.
<script type="text/ng-template" id="example.html">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
</section>
</script>
It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.
And removing script tag is not an option as well.
So how can I stop script tag form breaking sightly functionality in edit mode?
I ended up doing repetition of code , one for author mode and other for non edit mode.
Below is close resemblance of my solution.
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
<script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
</script>
As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".
I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used # context='unsafe'
There is a workaround based on the Sightly Reference
Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>
In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the # context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below
<script type="text/ng-template">
//mymarkup.html evaluated content here
</script>
In your script tag you could add data-sly-unwrap="${wcmmode.edit}"
This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.
I found the following mention in Netcentric's AEM Sightly Style Guide:
Then, because the HTML grammar ignores elements located inside a
< script > or < style > elements, no block statement can be used within
them.
Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.
I have a folder structure like:
www
partials
admin
admin_menu.html
home.html
index.html
I have defined a script on admin_menu.html like:
<script type="text/ng-template" id="admin_menu">
contents of admin menu
</script>
and in home.html file I tried to include admin_ menu like:
<ng-include src="'admin_menu'"></ng-include>
and this does not work. But if I put the above script tag part in index.html it works. index.html is the file which contains links to all js and app initialization. Do I have to define admin_menu page somewhere?
The issue is that you're trying to include a template cache that is inside a separate html file.
Let's say you have admin_menu.html:
<script type="text/ng-template" id="admin_menu">
stuff
</script>
And you want to include admin_menu. Normally you'd assume that using the code below should be fine.
<ng-include src="'admin_menu'></ng-include>
It would be fine if the script was in the same file where ng-include is located.
If want to load admin_menu, either remove the <script> tags inside admin_menu.html and include it normally.
admin_menu.html (no script wrapping the content):
contents of admin menu
home.html:
<ng-include src="'admin/admin_menu.html'"></ng-include>
OR
You can also include the admin menu as a template cache.
home.html:
<ng-include src="'admin_menu'"></ng-include>
<script type="text/ng-template" id="admin_menu">
contents of admin menu
</script>
Here's a plunker showing how it works:
http://plnkr.co/edit/Lw1Kx2k2aRedKQb1wjlG?p=preview
Note that if you inspect the code, you'll see that the script containing the content is loaded for the second ng-include.
https://docs.angularjs.org/guide/expression
The simplest example using data bindings =
<span>
1+2={{1+2}}
</span>
works with
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
and the output is 1 + 2 = 3
but if I change to the current workable angular script
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular.js"></script>
the output is 1+2={{1+2}}
So why does the current angular not allow this simple data binding example to work?
https://code.angularjs.org/2.0.0-alpha.25/angular.js return 404 page
So, please use another version of angular.
your script should be like this
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular2.js"></script>
if you want to know about more working version of angular then visit this
list of Angular working Version
I am attempting to create a SPA using AngularJS as the main view for my website. I'm using ServiceStack on the server-side and can therefore cleanly serve HTML or JSON requests depending on what's accessing it. My main concern is the use of script blockers, preventing AngularJS from rendering the page properly. So far my main way of working is to render static pages, and inject a small script that redirects to the AngularJS-powered pages if it detects if Javascript is enabled. This works great since every URL works fine when the user begins at the static pages, but I've ran into a couple of snags.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
This causes the first page loaded to be loaded twice.
I'm looking for an alternative, but so far I haven't found any clean solutions. I was thinking about including the "?View=SPA" as a POST variable, but I'm still iffy on that implementation.
Any thoughts?
Instead of redirecting to an other page, I would implement both cases in the same HTML File as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>.hideIfNoScript {display: none}</style>
</head>
<body ng-app ng-init="msg = 'hello world'">
<input class="hideIfNoScript" ng-model="msg" />
<p class="hideIfNoScript">{{msg}}</p>
<noscript>
<p>Content without javascript</p>
</noscript>
<script type="text/javascript">
var myEl = angular.element( document.querySelectorAll( '.hideIfNoScript' ) );
myEl.removeClass('hideIfNoScript');
</script>
</body>
</html>
The CSS Class hideIfNoScript in the head section makes sure that all HTML Tags with this class are never shown to the user, if javascript is disabled.
The noscript tag shows the alternative content.
If javascript is enabled, the little script at the end of the body section makes those elements visible. And in this case, the contents of the noscript tag are hidden.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
Hide those links by default:
a[href*='SPA'] { display: none; }
This causes the first page loaded to be loaded twice
Use a cookie on a browser-check page which loads the first page in an iframe or redirects to it to avoid this.
References
Track Non-JavaScript Visits In Google Analytics
I have an appengine Python application. It includes the simpleauth library. I am viewing the application in Google Chrome.
After I load a page in the application, some text that looks like (for example) "#.UhJcZ2TwKa4" is appended to the end of the URL.
What is this and where does it come from?
Upon edit, maybe it's one of my javascript includes that is doing it. Here are all my javascript includes:
<script type="text/javascript" src="/static/js/tinymce/tiny_mce.js"></script>
<script type="text/javascript" src="//use.typekit.net/dvk0ttp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
Thanks in advance,
Aaron
Looks like you're using AddThis APIs and you have enabled address bar tracking which appends those "strange" characters to the page url.
Those parameters are used to collect data if someone copies the URL somewhere else
If you don't want this feature, you can disable it, editing the javascript config variable for the APIs (See attached link for the tutorial)
data_track_addressbar = false;
Source: AddThis Support
Inserting:
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
before closing the tag cleans the URL
This is the corect resource: Removing all hashtags/anchors from your URLs