Develop Reference

Change jQuery code to JavaScript

I have jquery function to control page menu elements with dynamic screen size. But this code requires jquery lib's. But this effecting my loading performance.
I can't use async loading attribute for jquery because this function requires this library. But if I could change to pure JavaScript then loading performance will be high. (Progressive Web Apps)
But when I really struggling with this conversions. Anyone knows how to convert to pure JavaScript?
function calcWidth() {
var navwidth = 0;
var morewidth = $('#main .more').outerWidth(true);
$('#main > li:not(.more)').each(function() {
navwidth += $(this).outerWidth( true );
});
var availablespace = $('nav').outerWidth(true) - morewidth;
if (navwidth > availablespace) {
var lastItem = $('#main > li:not(.more)').last();
lastItem.attr('data-width', lastItem.outerWidth(true));
lastItem.prependTo($('#main .more ul'));
calcWidth();
} else {
var firstMoreElement = $('#main li.more li').first();
if (navwidth + firstMoreElement.data('width') < availablespace) {
firstMoreElement.insertBefore($('#main .more'));
}
}
if ($('.more li').length > 0) {
$('.more').css('display','inline-block');
} else {
$('.more').css('display','none');
}
}
$(window).on('resize load',function(){
calcWidth();
});

Try this:
function calcWidth() {
var navwidth = 0;
var morewidth = document.querySelectorAll('#main .more')[0].width;
document.querySelectorAll('#main > li:not(.more)').forEach(function(item,index) {
navwidth += item.width;
});
var availablespace = document.querySelectorAll('nav')[0].width - morewidth;
if (navwidth > availablespace) {
var arr = document.querySelectorAll('#main > li:not(.more)');
var lastItem = arr[arr.length-1];
lastItem.setAttribute('data-width', lastItem.width);
document.querySelectorAll('#main .more ul')[0].appendChild(lastItem);
lastItem.parentNode.removeChild(lastItem);
calcWidth();
} else {
var firstMoreElement = document.querySelectorAll('#main li.more li')[0];
if (navwidth + firstMoreElement.width < availablespace) {
firstMoreElement.parentnode.insertBefore(firstMoreElement,document.querySelectorAll('#main .more')[0]);
firstMoreElement.parentNode.removeChild(firstMoreElement);
}
}
if (document.querySelectorAll('.more li').length > 0) {
document.querySelectorAll('.more').forEach(function(item,index){item.style.display='inline-block';});
} else {document.querySelectorAll('.more').forEach(function(item,index){item.style.display='none';});
}
}
window.onload=calcWidth;
window.onresize=calcWidth;
Answer if worked :)

Custom data-* types, css and javascript

