I've got a strange problem where the middle section of some of the pages aren't stretching to 100% page height, wihch results in there not being the full left hand border.
Here for example (please click on the 'Brentwood' link and go to 'Login' on the top menu) https://www.inside-guides.co.uk/advertiseradmin/default.asp?.
Whereas the 'Contact' page is fine (again via the 'Brentwood' site): https://www.inside-guides.co.uk/feedback.asp.
They both use the same template using javascript and CSS, but when I look in the code inspector it gives full page height values for the #left-nav and #middle on the 'Contact'page which works.
The javascript is to make each column the same height = i.e. to the top of the footer, but it doesn't work on the Login page.
I really can't understand why so any help perhaps using a code inspector would be very much appreciated.
JS code placed in the head.css on each page:
<script type="text/javascript">
matchColumns=function(){
var divs,contDivs,maxHeight,divHeight,d;
divs=document.getElementsByTagName('div');
contDivs=[];
maxHeight=0;
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute "equal"
if(/\bequal\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
}
}
</script>
Login page code where the 100% JS page height isn't working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--#include virtual="/System/Startup_FranchiseClient.asp"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<%
EnsurePageIsHTTPS
If IsFranchiseClientLoggedIn = True then
Response.Redirect GetAdvertiserAdminHomePage
End if
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inside-Guides.co.uk - Advertiser Login</title>
<!--#include virtual="/Assets/Templates/Public/Franchise/HeadCSS.asp"-->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.min.js"></script>
</head>
<body class="login" onload="javascript:document.getElementById('strUsername').focus();">
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateStart_https.asp"-->
<div class="content clearfix">
<div id="form" class="form">
<h1>Advertiser Login</h1>
<p>Welcome to the advertiser area. Please enter your login details below:</p>
<span class="ErrorText"><% = strSecurity_LoginError %></span>
<form id="form" name="LoginForm" method="post" action="Default.asp">
<input type="hidden" name="ValidateLogin" value="1" />
<label>Email
<span class="small">Email used to register</span>
</label>
<input type="text" id="strUsername" name="strUsername" value="" />
<br />
<label>Password
<span class="small">Password used to register</span>
</label>
<input type="password" name="strPassword" value="" />
<button type="submit">Log-in</button>
<div class="spacer"></div>
</form>
</div>
<p> * If you have forgotten your password, please click here</p>
</div>
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateEnd.asp"-->
</body>
</html>
<!--#include virtual="/System/Shutdown.asp"-->
CSS:
#middle {padding-top:7px;float:left;width:60%;border-right:1px solid #edeaec;border-left:1px solid #ede9e8;}
#middle.dir {width:78.5%;border-right:0;}
Many thanks.
JS code placed in the head.css on each page
Not sure if this is a typo or not, but if it isn't you cannot place js in a css file. Also no css file seems to be linked in the head of you html document.
However on further inspection it seems you are referring to the headCSS.asp template include in which case the above point isn't of concern.
For height 100% or any percentage based heights the parent must have a defined height, making it essentially not very useful because you need to know height values anyway. So if you can set it to a fixed height that would be my suggestion.
Answer
However I suggest a <table> to do what you're looking with a single row and multiple columns, using one will avoid a lot of hacky css and or js.
Related
My team is using Recurly.js to build a payments page into our website. We've been following the docs from https://docs.recurly.com/js. According to the docs,
Build a form however you like. Use the data-recurly attribute to identify input field targets to Recurly.js. To identify where Recurly.js will inject card data fields, we recommend using simple div elements.
The problem is that the div elements don't actually show in the form. Here's a short reproducible example based off of the docs:
<!doctype html>
<html lang="en">
<head>
<!-- Recurly.js script and API key config -->
<script src="https://js.recurly.com/v4/recurly.js"></script>
<script>recurly.configure('... API Key here...');</script>
</head>
<body>
<form>
<input type="text" data-recurly="first_name">
<input type="text" data-recurly="last_name">
<div data-recurly="number"></div>
<div data-recurly="month"></div>
<div data-recurly="year"></div>
<div data-recurly="cvv"></div>
<input type="hidden" name="recurly-token" data-recurly="token">
<button>submit</button>
</form>
</body>
</html>
This is what it looks like:
As you can see, the two inputs show fine, but none of the divs show correctly.
What are we doing wrong and how do we build a Recurly.js form with div elements?
The javascript code that calls configure cannot be in the head tag and should be located in the body tag
<script>recurly.configure('... API Key here...');</script>
This example should show you how to set it up properly. Notice where they put the javascript in the body: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html
<!doctype html>
<html lang="en">
<head>
<!-- Recurly.js script and API key config -->
<script src="https://js.recurly.com/v4/recurly.js"></script>
</head>
<body>
<form>
<input type="text" data-recurly="first_name">
<input type="text" data-recurly="last_name">
<div data-recurly="number"></div>
<div data-recurly="month"></div>
<div data-recurly="year"></div>
<div data-recurly="cvv"></div>
<input type="hidden" name="recurly-token" data-recurly="token">
<button>submit</button>
</form>
<script>recurly.configure('... API Key here...');</script>
</body>
</html>
The browser loads javascript in the head, which loads up recurly, and then in the body you can use recurly.
After opening a webpage with exatly one FCKeditor window in it, I get the instance:
i = FCKeditorAPI.GetInstance( "txtText" )
This works. I am also allowed:
i.GetHTML() #=> <div class=".... etc., correct output
But when trying
i.SetHTML( "<h1>Quux</h1>" )
I get:
[Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_... etc. ]
I have an uncertain feeling, that in past, I was able to change the FCKeditor window contents with SetHTML(), but I'm not completely sure. What to do?
In response to the comment, my HTML is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta http-equiv="Content-language" content="cs" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="private" />
<title>Foo | Bar | WebMaker | FOO.CZ</title>
<style type="text/css" media="screen">/*<![CDATA[*/#import url(http://webmaker.ooo.cz/_design/style.css);/*]]>*/</style>
<script type="text/javascript" src="http://webmaker.ooo.cz/common.js"></script>
</head>
<body>
<div id="header">
<span><a href="http://webmaker.ooo.cz/logout.aspx">Logout</strong></span>
</div>
<div id="main">
<div id="content">
<div id="tabmenu">
</div><!-- /tabmenu -->
<dif id="tabcontent">
<form name="_ctl2" method="post" action="detail.aspx?article=14599" id="_ctl2">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTEzz0iZG9.....reallllly..looong...strin......6qKb5or30J5DCLKTCaFR/xc8TPHb9A=" />
<script type="text/javascript">
<!--
var theForm = document.forms['_ctl2'];
if (!theForm) {
theForm = document._ctl2;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWEQ...vsyXR4=" />
<div class="data">
<fieldset>
<legend>Text článku</legend>
<div><input type="hidden" id="txtText" name="txtText" value="FCK editor window contents here." /><input type="hidden" id="txtText___Config" value="HtmlEncodeOutput=true" /><iframe id="txtText___Frame" src="http://webmaker.ooo.cz/_wysiwyg/editor/fckeditor.html?InstanceName=txtText&Toolbar=WebMaker" width="100%" height="400px" frameborder="no" scrolling="no"></iframe></div>
<input type="button" onclick="GetWordsCount('txtText___Frame')" value="Zobrazit počet slov v článku" />
</fieldset>
<!-- There are some more fieldsets here and a submit button. -->
</div><!-- .data -->
</form>
</div><!-- tabcontent -->
</div><!-- /main -->
</body>
</html>
FCKeditor's SetHTML method relies on a document.write call to replace the content in the edit control. Unfortunately document.write does not work from within the Web Console on Firefox.
This is a known bug: Using document.write inside Scratchpad window brings up 'Security error undefined' in Web Console
I know that error says Scratchpad and the error message is different but it's the same problem. Note this comment from David Chan (Mozilla Security Researcher):
This appears to be another bug from running WebConsole / ScratchPad in a sandbox.
The reason you probably remember being able to do this in the past is because it works in FireBug, and it works in Chrome. You've probably used one of those environments in the past when working with a FCKeditor control.
Pretty sure this is some cross domain issue where you probably think you're running on the same domain but actually are not. I would have to inspect the actual page this runs on to really be able to help you out, but try loading all the relevant fckeditor files using relative file paths (optionally from the root) and never include the actual domain, that will prevent a lot of trouble in general (what for example otherwise may happen is you being on example.com but loading files from www.example.com or similar problems).
The odd thing is that you shouldn't be able to read files then either, but the triggered error is about unpriviliged actions which are nearly always cross domain issues (or some very tricky cross script context issues, but those are mostly only relevant if you develop addons).
If your javascript is coming from "http://webmaker.ooo.cz/...", then it's possible you're getting a domain issue if you're browsing the website under a different subdomain than the javascript is being pulled from. I'm not sure of a fix, and I'm not sure that's necessarily what's wrong. Just a possibility. I'd suggest trying to put the javascript you're using in the page with the html just to make sure the code itself actually works.
I have a simple jquery mobile page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
<!-- ##################### Raw Part ##################### -->
<div data-role="page">
<div data-role="header">
<h1> Hello World </h1>
</div>
</div>
</div>
</body>
</html>
when I execute that page it renders fine with a black header and title.
The reason why that page loads correctly is because jquery-mobile placed new attributes where needed in fact the innerHTML of MyContainer after the page loads is:
<!-- ##################### Parsed Part ##################### -->
<div data-role="page" data-url="/jqueryMobile/TC_Page/main2.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
Hello World
</h1>
</div>
</div>
In other words the Raw Part turn into the Parsed Part .
I will like to know what jquery.mobile function made the conversion from the Raw Part to the Parsed Part!
The functions $.mobile.changePage(), $.mobile.loadPage() enables me to do that For example I could do:
// place response from SomeUrl inside the div MyContainer and convert it from raw to parsed!
$.mobile.loadPage('SomeUrl', { pageContainer: $('#MyContainer') });
// later then get the child child (note second child) of MyContainer and make that the child of MyContainer
The problem now is:
All those functions: loadPage, ChangePage etc make an ajax call. What if I already have the html that I want to inject ( I have it in webBrowser local storage or in a Cookie)! In other words how can I make this work:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
</div>
<script>
function SomeFunction(){
var someHTML = localStorate.html1; // html1 = raw part = <div data-role="page"><div data-role="header"><h1> Hello World </h1></div></div>
$("#MyContainer").html(someHTML);
// now here I am stuck!!!!!!!!!!!!!!!
// how can I make the content of MyContainer go from the raw part to the Parsed Part!
// I am looking for something like:
$JqueryMobile.ParseHTML($("#MyContainer"));
}
</script>
</body>
</html>
Solution
jQuery Mobile provides numerous functions for widget restyling but only one of them will restyle whole page.
$('#index').trigger('pagecreate');
Where #index should be an id of your page DIV.
There is also on other function that can be used here, but unlike trigger('pagecreat'); this function will style only DIV wit data-role="content" attribute. To test this, jsFiddle example trigger('pagecreate'); should be replaced with trigger('create');
$('#index').trigger('create');
If possible SCRIPT tag should not be used inside a BODY tag, while it will work it can cause additional problems. If you want to find more about this topic and how jQuery Mobile handles dynamically added content take a look at this ARTICLE which is a part of my personal blog.
Example
Working example: jsFiddle
This part of code should interest you:
$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
$('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
$('#index').trigger('pagecreate');
This code is used to dynamically append page footer and a radio button to page content.
I have the folowing html. It passes the w3 validator, but my javascript alert does not work. Can anyone see any problems or have any suggestions on how to get it to work?
<!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=utf-8" />
<title>Company Name™</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
BODY {
background-image: url(images/bg4.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment: fixed;
}
</style>
<script type="text/javascript">
alert("HELLO");
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<img src="images/fcflogo.png" width="295" height="100" align="left" alt="logo"/>
</div>
<div class="header1">
100% Financial Protection
<hr/>
</div>
<div class="nav">Home| Flights| Hotels| Villas | CarHire| Attractions| Contact</div>
</div>
<div class="ver1">
<h2>Can't find what your looking for?</h2>
</div>
<div class="enq1">
<h2>Enquiry Form</h2>
</div>
<div class="hor1">
<h2>Our Service</h2>
<a>Company Name are one of the leading independent travel companies specialising in Florida Holidays. We have a wide range of major Charter and Scheduled airlines to choose from as well as over 10,000 Hotel and Villa deals. Our aim is to provide you the customer with a truly fantastic vacation in Florida from start to finish at affordable prices. We are not committed to any airline or Tour operator so are totally committed to finding you the best deal.</a>
</div>
<div class="hor1"><a>FLIGHTS</a></div>
<div class="ver2"><a>HOTELS</a></div>
<div class="ver2"><a>VILLAS</a></div>
<div class="hor1"><a>CAR HIRE</a></div>
<div class="hor1"><a>ATTRACTIONS</a></div>
</div>
<hr/>
<div id="footer"><a>FOOTER</a></div>
</body>
</html>
EDIT - To all below, I do have javascript turned on, I am using debian with firefox, noScript is disabled, but the alert does not appear, even if I move it to the body.
First, take out the trade mark. That extended characters is probably killing the closing </title> tag. I"m pretty sure that's your issue.
Failing that, remove every element above the <script> tag and see if it executes. If it does, restore each element one-by-one. Something above the script tag is preventing it from being parsed.
For me, your code works, the alert appears.
Have you enabled javascript in your browser?
Works fine on FF 3 and IE 8 for me.
Have you disabled JavaScript on your browser by any chance?
The script is never being invoked and that's why it is not alerting anything. Either move that script tag from within head to within body tag of the document. Or enclose it within a function and invoke it from onload attribute of body tag.
You might want to try clearing your cache to make sure that your browser is loading the file with the alert in it instead of an older, cached copy. If that doesn't work, I'd suggest trying it with Firefox/Firebug and checking for errors in the javascript console. If you're loading the file with AJAX, you'll need to move the script tag to the body of the document. Most of the time AJAX libraries will ignore the HEAD element and only include elements within the BODY tag.
I am trying to learn javascript/jquery, using firebug to debug and have built a page, which I have reduced to a minimal below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="JavaScript" "text/javascript">
function geoAddress() {
alert("start");
var postcode = $("#PostCode").val();
}
</script>
<title>Postcode</title>
</head>
<body>
<div class="page">
<h2>Create</h2>
<form action="/Venues/Create" method="post">
<fieldset>
<p>
<label for="PostCode">Postcode:</label>
<input id="PostCode" name="PostCode" type="text" value="" />
<input type="button" onclick="geoAddress();"/>
</p>
</fieldset>
</form>
</div>
</body>
</html>
I believe that this worked previously, but now although it does work (i.e. I press the button and get an alert) in firebug, on first loading I see a javascript error.
I have jquery-1.3.2.js loaded in the same directory as my file.
I seem to be struggling with firebug so would appreciate pointing in the direction of tutorials for the current version for javascript debugging. I can't even see a way to view the whole error message.
I would appreciate any help with what this error is and also pointers in the right direction for using firebug.
1st step - Can you make sure jQuery is being requested successfully. In firebug click the Net tab and it will show you all requests that are made and the failed ones will appear in red.