I am trying to figure out why this simple code isn't working. I'm implementing this:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [750, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/allimages/vdance750x500.png", "", "", "Caption"],
["/images/allimages/vpoca750x500.png", "", "", ""],
["/images/allimages/vhat750x500.png", "", "", "" ],
["/images/allimages/vdance750x500.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<title>Vanadia's Site</title>
</head>
<body>
<div id="fadeshow1"></div>
<br />
</body>
</html>
I am new to coding and wondering if there is a syntax error... all the images are in the right spot. I dont understand why this isn't working!
Any help would be appreciated.
Where is your doc type and opening html and head tags? Maybe you just didn't include them here, but make sure they aren't missing from your document. Aside from that, check your browser's JavaScript console to see if you're throwing an error. If you are, please post it for all to see.
I copied your code and changed the image paths (demo: jsfiddle.net/hJKMy/).
It is likely that your image paths are incorrect.
Related
I've made a simple html web app (to get more complex later), and need to a script to download a copy as a pdf. When I run the script to generate the pdf, I can't get it to show anything other than the google login page.
I have toggled all options for the web app. I have also gone through a few different ways to generate the pdf, as well as generating a doc, which also didn't work.
function htmlToPDF() {
var html = "https://script.google.com/macros/s/AKfycbztkYQGmAowe21IITtpaUVsTwuNdbLmRC_B4opqp9A/exec" ;
var response = UrlFetchApp.fetch(html);
var htmlBody = response.getContentText();
var blob = Utilities.newBlob(response, "text/html", "text.html");
var pdf = blob.getAs("application/pdf");
DriveApp.createFile(pdf).setName("text.pdf");
}
Here's an example of the PDF I get.
https://drive.google.com/file/d/1P-uK4-nhXA76tkpqABOK-xnoTnra9-4M/view?usp=sharing
Web app code:
<!DOCTYPE html PUBLIC>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_68bbc"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">AAPL Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "2",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"range": "all",
"save_image": false,
"container_id": "tradingview_68bbc"
}
);
</script>
</div>
<!-- TradingView Widget END -->
</body>
</html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
I re-deployed, and now I get this mostly blank pdf:
https://drive.google.com/open?id=1Gz3Sy0UXhpxHwwTUzFCFoDkwRrofd4g7
You had two issues
You had authorization problems because of not deploying the script as public - you solved this issue now.
The website contents are not displayed correctly in the pdf you create.
The latter issue is a tricky one
The problem is that your web site contents are rendered dynamically in the browser and cannot be captured with the UrlFetchApp.
You need to use a workaround, e.g. call with UrlFetchApp an external API that would take a screenshot of the browser contents and pass them as an image to Apps Script.
I just recently learned angular.js (and i use the word "learned" loosely), and I am trying to make a basic website and have gotten stuck on form validation. I realized that the double bracket notation I learned from "Shaping up with angular.js" isn't registering on the webpage that I have. I've been hacking at this all day and you'll probably see more than a few issues with my code (feel free to comment).
The code piece I am talking about is this:
<div class="divvy" ng-repeat="slider in main.sliders">
<h3>
{{slider.name}} costs {{slider.cost | currency}}
</h3>
</div>
I will include the entire code, but for reference, the class "divvy" is just a convoluted way to make the div centered on the screen.
My header reads as this:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Ek+Mukta|Montserrat" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="//code.angularjs.org/snapshot/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
And the script.js file is rather simple, because I haven't really done anything with it yet besides debugging why this isn't working.
(function(){
var app = angular.module("myModule",[]);
app.controller('MainController',function(){
this.products= sliders;
});
var sliders= [
{name: "Charles",
cost: "4.20"
},
{
name:"Alfred",
cost:"30"
},
{
name:"Something that costs 10 bucks",
cost:"10.1"
}
]
})()
Please help me out. I think that something else I was trying to fix made it so that I couldn't use angular properly anymore (there is a button in there that is meant to edit text (also a debugging attempt) and it used to work but no longer does after some ctrl+z made me lose my place).
Additionally, if you have extra time, there is a background picture which I spent a lot of time figuring out how to center and make it "zoom-proof", but I would like to edit it dynamically (background changes with slides or fadechanges) but the background img is stuck in style.css html{}... And I don't know how to edit that using "myStyle" or even use ng-myStyle in the first place. Thank you. The full code is at plunker, here: https://plnkr.co/edit/H4uhcU
It should be,
<div class="divvy" ng-repeat="slider in main.products">
DEMO
var app = angular.module("myModule",[]);
app.controller('MainController',function(){
var sliders= [
{name: "Charles",
cost: "4.20"
},
{
name:"Alfred",
cost:"30"
},
{
name:"Something that costs 10 bucks",
cost:"10.1"
}];
this.products= sliders;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app= "myModule" ng-controller="MainController as main">
<div class="divvy" ng-repeat="slider in main.products">
<h3>
{{slider.name}} costs {{slider.cost | currency}}
</h3>
</div>
I am using below code. But I am getting start and end, I am finding white space. It should be without any start and end gap. It should be continuously.
I am using this code:
<MARQUEE direction="right" WIDTH=200 HEIGHT=50>
Welcome to the Website. Welcome to the demo.Welcome to the Website. Welcome to the demo.
</MARQUEE>
It is going to right and then start. So gap is there. I want to display continuously. So, with naked eye, we should be not able to find start and end of marquee
Please help me with this
This might help you:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I have edited as per your need in the following code, save as .html and put the downloaded .js file in the same folder as html file is saved.
you will have to download .js file from the link given.
<html>
<head>
<script type="text/javascript" src="crawler.js">
/* Text and/or Image Crawler Script v1.53 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>
</head>
<body>
<div class="marquee" id="mycrawler">
Welcome to the Website. Welcome to the demo.Welcome to the Website. Welcome tothe demo.
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
//'border': '0px solid #CC3300'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
</script>
</body>
</html>
I have come across a tool called princexml that can convert html+css into pdf beautifully (see this video). With this it's even possible to write a PhD thesis using entirely html+css and get a nice pdf output in the end. But it seems it does not handle mathjax well. I guess this is because the mathjax part much be rendered in a browser first.
So I have a simple html file like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test math</title>
<style type="text/css">
</style>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
</head>
<body>
$x^2 + y^2 = 1$
</body>
</html>
After conversion using princexml:
prince --javascript x.html -o x.pdf
the equation is rendered verbatim in the pdf.
Is there a way to make this work?
This is because princexml doesn't yet support setTimeout method which Mathjax uses for its asynchronous functions. There are two workarounds:
Render your html in the browser such as Chrome first. Get the entire document (not the source but actual rendered document) saved into html file and then use it as input to prince. You can get entire rendered document from browser javascript console.
Second method is to use a headless browser like phantomjs. See also
https://web.archive.org/web/20150503191319/http://www.lelesys.com/en/media/technology/phantomjs-as-screen-capture-to-generate-image-pdf-files.html
here is my js file dashboard.js
Ext.onReady(function(){
Ext.QuickTips.init(); // **want to know why this is used**
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());**want to know why this is used**
// create the data store
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellers',
storeId: 'getresellers',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: ['cityname', 'totfollowup', 'totcallback', 'totnotintrested', 'totdealsclosed', 'totcallsreceived', 'totcallsentered', 'totresellerregistered',
'countiro', 'irotransferred', 'irodeferred'
]
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'cityname',
header : 'cityname',
width : 160,
sortable : true,
dataIndex: 'cityname'
}
],
stripeRows: true,
autoExpandColumn: 'cityname',
height: 350,
width: 600,
title: 'Reseller Dashboard',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('dashboard');
});
I putted some comments where i want to know why this is used ..
want to know why this is used
Here is my html file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reseller DashBoard</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="lib/ext-base-debug.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="lib/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="lib/dashboard.js"></script>
</head>
<body>
<div id="dashboard">
</div>
</body>
</html>
Here is my json which i am also rendering in firebug ..
{
"countothercities": "0",
"directreseller": "14",
"totalresellersregisteredfor8cities": 33,
"cityarray": [{
"cityname": "bangalore",
"totfollowup": "3",
"totcallback": "4",
"totnotintrested": "2",
"totdealsclosed": "0",
"totcallsreceived": "0",
"totcallsentered": "68",
"totresellerregistered": "6",
"countiro": "109",
"irotransferred": "83",
"irodeferred": "26"
}, {
Please check .
The Ext.QuickTips functionality provides attractive and customizable tooltips for any element. Have a look at this tutorial from Sencha learning site for details. The init method is called to initialize the singleton class of Ext.QuickTip.
The Ext.state.Manager is the global state manager. To make use of the state manager, you must initialize it with a provider. This is what you are doing with the statement:
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Here you are using CookieProvider. By using this, you are asking the ExtJS library to store the state information of the components in cookies.
Update: the Error is occurring at getColumnWidth() method. check if you have proper values for the width attribute in your column model. For debugging, try removing the width detail for all the columns. I think you have more code that you have not put up here to simplify. There might be some typo.
Try this:
//grid.render('dashboard'); //delete this line
grid.renderTo = 'dashboard';
grid.show();
Update
try to remove this line
autoExpandColumn: 'company'
Here is your bug:
autoExpandColumn: 'company',
There is no column with this id.