I am using LifeRay.
Have some css files in the header section coming thru LifeRay header template (common for all portlets),
and another css file in a portlet (specific to one portlet).
The portlet code is inside portlet - view.JSP.
The generated HTML output is like:
<html..>
<head>
...
...
<link href="base.css" ../>
<link id="custom" href="custom.css" />
...
...
</head>
<body>
...
...
<div class='portlet...'>
...
...
<link href="port.css" ../>
..
...
</div>
..
..
</body>
</html>
Here, problem is I wanted to have "custom.css" to be loaded at last, but due to liferay structure port.css is getting loaded in the last, after liferay-header template.
One solution is, I can simply have the custom.css inclusion near the bottom of the liferay template (or say, footer template), so that it'll be loaded last (after portlet's port.css), but it's against W3C recommendation - to have all CSS in head section.
Now, I wrote a little script in my portlet .jsp, that will dynamically load the port.css before custom.css, using jquery.
portlet -- view.jsp --
$("<link href='port.css' ../>").insertBefore( $("#custom") );
..
..
Now, with this approach, in FireBug, I can see the port.css listed "before" custom.css - as expected.
I even observed the styles are applied with proper sequence/priority from both the css.
My queries are:
- How good/correct is this approach?
- Is there any limitation/constraint to this?
- Any Browser issue??
Any thoughts on this?
Related
I've been running into some problems that seem to arise from making my questionnaire a .PHP file rather than an .HTML. The reason I had to do this is because I'm using a PHP script for working with an SQL database and I had to include them into the Questionnaire, which won't work as an HTML.
In the HTML version everything runs perfectly the way I coded it. When I saved it as a .php file my javascript stopped working properly and I tried linking the javascript at the bottom of the body tag instead of the head and that still didn't help.
After a lot of going back and forth trying to see what's different I decided to save the .php file as an html just for grins and giggles to see if I still got the same problems. Oddly enough, it runs just as smooth as the other HTML file.
here's links to all 3 versions so you can see what I mean.
HTML v1
PHP
HTML v2
In the JS Console I got this error
Uncaught TypeError: Cannot set property 'onClick' of null
which referred me to line 163 of my .js file which is referencing the "next" button of the first page of the Questionnaire (not intro page that loads up but the next page where you actually input data).
The way I have the Questionnaire structured in the .PHP file is
<?php ini_set('display_errors','on'); ?><?php include('extlib/vdaemon/vdaemon.php'); ?><!doctype html>
<html>
<head>
//links to files etc.//
</head>
<header>
</header>
<body>
<form action="core/process.php" method="post" id="CorpID" runat="vdaemon">
<input type="hidden" name="formID" value="Questionnaire" />
<input type="hidden" name="redirect_to" value="http://optiqvision.x10host.com/Corp_ID_&_Branding_Questionnaire.html" />
//all form inputs//
</form>
<?php VDEnd(); ?>
</body>
<footer>
</footer>
</html>
The entire Questionnaire has well over 100 individual inputs so I didn't want to put all of them in this snippet. I just wanted to show the over all structure, plus I figured you could get more details in the browser from clicking on them and looking at the debugger to see more of what's going on. Can anyone identify what I'm doing wrong with the PHP? I really don't understand why it's messing up the way it is.
In your html the code for the textarea is like this:
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
In your php the
The textarea closing tag is misplaced; coming after a lot of div's including the element with the id=p1_next. SO the divs just become part of the textarea value instead of being part of the HTML page
Edit: Looks like the real problem is that the DOM is broken. In your PHP file, you have a self-closed textarea tag. textarea tags need a closing tag.
<!-- you have this, it's not syntactically correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;" />
<!-- the following is correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
Put Corp_ID_&_Branding_Questionnaire.js right before the body tag and it will work. The reason the PHP file is throwing a javascript error is because the node "p1_next" doesn't exist at runtime since your JS is in the head tag.
The reason it's working in the HTML file is mainly thanks to luck. The static HTML is loading fast enough that the DOM is ready by the time your JS code is running. As a thumb of rule, generally include all your JS right before the body tag. There are of course some exceptions.
If you really need to include your script in the head, you can wait until the DOM is ready by wrapping all your code with this:
$(document).ready(function() {
console.log( "ready!" );
// your JS code here
});
Last, if you're going to be using jQuery as a library, then it is recommended to use jQuery syntax instead of native JS. Just make sure to include the jQuery JS before your code.
var p1a = document.getElementById("p1_next");
// becomes:
var p1a = $('#p1_next'); // jQuery node by CSS selector
Before the end of the body tag like this:
<html>
<head>
..your code ..
</head>
<body>
..your code ..
<script type="text/javascript" src="http://www.optiqvision.x10host.com/Files/Javascript/Corp_ID_&_Branding_Questionnaire.js"></script>
</body>
</html>
In my current project, my work is only with html and css (HTML skinning). There are many pages which have repeated sections like Header, footer, sharing links etc.
I don't want to repeat this common sections again and again in each page. I want these repeated sections to call somehow using gulp or any other task runner.
Something like this for example (using lodash)
Index.html
<!Doctype html>
<html>
<%= _.template(templates['head'])() %>
<body>
<%= _.template(templates['header'])() %>
<!-- some unique content here -->
<%= _.template(templates['footer'])() %>
</body>
</html>
and then using gulp-template rendering it in each page. I am preferring lodash because I had already worked with it.
As you can see, I am assuming that if somehow I keep the repeating sections in a javascript object (with name templates), I can call it in one line code. And then if I change something in that repeating section, the change will occur in all pages.
To make this possible, first I need to generate the javascript object with that repeating html as string in it.
Can someone please tell me how to do this? or is there any better way to do this?
You can use Jade - node template engine
It gives option to include external jade files, where in it allows you to insert the contents of one jade file into another
index.jade:
doctype html
html
include ./includes/head.jade
body
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
head.jade
//- includes/head.jade
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
foot.jade
//- includes/foot.jade
#footer
p Copyright (c) foobar
Compiles to:
index.html
<!doctype html>
<html>
<head>
<title>My Site</title>
<script src='/javascripts/jquery.js'></script>
<script src='/javascripts/app.js'></script>
</head>
<body>
<h1>My Site</h1>
<p>Welcome to my super lame site.</p>
<div id="footer">
<p>Copyright (c) foobar</p>
</div>
</body>
</html>
Explanation:
Whenever I used to search on google for "pre-compiling templates", I was ending up on sites which were combining all the HTML template files to one single js file. But in my case, I was looking for a way to compile the templates completely on system itself with no support of a "all template compiled js file". (So, I was looking for a solution which pre-renders the HTMLs)
Solution:
I found this awesome template engine, Nunjucks, which lets me compile the HTML templates to Independent HTML pages when used with gulp.
Check this one, gulp-nunjucks-render. By using this along with gulp, I am able to include section of .html files into other .html files. Here is the code (assuming you installed nodejs and gulp):
var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
gulp.task('default', function () {
nunjucksRender.nunjucks.configure(['templates/'], { watch: false });
return gulp.src('templates/!(_)*.html')
.pipe(nunjucksRender({
css_path: "../assets/css/",
js_path: "../assets/js/",
img_path: "../assets/images/"
}))
.pipe(gulp.dest('html'));
});
gulp.task('watch', function () {
gulp.watch(['templates/*.html'], ['default']);
});
In the above code, I am keeping the HTML templates in templates folder and with the above gulp code, I am generating the new HTMLs in html folder. The above code will not generate the files which are prefixed with _. (something similar to sass)
and later in command prompt:
gulp watch // Watches the files for changes continuously --> OWNING :D
Here is an example:
<!-- // Index.html -->
<!DOCTYPE html>
<html>
{% include "_head.html" %}
<body>
{% include "_content.html" %}
{% include "_footer.html" %}
</body>
</html>
Which renders to:
<!DOCTYPE html>
<html>
<head>
<title>Website title</title>
<link rel="Stylesheet" href="../assets/jcss/main.css" type="text/css"/>
</head>
<body>
<div class="page">
<!-- content here -->
</div>
<div class="footer">
<!-- footer content here -->
</div>
</body>
</html>
Advantages:
No need of server support to compile the templates.
No need to include any pre-compiled js file in index.html.
Whenever we do some change in common section, no need to include that section again in every page.
Disadvantages:
Till now, I didn't find any :).
I am creating a website (http://yic.am) using wordpress and the theme includes a background and a "subpage_content_bg". The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page.
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. However, I cannot seem to find a description for when the picture is a part of the css stylesheet.
The subpage-extract from the stylesheet looks like this:
#sp .content_wrapper_sbl {
width:940px;
min-height:320px;
margin:-107px auto 0;
padding:45px;
position:relative;
z-index:20;
background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? I would like it to be for all pages and posts (except the cover-page)
How do I make the subpage image the target of the function? Is it possible to make the #sp or content_wrapper_sbl the target?
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. I hope all the necessary information is included - any help would be much appreciated.
The code I am working is this: http://jsfiddle.net/EahRx/870/
It looks like you've pretty much got it nailed in that fiddle, haven't you? It's personal preference how you want to arrange your javascript files, I guess. Personally, I like to use the Google library to load my jQuery...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using...
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins.
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this...
<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>
<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>
Hope this helps point you in the right direction.
Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too...
$(document).ready(function(){
[YOUR JQUERY HERE]
});
Im working on a MVC3 application, with a masterpage which renders the views in the body.
Now I have 2 css files (different layouts), and I want to select the CSS depending on the screen size of the client.
Everything works with the code below, however, only for the index page, whenever I go to a second page, whatever it is, no CSS is rendered at all.
The code below is placed in the HEAD section of the masterpage.
<script type="text/javascript">
var css = './Content/SiteWide.css'
if ($(window).width() < 1140) {
css = './Content/SiteNarrow.css';
}
var tempcss = '<link href="TEMPCSS" rel="stylesheet" type="text/css" />';
var cssLink = tempcss.replace("TEMPCSS", css);
document.write(cssLink);
</script>
So somehow the css doesnt load again when you go to a second page (all using the same masterpage), do you guys have any ideas?
thanks
Use CSS media queries instead of Javascript.
<!-- dropped rel attribute -->
<link media="only screen and (max-width:1139px)" href="SiteNarrow.css" />
<link media="only screen and (min-width:1140px)" href="SiteWide.css" />
Ideally you create one CSS file for one state, and have another override that when conditions are met.
<!-- dropped rel attribute -->
<link href="base.css" />
<link media="only screen and (min-width:1140px)" href="override.css" />
I believe you need to use Url.Content(). I.e.
#Url.Content("~/Content/SiteWide.css");
The pathing may be incorrect when you navigate from your Index page if you use
./Content/SiteWide.css
I've usually found Url.Content() to be the right thing to do when pathing to files in the project
Pro-tip: Don't use static file locations. Make use of Url.Content.
Your code would look like:
var css = '#Url.Content("~/Content/SiteWide.css")';
Try this out and see if it works. From experience I've had static locations sometimes not work as expect, whereas Url.Content did the trick for me.
I recommend implementing Responsive Web Design
http://www.sitepoint.com/responsive-web-design/#fbid=UhFHwQrRwnn
You can use what are called "Media Queries" to dynamically apply different css files or properties as the screen size changes, in real time. Very cool!
I have a use case in which i want to include my main.gsp file in my page list.gsp , that is easily achieved by doing
<meta name="layout" content="main"/>
But the problem is that it has jQuery 1.6 version but i want an alternative to that a file called as jquery.js and i when i am including it as well in addition to the main layout its conflicting and creating a problem ..
like
<script type="text/javascript" src="${resource(dir: 'js/jquery', file: 'jquery.js')}"></script>
The above is not working , so what i have thought is either manually differentiate the files to be included on my list.gsp page or is there a way to include everything that is on main.gsp page except this jQuery1.6.js file ??
I am open to any other suggestions..
Thanks in advance
A dirty method could be to put the script import in a if block that checks for a page property, and in your list.gsp set that property.
In list.gsp:
<body fooProperty="1">
And in main.gsp:
<g:if test="${pageProperty(name:'body.fooProperty) ?: false}">
<%--includes you want for list.gsp here--%>
</g:if>
<g:else>
<%--normal script link -%>
</g:else>
Forces a if/else on every single page load you got, but there isnt many other ways to do it. Might be to set a hidden page property and write a loader that overrides the 1.6 import in javascript itself.
Put in your main.gsp
${if(!params.jqueryVersion) params.jqueryVersion=''}
<script type="text/javascript" src="${resource(dir: 'js/jquery', file: 'jquery${params.jqueryVersion)}.js')}"></script>
and in your list controller return
[myInstancesList:list, jqueryVersion:'-1.4.2']