I'm making a fluid width website, and on one of my pages I have a fixed sidebar. Right now it works fine as I only have two links on it; The sidebar isn't very tall. The layout goes like this:
Header
Content with Sidebar
Footer
The sidebar is positioned fairly far down because of the header, and if it gets too tall it will overflow into the footer. I want it to start and being 'fixed' once it reaches certain heights on the screen
In other words:
Relative until scroll down
Fixed until reach footer
Relative once footer is reached
Oh, I just did this one: use jQuery to check the scroll position of the nav
View source at http://trans.worldvision.com.au/ChildSponsorship/ChildSearch.aspx to see how it works.
You wont be able to achieve this with pure CSS, unfortunately, it will require jQuery or some other JavaScript / library.
Sorry about the layout... The iPad hasnt got a tab key, apparently.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
$(window).scroll(function () {
if ($(".csnavHome").position().top < $(window).scrollTop()) {
$(".csnav").css("position", "fixed");
$(".csnav").css("z-index", "2");
} else {
$(".csnav").css("position", "relative");
$(".csnav").css("z-index", "0");
$(".csnav").css("top", "0");
}
});
Related
I'm in the process of printing an HTML form. After checking via the internet, I am unable to print all the input. Here's what I have now:
`
<script type="text/javascript">
function CopyElem(elem)
{
$('form input[type=text]').each(function() {
$(this).attr('value', $(this).val());
});
$('form input[type=date]').each(function() {
$(this).attr('value', $(this).val());
});
$('form input[type=checkbox]').each(function() {
$(this).attr('checked', $(this).prop("checked"));
});
}
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'myfrm');
mywindow.document.write('<html><head><title>Behandelformulier</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
`
only it does not print the content of the "input type="textarea". You won't see it in print preview either. What am I doing wrong?
I've been searching the internet for days, but can't find anything about it.
I've found the solution for my problem.
In the function CopyElem(elem) I placed
function CopyElem(elem) {
$('form textarea').each(function () {
$(this).text($(this).val());
});
}
I need to redirect page when one of the option is selected.
<select required name="subject" id="konu" class="form-control">
<option value="" disabled>Choose Subject</option>
<option value="Ask a question">Ask a question</option>
<option value="Leave a comment">Leave a comment</option>
<option value="Where to buy">Where to buy</option>
<option value="Product Complaint">Product Complaint</option>
<option value="Other">Other</option>
<option {{ request('subject') == 'Request SDS' ? 'selected' : '' }} value="Request SDS">Request SDS</option>
<option value="Distributor">Request Distributorship</option>
</select>
I once needed this too and found that your question has already been answered.
If you're fine with using inline JavaScript, check out this answer:
https://stackoverflow.com/a/7562129/10440010
If you prefer staying off of inline, check out this answer under the same question:
https://stackoverflow.com/a/7562201/10440010
I hope this helps!
Update:
An easy way of making it work for specific options, is to make the onChange event check whether the value of the clicked option equal to something. In the snippet below, I make it work for all links starting with HTTPS.
HTML:
<select id="redirectSelect">
<option value="NoLink" disabled>Please select</option>
<option value="NoLinkEither">Option 1</option>
<option value="https://www.google.com/">External Link</option>
</select>
JavaScript:
function redirect(goto) {
var conf = confirm("Are you sure you want to go elswhere?");
if (conf && goto != '') {
window.location = goto;
}
}
var selectEl = document.getElementById('redirectSelect');
selectEl.onchange = function() {
if (this.value.startsWith('https')) {
var goto = this.value;
redirect(goto);
}
};
Hopefully this helps you enough to solve your problem. If not, leave a comment and I am glad to help!
I have a code previously woked.Here is select
<select required name="subject" id="konu" class="form-control">
<option value="" disabled>Choose Subject</option>
<option value="Ask a question">Ask a question</option>
<option value="Leave a comment">Leave a comment</option>
<option value="Where to buy">Where to buy</option>
<option value="Product Complaint">Product Complaint</option>
<option value="Other">Other</option>
<option {{ request('subject') == 'Request SDS' ? 'selected' : '' }} value="Request SDS">Request SDS</option>
<option value="Distributor">Request Distributorship</option>
</select>
Here it is script.
$( document ).ready(function() {
$("#konu").change(function(){
var value = $("#konu").val();
if(value=="distributor"){
window.location = 'be-our-distributor';
}
})
});
For the second answer, the value used in your HTML differs from the value you're checking against in the JavaScript code.
In your HTML, it's Distributor and in your JavaScript code it's distributor. Mind the capital D.
the problem is on your condition. Your value is Distributor and u using distributor. Js is case sensetive so you not getting any redirection. the code should look like
$( document ).ready(function() {
$("#konu").change(function(){
var value = $("#konu").val();
if(value=="Distributor"){
window.location = 'be-our-distributor';
}
})
});
Having set the XframeOptionMode, the doPost still doesn't redirect:
var REDIRECT_URL = "https://stackoverflow.com";
function doGet() {
var template = HtmlService.createTemplateFromFile("CForm.html");
template.pubUrl = ScriptApp.getService().getUrl();
var html = template.evaluate();
html.setTitle('ABCD');
return HtmlService.createHtmlOutput(html).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function doPost(e){
SendHtmlMail(e);
return redirect().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function redirect() {
return HtmlService.createHtmlOutput(
"<script>window.top.location.href=\"" + REDIRECT_URL + "\";</script>"
);
}
The console error still remains
Refused to display 'https://script.google.com/macros/s/AKfycbyb3wh57wgW30KV8faQNqNXSDQ_zu8w3BR-_8kVwUbI/dev' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Relevant part of the HTML
<form class="container" id="main_form" method="post" action="<?= pubUrl ?>">
<div class="form-group">
<label>Business Name</label>
<input type="text" class="form-control" name="BusinessName" id="name" placeholder="Name of Upload" readonly>
</div>
<div class="form-group">
<label>Month and Year of Incorporation</label>
<input type="date" class="form-control" name="MonthandYearofIncorporation">
</div>
<input class="btn btn-md btn-success" type="submit" value="Apply for Carbon"/>
</form>
Though, manually pasting (hardcoding) the /exec url version of the script seems to alleviate the issue, I prefer not to.
I dropped the doPost and redirect function. Now my html now has script like:
<html>
...
<body>
... First page ...
... Second page ...
<form class="container d-none" id="main_form" method="post" action="<?pubUrl?>" onsubmit="submitter(this);">
<div class="form-group">
<label>Business Name</label>
<input type="text" class="form-control" name="BusinessName" id="name" placeholder="Name of Upload" readonly>
</div>
<div class="form-group">
<label>Month and Year of Incorporation</label>
<input type="date" class="form-control" name="MonthandYearofIncorporation" required>
</div>
... A very long form
<input class="btn btn-md btn-success" type="submit" value="Apply for Carbon"/>
</form>
...
</body>
<script>
//...
function submitter(data_process){
// Run server-side function when submitted.
google.script.run
.withSuccessHandler(function(){
//alert('Thank You!!! Your application has been received');
window.top.location.replace("https://stackoverflow.com");
})
.withFailureHandler(function(e){
alert("Unable to submit your application. Please contact us.");
})
.SendHtmlMail(data_process); // Server-side form processing
}
</script>
</html>
ScriptApp.getService().getUrl()
returns you an Url of type
https://script.google.com/macros/s/XXX/dev
instead of
https://script.google.com/macros/s/XXX/exec,
so the developper version instead of the published version.
The former is subjected to some restrictions:
This URL can only be accessed by users who have edit access to the
script. This instance of the app always runs the most recently saved
code — not necessarily a formal version — and is intended for quick
testing during development.
See also here.
If you change dev to exec this should solve your issue.
UPDATE:
Either ScriptApp.getService().getUrl() gives you the dev or exec URL depends on how you deploy the WebApp.
When you deploy as a new version you have the option to
"Test web app for your latest code":
this will give you the dev version.
If you instead run the WebApp by copy-pasting the
Current web app URL into your browser:
your doGet() function will automatically retrieve the correct exec URL with ScriptApp.getService().getUrl().
I have C# application that creates a new Pi Point using the code based on
PI-AF-SDK-Basic-Samples/CreatePIPointsExample.cs at master · osisoft/PI-AF-SDK-Basic-Samples · GitHub
The point seems to be created ok - here's a screen grab following a tag search in SMT:
My problem is, when my same C# application searches for the newly created Pi Point is doesn't find it.
The code for the search is as follows:
private static List<PIPoint> GetPiPoints(PIServer piServer)
{
var criteria = GetCriteria("61");
var foundPoints = PIPoint.FindPIPoints(piServer, criteria).ToList();
criteria = GetCriteria("63");
foundPoints.AddRange(PIPoint.FindPIPoints(piServer, criteria).ToList());
criteria = GetCriteria("64");
foundPoints.AddRange(PIPoint.FindPIPoints(piServer, criteria).ToList());
return foundPoints;
}
private static List<PIPointQuery> GetCriteria(string location)
{
List<PIPointQuery> criteria = new List<PIPointQuery>();
PIPointQuery whereClause1 = new PIPointQuery(PICommonPointAttributes.Location1, OSIsoft.AF.Search.AFSearchOperator.Equal, location);
PIPointQuery whereClause2 = new PIPointQuery(PICommonPointAttributes.PointSource, OSIsoft.AF.Search.AFSearchOperator.Equal, "o");
criteria.Add(whereClause1);
criteria.Add(whereClause2);
return criteria;
}
So, my understanding is that this should find all points that have a "location1" attribute value of 61, 63 or 61 AND a "pointSource" of "o" - I have tried uppercase and lower case "o"
From the screenshot, you can see that this is the case for the newly created "Kuba_99x" tag yet it is not found in the search, although thousands of other existing tags are.
Any ideas where I went wrong please?
The Pi code was actually fine. Problem was, my code was filtering the newly created record after the selection.
Location1 is stored as an Int32 on the PI Data Archive. The location parameter needs to be an int instead of string.
Further questions will be addressed at OSIsoft PI Square since you also have a post there.
I'm attempting to create a basic google chart.
X axis is a time, y axis is a value.
Data is formatted as so:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Time');
data.addColumn('number', 'Yesterday');
data.addColumn('number', 'Today');
data.addColumn('number', 'TwoDayAgo');
data.addRows([
[01.00, 37.8, 80.8, 41.8],
[02.00, 30.9, 69.5, 32.4],
[03.00, 25.4, 57, 25.7],
[04.00, 11.7, 18.8, 10.5],
[05.00, 11.9, 17.6, 10.4]
]);
var options = {
chart: {
title: 'Results',
subtitle: 'Comparison'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material"></div>
</body>
</html>
Note the decimal places in the data table.
If I remove the decimal places it will work om
However the chart does not show?