Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

coverkitchen

Member
  • Posts

    19
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Site URL: https://coverkitchen.com/ Hi, Everyone I have managed to add a Read More link to a text using a combination of HTML in a code block as text and adding a Jquery code to the page. The problem is that the Jquery ignores line breaks and styles applied in the HTML code. So the <br> and <i> will not work after the Jquery script loads. Is there any way to fix this adding a code line to the Jquery? If this is fixed, I am sure many users will find this code to be very useful. See my current Jquery for the Read More link is below: Many thanks in advance! <script> function AddReadMore() { //This limit you can set after how much characters you want to show Read More. var carLmt = 250; // Text to show when text is collapsed var readMoreTxt = " ... Read More"; // Text to show when text is expanded var readLessTxt = " Read Less"; //Traverse all selectors with this class and manupulate HTML part to show Read More $(".addReadMore").each(function() { if ($(this).find(".firstSec").length) return; var allstr = $(this).text(); if (allstr.length > carLmt) { var firstSet = allstr.substring(0, carLmt); var secdHalf = allstr.substring(carLmt, allstr.length); var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>"; $(this).html(strtoadd); } }); //Read More and Read Less Click Event binding $(document).on("click", ".readMore,.readLess", function() { $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent"); }); } $(function() { //Calling function after Page Load AddReadMore(); }); </script> <style> .addReadMore.showlesscontent .SecSec, .addReadMore.showlesscontent .readLess { display: none; } .addReadMore.showmorecontent .readMore { display: none; } .addReadMore .readMore, .addReadMore .readLess { font-weight: bold; margin-left: 2px; color: black; cursor: pointer; } .addReadMoreWrapTxt.showmorecontent .SecSec, .addReadMoreWrapTxt.showmorecontent .readLess { display: block; } </style>
  2. @tuanphanThe Log in item is created using javascript with Sentrylogin. I am not sure if that makes it more difficult to move.
  3. Hi @tuanphanYes, I still need help. I could not figure it out by myself. Many thanks in advance!
  4. Site URL: https://coverkitchen.com Hi All, I hope you are doing well and safe! I would like to move "login", the last item in my navigation menu header, to the right, next to the social media icons. I would like to be able to adjust the distance to the social media icons. Is that possible? I attach a screenshot to show clearly what I would like to do. Many thanks in advance!
  5. Hi, Guys I just figured out how to do it. Easier than expected. I just tweaked the CSS as it follows: .has-clickthrough { img { filter:grayscale(100%); opacity: .5 !important;
  6. Site URL: https://coverkitchen.com/ Hi, All I am using version 7.1 and have come up with a good way to add a secondary gallery to facilitate navigation in a portfolio section, but need help to refine it. As you can see from the screenshots (Screenshot #2 illustrates what I would like to do) on the subpage of a portfolio section, I have added a secondary gallery section that replicates the portfolio section page. This gallery replaces the navigation arrows, with a far more practical and visual way to navigate through other projects within the same portfolio page, book covers in my case. It also saves the need to go back to the main portfolio page to see other projects. I have added a code that changes the opacity of this secondary gallery to 50% and also a black & white filter so that the viewer focuses on the currently viewed project at the top. The images change to 100% opacity and full color on hover. However, it would be best if the currently viewed project remains at 100% opacity and in full color. That way it would convey that this is the project you are currently viewing. My question is: would be possible to add a code that keeps the viewing project on the secondary gallery with 100% opacity and in full color? The image viewed on the portfolio section at the top (2 columns) and on the secondary gallery (6 columns) at the bottom share the same URL as they are the same project. I am not sure whether a CSS tweak would suffice or if a more sophisticated code needs to be done? The idea is that whenever a project is actively viewed at the top, it appears also at full color/opacity at the bottom. The password of my website is: CK2020 This is the current code: @media screen and (min-width:768px) { .gallery-grid-wrapper { img { filter:grayscale(100%); opacity: .5 !important; } img:hover { opacity: 1 !important; filter: none !important; transition: .8s } } } @media(max-width:800px) { .portfolio-grid-basic .grid-item .grid-image :hover { opacity: 1; } Many thanks in advance! Xavier
  7. @rwp Good news, I managed to figure it out myself. Many thanks again for your outstanding help!
  8. @rwp Just fixed the password: CK2020 Let me know how it goes.
  9. @rwp You rock! Thank you so much again. It works perfectly. Now, if you don't mind to go a step further, would be possible to do the following? 1– On hover, all items in the dropdown navigation folder behave the same way: as the header and the footer menus (#99999 by default, black on hover and underlined & black when active. The idea is to provide the entire website link navigation with a global styling. – This request is a bit more tricky. Would be possible to have the underline everywhere on the website a bit separated from the item? (same as shown on the header menu). That is the fashion by default by Squarespace underlines links but I suspect that is different from the underline decoration... Many thanks in advance! Xavier
  10. @rwp My apologies as I hadn't seen your reply until now. I have activated replies notification to ensure that doesn't happen again. A million thanks for this amazing code! It's very clever. I have put it in the footer code injection section and it works well. However, the links don't remain activated after I visit any project within that genre. Each genre is created as a portfolio page. Would it be possible to show activated links when inside a portfolio subpage? For instance, if I click on the project "Written in Black" the URL is: /literary/written-in-black Could the code be tweaked for the URL to include all the subpages within each genre? And a last question. I would like to match the styling of the footer secondary navigation with the header navigation menu (all links in light grey (#999999) as default color and in black on hover). This is the code I put to stylize the header: .header-nav-item a { color: #999999 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: #000000 !important; } /* Nav item active color */ .header-nav-item--active a { color: #000000 !important; } This is the password to access, just in case you need to look into it: CK2020. I can't thank you enough for your valuable assistance! Warm regards, Xavier
  11. @creedonYou are awesome. Can't thank you enough for this!
  12. @creedon It works perfectly and it looks beautiful! Thank you for your amazing work. Would be possible to replicate this for mobile view? Currently, the line does not show with hamburger menu. I have a code that aligns the menu to the right on mobile, not sure if that needs to be taken on account. Having the separator for mobile too would be perfect!
  13. @creedonSure, here is the password: coverkitchen2020 Let me know how it goes. Many thanks again!
  14. @creedon Many thanks for helping out with this. However, the code adds a separator between each item. Instead, I need to target a specific item. As you can see from the screenshot, I would like to add a line between "Comedy" and "Interior". Would that be possible?
  15. Site URL: https://coverkitchen.squarespace.com Hello, how can I add a separator line between specific items in a navigation drop drown menu? I would like to adjust the space between the line and the items too. See attached a screenshot of what I am trying to achieve. Many thanks in advance! Xavier
×
×
  • Create New...