all. I am building a full screen jQuery gallery for a project I am working on, and am running in to a small hiccup.
to see a demo of what is happening, please visit http://www.idealbrandon.com/gallery.html.
Basically, I am loading the bg-image for each slide using a custom attribute, data-background. This works fine the first time through, however whenever a slide is loaded for a second time, it does not load. The HTML for a slide is:
<div class="slide" data-background="/img/gallery/2.jpg">
<div class="location">Magical Aqua Ducks</div>
<div class="verse"></div>
</div>
the Javascript in question is
for(var i = 0; i < totalSlides; i++){
$pagerList
.append('<li class="page" data-target="'+i+'"></li>');
if ($slides.eq(i).attr("data-background") != null){
$slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
};
};
and the entire javascript file is
(function($){
function prefix(el){
var prefixes = ["Webkit", "Moz", "O", "ms"];
for (var i = 0; i < prefixes.length; i++){
if (prefixes[i] + "Transition" in el.style){
return '-'+prefixes[i].toLowerCase()+'-';
};
};
return "transition" in el.style ? "" : false;
};
var methods = {
init: function(settings){
return this.each(function(){
var config = {
slideDur: 7000,
fadeDur: 800
};
if(settings){
$.extend(config, settings);
};
this.config = config;
var $container = $(this),
slideSelector = '.slide',
fading = false,
slideTimer,
activeSlide,
newSlide,
$slides = $container.find(slideSelector),
totalSlides = $slides.length,
$pagerList = $container.find('.pager_list');
prefix = prefix($container[0]);
function animateSlides(activeNdx, newNdx){
function cleanUp(){
$slides.eq(activeNdx).removeAttr('style');
activeSlide = newNdx;
fading = false;
waitForNext();
};
if(fading || activeNdx == newNdx){
return false;
};
fading = true;
$pagers.removeClass('active').eq(newSlide).addClass('active');
$slides.eq(activeNdx).css('z-index', 3);
$slides.eq(newNdx).css({
'z-index': 2,
'opacity': 1
});
if(!prefix){
$slides.eq(activeNdx).animate({'opacity': 0}, config.fadeDur,
function(){
cleanUp();
});
} else {
var styles = {};
styles[prefix+'transition'] = 'opacity '+config.fadeDur+'ms';
styles['opacity'] = 0;
$slides.eq(activeNdx).css(styles);
//$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).attr("data-background")+")");
var fadeTimer = setTimeout(function(){
cleanUp();
},config.fadeDur);
};
};
function changeSlides(target){
if(target == 'next'){
newSlide = (activeSlide * 1) + 1;
if(newSlide > totalSlides - 1){
newSlide = 0;
}
} else if(target == 'prev'){
newSlide = activeSlide - 1;
if(newSlide < 0){
newSlide = totalSlides - 1;
};
} else {
newSlide = target;
};
animateSlides(activeSlide, newSlide);
};
function waitForNext(){
slideTimer = setTimeout(function(){
changeSlides('next');
},config.slideDur);
};
for(var i = 0; i < totalSlides; i++){
$pagerList
.append('<li class="page" data-target="'+i+'"></li>');
if ($slides.eq(i).attr("data-background") != null){
$slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
//alert($slides.eq(i).attr("data-background"));
};
};
$container.find('.page').bind('click',function(){
var target = $(this).attr('data-target');
clearTimeout(slideTimer);
changeSlides(target);
});
var $pagers = $pagerList.find('.page');
$slides.eq(0).css('opacity', 1);
$pagers.eq(0).addClass('active');
activeSlide = 0;
waitForNext();
});
}
};
$.fn.easyFader = function(settings){
return methods.init.apply(this, arguments);
};
})(jQuery);
Thanks in advance

Having had a look at your gallery.js file you have the following function that is called on your fade transition: cleanUp()
In this function you remove the style attribute from your $slides:
$slides.eq(activeNdx).removeAttr('style');
Which is removing the background-image style too. This is then never set again.
After the above line where you remove the styles you may want to then include:
$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).data("background")+")");

Failed to Perform Flipping Box

I have been trying to applying flipping box just like on http://demo.rickyh.co.uk/flipping-crazy-css3/
I try to modified it a little but it doesn't work even i try to copy paste the source code it doesn't work at all.
so where did i do wrong? do i have to install specific javascript?
note: i'm just trying it on jsfiddle
here is the code
Javascript
var effectSpeed = 250;
function loadDemo(){
var vendor = (Browser.Engine.gecko) ? 'Moz' : ((Browser.Engine.webkit) ? 'Webkit' : '');
if(vendor == "Webkit"){
loadWebKit();
}
else if(vendor == "Moz"){
loadFox();
}
}
function loadWebKit(){
var newStyles = new Hash({
'webkitTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
// elements.setStyle("left", "0px");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('webkitTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'webkitTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'webkitTransform': 'skew(0deg, 20deg)'
});
});
});
}
function loadFox(){
$("webkit").getElement("span").innerHTML = "This ones webkit only"
var newStyles = new Hash({
'MozTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
elements.setStyle("MozTransform", "skew(0deg, 0deg)");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('MozTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'MozTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'MozTransform': 'skew(0deg, 20deg)'
});
});
});
}

Here's a simpler, cleaner way
DEMO http://jsfiddle.net/kevinPHPkevin/UC6fK/
$(document).ready(function(){
// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
});

Quicksand margins change when animating

