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'
Related
im trying out the HTMX lib and so far i like it alot. something that i cant quite get my head around is handling full page reloads.
Links
<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>
<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>
its quite nice in that it loads the content in my required div, and applies a /#/link into my url bar and browser history.
But when i reload the page on any of the urls /#/profile or /#/feed the page reloads to its default state not including the content thats designated on the /#/profile or /#/feed pages.
If i just use a url of /profile or /feed, i get a 404 error as expected.
Everything is amazing, am i doing something wrong?
For full page loads you would need to either:
Render the content server side
Use htmx with the load trigger to load the content on page load. You can find an example of that here https://htmx.org/attributes/hx-trigger/
In the second case you still need to be able to determine the type of page being loaded server side to render the appropriate div. Something like this:
<div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>
Following this question I have created a new banner.
Now I want to insert a hook, but I am wondering which hook shall be used to display it on top of every page (as a promotional banner).
Thanks
Assuming you're using the classic theme, you can use the displayBanner hook. If you look at header.tpl you can find the following block:
{block name='header_banner'}
<div class="header-banner">
{hook h='displayBanner'}
</div>
{/block}
which should be displayed on top of every page
I am new to working with worklight enviroment and started working it on recently.
I am using dojo version 1.9 (the IBM supllied one) , worklight 6.1, OS windows 7, eclipse juno sr2 64bit, IE 10 (For RPE), Google chrome latest (As default browser).
I have tried many widgets in dojo mobile and all of them work fine, i have been through other questions too like "Worklight 6.1 Android Applicaiton renders all views with no widgets" and followed all steps given in the solution and successfully created and viewed the pages on both MBS and android emulator.
The only problem is when i am working with views. I add a tabBar from dojo and TabBarButtons for view transitions . Also add a few views in the pages and link them with the buttons. I also check and see that my main.js file is updated with all included elements.
Although the toolbar along with default view is visible it does not switch view when i click on other buttons in tabBar.
also onclicking the TabBarButtons an error popsup in chrome console -
Uncaught TypeError: undefined is not a function
This error pops up on each click .
here is the structure of my source code of in the body tag of index.html file :-
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view2"
data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true" >
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Hello world'"></div>
<button data-dojo-type="dojox.mobile.Button">Hello</button>
<input data-dojo-type="dojox.mobile.TextBox"><input type="range"
data-dojo-type="dojox.mobile.Slider"
data-dojo-props="orientation:'H'">
</div>
<div data-dojo-type="dojox.mobile.View" id="view1"
data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'About',moveTo:'view0'">
</div>
<div data-dojo-type="dojox.mobile.RoundRect">
Hello, we are a leading company in innovations
</div>
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom" id="Tab1">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view0,transition:'slide'" id="tabB1">Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view1,transition:'slide'" id="tabB2">About</li>
</ul>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
// Rest all is default code, no changes in jquery version or anything else
I have also tried the following things and none of them seem to work:-
-Copied and replaced files in www folder from dojoLib/dojo/dojo/nls/core-web-layer.js and mobile-web-layer.js files.
-Kept the Tabbar out of any view directly into body tag and linked views to it.
-Added id attribute to tabBar and tab button elements, and view elements.
-turned off provide missing library resources and included missing files (if any) ,rebuilt the project and ran again.
The main issue (causing the exception) is the missing quotes around the view ids of the moveto attributes. It should be:
data-dojo-props="moveTo:'view0',
Once fixed, your sample will work.
But there are another issue, this time a design one: the TabBar fixed property is only meaningful when used with a ScrollableView (this property ensures the tabbar is not scrolled and keeps its bottom position). So your outer view should be a ScrollableView instead.
Also, note that nesting views come with some limitations. In particular, using the 'moveto' attribute you cannot transition from a view to another view if the latter is contained in another parent.
Do not hesitate to look at the various tests in dojox/mobile/tests and to the documentation
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 am using the no configuration option and have taken the following steps:
put the js files into root/public/javascripts
put the image files into root/public/images
put the demo css files into root/public/stylesheets
put css call in the head section of my layout file
<%= stylesheet_link_tag "demo_table", :media => "all" %>
put the initialization script in the head section of my layout file:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script >
first line of my table layout is:
<table width="100%" style="border-collapse:collapse; " id="example">
I restarted my server. Nothing happens. What am i missing?
The zero config relies on having a properly formatted table, which your example isn't showing. It must also have <thead> and <tbody> elements to render properly. Ensure that's properly setup first.
Second, open the page in Chrome or Firefox, view source. Click on the links to the Datatables.js and Datatables.css files as well as Jquery.js (or whatever each of these files is named) Do they open? If not, there's your problem.
Javascript is essentially platform independent. Sure, you get information TO the script in different manners in Rails, PHP, .net, etc, but there's no reason that this doesn't work in any of the major scripting language.
I have been using the RailsDatatables plugin in my rails apps without any problem. Maybe give that a try?