We have one web application which is hosted on WPS (webshere portlet server). We have two folder in our application, named as ie & css. (both these folders contain css files for IE and non IE browsers separately)
CSS file location for non IE browser: --\theme\egmk\css\
CSS file location for IE browser: --\egmk\ie\css\
When we access our portal using IE7 browser it picks up all the css files from “\egmk-\ie\css” folder but for IE8 it is picking from “egmk\css” folder which is causing big alignment and look & feel issue in IE8 browser. We are not able to identify the root cause for the issue with IE8 browser.
Below are the CCS files defined under tag of Head.jsp file from where all the css is geting loaded. This is an exsisting file which is working fine for IE 7 & less.
<head><%--
--%><meta http-equiv="Expires" content="0"><%--
--%><meta http-equiv="Cache-control" content="no-cache"><%--
--%><meta http-equiv="Pragma" content="no-cache"><%--
--%><script type="text/javascript">history.go(1);</script><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/jquery-1.3.2.min.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/jquery.autocomplete.min.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/cufon.js"/>'></script><%--
--%><style type="text/css">.cufon-canvas{text-indent:0!important;}#media screen,projection{.cufon-canvas{display:inline!important;display:inline-block!important;position:relative!important;vertical-align:middle!important;font-size:1px!important;line-height:1px!important;}.cufon-canvas .cufon-alt{display:-moz-inline-box!important;display:inline-block!important;width:0!important;height:0!important;overflow:hidden!important;}.cufon-canvas canvas{position:relative!important;}}#media print{.cufon-canvas{padding:0!important;}.cufon-canvas canvas{display:none!important;}.cufon-canvas .cufon-alt{display:inline!important;}}</style><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/Helvetica_Neue_LT_Std_Condensed_400.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/behaviors.js"/>'></script><%--
<meta http-equiv="Refresh" content="600;URL=/wps/myportal">
--%><title><portal-fmt:text key="portal.title" bundle="nls.egmk-abn" /></title> <%--
--%><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/menu.css"/>'><%--
--%><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/menufixer.css"/>'><%--
--%><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/compat.css"/>'><%--
--%><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/compatcalendar.css"/>'><%--
--%><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/calendar.css"/>'><%--
--%><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/calendar_new.css"/>'><%--
--%><link rel="stylesheet" type="text/css" media="print" href='<wps:urlFindInTheme file="css/print.css"/>'><%--
--%><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/overlib.css"/>'><%--
--%><link rel="stylesheet" type="text/css" href='<wps:urlFindInTheme file="css/jquery.autocomplete.css"/>'/><%--
--%><!--[if IE 7]><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/ie7.css"/>'><![endif]--><%--
--%><![if ! IE 7]><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/notie7.css"/>'><![endif]><%--
--%><!--[if IE 6]><script type="text/javascript" src='<wps:urlFindInTheme file="js/jquery.bgiframe.js"/>'></script><![endif]--><%--
--%><!--[if IE 6]><script type="text/javascript" src='<wps:urlFindInTheme file="js/ie6.js"/>'></script><![endif]--><%--
--%><style type="text/css">
/* add hover pseudoclass to elements */
* html body {
behavior: url('<wps:urlFindInTheme file="js/csshover3.htc"/>')
}
</style><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/portletBarIcons.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/menu.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/menu-popup.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFindInTheme file="js/preload.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFind file="calendar/js/calendar.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFind file="calendar/js/calendar-en.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFind file="calendar/js/calendar-setup.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFind file="calendar/js/calendar_new.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFind file="calendar/js/calendar-setup_new.js"/>'></script><%--
--%><script type="text/javascript" src='<wps:urlFind file="calendar/js/calendar-en_new.js"/>'></script><%--
--%><!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="all" href='<wps:urlFindInTheme file="css/ie.css"/>'><![endif]--><%--
--%></head>
could you please look into the issue.
Thanks in advance
change first line of this
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css"
media="all" href='<wps:urlFindInTheme file="css/ie.css"/>
'><![endif]-->
to
<!--[if gte IE 7]>
or
<!--[if IE 8]>
and point to the appropriate file. you pointed out the paths to the files, but i don't see any of them following the paths you mentioned.
Just put following code and your IE browser would open by default in defined compatible view.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Your site is working fine in IE7 so it is the good solution to make default compatible view of ie7 so you will not have any issue with upgraded IE versions.
Related
So in html i specify a path to an image (for example:
<img src="img_galaxy.jpg">
Unlike chrome, when i inspect element i this don't see this image nor other resource displayed in network monitor section.
i have a small gif to demonstrate about what i mean. Sorry for loss of quality, i had to optimize.
[Left: Firefox | Right:Chromium]
Sample code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<img
sizes="(max-width: 1400px) 100vw, 1400px"
srcset="
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_320.jpg 320w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_914.jpg 914w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1321.jpg 1321w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg 1400w"
src="img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg"
alt="">
</body>
</html>
I'm developing my first SharePoint hosted add-in with Kendo UI and getting the following exception when I run it:
o._detachObservableParents is not a function
I've tried instantiating the object with as little configuration as possible to make sure it's not one of the settings that I'm messing up but I keep getting the same error.
Searching online has produced no clues at all.
Technical Details
Kendo UI v2016.2.714
SharePoint Online (I believe it's 2013)
The following code shows how I've added the resources to the Add-in page:
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<link rel="stylesheet" href="../Content/Fabric/4.0.0/fabric.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.common-office365.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.office365.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.dataviz.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.dataviz.office365.min.css" />
<script type="text/javascript" src="../Scripts/jquery-1.10.2.min.js"></script>
<SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<script type="text/javascript" src="../Scripts/kendo/2016.2.714/kendo.all.min.js"></script>
<script type="text/javascript" src="../Scripts/repositories.js"></script>
<meta name="WebPartPageExpansion" content="full" />
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
Edits
Edit 1 - Note: I can instantiate simple components like buttons and calendars without any issues.
I just want to add iframe in default.html but it not working showing white page ...
Here my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FinderToday</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- FinderToday references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Go to page 2</p>
<p>Search the web</p>
<iframe src="http://maps.bing.com" style="width:1366px; height: 768px"></iframe>
</body>
</html>
What version of Windows are you targeting - Windows 8 or Windows 8.1?
If you are targeting Windows 8.1, use the x-ms-webview element rather than iframe.
http://msdnstage.redmond.corp.microsoft.com/en-us/library/windows/apps/dn301831.aspx
http://blogs.windows.com/windows/b/appbuilder/archive/2013/10/01/blending-apps-and-sites-with-the-html-x-ms-webview.aspx
Let me preface with two things. I am currently using grunt for these tasks and I also know about Yeoman which has what I am asking for. I do really like Yeoman however it is just a little too opinionated for this particular project I am working on.
So I have the following HTML file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- START-CSS-MIN:css/build/min.css -->
<link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/boilerplate.css">
<!-- END-CSS-MIN -->
<!-- START-JS-MIN:js/build/modernizr.js -->
<script src="js/libraries/modernizr.js"></script>
<!-- END-JS-MIN -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<!-- START-JS-MIN:js/build/libraries.js -->
<script src="js/libraries/underscore.js"></script>
<script src="js/libraries/jquery/jquery.js"></script>
<!-- END-JS-MIN -->
</body>
</html>
Now you can see the CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that properly collects all those files in the comments (using htmlparser) and then minifies and concats them as directly based on the comments. The last step in the build process is to create a new version of that HTML file (for production use) that replaces the comments with the new file. For example, the code above would be turned into this:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body>
</html>
The question I have is how would I be able to do this in NodeJS? The htmlparser NPM module is great for parsing HTML however I now need something where I am modifying the HTML (removing and adding certain elements in specific locations). Is there any good packages/tutorials on how to do this in NodeJS code?
I'm not quite sure if this is helpful for comment lines, but that should be less of an issue to solve than DOM reference.
Consider using: https://github.com/tmpvar/jsdom
There are other options out there as well. (https://github.com/joyent/node/wiki/modules)
You can use cheerio
The following code will produce exactly the output you provided (apart from some minor whitespace differrences)
const $ = require('cheerio').load(inputHtml);
// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
let commentIndex=-1;
return (index, node)=>{
const isComment = node.type === 'comment';
if(isComment)commentIndex++;
return isComment && commentIndexes.includes(commentIndex);
}
}
$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();
//Cheerio respects whitespace provided here
$('head').append(`
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
`)
$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(` <script src="js/build/libraries.js"></script>
`)
console.log($.html())
output:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body></html>
All of my JSF pages contain the following imports
<h:head>
<title>My Registration Page</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script language="javascript" src="script/script.js"/>
Not i dont want to copy and paste all these lines in the head element of my xhtml page;but want to include only a single page, so i want to remove all these lines from the head and put them into another file and then just include that file.
Kind Regards