The following script asks a user for information, stores the information as variables, and then creates a file that inserts the variables into various places within the text. The created file is an html web page that can then be run on my web server. The example shows 4 sets of variables and works well. However I would like to ask a user for the total number of required sets and then perform a loop that keeps asking for the same info (i.e. video number, description, folder name) until the total number is reached. For each iteration, I would like to generate select sections of the html text. I'm a Python noob so any help/feedback is greatly appreciated. Thanks in advance!
# The next 12 variables prompt the use for the label, description and folder names for 4 videos
Video1_Num = raw_input('Enter the number label for Video 1: ')
Video1_Desc = raw_input('Enter the description of Video 1: ')
Video1_Fold = raw_input('Enter the name of the folder where video 1 is stored: ')
Video2_Num = raw_input('Enter the number label for Video 2: ')
Video2_Desc = raw_input('Enter the description of Video 2: ')
Video2_Fold = raw_input('Enter the name of the folder where video 2 is stored: ')
Video3_Num = raw_input('Enter the number label for Video 3: ')
Video3_Desc = raw_input('Enter the description of Video 3: ')
Video3_Fold = raw_input('Enter the name of the folder where video 3 is stored: ')
Video4_Num = raw_input('Enter the number label for Video 4: ')
Video4_Desc = raw_input('Enter the description of Video 4: ')
Video4_Fold = raw_input('Enter the name of the folder where video 4 is stored: ')
# The next line opens up a file with an html extension
f = open('index123.html','w')
# The following will be written into the file
html_page = """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide1").click(function(){
$("#select_opt1").slideToggle('fast');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide2").click(function(){
$("#select_opt2").slideToggle('fast');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide3").click(function(){
$("#select_opt3").slideToggle('fast');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("span.prj-slide4").click(function(){
$("#select_opt4").slideToggle('fast');
});
});
</script>
<title>Demo</title>
</head>
<body>
<div id="header"><img src="logo.png" width="390" height="60" border="0" /></div>
<div id="select_head">Select the video you wish to review:</div>
<div id="select_opt">
<p><span class="prj-slide1"><b>Video %s:</b> %s</span></p>
<div id="select_opt1" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
<p><span class="prj-slide2"><b>Video %s:</b> %s</span></p>
<div id="select_opt2" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
<p><span class="prj-slide3"><b>Video %s:</b> %s</span></p>
<div id="select_opt3" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
<p><span class="prj-slide4"><b>Video %s:</b> %s</span></p>
<div id="select_opt4" style="display: none;">
<video width="320" height="240" controls>
<source src="./%s/%s_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br></br>
</div>
</body>
</html>""" %(Video1_Num, Video1_Desc, Video1_Fold, Video1_Fold, Video2_Num, Video2_Desc, Video2_Fold, Video2_Fold, Video3_Num, Video3_Desc, Video3_Fold, Video3_Fold, Video4_Num, Video4_Desc, Video4_Fold, Video4_Fold)
#'html_page gets written into the file and is closed. I then manually copy the newly created file to my web server.
f.write(html_page)
f.close()
You can use list of dict.
video_list=[]
Suppose u get a three values, num_val, desc_str and fold_num as input
Then a make a dict of video as video={'num': num_val,'desc':'desc_str','fold_num':fold_num}
Now, you can keep pushing it in video_list as given below and can access them as mentioned below. Imp Note: while inputting data, there may be need of casting as per the datatypes like int or string.
video_list =[]
Video_count =4
for n in range(Video_count):
num_val= input('enter number...')
desc_str= input('enter desc...')
fold_num= input('enter fold...')
video={'num': num_val,'desc':'desc_str','fold_num':fold_num}
video_list.append(video)
you can access the element by index and element as below:
video_list[index]['num_val']
where index is any number between 0 and len(video_list)-1 (both inclusive).
num_val is the element of dict and it could be any one of num_val, desc_str and fold_num.
Related
We are alerting a message after close of popups. This was working fine with foundation 4 and now i am trying to upgrade to foundation 6 and it fails to trigger event followed by close of popup.
Foundation 4 (working prototype):
$(document).ready(function() {
$(document).foundation();
$('#reveal_trigger').on("click", function() {
$('#reveal_modal').foundation("reveal","open");
})
$('#close_trigger').on("click", function() {
$('#reveal_modal').foundation("reveal","close").one('closed', function ()
{
alert("closed");
});
});
})
<!doctype html>
<head>
<meta charset = "utf-8" />
<meta http-equiv = "x-ua-compatible" content = "ie=edge" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
<title>Reveal Basics</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/css/foundation.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/foundation.min.js"></script>
</head>
<body>
<h2>Reveal Basics Example</h2>
<!--<p><a data-reveal-id="reveal_modal">Click Me For A Modal</a></p>-->
<p><a id="reveal_trigger">Click Me For A Modal</a></p>
<div class="reveal-modal" id="reveal_modal" data-reveal>
<h2>Foundation 4</h2>
<p>Foundation is a family of responsive front-end frameworks that make
it easy to design beautiful responsive websites, apps and emails
that look amazing on any device!
<a id="close_trigger">Click to close</a>
</p>
<button type="button" class="close-reveal-modal" aria-label="Close reveal">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
</html>
Foundation 6 (Failing prototype):
$(document).ready(function() {
$(document).foundation();
$('#reveal_trigger').on("click", function() {
$('#reveal_modal').foundation("open");
});
$('#close_trigger').on("click", function() {
$('#reveal_modal').foundation("close").one('closed', function ()
{
alert('closed');
});
});
})
<!doctype html>
<head>
<meta charset = "utf-8" />
<meta http-equiv = "x-ua-compatible" content = "ie=edge" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
<title>Reveal Basics</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
</head>
<body>
<h2>Reveal Basics Example</h2>
<!--<p><a data-open="reveal_modal">Click Me For A Modal</a></p> -->
<p><a id="reveal_trigger">Click Me For A Modal</a></p>
<div class="reveal" id="reveal_modal" data-reveal data-animation-in="slide-in-down" data-animation-out="slide-out-up">
<h2>Foundation 6</h2>
<p>Foundation is a family of responsive front-end frameworks that make
it easy to design beautiful responsive websites, apps and emails
that look amazing on any device.
<a id="close_trigger">Click to close</a>
</p>
<button type="button" class="close-button" aria-label="Close reveal" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
</body>
</html>
Same code with foundation 6 fails to trigger event after close.
The events have changed. Upgrading from 4 to 6 are two major breaking versions.
It is now open.zf.reveal and closed.zf.reveal, see https://foundation.zurb.com/sites/docs/reveal.html#js-events
The method is .foundation('close'), see https://foundation.zurb.com/sites/docs/reveal.html#close
Generally speaking you should use Foundation 6.5 / latest. The docs are for this version, not 6.0. And many things have changed, including breaking changes in 6.x.
I want to use the "Right Content" Column in my Template. So i created in the backend some example content like this:
I wrote the source code of my template on my own. It looks like this:
page = PAGE
page.stylesheet = fileadmin/template_ffw/style/style.css
page.typeNum = 0
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/template_ffw/index.html
page.10.workOnSubpart = DOCUMENT_BODY
page.10.subparts {
CONTENT < styles.content.get
ASSIDE < styles.content.getRight
MENU = HMENU
MENU.1 = TMENU
MENU.1 {
NO = 1
NO.allWrap = <div class="level1"> | </div>
}
}
page.10.marks{
LOGO = IMAGE
LOGO.altText = Logo
LOGO.file = fileadmin/template_ffw/style/ffw_logo.png
ROOTLINE = HMENU
ROOTLINE.special=rootline
ROOTLINE.special.range= 0 | -1
ROOTLINE.1=TMENU
ROOTLINE.1.NO.allWrap= | / |*| | / |*| |
}
At the index.html file i have this source code:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="kopfzeile">
<div id="logo">###LOGO###</div>
<nav>
<!-- ###MENU### START-->
Navigationslink
<!-- ###MENU### END-->
</nav>
</div>
###SLIDER###
<div id="breadcrumb">###ROOTLINE###</div>
<div id="main">
<!-- ###CONTENT### START-->
<h1>Willkommen</h1>
<h2>Hier soll der Inhalt später stehen.</h2>
<p>An dieser Stelle soll später der Inhalt von TYPO3 eingefügt werden.</p>
<!-- ###CONTENT### END-->
<div id="asside">
<!-- ###ASSIDE### START-->
<h1>Example Heading</h1>
<!-- ###ASSIDE### END-->
</div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>
</html>
But on the frontend the content of the Right Column is not displayed. So i have probably a bug in my typoscript. The Frontend Page looks like this:
I know this is very much source code for a question, but i searched for my Mistake this long, that i'm not shure where it is. And better to much than to less informations. I hope you can help me.
As you can see in www/vendor/typo3/cms/typo3/sysext/css_styled_content/Configuration/TypoScript/setup.txt the file StylesContent.txt from folder "Helper" is not included automatically anymore.
So I guess you must include
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:css_styled_content/Configuration/TypoScript/Helper/StylesContent.txt"> where getLeft, getRight and getBorder is definded.
Alternatively you can just add this one line after
ASSIDE < styles.content.getRight
ASSIDE.select.where = {#colPos}=2
or as I know it from that templating time ASSIDE.select.where = colPos=2
Well, but as #Thomas already recommended you should anyways switch to FLUIDTEMPLATE but getting the column not directly depends on that. I also just want to make you know that FLUID is the right thing.
I am new to both Ionic and Cordova. I'm creating a basic app where I'll have some URLs of audio files that I want users to be able to play.
These URLs are fetching from web service. Please help me with this query. Thanks.
Edited after trying your answer:
following is the web service response. There is multiple event.Each event has two different audio that I want to play in one section.
{
"message":"success",
"title":"Panchkavani",
"error_msg":"",
"result":[
{"events_id":null,
"image":"",
"title":"test pachkavani",
"stanak":"https://ionic-audio.s3.amazonaws.com/Message%20in%20a%20bottle.mp3",
"mandir":"https://ionic-audio.s3.amazonaws.com/Roxane.mp3","date_added":"Saturday, 13-May-2017","date_time":"01:49 AM"}]}
here is a sample . dont forget to install cordova plugin add org.apache.cordova.media for more https://www.thepolyglotdeveloper.com/2014/11/playing-audio-android-ios-ionicframework-app/.this sample slso works only if you add media plugin
angular.module('ionicApp', ['ionic', 'ionic-audio'])
.controller('MyCtrl', function($scope) {
$scope.tracks = [
{
url: 'https://ionic-audio.s3.amazonaws.com/Message%20in%20a%20bottle.mp3',
artist: 'The Police',
title: 'Message in a bottle',
art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
},
{
url: 'https://ionic-audio.s3.amazonaws.com/Roxane.mp3',
artist: 'The Police',
title: 'Roxane',
art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
}
];
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/arielfaur/ionic-audio/master/dist/ion-audio.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Audio tracks with embedded bar</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<ion-audio-track ng-repeat="track in tracks" track="track">
<div class="card">
<div class="item item-thumbnail-left">
<img src="{{track.art}}">
<h2>{{track.title}}</h2>
<p>{{track.artist}}</p>
<ion-audio-controls>
<a class="button button-icon icon" ion-audio-play></a>
<ion-spinner icon="ios" style="position: relative; top: 8px; left: 4px"></ion-spinner>
</ion-audio-controls>
</div>
<div class="item item-divider">
<ion-audio-progress-bar display-time></ion-audio-progress-bar>
</div>
</div>
</ion-audio-track>
</div>
</ion-content>
</body>
</html>
I want to create a list which dinamically grows after an event (take a shoot) I mean adding each picture on real time to the list, this is my method...
//Invoke the camera capture UI for snapping a photo
function imageCapture() {
...
//Creates the array, datalist and the namespace for making this data public
if (dataArray == null) { dataArray = new Array(); }
dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl };
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("DataExample", publicMembers);
}
And this is the HTML page which loads the content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>eCamera</title>
<!-- Referencias de WinJS -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Referencias de eCamera2 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body >
<div id="content">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div style="width: 150px; height: 100px;">
<!-- Displays the "picture" field. -->
<img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "id" field. -->
<h6 data-win-bind="innerText: id"></h6>
</div>
</div>
</div>
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
itemsDraggable: true,
itemsReorderable: true }"></div>
</div>
</body>
</html>
If I load all the content in a fixed dataArray at first it works perfect, but dinamically adding elements and setting it all each time I take a picture so far doesn't work, how to make it work???
thanks in advance for the support
The app should not create new list each time. Use the WinJS.Binding.List.push method to append or splice can be used to insert. Since the list is observable, UI will autoupdate on changes (delete/add) to the list.
This question already has answers here:
Can I use multiple versions of jQuery on the same page?
(8 answers)
Closed 9 years ago.
I was wondering if someone could tell me if it is possible to run multiple versions of jquery in one html file? i.e.
I have 6 divs each dive contains a different jquery plugin. The first plugin runs on the latest jquery. The second powered by an older version and so forth.
I tried to implement all of these into one html, but as soon as I implement script 2 underneath, script 1, then #1 doesnt work anymore, but #2 does. As soon as I implement #3 underneath #2, then #3 works and everything above breaks.
Is there a specific way to do this? I have tried applying the noConflict code, but then the script which I assign it to, stops working. Unless I did it wrong.
I have though about using if statements to say, if var=plugin 1 gets clicked, the cancel all other jquery and only play jquery for that particular plugin. And so forth for all the other plugins. But I am not sure if this will work.
I have also thought about using a seperate $(document).ready(){}; for each plugin, but again not sure if this will work.
Is there anyone who knows how I can solve this problem? I have been battling this beast for the past 3 days & nights adn will for ever be in your debt.
ps:I didn't supply any code cause it's just so much, and a little all over the place. I can if you would like me to.
Thanks
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="jquery191.js"></script>
<!-- easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- liteAccordion js -->
<script src="js/liteaccordion.jquery.js"></script>
<script src="js/datepicker.js"></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<!-- liteAccordion css -->
<link href="css/liteaccordion.css" rel="stylesheet" />
<!-- liteAccordion js -->
<script type="text/javascript">
$(document).ready(function() {
$('#div1').liteAccordion({
onTriggerSlide : function() {
this.find('figcaption').fadeOut();
},
onSlideAnimComplete : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'stitch',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
<!-- date picker js -->
$('#trip input#leavedate, #trip input#returndate').datepicker({ dateFormat: 'D, M d, yy', showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true }); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar
});
</script>
// datepicker
<link rel="stylesheet" href="ui.datepicker.css"/>
<style type="text/css">
body { font-family: verdana, arial, sans-serif; color: white; font-size: 0.8em; }
#trip{ background-color: black; width: 500px;}
#trip fieldset { border-width: 1px; width: 470px; }
#trip .fields { padding: 25px; margin-bottom: 20px; }
#trip div { clear: both; }
#trip label { float: left; width: 165px; }
#trip input { float: left; width: 200px; }
#trip .ui-datepicker-trigger { float: left; width: 16px; }
</style>
// datepicker
<script src="jq.js"></script>
<script type="text/javascript">
var jQuery_1_2_6 = $.noConflict(true);
</script>
<script language="JavaScript" src="jq.date.js"></script>
<script language="JavaScript">
</script>
// Style switch
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>
<script src="/mint/?js" type="text/javascript"></script>
</head>
<body>
<div id="div1">
<ol>
<li>
<h2><span>Slide One</span></h2>
<div><p><img src="img-one/1.jpg">HELLO HELLOHELLOHELLOHELLO</p></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<br><br>
<!-- Date Picker -->
<div id="div2">
<form id="trip" action="#" >
<fieldset>
<legend>Trip Length</legend>
<div class="fields">
<div><label for="leavedate">Departure Date:</label> <input type="text" id="leavedate" name="leavedate"/></div>
<div><label for="returndate">Return Date:</label> <input type="text" id="returndate" name="returndate"/></div>
</div>
</fieldset>
</form>
</div>
<br><br><br><br>
<!-- Style Switcher -->
<div>
<h1>Stylesheet switcher using jQuery</h1>
<p>This is a simple example of my stylesheet switcher which is very simple thanks to the power of jQuery.</p>
<p><strong>Update 25/08/2006:</strong> Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]</p>
<p><strong>Update 20/08/2006:</strong> Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]</p>
<p>
Currently active stylesheet:
<span id="st1">styles1</span>
<span id="st2">styles2</span>
<span id="st3">styles3</span>
</p>
<p>Choose a different stylesheet:</p>
<ul>
<li>styles1</li>
<li>styles2</li>
<li>styles3</li>
</ul>
<p>Please view source to see how it works or see the full article about this script for more information. You can download the relevant Javascript here: styleswitch.js, jquery.js</p>
</div>
<!-- FOUR -->
<div>
</div>
</body>
</html>
It should be pretty simple:
<script type='text/javascript' src='js/jquery.1.0.0.js'></script>
<script type='text/jvascript'>
var $jq1 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.2.0.0.js'></script>
<script type='text/jvascript'>
var $jq2 = jQuery.noConflict();
</script>
<script type='text/javascript' src='js/jquery.3.0.0.js'></script>
<script type='text/jvascript'>
$(document).ready(function() {
console.log('constructed with jQuery 3.0.0');
});
</script>
You however must make sure the right script is in the right scope, usualy you do something like:
$('#id').plugin();
this must be, for example:
$jq1('#id').plugin();
Here is an example of changing the jQuery namespace. You can have the older version run on a different namespace to avoid conflict and confusion.