On this page (http://www.nicofauser.de/cartoons/item/cartoon-kw26-2015/) there's a Google +1 below the cartoon. If the counter shows 0 and I share the cartoon, the counter jumps to 1. But when I reload the page after some minutes, the counter shows 2. When I go to my Google+ profile and delete the shared cartoon and go back to the website and reload the page after some minutes, the counter shows 32. I've checked this for 3 different cartoons, always the same.
What's happening there?
I've implemented the Google +1 button like this:
<div class="googleplus">
<script type="text/javascript" src="https://apis.google.com/js/platform.js" async defer>{lang:'de'}</script>
<div class="g-plusone" data-href="http://www.nicofauser.de/cartoons/item/cartoon-kw26-2015/"> </div>
</div>
Related
I want to use rocket loader on my page, but when it is on when you come to the page for very first time script freeze and works correctly after refreshing.
After entering the page for the first time, to the page 3 scripts from cloudflare are added at the end of the body:
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="48c287fd36069ba2003e0917-|49" defer="" type="fa3629c76fee0735b80f7744-text/javascript"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="fa3629c76fee0735b80f7744-|49" defer=""></script>
>
last 2 scripts with different ID block each other and because of this our scripts don't load.
Any ideas how I may fix this?
Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?
Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.
I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?
Thanks.
Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
A large percentage of the time, what you're looking for can be obtained very simply via:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.
Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:
Durandal: Showing a 'LOADING...' during composition
For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:
https://github.com/BlueSpire/Durandal/issues/414
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}
I want to use getclicky to monitor my websites statistics.
Here is the following code snipet:
<a title="Google Analytics Alternative" href="http://getclicky.com/66457219"><img alt="Google Analytics Alternative" src="//static.getclicky.com/media/links/badge.gif" border="0" /></a>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(66490659); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66490659ns.gif" /></p></noscript>
Does it go in the head of the layout or the body of the layout or do I have to put it on each page?
From the getclicky FAQ:
The tracking code needs to go on every page that you want us to track. Most sites have what's called a "footer" file, that's automatically included at the bottom of every page. If your site has one of these (and if it doesn't, it should!), all you need to do is place the code in this one file and the code will then be included at the bottom of every page on your site automatically.
Create a _footer.html.haml (or .erb depending on your app) file in app/views/layouts and include it in every layout at the bottom. like so:
= render :partial => 'layouts/footer'
Since Safari 5 introduced the "Reader" feature, the "RSS" button has become very inaccessible for users. (Holding down the mouse button brings up the feed subscription popup if a site provides feeds).
For some pages of my blog (index and archive) I would like to display the "RSS" button as default for two reasons:
Feed subscription makes more sense for those pages
My design is already "readable" (it almost looks identical to the page Safari Reader renders)
There is already a SO question that deals with that topic, but I want to achieve the opposite of the OP so I opened a new question.
Note:
e.g. stackoverflow.com shows the RSS icon and does not trigger the Reader feature but I couldn't figure out why.
After further investigation it turned out that Safari automatically does the right thing.
It displays the RSS button if a page has the typical structure of an index page:
<div>
<div>
<h1>A</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>B</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>C</h1>
<p>Lorem ipsum...</p>
</div>
</div>
and the Reader button if it has the structure of a single entry:
<div>
<h1>A</h1>
<p>Lorem ipsum...</p>
</div>
The problem with my index testpage was, that it didn't contain enough entries and not enough text.
This is a blog post, that sums up the elements that trigger Safaris Reader button:
http://mathiasbynens.be/notes/safari-reader