lisbet

OMG - there is Parallax as a image effect on backgrounds now - no need for code anymore for this one 🤩

I also just experienced that the background image disappeared. I removed the parallax code and its back again, but now there is no parallax. Does someone know a new code for this that works? I removed this code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

@tuanphan I figured out how to make the hover with the poster layout in image and a css you have posted in other question - thank you. but how would the code look like if i would like the background overlay to be semi transparent white and the text dark grey? and then there is still the question if i can link to the subpage from an image or I have to build these pages i have made again.

@tuanphan Yes i know - the problem is that I have a lot of pages on a 7.0 site that i would like to move to a new 7.1 site. I have discovered the squarewebsites tool that makes this possible - but i cannot copy the content to a portfolio subpage. So now i just tried what you wrote - to add the old style image block - that works thank you 🙂 BUT it is not so stylish nice as the portfolio hover that makes a full overlay with the text centered. Is there a way to get a nice hover on the old style images? Plus is there a way that I can link from an image to the portfolio subpages that i have already created? Has been quite a job so far..

I would love to make a portfoliopage a bit like this http://www.tinasmithdesign.com/ I like on the front page that it change a bit between one image and two beside each other. But the hover on image is kind of important - has squarespace removed this feature? i dont seem to find this posibility anymore 😞

Hi, is it not possible to link to a portfolio page? seems that its only possible to link to the whole project..

I just added the code to the ccs and then I got up the mexican and american flags. but then i went to the advanced code injection and changed the flag names and now i dont get any flags. can you please check if this code is right: Advanced code injection - HEADER: <script> /*setup language switcher*/ $('body').prepend('<div class="language"><a href="/Dk/hjem" class="lang-dk">Dansk</a> | <a href="/en/home/" class="lang-en”>English</a></div>'); </script> Advanced code injection - footer: (now i just added all the code so you can see if any other code is conflicting) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = 'dk'; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == "dk") { $('a[href="/"]').attr("href", "/dk/hjem/"); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); /* SETUP LANGUAGE SWITCHER */ $('body').prepend('<div class="language"><a href="/dk/hjem" class="lang-dk"><span class="flag-icon flag-icon-DK"></span></a> <a href="/en/home/" class="lang-en"><span class="flag-icon flag-icon-US"></span></a></div>'); }); </script> CCS design: /*setup language switcher*/ .language { color: #fff; position: absolute; top: 10px; right: 10px; z-index: 99999; a { color: #fff; &:hover { opacity: 0.8; } } }

Dear Creedon. I would also really like to do so but where is it I should ad this code? I tried in the code injection but nothing happens. <script> /*setup language switcher*/ $('body').prepend('<div class="language"><a href="/dk/Hjem class="lang-dk">Dansk</a> | <a href="/en/home/" class="lang-en">English</a></div>'); </script>

aah - FINALLY 🤩 THANK YOU SO MUCH. Now I just need to figure out the language switcher. its not there. But I was thinking just adding a button on the front page for danish and english home. But where was it supposed to be situated when having added the code?

Hi creedon, it still does not work 😞 i have now copyed it into textedit. Is it becourse i changed the /en/home to /dk/hjem and es/in... to uk/home ? All the pages have these endings. but when i go to smykbar.dk/uk/home the menu is still the danish and there is no language switcher. here is my new code: <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = ‘dk’; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == “uk”) { $('a[href="/"]').attr("href", “/uk/home/“); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); /* SETUP LANGUAGE SWITCHER */ $('body').prepend('<div class="language"><a href="/dk/hjem" class="lang-dk”><span class="flag-icon flag-icon-us"></span></a> <a href=“/uk/home/“ class="lang-uk”><span class="flag-icon flag-icon-mx"></span></a></div>'); }); </script>

Hi creedon Thank you. I have not used any word processor - i did put it into indesign in order to change the /en to /dk. but maybe this is where it happened. I will try to add it to textedit instead.

Site URL: https://www.smykbar.dk/ Hey guys, I've followed the tutorial of https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template and replaced everything of /en with /dk as danish is the main language and /es/ with /uk I dont get any language switcher buttons up - what am i doing wrong? here is the code i added: <link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = ‘dk’; var lang = location.pathname.split(“/”)[1]; var defaultClass = ‘lang-’+defaultLanguage+’’; var itemParent = “nav [class*=’collection’],nav [class*=’folder’],nav [class*=’index’],nav [class*=’group’]”; if (lang == “” || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $(‘a[href=”/”]’).addClass(‘lang-’+defaultLanguage+’’).parents(itemParent).addClass(‘lang-’+defaultLanguage+’’); $(‘nav a:link:not([href^=”http://”]):not([href^=”https://”])’).each(function () { var langType = $(this).attr(‘href’).split(“/”)[1]; var multiLanguageClass = ‘multilanguage lang-’ + langType + ‘’; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $(‘nav button’).each(function () { var langTypeFolder = $(this).attr(‘data-controller-folder-toggle’).split(“/”)[0]; var multiLanguageClass = ‘multilanguage lang-’ + langTypeFolder + ‘’; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == “uk”) { $(‘a[href=”/”]’).attr(“href”, “/uk/home/”); } /* ADD EXCLUSION NAV ITEMS */ $(‘.exclude-me,.exclude-me a’).addClass(‘exclude’); $(‘.sqs-svg-icon--list a,.SocialLinks-link’).addClass(‘exclude’); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $(‘.multilanguage:not(“.lang-’+lang+’,.exclude”)’).remove(); /* SETUP LANGUAGE SWITCHER */ $(‘body’).prepend(‘<div class=”language”><a href=”/dk/hjem” class=”lang-dk”><span class=”flag-icon flag-icon-us”></span></a> <a href=”/uk/home/” class=”lang-uk”><span class=”flag-icon flag-icon-mx”></span></a></div>’); }); </script>

Hi, I am building a site for a client. They want a lot of buttons on the top of the page that will work as anchor links to content on the page. however when I set them up the space between the buttons varies quite a lot and I cannot get them to be the same. Is there a work around on this issue?