Jquery Cycle2 won't produce slideshow - jquery-cycle2

I'm trying to implement the cycle2 plugin with jquery on an HTML page.
I've used the site http://jquery.malsup.com/cycle2 as a guide
I downloaded (copied) the file jquery.cycle2.js I placed it on the server in on the server in the location public_html/cycle2/jquery.cycle2.js
In my HTML page's Header section I added the lines:
<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
Then, in the HTML page's BODY I added:
<div class="cycle-slideshow">
<img src="cycle_images/image1.jpg" alt="Image1"/>
<img src="cycle_images/image2.jpg" alt="Image2"/>
<img src="cycle_images/image3.jpg" alt="Image3"/>
</div>
The guide doesn't give a css-type example for the class "cycle-slideshow". Instead it says that by using that class in the DIV tag it will auto-activate the slideshow.
This doesn't seem to activate the slideshow. Instead it lays out the images out in three rows, one row after another.
Any idea what I'm doing wrong to activate the cycle2 slideshow?

The problem was with the HTTP:// on the server line. Since the Cycle2 documentation was published, the GOOGLEAPIS sever must have obtained a certificate, making it HTTPS. The mismatch between HTTP and HTTPS caused the plugin to fail. The working code now reads:
<!-- include jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
It seems to me that it's safer to remove "HTTP" or "HTTPS" and just being the server line with "//".

Related

How to embed/use graph generated by apache superset directly in other web application

I have my own web applications and need to implement reporting in it.
So I want to know how can we embed the graph generated by apache superset in my web application/project ?
Quick Answer:
You can insert it with an HTML IFrame tag.
For example if the Url of your dashborad is
http://52.59.247.208:8088/superset/dashboard/1/
Add simply the following suffix "?standalone=true" and add it in your HTML code like:
<html>
<head>
<title>Testing Charts</title>
</head>
<body>
<h1>Testing IFrame</h1>
<iframe
width=100%
height=100%
frameBorder="0"
src="http://52.59.247.208:8088/superset/dashboard/1/?standalone=true"
>
</iframe>
</body>
But first you have to edit your superset_config.py file by adding following line, if you want to use it without any problems:
SESSION_COOKIE_SAMESITE="None"

Using Foundation Modals with Django

I had an html file using Foundation to display a simple signup login template that was working as desired before using Django. I made a Django project and app and was able to get everything displaying as it was before except for modals. The section looks like this:
<a data-open="signup" class="button">Sign up</a>
<div class="reveal" id="signup" data-reveal>
I've used this http://foundation.zurb.com/sites/docs/reveal.html but it's not actually displaying the modal when I run the Django server.
I also have the following lines in my html page:
<link rel="stylesheet" href="{% static "MyApp/foundation.css"%}">
<link rel="script" href="{%static"MyApp/js/jquery/vendor/foundation.js"%}">
Along with this <script> $(document).foundation(); </script>
These are all in my static directory. I also have tried adding 'foundation' to INSTALLED_APPS in my settings but I get an error saying no module was found. However, I'm using other CSS from foundation and it's working fine so I'm wondering if this issue has something to do with using foundation in my static directory vs. using this package: https://pypi.python.org/pypi/django-zurb-foundation
Any help is appreciated!

Is there a way to have (hack) turbolinks to only refresh a specific selector?

I would like to use turbolinks in a rails 4 application but not have it replace the entire <body> tag. Instead I would like to specify a tag/selector for turbolinks to refresh.
Something like...
<body>
<div class="turbolinks-refreshes-this">
Some content that is replaced whenever a link is clicked.
</div>
<div class="turblinks-does-not-refresh-this">
Some content that remains even if a link is clicked.
</div>
</body>
My guess is you would need to fork turbolinks to add this functionality but thought I'd throw it out there to see if anyone else has tried to do this.
Have you looked at pjax? It's very similar to Turbolinks (and gets a mention in the Turbolinks README) but lets you specify a target container. Here's a Railscast that shows how to use it in a Rails app.
Here's a (slightly modified) excerpt from the pjax README:
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to next page.
</div>
We want pjax to grab the url /page/2 then replace #pjax-container
with whatever it gets back. No styles or scripts will be reloaded and
even the h1 can stay the same - we just want to change the
#pjax-container element.
We do this by telling pjax to listen on a tags and use
#pjax-container as the target container:
$(document).pjax('a', '#pjax-container')
Now when someone in a pjax-compatible browser clicks "next page" the
content of #pjax-container will be replaced with the body of
/page/2.

Go language strange behavior by handling templates

gotemplates
Hello!
I'm learning Go language now and trying to port some simple WEB code (Laravel 4).
Everything was well, until I tried to reproduce Blade templates into text templates.
I found that Go can load my CSS and JavaScript files only from the catalog with a name "bootstrap" only.
Here is my catalog tree which I tried to use:
start-catalog
bootstrap (link to bootstrap-3.3.1)
bootstrap-3.3.1
css
bootstrap.min.css
js
bootstrap.min.js
jquery
jquery (link to jquery-2.1.1.min.js)
jsquery-2.1.1.min.js
go_prg.go
Here are my templates:
base_js.tmpl
{{define "base_js"}}
{{template "login_1"}}
<script src = "/bootstrap/js/jquery"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
{{end}}
base_header.tmpl
{{define "base_header"}}
<head>
<title>PAGE TITLE</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
{{end}}
If the catalog name differs from "bootstrap" Go language or Firefox can't load files from the templates above: bootstrap.min.css, bootstrap.min.js, jquery.
If I use not the link but the catalog name directly "bootstrap-3.3.1" than Go or Firefox can't load.
If all required files are moved under "bootstrap" I'm getting the results I expected (exactly the same as in Laravel 4).
To launch go language code the command go run go_prg.go was used.
Environment: Ubuntu 14.04, go-1.3.3, Firefox 31.
Who's wrong: Go language, Firefox or me?
Any help will be highly appreciated!
The problem described was caused by
http.Handle("/bootstrap/", http.StripPrefix("/bootstrap/", http.FileServer(http.Dir("bootstrap"))))
before any template was handled. It allowed access files under the directory 'bootstrap' only.
The problem was fixed by changing to
http.Handle( , http.StripPrefix(, http.FileServer(http.Dir("."))))
and adding to pathes for CSS and JavaScript files. Like so
/bootstrap/js/jquery">.

Add Bootstrap template to MeteorJS

I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
Later edit:
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
Any ideas on how to add that Google Maps script from the Bootstrap Template?
Later edit:
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
with no success.
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
Remove default bootstrap:
meteor remove bootstrap
Add your theme:
Place your css files in your project's css directory, say /client/css
Place the themes javascript files in /client/lib
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
Also
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
External Apis
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
Hopefully you find all of this cool!!