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

Search the Community

Showing results for tags 'jquery'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Topics
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Topics
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 31 results

  1. Site URL: https://www.meridianacademy.org/division3-humanities/2020/5/6/civil-rights-quilt I'm trying to add the elevateZoom jquery plugin (https://www.elevateweb.co.uk/image-zoom/) to my site. I'm then trying to call it for a specific image on this page: https://www.meridianacademy.org/division3-humanities/2020/5/6/civil-rights-quilt. I've uploaded the plugin as a link and added it to my site's head via code injection. I then called it on the page via a codeblock: <script> $(document).on('ready', function () { $("#block-yui_3_17_2_1_1588791147485_100779").elevateZoom({ zoomType: "inner", cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 750 }); }); </script> But it does not seem to be working. Any help would be much appreciated. Thanks!
  2. Site URL: https://www.seanhoyt.com/giftshop/magnolia-pillows Hello programmers, In the commerce settings, I can add variant columns for things like shirt colors, shirt size, etc. I'm attempting to make "color" easier to choose for the visitor by reading the colors and representing them as colored, selectable boxes below the drop-down selector. I have most of it working except for the trigger to change the variant image. Using jQuery to: read the Select options (done) make squares, style them with the color (done) add links to the color squares that change the select option and select text (done) change the color square focus based on the normal option selections (done) trigger the variant image change (I'M STUCK HERE) What triggers the listener that fades in the correct variant image? I can confirm that the 'data-text' are changing to the correct color names. https://www.seanhoyt.com/giftshop/magnolia-pillows Thanks all! Sean Screen Recording 2020-05-04 at 1.53.08 PM.mov
  3. Site URL: http://www.brandyglows.com Hello, everyone! This seems to be an unusual problem, as I haven't seen anyone else ask about it. I've been working on a site which features a sticky navbar and a mega menu dropdown. I don't have access to the HTML, so I'm having to use a lot of pseudo elements and some jQuery to get things right. Here's the dilemma: due to limitations in the CMS platform, I'm breaking this template into pieces and putting it back together again. Right now, that means I've taken one of the CMS-managed footer layouts and appended it to the header navbar to be used as a dropdown for a full-width mega menu. This worked well enough at first, but only using position: fixed to get the centering right. A few features later, the navbar is sticky, it resizes and displays a logo on scroll, and long story short, the position: fixed mega menu looks like a detached appendage when viewed further down the page, jutting out of the middle of the viewport. I am thinking I need a position: absolute solution, to tether it back to its navbar brethren. But centering it at width: 100vw is proving to be a challenge. When I resize the window, it gaps left and right, and clearly loses its center. After poking around, I'm realizing that it's caused by the 100vw mega menu div being "nested" inside a roughly 30px navbar element which is arbitrarily placed, and not centered. I've seen plenty of great answers to absolute centering here, which are brilliant, but don't speak to the problem of centering a large absolute div in a small relative parent, and maintaining center on resize when the parent is not centered to begin with. Is there a way around this? Thanks for having a look, if you did so. The CSS: /* Frankenmenu */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder { padding: .65rem 0 0 0; box-sizing: border-box; visibility: hidden; margin-left: -432.5px; height: auto; width: 100vw; position: absolute; left: 50%; top: 3.05rem; letter-spacing: 0; line-height: 1.5rem; box-shadow: inset 0 .15rem .15rem -.10rem rgba(0, 0, 0, 0.1), 0 .05rem .25rem 0 rgba(0, 0, 0, 0.1); } /* Extend Frankenmenu hitbox */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder::before { content: ""; display: block; height: 1rem; position: relative; top: -.5rem; width: 100%; } /* Reveal on hover */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder { visibility: visible; } /* Hide template menu on hover */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder > a { display: none; } The site: URL — http://www.brandyglows.com P/W — 'temp'
  4. Site URL: https://www.susanchalkermassage.com/ Hi Circle, I want to make my whole summary item div clickable. You'll see on the website its the summary items under modalities. (summery item png attached) I have tried the following <script> Y.on('domready', function(){ Y.one('.sqs-block-summary-v2 .summary-item').on('click', function(e){ window.location = $(this).find("a").attr("href"); return false; }); </script> and this $(".summary-item").click(function() { window.location = $(this).find("a").attr("href"); return false; }); nothing is happening! Thanks for reading.
  5. Site URL: https://www.susanchalkermassage.com/ Hi Guys, I have added code in my header to link my folders in my navigation to an anchor on my homepage as I have created a one pager. Only the blog ,contact form and from Lomi Lomi in the dropdown of massages all goes to its own page. The issue I am having is ....It works at first as you will see when you go to the site https://www.susanchalkermassage.com/ but as soon as I Click the Logo to go to homepage and try and click on the Header links (Say I go to the About page, it says "This folder does not contain any pages."). Its also not linking on mobile at all. Did I add something wrong in my code or am I missing something. <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <!-- Redirecting Testimonial on nav --> <script> Y.on('domready', function(){ Y.one('nav a[href="/testimonial"]').on('click', function(e){ e.preventDefault(); e.stopPropagation(); window.location = 'https://www.susanchalkermassage.com/#testimonial-home'; }); }); </script> <!-- Redirecting About on nav --> <script> Y.on('domready', function(){ Y.one('nav a[href="/about"]').on('click', function(e){ e.preventDefault(); e.stopPropagation(); window.location = 'https://www.susanchalkermassage.com/#susan'; }); }); </script> <!-- Redirecting Individualized Massage on nav --> <script> Y.on('domready', function(){ Y.one('nav a[href="/individualized"]').on('click', function(e){ e.preventDefault(); e.stopPropagation(); window.location = 'https://www.susanchalkermassage.com/#individualized-massage'; }); }); </script> <!-- Redirecting Location on nav --> <script> Y.on('domready', function(){ Y.one('nav a[href="/location"]').on('click', function(e){ e.preventDefault(); e.stopPropagation(); window.location = 'https://www.susanchalkermassage.com/#location-address'; }); }); </script> <!-- Redirecting Massages on nav--> <script> Y.on('domready', function(){ Y.one('nav a[href="/rates"]').on('click', function(e){ e.preventDefault(); e.stopPropagation(); window.location = 'https://www.susanchalkermassage.com/#massage-rates'; }); }); </script> <!-- Redirecting massages page --> <script> Y.on('domready', function(){ Y.one('nav a[href="/massages"]').on('click', function(e){ e.preventDefault(); e.stopPropagation(); window.location = 'https://www.susanchalkermassage.com/#massage-modalities'; }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> function anchorLinks(){ Y.all("a.Mobile-overlay-nav-item").on('click', function() { Y.one('body').removeClass('is-mobile-overlay-active'); }); Y.all("a.Mobile-overlay-folder-item").on('click', function() { Y.one('body').removeClass('is-mobile-overlay-active'); }); if(!Y.one('.collection-type-index')){ Y.all(".Mobile-overlay-nav--primary .Mobile-overlay-nav-item:not(.Mobile-overlay-nav-item--folder')").each(function(){ this.on("click", function(){ var newURL = "http://"+window.location.host +(this.getAttribute('href')); window.location.href = newURL; }); }); } } function scrollToURLAnchor(){ setTimeout(function(){ if(window.location.hash){ $('html, body').animate({ scrollTop: $(window.location.hash).offset().top }, 600, function () { }); } }, 700); } Y.on('domready', function(){ anchorLinks(); scrollToURLAnchor(); if(window.location.hash != ''){ $('a[href*="#"].Mobile-overlay-nav-item').on('click', function(){ var newURL = 'http://'+window.location.host +$(this).attr('href'); window.location = newURL; }); } }); window.addEventListener('mercury:load', anchorLinks); window.addEventListener('mercury:load', scrollToURLAnchor); </script>
  6. Hello, I created a web page using Squarespace 7.1 that has several carousels that have CSS display:none on page load. I then have jQuery code that toggles those blocks on/off when some type of widget is selected. The thumbnails for those blocks are not correct once they are turned on - the images are stretched and are not the correct thumbnail size. If I change the code and have the blocks start as display:block on page load, then use the jQuery widget to toggle the images are fine. The problem only happens when the blocks are initially hidden with display:none. I'm new to squarespace but I'm thinking maybe it's some type of issue where the imageloader is not pre-loading the thumbnails or something since those carousel blocks are gone. If I need to trigger the load of the thumbnails for the hidden elements when the event fires ....well..i have no idea how to do that. Can anyone assist? Here's a super simplified version of my code - still illustrates the issue. Thanks! <script> $( document ).ready(function() { $("button").click( function( event ) { $(".sqs-block-summary-v2").toggle(); }); }); </script> <style> .sqs-block-summary-v2 { display: none; } </style> <button> press me </button>
  7. I'm currently in need of adding a streaming radio player to my site from Code Canyon. the code has 2 sections: 1st section: <div id="myradiodivcontainer" style='height:65px; width:100%; -webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border: 0px none rgb(255, 255, 255);'> <div style="overflow:hidden; height:0px; width:0px;"><a href="https://www.flashradio.info" title="native html internet radio player plugin">NATIVE INTERNET WEB RADIO PLAYER PLUGIN FOR SHOUTCAST, ICECAST AND RADIONOMY</a> powered by <a href="https://www.sodah.de" title="wordpress webdesign mainz">Sodah Webdesign Mainz</a></div> </div> 2nd Section: <script> $("#myradiodivcontainer").flashradio({ token: "hidden", userinterface: "small", backgroundcolor: "", themecolor: "#ff0000", themefontcolor: "#ffffff", startvolume: "100", radioname: "Sphere Radio", scroll: "auto", autoplay: "true", useanalyzer: "fake", analyzertype: "4", usecover: "true", usestreamcorsproxy: "false", affiliatetoken: "1000lIPN", debug: "false", ownsongtitleurl: "", radiocover: "", songgooglefontname: "", songfontname: "", titlegooglefontname: "", titlefontname: "", corsproxy: "php", streamprefix: "", mountpoint: "", radiouid: "", apikey: "", radiojar: "nu9cq4mt92quv", streamid: "1", streampath: "/live", streamtype: "radiojar", streamurl: "http://stream.radiojar.com/nu9cq4mt92quv", songinformationinterval: "5000", }); </script> I have read that I should add code for jquery library to make the player function and regardless where I add the library code, it's not working. I've tried the global header and footer. I've also tried adding the code on the specific page we want to use (http://www.thesphere.tv/radio); still the code block will not populate the radio player. I have tried different variations of jquery library: src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> or <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> Same issue. Perhaps I'm not adding the div code to the right block or place or the script code is not going into the right place. I'm lost. Any help would be appreciated. Thanks!
  8. Site URL: https://dallas.whistlebritcheschicken.com/dallas-whistle-britches-dallas-food-menu New to this and don't know how to even search for this type of thing. Is there a term for filtering text blocks like this link I'm sharing? I can only think of accordion menus or universal filter plugins, but what I'd be using it for is a text-based food menu on a single page. Meaning, it's not a product or blog post with a category I could filter from. Attaching screenshot as well. Thanks!
  9. I want to apply this effect to a gallery and site header image: https://sarathsaleem.github.io/grained/ How would I go about this and target only specific elements? Appreciate the help!
  10. Site URL: https://jolsonweddings.com/stories I'm looking for a way to target and replace commas in my blog summery block, so that the metadata below the title displays as "Destination Wedding" instead of "Destination, Wedding". I'm hoping there's a way to target and replace the comma with some kinda of script, I was able to do something similar with my homepage using the following code: Can't seem to do the same with the Blog Summary though, anyone have any ideas?
  11. Site URL: http://picknmix.squarespace.com Hi All, I am trying to figure out how to use the announcement bar on my site to trigger the marketing popup. I.e., I have the popup initially set to trigger after 5 seconds, explaining the "How it works" for the site - but once they close it, I would like them to later be able to trigger the popup again manually, by clicking on the announcement bar I have set up which also reads "How it works" as a prompt. I have gone through every forum under the sun and can't seem to find a way to manually trigger the popup on click. Any help would be hugely appreciated! Thanks, Ash
  12. Hi everyone, I've browsed the web looking for and trying different solutions to replacing "Read more", "Next", "Previous" and other sorts of default texts in my template. None of them worked for me using the Mojave template. In the end I figured out using text.replace with jQuery would work. So I want to share my solution. First you have to include jQuery in your template by going to Settings > Advanced > Code Injection Paste this in the header injection: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js></script> After this you need to find the target class for the text you want to replace, in my template it was ".BlogList-item-readmore". Then add the following code to your footer injection: <!-- Start of replace "Read more" --> <script> $(".BlogList-item-readmore").text(function () { return $(this).text().replace("Read More", "Replace me"); }); </script> <!-- End of replace "Read more" --> This means that if the div, span, section or whatever you target by class, contains the text "Read more", it will be replaced with "Replace me". Hope this helps someone :)
  13. I'm looking to create an accordion that will expand/hide content when the user clicks on 1 of 6 icons in a row. The icons serve as buttons essentially, with an active, hover and inactive state. I'm using the Brine template. Here are the functions I need: The icons have a text label below them (likely H3 text). Icons have an active, hover, and inactive state. The accordion will automatically hide whatever active content is showing when the user clicks a different icon. The content that would show/hide below would include an image with a header and text to the side of it for each icon. I want the icons to be in a single row until the screen size gets to mobile widths so that the content that shows on the user's click always falls below the row of icons. This means that as the screen width narrows, the icons and text likely need to scale down so they fit in a single row on tablet screen widths. On mobile, I want the icons and text to stack and have the content be revealed below each icon (similar to the example image in the following topic, except the + icon would be my icons: I'm trying to create all of the various content blocks so a coder can go in and create the jquery to enable all the behaviors, but I need to know what kind of content blocks to use. If I just use image blocks with text blocks below them for each icon, I don't think I can keep the icons in a single row or scale things according to the screen width. If I use a gallery or summary block, I don't know how the active/hover/inactive states could be implemented. If anyone who has done something similar can advise me on the content blocks to use to get all of the above functionality, that would be very helpful. For context, the page I'm trying to implement this on is here: https://www.superiorfresh.com/organic-greens. Under the header "Good for You, Good for the Planet" there are 6 images with a header/paragraph below them. I would replace those with the row of icons, and then clicking would reveal the image and paragraph below. I've also attached some images of what I'm hoping it will look like when complete.
  14. hi there, I have been editing this site over last week, and figuring things out as i go along. Today when i'm finally happy with the bare bones of the site and was planning to start adding and editing content i realize my accordion menu code blocks are to working. site: https://e-kytex.com/items code originally used: https://codepen.io/brenden/pen/Kwbpyj i have had zero problems with these working until now, and i am honestly stumped as to what exactly is interfering.
  15. I am using source code (not iframes or scripts) from Jotform to place forms in code blocks on my page, but whenever I do this on Squarespace 7.1 (not a problem in earlier versions), I now see a litany of console errors when I load the page, and I lose the ability to edit the page, forcing me to delete the page to redo my work. It also removes images from the page, though the div remains. I have jQuery placed in the global site header so I have access to its selectors. When I try to use jquery selectors on the console on jotform pages, they also break. Below are the errors I see in console: Any advice anyone might have to solve this would really help me out. I appreciate any guidance I can receive.
  16. Hello there, I have written a javascript with some jQuery to call an api and get some data to be rendered when a user clicks on a specific page. I have put this code inside the header of code injection section. But the problem is the script seems to execute only when user access the site the first time, not when they are accessing that specific page. Can anyone be able to help me out to have a workaround to this problem?
  17. Hi all, Site URL: https://www.brookebuilt.com/ The home page contains a gallery. 2 images have description. On select images, there is a info icon at top right corner. When clicked, the image shrinks and description slides out. Now I want to have the description showing up WITHOUT clicking the info icon. I don't find any settings regarding the info icon behaviour. I also tried to inject jQuery to simulate the click, but the debug console gave me this error: Thanks for your help in advance.
  18. Hey all, Just thought I'd share my little hack to create navigation on a group of subpages belonging to the same folder in the main navigation. Disclaimer: This was done in somewhat of a hurry, and I haven't used jQuery in a long time, so there's likely a more efficient way to code it. If you know or come up with a better way, please do share it! The way to use this, is simply by creating a folder in the main navigation with pages in it. Then on each page, using the code block, insert a DIV with the ID "pageMenu". Then add the code below using code injection to all pages (Settings > Advanced > Code Injection) in either the Header or Footer, making sure to replace "yourdomain" with – you guessed it, your domain 😉 The code first checks if a DIV with ID "pageMenu" exists on the page currently being viewed. If it doesn't, the code won't run. If it does exist, the code then looks through all Main Navigation folders for a match between the current page url and links inside those folders. If one is found, that parent folder's code and all the links inside it (basically a UL list) will be appended to the DIV with ID "pageMenu". All you need to do then is style it using some custom CSS. Also, I wanted to make it possible for the guy responsible for the content on this site to hide any folders with subpage menus on its pages. So to do that, using this code, all he needs to do is name the folders "Foo" (feel free to change this). If you do this, chances are you might want to also hide the folder name from the new page menu, which the code below also does. FYI 1: Of course no code is actually moved, as you can see by viewing source on the resulting page, the page only acts as if it was. FYI 2: You may need to tweak the selectors a bit depending on which template you are using, since not all main navigation menus are constructed the same way. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Move Main Nav folder where current page is a child to wherever an object with ID "pageMenu" is placed manually on page if ($("#pageMenu").length){ //Get current page url without domain var canonical = $('link[rel="canonical"]').attr('href'); var pageurl = canonical.replace('https://www.yourdomain.com', ''); //Find menu in Main Nav that contains a link matching the url of current page and get its HTML content into a variable var mainmenuFolder = $(".main-nav .folder-parent a").filter( function(index) { return $(this).attr("href") === pageurl; return false;} ).closest("div.folder-parent").get(0).outerHTML; //Append the Main Nav folder found to the #pageMenu object $("#pageMenu").append(mainmenuFolder); //Hide the Parent Folder link in the newly created Page Menu $("#pageMenu .folder-parent a:first").hide(); } //Hide all Parent Folders in Main Nav if they're named "Foo" $(".main-nav span").filter(function(index) { return $(this).text() === "Foo";}).parent().hide(); }); </script>
  19. I'm working on a site using the Tremont template see here I would like to transfer the mouseover effects of the index-navigation and apply these to the main-nav at the top right of the screen so as when you hover over the menu items they change the background video/image see here. I have achieved a similar effect on other projects but am having difficulty with 1. targeting the background video and 2. placing the images I wish to replace it with. Thanks in advance, any help would be greatly appreciated as I've been battling with this one for too long.
  20. Hello, I am working in the Jaunt Template - looking to move the additional tab to below the 'add to cart' button. I am using a toggle hide/show in the additional info tab as I can't seem to work out how to inject code to the product description. Thanks
  21. I'm trying to load a group of blocks from one of my pages (/testimonials) into another page using jQuery's .load function (an Ajax method) and then display them with a fadeIn/Out animation to create a slideshow of testimonials on the current page. The load executes but the lines following do not. Here is a snippet of the code that's injected into the page header: $(document).ready( function() { $(".col.sqs-col-12.span-12:has(.sqs-block-quote)").addClass("slideshow"); $(".slideshow").load("/testimonials .col.sqs-col-8.span-8 .sqs-block.quote-block.sqs-block-quote.null"); $(".slideshow > div:gt(0)").hide(); }); The last line, to hide all but the first block, never executes. However, if I paste that line into Chrome's javascript console, it executes as expected. I'm guessing this might have something to do with Ajax but I really have no idea. My site is using a template with Ajax loading enabled - I've tried disabling it but it makes no difference. I have Googled and tried various suggestions but am stumped. Any help would be greatly appreciated!
  22. Hi I have created one page and i am sending data to my other site through third party api url on jquery click event , but when i am submitting form my api is not calling. It's sometime work and sometime not work. Can you please tell me is anything blocking squarespace ? I have put my code inside Page Settings -> Advanced. E.x $(document).on('click', 'target', function () { // ajax code here })
  23. I have a form with radio buttons. If a person answers/clicks "yes" to the first question then I want them to see question #2. If the person answers "no" then I want them to see a message showing they are not qualified. So depending on how the user clicks, makes a selection will determine what that user sees in the form. Thank you. I attempted this code, but it did not work:
  24. I have a script that executes within a form perfectly fine when the form is on the webpage, but as soon as I switch the form to a lightbox, the jquery stops executing. Anyone know how to make it compatible?
  25. I'd like to change "Related Posts" to say "Related Projects" – using the Farro template. I assume this involves jQuery but haven't managed to find anything other than this article for amending the search input. https://answers.squarespace.com/questions/13459/how-to-change-search-text-to-something-custom.html I guess it has to be something similar to this but none of these solutions work in my case!
×
×
  • Create New...