Jump to content

lisbet

Circle Member
  • Posts

    34
  • Joined

  • Last visited

Everything posted by lisbet

  1. OMG - there is Parallax as a image effect on backgrounds now - no need for code anymore for this one 🤩
  2. 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>
  3. @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.
  4. @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..
  5. 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 😞
  6. Hi, is it not possible to link to a portfolio page? seems that its only possible to link to the whole project..
  7. 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; } } }
  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>
  9. 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?
  10. 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>
  11. 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.
  12. 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>
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.