I'm trying to optimise my website (http://www.mazion.co.uk).
As such, I tried to create critical CSS for the site using penthouse. (See Critical CSS used here - this was generated by the main developer of penthouse for me).
However, when using critical CSS, one of the subpages on my website does not load properly. BUT, when I fully inline the CSS (or don't do anything to optimise CSS), this sub-page loads correctly.
On this sub-page - http://www.mazion.co.uk/courses, there are a number of boxes that are resized using a JS function (see below) that is run on.ready and on.resize (i.e. when resizing the screen) which ensures that all boxes are of the same size.
When using critical CSS, the resizing function works on.resize but not on.ready. On the other hand, with inline CSS, the resizing function works as expected on.resize and on on.ready...
Thus, I was wondering if someone could help me in identifying the problem. I have tried to inline the styles for the boxes directly into the HTML, but I was unsuccessful...
You can see this problem by going to http://www.mazion.co.uk/courses/ and having a look at the boxes. If you then resize your browser, all the boxes will resize themselves so that they are all the same height... This resizing that make all the boxes the same height should actually happen automatically when the page loads....
Js Function (Not Extremely important to question, but helps in setting the scene)
jQuery(document).ready(function($){
$(window).resize(function() {
resizeCourseBoxes()
resizeTopBespokeCoursesBoxes()
resizeMidBespokeCoursesBoxes()
}).resize(); // Trigger resize handlers.
});
// Ensure that all the courses boxes are the same height (this ensures that the rows are of the same size...)
function resizeCourseBoxes() {
jQuery(function($) {
courseHeader = $('.course_header')
maxTextHeight = Math.max.apply(
Math, courseHeader.map(function() {
return $(this).height()
}).get())
for (var i = 0; i < courseHeader.length; i++) {
currentHeight = courseHeader[i].offsetHeight
new_padding = Number(maxTextHeight) - currentHeight + 10
courseHeader[i].style.marginBottom = new_padding + 'px'
};
})
}
// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeTopBespokeCoursesBoxes() {
jQuery(function($) {
CoursePriceSection = $('.green_bx_top')
maxTextHeight = Math.max.apply(
Math, CoursePriceSection.map(function() {
return $(this).height()
}).get())
for (var i = 0; i < CoursePriceSection.length; i++) {
currentHeight = CoursePriceSection[i].offsetHeight
new_padding = Number(maxTextHeight) - currentHeight + 10
CoursePriceSection[i].style.marginBottom = new_padding + 'px'
};
})
}
// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeMidBespokeCoursesBoxes() {
jQuery(function($) {
CoursePriceSection = $('.green_bx_mid')
maxTextHeight = Math.max.apply(
Math, CoursePriceSection.map(function() {
return $(this).height()
}).get())
for (var i = 0; i < CoursePriceSection.length; i++) {
currentHeight = CoursePriceSection[i].offsetHeight
new_padding = Number(maxTextHeight) - currentHeight
CoursePriceSection[i].style.marginBottom = new_padding + 'px'
};
})
}
The answer to my problem was simple:
Critical CSS is specific for each HTML page. Thus critical CSS for each individual page should be calculated separately...
(I was using the same critical CSS for all my subpages...).
Related
I am trying to emulate A4 page for a given HTML document. Basically I am trying to create very basic version of Google Docs for a custom document format. This document format has also footer,header and page margins. I have found this question which is very similar to what I am trying to achieve. However, no matter how I change the padding, it doesn't leave same space at the bottom as the top one. I attached the screenshot of a layout I am trying to achieve and my current HTML.
As you can see from the JSFIDDLE link, my content doesn't divide to 2 pages. If I change padding size, it leaves a weird spaces on top, but bottom one doesn't have much spaces as the top one.
JAVASCRIPT
<script type="text/javascript">
var max_pages = 100;
var page_count = 0;
function snipMe() {
page_count++;
if (page_count > max_pages) {
return;
}
var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
console.log('Long: ' + long)
var children = $(this).children().toArray();
var removed = [];
while (long > 0 && children.length > 0) {
var child = children.pop();
$(child).detach();
removed.unshift(child);
long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
}
if (removed.length > 0) {
var a4 = $('<div class="A4"></div>');
a4.append(removed);
$(this).after(a4);
snipMe.call(a4[0]);
}
}
$(document).ready(function() {
$('.A4').each(function() {
snipMe.call(this);
});
});
</script>
JSFIDDLE
https://jsfiddle.net/t2u7v0mq/
$myWindow.on('resize', function(){
var $width = $myWindow.width();
if ($width > 870) {
console.log('hey im 870');
$('#the-team-wrapper .flex-content').empty();
ajax_results.done(function(data) {
// console.log(data.job_titles[3]);
var employee_job_titles;
function job_titles_display(jobtitle,ind){
if (jobtitle.job_titles[ind].length>1) {
var my_array = [];
for (var i = 0; i < jobtitle.job_titles[ind].length; i++){
my_array.push(jobtitle.job_titles[ind][i][0]['title']);
employee_job_titles = my_array.join(' | ');
}
}else {
var employee_job_titles;
employee_job_titles = jobtitle.job_titles[ind][0]['title'];
}
return employee_job_titles;
}
for (var i = 0; i < data.employee_info.length; i++) {
if(i%2 == 0){
$('#the-team-wrapper .flex-content').append('<div class="profile-parent"><div class="employee-profile-pic flex-item" data-id="'+data.employee_info[i]['id']+'"></div><div class="employee-bio-wrapper flex-item"><h2 data-id="'+data.employee_info[i]['id']+'">'+data.employee_info[i]['firstname']+" "+data.employee_info[i]['lastname']+'</h2><h3 data-id="'+data.employee_info[i]['id']+'">'+job_titles_display(data,i)+
'</h3><p class="employee-bio-text employee-bio-text-not-active">'+data.employee_info[i]['bio']+'</p></div><button type="button" class="bio-prev-butt-left">View '+data.employee_info[i]['firstname']+'\'s'+' Bio</button><div class="hide-bio-close-button-left">x</div></div>');
}else {
$('#the-team-wrapper .flex-content').append('<div class="profile-parent"><div class="employee-bio-wrapper flex-item"><h2 data-id="'+data.employee_info[i]['id']+'">'+data.employee_info[i]['firstname']+" "+data.employee_info[i]['lastname']+'</h2><h3 data-id="'+data.employee_info[i]['id']+'">'+job_titles_display(data,i)+'</h3 data-id="'+data.employee_info[i]['id']+
'"><p class="employee-bio-text employee-bio-text-not-active">'+data.employee_info[i]['bio']+'</p></div><div class="employee-profile-pic flex-item" data-id="'+data.employee_info[i]['id']+'"></div><button type="button" class="bio-prev-butt-right">View '+data.employee_info[i]['firstname']+'\'s'+' Bio</button><div class="hide-bio-close-button-right">x</div></div>');
}
var profile_pic_path = data.employee_info[i]['profile_pic'].split('\\').join('\\\\');
$("#the-team-wrapper .flex-content-wrapper .flex-content .employee-profile-pic:eq("+i+")").css({'background': 'url(_employee_pics/'+profile_pic_path+')','background-repeat': 'no-repeat','background-position': 'center', 'background-size': 'cover'});
}
});
}
I have this code, and it should fire when width is greater than 870, but instead it fires when width is greater than 970 on Opera, and when width is about 890 on Chrome. How can I fix this and get consistent results across browsers. Thanks in advance.
Are you using a CSS reset to neutralize the browser's default margin or padding on the <body> element?
Different browsers add different amounts of either padding or margin to the <body> of the page, which could explain why the function is triggered at different points in different browsers.
The problem is, the resize event fires at different times and rates depending on browser, CPU load, and how fast you actually do the resizing.
Test the following code in your browsers. When I do this in a clean browser at a reasonable rate of coverage the difference usually comes in within around 2px of the target.
(BTW, you'll see I am caching the jQuery selectors into variables. Not strictly necessary for this test, but you might be surprised to find out how many bugs I've fixed because coders have invoked uncached jQuery selectors willy-nilly in loops and other repetitive places throughout their code).
var $window = $(window);
$window.on('resize',function(){
var w = $window.width();
if (w > 1000) {
console.log( w );
} else {
console.log('nope: ' + w)
}
});
I know that you don't normally like doing things like this but I'm at University and have to do a project with several different stylesheets for the same page. I have been given JavaScript code to enable me to resize the page when the window is resized.
This code works however I am getting a peculiar effect on one of the stylesheets where the content div takes up most of the page when it shouldn't, this page has measurements in ems whereas my other stylesheets use px but I am supposed to use ems for at least one page. Although I could give my lecturer a reason for it being bigger I would prefer to fix the problem. The JavaScript code I am using is shown below:
function smoothresize() {
blockwidth = 59.4; /*This is in ems as per the lecturers request a well and is the size of the container div I created*/
minmargin = 0;
minsize = 10;
emwidth = (minmargin * 2) + blockwidth;
computeResize(emwidth, minsize, false)
}
function computeResize(wide, minsize, jerk) {
windowpixels = document.documentElement.clientWidth;
pixelsize = windowpixels / wide;
emsize = calculateEmsize(pixelsize, minsize, jerk);
b = document.getElementsByTagName('html')[0];
b.style.fontSize = emsize + "em";
}
function calculateEmsize(psize, minsize, jerk) {
if (psize > minsize) {
raw = psize;
}
else {
raw = minsize;
}
if (jerk) {
result = ((Math.floor(raw)) / 16);
}
else {
result = raw / 16;
}
return result
}
This is where I have Implemented the code in my XHTML:
<body onload="smoothresize()" onresize="smoothresize()">
I wouldn't be able to use jQuery as a solution to the problem either, I would only be able to modify the code given.
Any help in this matter Would be greatly appreciated
Check out jQuery's user interface plugin. It contains a "resizable" option; you ought to be able to add <script type="text/javascript">window.onload=function(){};</script> that loads the desired JQUI function upon page load.
I'm trying to use jQuery script to align height of two divs. Everything works fine until I have some dynamic content in one of divs.
When I hardcode some static content in one of divs like:
<br>asd<br>asd<br> x 20
both divs has the same height property, but when I load some data from DB to one of divs, they are different.
I guess that the problem is in .ready() listener. Documentation says that it fires when DOM is fully loaded but it looks like it's not the truth.
My question is: what kind of listener or other 'trick' should I use? I think that jquery/javascript solution is cleaner than messing with css and I would like to have this kind of solution.
Thanks in advance.
jquery script:
$(document).ready(function(){
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
});
jquery in the base work with event document.ready is means when all DOM is ready until here make the jquery code. is for don't have a option to render jquery code without render jquery library
if you want to add event just when all the dom is loaded include content and images you need to do this
$(document).ready(function(){
$(window).load(function(){
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
});
});
You can use window.onload to execute a script once a web page has completely loaded all content including images, script files, CSS files, etc.
window.onload = function() {
var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();
if(difference<0)
{
var height = $("#layout-content-wrapper").height() -1;
$("#layout-navigation-wrapper").height(height);
}
else if(difference >= 0)
{
var height = $("#layout-navigation-wrapper").height() -2;
$("#layout-content-wrapper").height(height);
}
};
I am looking for some native JavaScript, or jQuery plugin, that meets the following specification.
Sequentially moves over a set of images (ul/li)
Continuous movement, not paging
Appears infinite, seamlessly restarts at beginning
Ability to pause on hover
Requires no or minimal additional plugins
I realize this sounds simple enough. But I have looked over the web and tried Cycle and jCarousel/Lite with no luck. I feel like one should exist and wanted to pose the question before writing my own.
Any direction is appreciated. Thanks.
you should check out Nivo Slider, I think with the right configuration you can it to do what you want.
You can do that with the jQuery roundabout plugin.
http://fredhq.com/projects/roundabout/
It might require another plugin.
Both answers by MoDFoX and GSto are good. Usually I would use one of these, but these plugins didn't meet the all the requirements. In the end this was pretty basic, so I just wrote my own. I have included the JavaScript below. Essentially it clones an element on the page, presumably a ul and appends it to the parent container. This in effect allows for continuous scrolling, right to left, by moving the element left and then appending it once out of view. Of course you may need to tweak this code depending on your CSS.
// global to store interval reference
var slider_interval = null;
var slider_width = 0;
var overflow = 0;
prepare_slider = function() {
var container = $('.sliderGallery');
if (container.length == 0) {
// no gallery
return false;
}
// add hover event to pause slider
container.hover(function() {clearInterval(slider_interval);}, function() {slider_interval = setInterval("slideleft()", 30);});
// set container styles since we are absolutely positioning elements
var ul = container.children('ul');
container.css('height', ul.outerHeight(true) + 'px');
container.css('overflow', 'hidden')
// set width and overflow of slider
slider_width = ul.width();
overflow = -1 * (slider_width + 10);
// set first slider attributes
ul.attr('id', 'slider1');
ul.css({"position": "absolute", "left": 0, "top": 0});
// clone second slider
var ul_copy = ul.clone();
// set second slider attributes
ul.attr('id', 'slider2');
ul_copy.css("left", slider_width + "px");
container.append(ul_copy);
// start time interval
slider_interval = setInterval("slideleft()", 30);
}
function slideleft() {
var copyspeed = 1;
var slider1 = $('#slider1');
var slider2 = $('#slider2');
slider1_position = parseInt(slider1.css('left'));
slider2_position = parseInt(slider2.css('left'));
// cross fade the sliders
if (slider1_position > overflow) {
slider1.css("left", (slider1_position - copyspeed) + "px");
}
else {
slider1.css("left", (slider2_position + slider_width) + "px");
}
if (slider2_position > overflow) {
slider2.css("left", (slider2_position - copyspeed) + "px");
}
else {
slider2.css("left", (slider1_position + slider_width) + "px");
}
}