I'm still in the learning stage of ajax and scripting. I recently stumbled upon this website http://www.maisonbertine.com/ found it very interesting using this script for loading the menu and contents.
I tried to learn and mimic the code on my testing website http://www.ztest.ca but I couldn't get it to work. If it works, it should load the Left Menu and Right Main H1 from www.ztest.ca/en/en.html
The after clicking on the language link, it does not change the url to www.ztest.ca/en/ so I guess the pushState method didn't execute. Also Firefox console is showing POST ztest.ca/en/ [HTTP/1.1 200 OK 209ms].
Below are the current code:
Language selection container:
<div id="container"><aside id="leftsidebar" class="is-white is-left"></aside>
<div class="lang" id="lang">
<div class="lang_logo"></div>
<div class="lang_selection" id="lang_selection">
<ul>
<li>English</li>
<li>Français</li>
</ul>
</div>
</div>
</div>
Script used to perform the TweenMax animation:
<script>window.jQuery || document.write('<script src="/js/libs/jquery-1.11.0.min.js"><\/script>')</script>
<script src="/js/libs/TweenMax.min.js"></script>
<script src="/js/libs/CSSPlugin.min.js"></script>
<script src="/js/script.js"></script>
<script>
$(function () {
if($(document).width()<736){
return false;
}
var tween1 = new TimelineMax();
tween1.add([
TweenMax.to("#lang", 1.3, {delay: 1, z: 0, left: 160, autoAlpha: 1, ease: Expo.easeOut,force3D:true}),
]);
tween1.add([
TweenMax.to("#lang_selection", 0.5, {z: 0, left: 160, ease: Expo.easeOut, force3D:true})
]);
$lang = $('#lang_selection');
$lang.on('click', 'a', function(e){
e.preventDefault();
$a = $(this);
var href= $a.attr('href');
$.ajax({
url:href,
type:'post',
dataType:'json',
success: function(response){
$html = $(response.page.html);
$wrapright = $($html[0]);
var nav = response.mainnav;
$container = $('#container');
$container.prepend($wrapright);
$('#leftsidebar').html(nav);
if(Modernizr.history){
window.history.pushState({href:'/'},'','/');
window.history.pushState({href:href},'',href);
document.title = response.page.seotitel;
}
tween1.add([
TweenMax.to("#lang_selection", 0.8, {z: 0, left: 0, ease: Expo.easeOut,force3D:true})
]);
tween1.add([
TweenMax.to("#lang", 0.8, {z: 0, left: -200, ease: Expo.easeOut,force3D:true})
]);
tween1.add([
TweenMax.to("#leftsidebar", 1.5, {z: 0, left: 0, ease: Expo.easeOut,force3D:true})
]);
tween1.add([
TweenMax.to("#overlay", 0.9, {z: 0, autoAlpha: 1,force3D:true})
]);
tween1.add([
TweenMax.to("#main h1", 2, {z: 0, top: '25%', autoAlpha: 1, ease: Expo.easeOut,force3D:true}),
]);
}
});
});
});
</script>
I think the problem is occurring here:
$lang = $('#lang_selection');
$lang.on('click', 'a', function(e){
e.preventDefault();
$a = $(this);
var href= $a.attr('href');
$.ajax({
url:href,
type:'post',
dataType:'json',
success: function(response){
$html = $(response.page.html);
$wrapright = $($html[0]);
var nav = response.mainnav;
$container = $('#container');
$container.prepend($wrapright);
$('#leftsidebar').html(nav);
if(Modernizr.history){
window.history.pushState({href:'/'},'','/');
window.history.pushState({href:href},'',href);
document.title = response.page.seotitel;
}
Please help me find the mistake I made here. Thank you!
Related
I have some Jquery
I need do call the var called ServicesAnimation when I scroll to main div or section that have div called for example regtangle-blue.
how can do that ?
jQuery(document).ready(function() {
var ServicesAnimation = anime.timeline().add({
targets: ['.box-info', '.regtangle-blue .h2', '.regtangle-blue .h3', '.regtangle-blue .h4', '.services .serv-box', '.how-it-works .h2', '.how-it-works .h3', '.how-it-works .col-md-4'],
translateY: [60, 0],
translateZ: 0,
opacity: [0, 1],
duration: 1600,
delay: anime.stagger(100)
});
});
I'm trying to use getEleementById to display two different elements with two unique IDs on different pages. One is for the main index page and another is for the project page. The code below works on the index page but doesn't work on the project page. But if I get rid of the call in animation1, then it works on the project page. Any reason why document.getElementById can only be used once even though it's being called on two unique ids?
function displayTitle(id) {
var elem = document.getElementById(id);
elem.style.display = "block";
}
function animation1() {
displayTitle("main-bnb-logo");
var title1 = new TimelineMax();
title1.staggerFromTo(".title span", 0.5,
{ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
{ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
}
function animation2() {
displayTitle("project-title-content-wrapper");
var title2 = new TimelineMax();
title2.staggerFromTo(".project-title span", 0.5,
{ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
{ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
}
$(document).ready(function() {
animation1();
}, 1000);
$(document).ready(function() {
animation2();
}, 1000);
Problem solved. Like Tapas said in the comments, I needed to do a null check on the displayTitle function:
Updated code:
function displayTitle(id) {
var elem = document.getElementById(id);
if (elem == null) {
console.log('no id selected');
} else {
elem.style.display = "block";
}
}
function animation1() {
displayTitle("main-bnb-logo");
var title1 = new TimelineMax();
title1.staggerFromTo(".title span", 0.5,
{ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
{ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
}
function animation2() {
displayTitle("project-title-content-wrapper");
var title2 = new TimelineMax();
title2.staggerFromTo(".project-title span", 0.5,
{ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
{ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
}
$(document).ready(function() {
animation1();
animation2();
}, 1000);
See Fiddle: I am trying to render a background image on a FabricJS polygon, but for some reason the scale of the pattern is different on different devices / browsers for no obvious reason.
Here is the code:
HTML:
<canvas id="tcanvas" width="200" height="200" />
JavaScript:
function testPattern(id) {
var url = 'https://dummyimage.com/200x200/aff/000',
tCanvas = new fabric.Canvas(id);
new fabric.Image.fromURL(url, function(img) {
var tPoints = [{
x: 0,
y: 0
},
{
x: 0,
y: 200
},
{
x: 200,
y: 200
},
{
x: 200,
y: 0
}
];
var tPatternWidth = 200;
var tPatternHeight = 200;
var tImgXScale = tPatternWidth / img.width;
var tImgYScale = tPatternHeight / img.height;
img.set({
left: 0,
top: 0,
scaleX: tImgXScale,
scaleY: tImgYScale
});
var tPatternSourceCanvas = new fabric.StaticCanvas();
tPatternSourceCanvas.add(img);
tPatternSourceCanvas.renderAll();
var tPattern = new fabric.Pattern({
offsetX: 0,
offsetY: 0,
source: function() {
tPatternSourceCanvas.setDimensions({
width: tPatternWidth,
height: tPatternHeight
});
tPatternSourceCanvas.renderAll();
return tPatternSourceCanvas.getElement();
},
repeat: 'no-repeat'
});
var tImgPoly = new fabric.Polygon(tPoints, {
left: 100,
top: 100,
originX: 'center',
originY: 'center',
fill: tPattern,
objectCaching: false,
selectable: false,
stroke: 'red',
strokeWidth: 1
});
tCanvas.add(tImgPoly);
tCanvas.renderAll();
});
}
testPattern('tcanvas');
This is what I see on my desktop Chrome:
... and this what I see on a (Samsung) tablet Chrome:
How can I fix the code so that the both patterns look the same, i.e., like the first one?
It s a retina support side effect.
When initializing the canvas for the Pattern, please pass as option:
enableRetinaScaling: false
var tPatternSourceCanvas = new fabric.StaticCanvas(null, {enableRetinaScaling: false});
This will avoid fabric trying to enhance the canvas twice.
I've been trying to resolve my problem by reading other topics linked to gsap / on.resize issues but i didnt found any proper answer.
When I open the menu, the logo is working correctly and set it's position to center of the screen { y:0 } . However, once the menu is closed i cant manage to force the logo back to it's original position { y:-logoPosition +20 }. The values are not updating on "menuclosing state".
I must be messing with var updates but i'm clueless to make this work.
Hope someone can help me !
Thanks in advance :)
Jsfiddle
// Scope
var menuFrame = $('#menu-frame');
var menuH = window.innerHeight;
var navH = $("nav").height();
var logoH = $("#logo").height();
var logoPosition = (menuH -navH)/2;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logoDiv = $('#logo-divider');
var navList = $('ul#menu-nav li');
// New Gsap timeline
var menuAnim = new TimelineMax({ paused: true, reversed: true });
// Animation when toggle clicked
menuAnim.fromTo([menuFrame], 0.6, {backgroundColor : 'rgba(0, 0, 0, 0.01)'}, {backgroundColor : 'rgba(250, 250, 250, 1)', ease: Power2.easeInOut},0.1);
menuAnim.from([logo], 0.6, { y:-logoPosition +20, ease: Power2.easeInOut });
menuAnim.fromTo([logoDiv], 0.6, { width: 0}, { width: '20%', ease: Power2.easeInOut });
menuAnim.staggerFromTo(navList, 1.2, {scale:0.5, opacity:0, delay:0.5}, { scale:1, opacity:1, ease:Elastic.easeOut, force3D:true}, 0.2);
// Reverse anmiation on click
toggleMenu.on('click', function() {
$(this).toggleClass('active');
menuAnim.reversed() ? menuAnim.play() : menuAnim.reverse();
});
// If toggle is active logo position is middle off the frame
$(window).resize(function(){
if ($(toggleMenu).hasClass('active')) {
menuH = window.innerHeight;
navH = $("nav").height();
logoH = $("#logo").height();
logoPosition = (menuH -navH)/2;
var menuAnim = new TimelineMax({ paused: true, reversed: true });
menuAnim.from([logo], 0.6, { y:0 }, { ease: Power2.easeInOut });
menuAnim.pause()
}
// If toggle is not active logo position = top of the frame
else {
menuH = window.innerHeight;
navH = $("nav").height();
logoH = $("#logo").height();
logoPosition = (menuH -navH)/2;
var menuAnim = new TimelineMax({ paused: true, reversed: true });
menuAnim.from([logo], 0.6, { y:-logoPosition +20 }, { ease: Power2.easeInOut });
menuAnim.pause()
}
});
I'd like to have array slide_widths with widths of all .slide elements:
$( document ).ready(function() {
var $slider = $('.slider ul');
var slider_width = $slider.width();
var $slides = $('.slide');
var slide_widths = $.map($slides, function(slide) {
return slide.getBoundingClientRect().width;
});
console.log(slide_widths);
});
I get different results when I refresh my page:
1. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 0, 0, 0, 0, 0, 0, 0, 0]
2. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 155.515625, 180, 180, 176.03125, 0, 0, 0, 0]
I guess this map function is still working when console.log outoputs an array? How can I avoid it ?
It would seem that your function is grabbing the element widths before they're actually loaded, and so the not-yet-loaded elements are returning widths of 0.
Try using $(window).on("load", function() { instead of $(document).ready(function() {
$(window).on("load" will wait for all elements on the page to load, whereas $(document).ready will not.