I've got a simple Cycle2 slideshow that reads images from a server folder and displays them full height and centered on a web page. The images are loaded through an Ajax call which returns any new files it finds, it's called at page load and subsequently at programmed intervals. I use a session variable to keep track of the currently used files. I use the Cycle2 "add" command and the "Center" add-on as I have different sized images to display.
It works nicely except that after 'cycle' initialization any new slides added are not centered...
I know that Cycle2 adds inline styling but it only centers the images on initialization. It should be possible to call the centerHoriz and centerVert programatically when adding the new slides but can't work out how to at the same time as the 'add' command? Here is my code:
<?php
/*
* Template Name: Slideshow
*/
?>
<?php
session_start();
$_SESSION['curfiles'] = array();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style type="text/css">
.slideshow {
width: 80%;
margin: auto;
border: 1px solid #bbb;
background: #ffc;
}
#media screen and (max-width: 1164px) {
.label {font-size: 2vw;}
.textbox {font-size: 1.5vw;}
.cycle-slide {width:100%;}
.slideshow {width: 95%;}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<script type="text/javascript">
function loadSlides() {
$.ajax({
type: "GET",
url: "load.php"
}).done(function(response) {
var temp_images = eval("(" + response + ")");
for(ti in temp_images){
$('.slideshow').cycle('add','<img src="/files/display/' + temp_images[ti] + '" alt="">');
}
});
}
window.setInterval(function(){loadSlides()}, 5000);
jQuery(document).ready(function($){
loadSlides();
$('.slideshow').cycle(
{
next: '.slideshow'
});
});
</script>
</head>
<body>
<div class="slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="800000"
data-cycle-speed="700"
data-cycle-center-horz="true"
data-cycle-center-vert="true"
data-cycle-pause-on-hover="true"
>
</div>
</body>
</html>
Related
Am still learning on Django and wkhtml2pdf using and I need some help please, I have searched and try much solutions but they don't work with me, I want to set a background image and page number in the footer(I Have use wkhtml2pdf library):
Here it's the code
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
body{
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/...');
margin:0px;
background-size: cover;
background-position: left top;
padding-top:0px;
height: 1100px;
width: 900px;
}
#divb
{
font-size: 12px;
font-family: Arial;
}
div.footer {
display: block; text-align: center;
position: running(footer);
#page {
#bottom-center { content: element(footer) }
}
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="border:0; margin: 0;">
<div id="divb">
<p><strong>Materials :</strong> {{ materiel }}</p>
.........(the rest of calling the data)
</div>
<div class='footer'>
Page <span id='page'></span> of
<span id='topage'></span>
<script>
var vars={};
var x=window.location.search.substring(1).split('&');
for (var i in x) {
var z=x[i].split('=',2);
vars[z[0]] = unescape(z[1]);
}
document.getElementById('page').innerHTML = vars.page;
document.getElementById('topage').innerHTML = vars.topage;
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
window.load = function() {
window.status = 'render-pdf';
};
</script>
</body>
</html>
and here it's the result :
the was a white space between the background image and the origin page , also the number of page appear to me (Page undefined of undefined), How i can adjust the background-image correctly to filled out all the page without white space , also what' wrong with page number in the footer.
see the screenshoot please.
enter image description here
.Thanks In Advance for everyone here.
I'm trying to setup ember-testing with QUnit to test my Ember.js application.
My problem is the app isn't rendering on the QUnit test page, and thus the visit('/') function isn't working.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MKTS Tests</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="./bower_components/qunit/qunit/qunit.css">
<!--
<link rel="stylesheet" href="./css/foundation.css">
<link rel="stylesheet" href="./css/app.css">
-->
<style type="text/css">
#qunit-fixture, #app-root {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<!-- Libraries (Dependencies) -->
<script src="../app/bower_components/requirejs/require.js"></script>
<script src="../app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="../app/bower_components/handlebars/handlebars.js"></script>
<script src="../app/bower_components/ember/ember.js"></script>
<script src="../app/bower_components/ember-data/ember-data.js"></script>
<!-- App and Templates -->
<script src="../app/scripts/app.js"></script>
<script src="../app/scripts/models/fleets.js"></script>
<script src="../app/scripts/routes/application_route.js"></script>
<script src="../app/scripts/routes/index_route.js"></script>
<script src="../app/scripts/router.js"></script>
<script src="../app/scripts/store.js"></script>
<!-- Test Helpers -->
<script src="./support/test_helper.js"></script>
<!-- Test Library -->
<script src="./bower_components/qunit/qunit/qunit.js"></script>
<script src="./spec/integration.js"></script>
<script src="./spec/unit.js"></script>
</body>
</html>
integration.js
test('hello world', function() {
//debugger;
//expect(1);
MarketSetupAdminUi.reset();
visit("/").then(function() {
var title = find('title');
equal(title.text(), 'Market Setup Tool', 'Title check');
});
});
test-helper.js
(function (host) {
var document = host.document;
var App = host.MarketSetupAdminUi;
var testing = function(){
var helper = {
container: function(){
return App.__container__;
},
controller: function( name ){
return helper.container().lookup('controller:' + name);
},
path: function(){
return helper.controller('application').get('currentPath');
}
};
return helper;
};
Ember.Test.registerHelper('path', function() {
return testing().path();
});
Ember.Test.registerHelper('getFoodController', function() {
return testing().controller('food');
});
// Move app to an element on the page so it can be seen while testing.
document.write('<div id="test-app-container"><div id="ember-testing"></div></div>');
App.rootElement = '#ember-testing';
App.setupForTesting();
App.injectTestHelpers();
function exists(selector) {
return !!find(selector).length;
}
}(window));
I updated the app to Ember 1.10.0 and Ember-data beta.15.
I'm planning to regenerate the app using Ember-CLI, which appears to have better testing.
I'm using Material Bar Charts. However, it turns out that whenever I use a 'base href' on my page, the chart will not function properly (if you hover over the bars they disappear). You can try this out with the code below. The base href does not affect inclusion of the required files at Google (but I imagine there is some CSS being included through the javascript that uses relative paths).
I really want to use a base href. Any idea how to make it function?
IMAGE (mouse is hovering over the first bar, which then disappears):
FUNCTIONAL (no base href):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
NOT FUNCTIONAL (base href introduced):
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://yahoo.com/" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Can the following href="#" be called automatically?
<a id="loadBtn" href="#">Do stuff</a></p>
Thanks!
(Update) In the following facebook gallery launcher:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$('#loadBtn').click(function () {
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
return false;
});
});
</script>
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<p><a id="loadBtn" href="#">Get photo</a></p>
<div id="albumsContainer"></div>
</body>
</html>
Essentially to get to the action faster rather than having msc bits of text to click first.
you can set href attribute with whatever value you want as per below code:
$('#loadBtn').attr('href','#');
Not sure whether the href='#' is just for example purposes or what you're putting in your final code.
(1) If you want to scroll to the top of the page, you can either use $('body').scrollTop(0) or animate it a bit with something like $('html, body').animate( {scrollTop : 0 }, 200); (If you want to animate it, just attach it to #loadBtn's click event and be sure to return false, so the anchor won't jump to the top and override your animation.)
If you want, you can also set window.location.hash so the hash location will be recorded.
(2) If you want to simulate a click on the link, you can use .trigger(), e.g.: $('#loadBtn').trigger('click');
I think following code will work for you:
$("#loadBtn").ready(function(){
$(this).click();
});
Also try this in your onload function:
document.getElementById('yourLinkID').click();
// Automatically href will be called
Thanks for your pointers. It lead me to the idea of just rearranging the javascript so that the code was executed without need to click anything:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<!--p><a id="loadBtn" href="#">Get photo</a></p-->
<div id="albumsContainer"></div>
<script type="text/javascript">
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
</script>
</body>
</html>
I've tried xtk release 2 as well as built xtk.js from source and there seems to be an issue (that wasn't there in release 1) when xtk is used alongside jquery.
No matter what I do, I always get a
"Uncaught Error: Could not find the given container or it has an undefined size."
in the javascript console.
To reproduce the issue, I modified the sample html page on the xtk wiki, reported here for convenience:
<html>
<head>
<title>XTK TEST COMPILED!</title>
<script type="text/javascript" src="xtk.js"></script>
<script type="text/javascript">
var run = function() {
var r = new X.renderer('r');
r.init();
var cube = new X.cube([0,0,0],10,10,10);
r.add(cube);
r.render();
};
</script>
<body onload="run()">
<!-- the container for the renderer -->
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
and changed it to
<html>
<head>
<title>XTK TEST COMPILED!</title>
<script type="text/javascript" src="xtk.js"></script>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var r = new X.renderer('r');
r.init();
var cube = new X.cube([0,0,0],10,10,10);
r.add(cube);
r.render();
});
</script>
<body>
<!-- the container for the renderer -->
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
If you test this page (I tried Chrome and Firefox), you'll get the error reported above.
Any ideas on how to tackle this? I'm investigating...
I am glad it works now! You could check out the (unreleased) demo where we use JQuery as well:
http://demos.goxtk.com/evl/
Just for a test: are you sure it worked different with XTK r1? I don't think anything changed on that level..