Working on a site
http://lsmcreative.co.nz/
I get a funny bug when using the nav to filter the thumbs. The images do a wierd movement to the left when animating
The container is position relative like the documentation I am not sure what is going on
My code is like this
and pretty much when you click on a button in the menu the thumbs are all of a sudde pushed like 200px to the left and then animate back into place?
// Custom sorting plugin
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
// DOMContentLoaded
$(function() {
// bind radiobuttons in the form
var $btn = $('#navigation ul li a');
// get the first collection
var $projectThumbs = $('#portfolio');
// clone applications to get a second collection
var $data = $projectThumbs.clone();
// attempt to call Quicksand on every form change
$btn.click(function(e) {
e.preventDefault();
if($(this).data("type") == "all"){
$btn.removeClass("selected");
$(this).addClass("selected");
var $filteredData = $data.find('li');
} else {
$btn.removeClass("selected");
$(this).addClass("selected");
var $filteredData = $data.find('li[data-type~=' + $(this).data("type") + ']');
} // end $btn.click function
$projectThumbs.quicksand($filteredData, {
adjustHeight: 'auto', // This is the line you are looking for.
duration: 800,
easing: 'easeInOutQuad'
}, function(){
// call js on the cloned divs
$("a.grouped_elements").fancybox();
});
});
});

I fixed it by adding
left:2.9702970297%!important; to the css of the li
and then
#portfolio li:nth-child(3n+1){
margin-left:0;
}

