I have set up my site with an off canvas menu when it goes mobile
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Mobile Application</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/custom-mobile-portrait.css" />
<link rel="stylesheet" href="css/custom-mobile-landscape.css" />
<link rel="stylesheet" href="css/custom-xlarge.css" />
<link rel="stylesheet" href="css/custom-ipad.css" />
<link rel="stylesheet" href="css/custom-ipad-portrait.css" />
<link rel="stylesheet" href="css/font-sizes.css" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.js"></script>
<a name="head"></a>
</head>
<body>
<div class="off-canvas-wrap mobile-menu" data-offcanvas>
<div class="inner-wrap">
<nav class=" tab-bar hidden-for-large-up" data-topbar ">
<section class="left-small ">
<a class="left-off-canvas-toggle menu-icon " href="# "><span></span></a>
</section>
<section class="middle tab-bar-section ">
</section>
</nav>
<aside class="left-off-canvas-menu ">
<ul class="off-canvas-list ">
<li><label>Dehumaniser App</label></li>
<li><STRONG>TOP</STRONG></li>
<li><STRONG>APP OVERVIEW</STRONG></li>
<li><STRONG>HOW DOES IT WORK</STRONG></li>
<li><a href="#features " ><STRONG>FEATURES</STRONG></a></li>
<li><STRONG>GALLERY</STRONG></li>
</ul>
</aside>
<!-- <aside class="right-off-canvas-menu ">
<ul class="off-canvas-list ">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside> -->
<section class="main-section ">
i put my site content in here and then after my code finishes:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="js/myscript.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/myscript.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.single-item').slick();
});
</script>
<script type="text/javascript">
jQuery(document).foundation()
</script>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script>
jQuery(document).foundation();
jQuery('a.left-off-canvas-toggle').on('click', function() {
});
</script>
<div id="fixedbutton">
<a href="#head"><img src="img/upbutton.png">
</a>
</div>
</body>
</html>
I get the proper off canvas behavior (I get the three lines box . when I click the box it opens, and the off-canvas menu appears) but when I click a menu link even though the page scrolls smoothly down the off-canvas menu doesn't close. How can I fix this?
Try to add these lines to your script
$(document).foundation({
offcanvas : {
close_on_click : true
}
});
Related
I am starting back on Nodejs and facing some starting problems.
I am trying to get a static page up, with java script and images getting loaded from different folders. Using basic Nodejs, ejs. The root folder with the index.js gets loaded and displays the text that I have put there. But the images and the java script do not get loaded.
Looks like I am missing something very basic. Here is my index.js file:
Inside the base folder which has this index.js, there is a views folder which in turn contains a pages folder.
var cool = require('cool-ascii-faces');
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
// views is directory for all template files
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.get('/', function(request, response) {
response.render('pages/ind');
});
app.get('/cool', function(request, response){
response.send(cool());
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});
ind.ejs
<!DOCTYPE html>
<!DOCTYPE html>
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Title -->
<title>WOTR - Coming Soon</title>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" >
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="css/owl.theme.css" />
<link rel="stylesheet" type="text/css" href="css/vegas.min.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/sidebar.css" />
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,400,300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700,900' rel='stylesheet' type='text/css'>
<!-- JS -->
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/snap.svg-min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://webnextbd.net/demo/js/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 11]>
<link rel="stylesheet" type="text/css" href="http://webnextbd.net/demo/css/ie.css">
<![endif]-->
</head>
<body class="image-background">
<!-- Preloader -->
<div id="preloader">
<div id="loading-animation"> </div>
</div>
<!-- /Preloader -->
<!-- Overlay -->
<div id="section-home" class="home-section-wrap center">
<div class="section-overlay"></div>
</div>
<!-- /Overlay -->
<!-- container -->
<div class="containers"><!-- menu -->
<!--
<nav id="menu" class="menu">
<button class="menu__handle"><span>Menu</span></button>
<div class="menu__inner">
<ul>
<li><i class="fa fa-fw fa-home"></i><span>Home</span></li>
-->
<!--
<li><i class="fa fa-fw fa-info"></i><span>About</span></li>
<li><i class="fa fa-fw fa-users"></i><span>Team</span></li>
<li><i class="fa fa-fw fa-gear"></i><span>Services</span></li>
<li><i class="fa fa-fw fa-camera"></i><span>Portfolio</span></li>
<li><i class="fa fa-fw fa-envelope"></i><span>Contact</span></li>
</ul>
-->
</div>
<!--
<div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">
<svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
<path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>
</svg>
</div>
-->
</nav><!-- /menu -->
<!-- main -->
<div class="main">
<!-- header -->
<header class="header-site">
<div class="logo-site animated bounceInDown" data-animation-delay="700">
<img class="img-responsive" src="wotrlogo.png" data-at2x="wotrlogo.png" alt="Logo" />
</div>
</header>
<!-- /header -->
<!-- section -->
<section class="section fullscreen site-main">
<div class="container-section">
<div class="container-table">
<div class="content-table">
<!-- bt-carousel -->
<div class="bt-carousel">
<!-- home section -->
<div class="item-slide show">
<!-- container -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<!-- content slide -->
<div class="content-slide">
<!-- Clock Countdown -->
<div id="clock-countdown" class="animated bounceInDown" data-animation-delay="700"></div>
<h3 class="color-white top-margin animated bounceInDown" data-animation-delay="700" >Our website is under construction. Check us out in a feww days.</h3>
<!-- Subscribe Form -->
<div class="form animated bounceInUp" data-animation-delay="700">
<!-- container form -->
<div class="container-form">
<!--
section page
<div class="section-page" id="signup">
<form class="subscription-form mailchimp" method="post" id="mc-form">
<input type="email" id="email" class="border-radius-22 bottom-margin" name="email" placeholder="You Email Address" />
<button type="submit" id="subscribebtn" class="border-button no-bottom-margin">Subscribe</button>
</form>
<p class="message-error"></p>
<p class="message-success"></p>
-->
</div><!-- /section page -->
</div><!-- /container form -->
</div><!-- /Subscribe Form -->
<!-- socials icons -->
<!--
<nav class="socials-icons animated bounceInUp" data-animation-delay="700">
<ul>
<li><i class="ion-social-facebook"></i></li>
<li><i class="ion-social-twitter"></i></li>
<li><i class="ion-social-googleplus"></i></li>
<li><i class="ion-social-linkedin"></i></li>
<li><i class="ion-social-pinterest"></i></li>
<li><i class="ion-social-dribbble-outline"></i></li>
</ul>
</nav> /socials icons
-->
<!-- copyright -->
<footer class="copy-right animated bounceInUp" data-animation-delay="700">
<div class="copyright">
© 2017 World Now - All Rights Reserved
</div>
</footer><!-- /copyright -->
</div><!-- /content slide -->
</div>
</div><!-- /row -->
</div><!-- /container -->
</div>
<!-- /home section -->
</div><!-- /bt-carousel -->
</div>
</div>
</div>
</section><!-- /section -->
</div><!-- /main -->
</div><!-- /container -->
<!-- JS -->
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/retina.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/jquery.parallaxify.min.js"></script>
<script type="text/javascript" src="js/jquery.particleground.min.js"></script>
<script type="text/javascript" src="js/vegas.min.js"></script>
<script type="text/javascript" src="js/trianglify.min.js"></script>
<script type="text/javascript" src="js/jquery.mb.YTPlayer.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.appear.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Any idea what I am missing?
Thanks,
Have you tried serving your views folder as well as the public folder?
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/views'));
I am using Flex-ratio property, but this property is not working. I am sharing my code.
According to this link, this property is working fine on Polymer 1.0.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-car/paper-card.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style is="custom-style" include="iron-flex"></style>
</head>
<body>
<div class="horizontal layout">
<div class="flex-2"><p>flex three</p></div>
<div class="flex-1"><p>flex</p></div>
<div class="flex-2"><p>flex two</p></div>
</div>
</body>
</html>
I made this mistake myself.... need to import iron-flex-factors in <style include="iron-flex iron-flex-factors iron-flex-alignment">
I am trying to centre a button inside a region by using jQuery easyui layout feature:
<!DOCTYPE html>
<html style="height: 90%;">
<head>
<meta charset="UTF-8">
<title>The Analytic Platform - Home Page</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style>
.middle {
height:30%;
}
.topandbelow {
height:40%;
}
</style>
</head>
<body style="height: 90%;">
<h2>The Analytic Platform</h2>
<p>Easy analytics for everyone!</p>
<div id="p" class="easyui-panel" title="Step 1: Load data for analysis" style="width:100%;height:100%;padding:10px;">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'west',split:false,border:true" style="width:40%;" title="Get data from Excel file">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'centre',split:false,border:true" style="width:100%;">
<a href="ExcelUpload.html" class="easyui-linkbutton" >Upload Excel file</a>
</div>
</div>
</div>
<div data-options="region:'east',split:false,border:true" style="width:40%;height:100%" title="Get data from database">
<div class="easyui-layout" data-options="fit:false" style="width:100%;height:100%">
<div data-options="region:'north',split:false,border:true" class="topandbelow"></div>
<div data-options="region:'centre',split:false,border:true" class="middle">
Define Database Connection
</div>
<div data-options="region:'south',split:false,border:true" class="topandbelow"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The "east" region is not displaying its nested "centre" region with the "north" region overlaying it.
What could be wrong in here?
I'm migrating a beginning project from PrimeFaces 2.2.1 to 3.3.1, following the steps of MigrationGuide and using the 3.3 version's Users Guide.
I want a p:dialog in the top of the pages, containing the navigation.
This dialog must be shown when I click in a link, in the top of the pages.
Error description:
When I click on "I Want" link, nothing happens on page (the p:dialog doesn't shows up), and I get
this error on Firebug's console:
popupModalMenu is not defined
http://localhost:8080/{appname}/view/xhtml/principal.jsf
Line 1
The p:dialog (id="modalMenu") is loaded on page.
Here goes the structure:
Main page (/view/xhtml/principal.xhtml):
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="base/master.xhtml">
<ui:define name="conteudo">
Title of Main Page
</ui:define>
</ui:composition>
</html>
Master (/view/xhtml/base/master.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<ui:include src="head.xhtml" /> <!-- CONTAINS CSS, JAVASCRIPT STUFF -->
<h:body>
<f:view contentType="text/html" >
<div id="wrapper">
<!-- TOP BEGIN -->
<div id="header">
<div class="topo" id="topo">
<div id="menuTopo" class="menu left">
<a id="linkMenu" class="left" href="javascript:;" onclick="popupModalMenu.show();">
I want
<div class="iconeDoMenu"></div>
</a>
</div>
</div>
</div>
<!-- END TOP -->
<!-- CONTENT BEGIN -->
<div id="content">
<div id="conteudo">
<!-- SYSTEM MENU BEGIN -->
<ui:include src="../menu.xhtml" />
<!-- END SYSTEM MENU -->
</div>
</div>
<!-- END CONTENT -->
</div>
</f:view>
</h:body>
</html>
Head (/view/xhtml/base/head.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<h:head>
<title>Title</title>
<meta http-equiv="keywords" content=" " />
<meta http-equiv="description" content=" " />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/base/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/base/general.css" />
<link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
<link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
<![endif]-->
<script type="text/javascript">
jQuery.noConflict();
</script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
<script type="text/javascript" src="../js/ourjs.js"></script>
<!-- Internal screen's Css -->
<link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>
<!-- menu's scripts and css -->
<link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.metadata.js"></script>
<script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="../js/mbExtruder.js"></script>
<script type="text/javascript">
$(function(){
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script><!-- menu's scripts and css end -->
<!-- Scripts inside menu -->
<h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
<h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
});
</script><!-- end Scripts inside menu -->
<script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
<link rel="stylesheet" href="../css/base/verticaltabs.css" />
<script type="text/javascript" src="../js/provider.js"></script>
<script type="text/javascript">
$(document).ready(function(){fornecedor.verticalTabs();});
</script>
<!-- Internal screen's Css -->
<link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
<!-- END PROVIDER -->
</h:head>
</html>
Menu (/view/xhtml/menu.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<p:dialog id="modalMenu" widgetVar="popupModalMenu"
draggable="false" resizable="false" modal="true"
width="940" height="580"
showEffect="fade" hideEffect ="fade"
position="null" closable="false" dynamic="false"
minimizable="false" maximizable="false">
<h:form id="formMenu">
<div id="nav">
<div id="menu">
<p:commandButton id="btnCloseModalMenu" styleClass="btcloseMenu"
title="Click here to close" onclick="popupModalMenu.hide();">
</p:commandButton>
<!-- Menu's content goes this way: -->
<div id="divN">
<!-- Group of content -->
<h3><h:outputLabel>Group N</h:outputLabel></h3>
<div class="linkN">
<!-- Links to pages -->
<ul>
<li><a id="menuN" href="urlN">Title N</a></li>
</ul>
</div>
</div>
</div>
</div>
</h:form>
</p:dialog>
</html>
I just removed some code from Head. Seems that it is a conflict with JQuery's version. Thanks to a coworker.
So the code went like this:
Head (/view/xhtml/base/head.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<h:head>
<title>Title</title>
<meta http-equiv="keywords" content=" " />
<meta http-equiv="description" content=" " />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/base/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/base/general.css" />
<link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
<link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
<![endif]-->
<!-- REMOVED
<script type="text/javascript">
jQuery.noConflict();
</script>
-->
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
<script type="text/javascript" src="../js/ourjs.js"></script>
<!-- Internal screen's Css -->
<link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>
<!-- menu's scripts and css -->
<link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.metadata.js"></script>
<script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="../js/mbExtruder.js"></script>
<script type="text/javascript">
$(function(){
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script><!-- menu's scripts and css end -->
<!-- Scripts inside menu -->
<h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
<h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
});
</script><!-- end Scripts inside menu -->
<script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
<link rel="stylesheet" href="../css/base/verticaltabs.css" />
<script type="text/javascript" src="../js/provider.js"></script>
<script type="text/javascript">
$(document).ready(function(){fornecedor.verticalTabs();});
</script>
<!-- Internal screen's Css -->
<link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
<!-- END PROVIDER -->
</h:head>
</html>
Place <h:head/> in head.xhtml
You are missing a </div> tag after <!-- END SYSTEM MENU --> in the master.xhtml file
We have a java application ( Atlassian Bamboo) running on port 8085 on Windows 2003. It is accessile as http: //bamboo:8085.
I am trying to setup reverse proxy for IIS6 using IIRF so content is accessible via
http: //bamboo.
It seems that I set it ip correctly, and I can retrieve Status page.
This is how my IIRF.ini looks like:
RewriteLog c:\temp\iirf
RewriteLogLevel 2
StatusUrl /iirfStatus
RewriteCond %{HTTP_HOST} ^bambooi$ [I]
#This setup works
#ProxyPass ^/(.*)$ http://othersite/$1
#This does not
ProxyPass ^/(.*)$ http://bamboo:8085/$1
However when I type in http: //bamboo in IE, I get 'page cannot be displayed ' message.
FF does not return anything at all.
I made Wireshark network dump, selected 'follow TCPstream' and it seems like correct page is being retrieved.Why cannot I see it then?
I also noticed that I can retrieve http: //bamboo/favicon.ico so I must be very close to the solution..
This is the Wireshark output:
GET / HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, */*
Accept-Language: en-gb
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Accept-Encoding: gzip, deflate
Host: bamboo
Connection: Keep-Alive
Cookie: JSESSIONID=wpsse0zyo4g5
HTTP/1.1 200 200 OK
Date: Sat, 30 Jan 2010 09:19:46 GMT
Server: Microsoft-IIS/6.0
Via: 1.1 DESTINATION_IP (IIRF 2.0)
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
<!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" xml:lang="en" lang="en">
<head>
<title>Dashboard</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<link type="text/css" rel="stylesheet" href="/s/1206/1/_/scripts/yui-2.6.0/build/grids/grids.css" />
<!--<link type="text/css" rel="stylesheet" href="/s/1206/1/_/scripts/yui/build/reset-fonts-grids/reset-fonts-grids.css" />-->
<link rel="stylesheet" href="/s/1206/1/_/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/s/1206/1/_/styles/main2.css" type="text/css" />
<link rel="stylesheet" href="/s/1206/1/_/styles/global-static.css" type="text/css" />
<link rel="stylesheet" href="/s/1206/1/_/styles/widePlanList.css" type="text/css" />
<link rel="stylesheet" href="/s/1206/1/_/styles/forms.css" type="text/css" />
<link rel="stylesheet" href="/s/1206/1/_/styles/yui-support/yui-custom.css" type="text/css" />
<link rel="shortcut icon" href="/s/1206/1/_/images/icons/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="/s/1206/1/_/images/icons/favicon.png" type="image/png" />
<link rel="stylesheet" href="/s/1206/1/_/styles/bamboo-tabs.css" type="text/css" />
<!-- Core YUI-->
<link rel="stylesheet" type="text/css" href="/s/1206/1/_/scripts/yui-2.6.0/build/tabview/assets/tabview-core.css">
<link rel="stylesheet" type="text/css" href="/s/1206/1/_/scripts/yui-2.6.0/build/tabview/assets/skins/sam/tabview-skin.css">
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/event/event-min.js" ></script>
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/dom/dom-min.js" ></script>
<!--<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/animation/animation.js" ></script>-->
<!-- Container -->
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/container/container-min.js"></script>
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/connection/connection-min.js"></script>
<link type="text/css" rel="stylesheet" href="/s/1206/1/_/scripts/yui-2.6.0/build/container/assets/container.css" />
<!-- Menu -->
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/menu/menu-min.js"></script>
<link type="text/css" rel="stylesheet" href="/s/1206/1/_/scripts/yui-2.6.0/build/menu/assets/menu.css" />
<!-- Tab view -->
<!-- JavaScript Dependencies for Tabview: -->
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/element/element-beta-min.js"></script>
<!-- Needed for old versions of the YUI -->
<link rel="stylesheet" href="/s/1206/1/_/styles/yui-support/tabview.css" type="text/css" />
<link rel="stylesheet" href="/s/1206/1/_/styles/yui-support/round_tabs.css" type="text/css" />
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-2.6.0/build/json/json-min.js"></script>
<script type="text/javascript" src="/s/1206/1/_/scripts/yui-ext/yui-ext-nogrid.js"></script>
<script type="text/javascript" src="/s/1206/1/_/scripts/bamboo.js"></script>
<script type="text/javascript">
YAHOO.namespace('bamboo');
YAHOO.bamboo.tooltips = new Object();
YAHOO.bamboo.contextPath = '';
YAHOO.ext.UpdateManager.defaults.loadScripts = true;
YAHOO.ext.UpdateManager.defaults.indicatorText = '<div class="loading-indicator">Currently loading...</div>';
YAHOO.ext.UpdateManager.defaults.timeout = 60;
addUniversalOnload(addConfirmationToLinks);
</script>
<link rel="alternate" type="application/rss+xml" title="Bamboo RSS feed" href="/rss/createAllBuildsRssFeed.action?feedType=rssAll" />
</head>
<body>
<ul id="top">
<li id="skipNav">
Skip to navigation
</li>
<li>
Skip to content
</li>
</ul>
<div id="nonFooter">
<div id="hd">
<div id="header">
<div id="logo">
<img src="/images/bamboo_header_logo.gif" alt="Atlassian Bamboo" height="36" width="118" />
</div>
<ul id="userOptions">
<li id="loginLink">
<a id="login" href="/userlogin!default.action?os_destination=%2Fstart.action">Log in</a>
</li>
<li id="signupLink">
<a id="signup" href="/signupUser!default.action">Signup</a>
</li>
<li id="helpLink">
<a id="help" href="http://confluence.atlassian.com/display/BAMBOO">Help</a>
</li>
</ul>
</div> <!-- END #header -->
<div id="menu">
<ul>
<li><a id="home" href="/start.action" title="Atlassian Bamboo" accesskey="H"> <u>H</u>ome</a></li>
<li><a id="authors" href="/authors/gotoAuthorReport.action" accesskey="U">A<u>u</u>thors</a></li>
<li><a id="reports" href="/reports/viewReport.action" accesskey="R"> <u>R</u>eports</a></li>
</ul>
</div> <!-- END #menu -->
</div> <!-- END #hd -->
<div id="bd">
<div id="content">
<h1>Header here</h1>
<div class="topMarginned">
<div id='buildSummaryTabs' class='dashboardTab'>
</div>
<script type="text/javascript">
function initUI(){
var jtabs = new YAHOO.ext.TabPanel('buildSummaryTabs');
YAHOO.bamboo.tabPanel = jtabs;
// Use setUrl for Ajax loading
var tab3 = jtabs.addTab('allTab', "All Plans");
tab3.setUrl('/ajax/displayAllBuildSummaries.action', null, true);
var tab4 = jtabs.addTab("currentTab", "Current Activity");
tab4.setUrl('/ajax/displayCurrentActivity.action', null, true);
var handleTabChange = function(e, activePanel) {
saveCookie('atlassian.bamboo.dashboard.tab.selected', activePanel.id, 365);
};
jtabs.on('tabchange', handleTabChange);
var selectedCookie = getCookieValue('atlassian.bamboo.dashboard.tab.selected');
if (jtabs.getTab(selectedCookie))
{
jtabs.activate(selectedCookie);
}
else
{
jtabs.activate('allTab');
}
}
YAHOO.util.Event.onContentReady('buildSummaryTabs', initUI);
</script>
</div>
<script type="text/javascript">
setTimeout( "window.location.reload()", 1800*1000 );
</script>
<div class="clearer" ></div>
</div> <!-- END #content -->
</div> <!-- END #bd -->
</div> <!-- END #nonFooter -->
<div id="ft">
<div id="footer">
<p>
Powered by Atlassian Bamboo version 2.2.1 build 1206 -
<span title="15:59:44 17 Mar 2009">17 Mar 09</span>
</p>
<ul>
<li class="first">
Report a problem
</li>
<li>
Request a feature
</li>
<li>
Contact Atlassian
</li>
<li>
Contact Administrators
</li>
</ul>
</div> <!-- END #footer -->
</div> <!-- END #ft -->
Sergei, the ProxyPass directive in IIRF v2.0 did not correctly forward all Request headers, nor did it properly handle chunked encoding.
To use ProxyPass, you should move to IIRF v2.1, at least.
ps: your question really belongs on ServerFault.com
That "Via: 1.1 DESTINATION_IP (IIRF 2.0)" looks interesting.
Have you tried:
ProxyPass ^/(.*)$ http://localhost:8085/$1
Also, is the line:
RewriteCond %{HTTP_HOST} ^bambooi$ [I]
supposed to be:
RewriteCond %{HTTP_HOST} ^bamboo$ [I]