slow performance since chrome 12 [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
The last week when I was on chrome 11 yet, my website run perfectly. Yesterday when I did the new Chrome12 update I noticed that my website was much slower, almost unusable…
Here it is : http://emilevictorportenart.be/
The associated jquery file is :
// copyright Portenart Emile-Victor
if ( (screen.width < 1024) || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || ($.browser.msie) ) {
document.location = "mobile/";
}
;$(document).ready(function(){
//add keyboard span and hide it on the first screen
$('section#content').append('<span class="keyboardUse"><span>MAJ: plus d\'infos<br /> ←→/QD/WA: changer de projet<br /> ↑↓/ZS: changer d\'image</span></span>');
// caching DOM
var $keyboardUse = $('.keyboardUse');
var $headerNavUl = $('header nav ul');
var $navMainBottom = $('.navMainBottom');
var $headerNavSpanRelMore = $('header nav span[rel=more]');
var $headerNavA_Arrow = $('header nav a, .arrow');
var keyboardUseShowFirst = 0;
var clickLinkAllow = 1;
var $header = $('header');
$keyboardUse.hide();
// links
$('a[rel=external]').live('click', function() {
window.open(this.href);
return false;
});
// height navigation Background pattern
$navMainBottom.height(1000).css('top','-723px');
$header.find('h1 a').css('margin-top','65px');
// ul navigation slide when hover (1st time) & click next
$headerNavUl.hide();
$headerNavSpanRelMore.one('mouseover', function(){
$headerNavUl.slideDown(200);
$navMainBottom.animate({'top':'-800px'},200);
$(this).addClass('moreRotated');
});
$headerNavSpanRelMore.click(function(){
$(this).toggleClass('moreRotated');
if($headerNavUl.is(':visible')){
$navMainBottom.animate({'top':'-723px'},200);
} else {
$navMainBottom.animate({'top':'-800px'},200);
}
$headerNavUl.slideToggle(200);
});
// leave project animation
$('header nav a, .arrow').live('click', function(){
if(clickLinkAllow === 1){
$('section h1').css('z-index','-1').animate({'left':'-1000px'/* , 'top':'2000px' */},800);
$('article').css('z-index','-1').animate({'left':'-965px', 'top':'2000px', 'opacity':'0'}, 750);
$('.arrow').fadeOut(300);
$('header h1').animate({'left':'0', 'opacity': '1'}, 700);
var $keyboardUse = $('.keyboardUse');
if(keyboardUseShowFirst === 0){
$keyboardUse.addClass('full').fadeIn(200);
setTimeout(function(){
$keyboardUse.removeClass('full');
}, 10000);
keyboardUseShowFirst = 1;
} else {
$keyboardUse.show();
}
}
});
// caption
$('article span[rel=more]').live('click', function(){
$(this).toggleClass('moreRotated');
$('article .description').slideToggle(200);
});
// keyboard
//stop keyboard action when input/textarea are on focus
var inputTextareaFocus = 0;
$('input, textarea').live('focus', function(){
inputTextareaFocus = 1;
});
$('input, textarea').live('blur', function(){
inputTextareaFocus = 0;
});
$(document.documentElement).keyup(function (event) {
if(inputTextareaFocus === 0){
if (event.keyCode == 37 || event.keyCode == 81) { //left -- q
$('header nav ul a[rel=active]').parent().prev().find('a').click();
} else if (event.keyCode == 39 || event.keyCode == 68) { //right -- d
$('header nav ul a[rel=active]').parent().next().find('a').click();
} else if (event.keyCode == 38 || event.keyCode == 90) { //top -- 90
$('.naviSquare li[rel=active]').prev().find('a').click();
} else if (event.keyCode == 40 || event.keyCode == 83) { //down --
$('.naviSquare li[rel=active]').next().find('a').click();
} else if (event.keyCode == 16) { //caps (maj)
$('.naviSquare li:eq(0) a').click();
$('article span[rel=more]').click();
}
}
return false;
});
// projeft change
//hide description and start waypoint
function afterload(timeToLoadWaypoint){
var $description = $('.description');
$description.hide();
setTimeout(function(){
var idliNavisquare = 0;
$('article figure img').waypoint(function(event, direction){
if (direction === 'down') {
idliNavisquare++;
}
else {
idliNavisquare--;
}
var $naviSquareLi = $('.naviSquare li');
$naviSquareLi.removeAttr('rel');
$naviSquareLi.eq(idliNavisquare).attr('rel','active');
});
$('body').css({'overflow-y':'scroll', 'overflow-x':'auto'});
//numbers of pictures and add squares
var $articleFigureUlLi = $('article figure ul li');
var nombreCreationLi = $articleFigureUlLi.length;
for (var i = 0; i < nombreCreationLi; i++) {
$articleFigureUlLi.eq(i).attr('id','crea'+i);
}
for (var i = 0; i < nombreCreationLi; i++) {
var tHeightImg4NaviSquare = $('figure li:eq('+i+') img').height();
var tailleHeightNaviSquareFinal = parseInt((tHeightImg4NaviSquare / 700)*10, 10);
var $ulNaviSquare = $('ul.naviSquare');
if(i === 0){
$ulNaviSquare.append('<li rel="active"><a href="#content" style="height:'+ tailleHeightNaviSquareFinal +'px;"></li>');
} else {
$ulNaviSquare.append('<li></li>');
}
}
//allow localscroll on this links
$('ul.naviSquare, .description').localScroll();
$('.arrow').fadeIn(100);
//add links on arrows
var hrefPrevious = $('header nav ul a[rel=active]').parent().prev().find('a').attr('href');
var hrefNext = $('header nav ul a[rel=active]').parent().next().find('a').attr('href');
$('a[rel=prev]').attr('href', hrefPrevious);
$('a[rel=next]').attr('href', hrefNext);
//add share links
var linkPageActive = 'http://emilevictorportenart.be/%23'+window.location.hash.substr(1);
var titrePageActive = $('article h2').text();
titrePageActive = titrePageActive+' from Emile-Victor Portenart Website';
var descriptionPageActive = $('article .description p:eq(0)').text();
descriptionPageActive = descriptionPageActive+' '
var twitterShareLink = 'http://twitter.com/share?url='+linkPageActive+'&via=portenartev&text='+titrePageActive;
var facebookShareLink = 'http://www.facebook.com/sharer.php?u='+linkPageActive+'&t='+titrePageActive;
var gmailShareLink = 'https://mail.google.com/mail/?view=cm&fs=1&tf=1&su='+titrePageActive+'&body='+linkPageActive;
$('a.share.twitter').attr('href',twitterShareLink);
$('a.share.facebook').attr('href',facebookShareLink);
$('a.share.gmail').attr('href',gmailShareLink);
clickLinkAllow = 1;
//contact from http://tutorialblog.org/how-to-create-your-own-ajax-contact-form/
$('#contactForm').submit( function(){
//hide the form
$('#contactForm').hide();
//show the loading bar
$('aside').append('<span class="loadingBar">loading...</span>');
$('.loadingBar').css({display:'block'});
//send the ajax request
$.get('contact_mail.php',{name:$('#name').val(), email:$('#email').val(), message:$('#message').val()},
//return the data
function(){
//hide the graphic
$('.loadingBar').css({display:'none'});
$('aside').append('<span>Merci pour votre mail, vous recevrez une réponse au plus vite.</span>');
});
//stay on the page
return false;
});
}, timeToLoadWaypoint);
}
//if url
if(!window.location.hash){
// animation d'entrée
var $blackLine = $('.black-line');
var $header = $('header');
var $frontContainer = $('.front #container');
$blackLine.css('left','-500px');
$frontContainer.css('top','-1000px');
$('.front .hideNavigation, header nav').hide();
$('header h1, section h1, article').css({'z-index':'-1','left':'-1000px'});
$header.css('background-image','url(img/headerBack41.png)');
$('.header2').css({'top':'-1000px', 'left':'500px'}).show();
setTimeout(function(){
$frontContainer.animate({'top':'0'}, 400, 'easeOutCirc');
$('.header2').animate({'top':'0', 'left':'0'}, 600);
}, 1300);
setTimeout(function(){
$('.front .hideNavigation, header nav').fadeIn(1200);
$('section h1').animate({'left':'0'}, 700);
$('article').animate({'left':'0'}, 800);
$blackLine.animate({'left':'798px'}, 700);
$('.black-line.bl2').animate({'left':'787px'}, 600);
$('.black-line.bl2.bl3').animate({'left':'776px'}, 700);
$header.find('h1').css({'z-index':'10','left':'940px', 'opacity': '0'});
$header.css('background-image','url(img/headerBack.png)');
$('.header2').fadeOut(100);
}, 1900);
}
//chargement du projet en temps normal
$('header nav a, .arrow').live('click', function(e) {
e.preventDefault();
if(clickLinkAllow === 1){
clickLinkAllow = 0;
$('body').css('overflow','hidden');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
var url = $(this).attr('href') + ' article, .arrow';
setTimeout(function(){
$('.load').html('loading...')
.css({'top':'-1000px', 'left':'490px' , 'opacity':'0'})
.load(url, function(){
$('.description').hide();
$('.arrow').hide();
});
}, 750);
setTimeout(function(){
$('.load').animate({'top':'0', 'left':'0' , 'opacity':'1'}, 1000);
}, 1300);
$('header nav a').removeAttr('rel');
var hash = window.location.hash.substr(1);
$('header nav a[href^='+ hash +']').attr('rel', 'active');
afterload(2000);
}
});
//bbq plugin
var clicked = 0;
$(window).bind('hashchange', function () {
var $body = $('body');
$('header nav a, .arrow').live('click', function(){
clicked = 1
});
if(clicked === 1){
clicked = 0;
} else {
//credit http://emanuelfelipe.net/themeforest/ajax-portfolio/
var hash = window.location.hash.substr(1);
var href = $('header nav a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html article, .arrow';
var $header = $('header');
$('.load').css({'top':'0', 'left':'0' , 'opacity':'1'}).load(toLoad, function(){
afterload(200);
});
$keyboardUse.addClass('full').show();
setTimeout(function(){
$keyboardUse.removeClass('full');
}, 10000);
$header.css('background-image','url(img/headerBack.png)');
$('.header2').hide();
$header.find('h1').css('z-index','999');
keyboardUseShowFirst = 1;
}
});
$('header nav a').removeAttr('rel');
$('header nav a[href^='+ hash +']').attr('rel', 'active');
$body.css('overflow-y','hidden');
setTimeout(function(){
$body.css('overflow-y','scroll');
}, 2000);
}
});
$(window).trigger("hashchange");
});
You can find it also here : http://jsfiddle.net/BXcHS/3/
This website is for my last exam in one week and I don't know what to do because it works perfectly on firefox and quite well with Opera.