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

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 19 results

  1. 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!
  2. 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.
  3. 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.
  4. 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.
  5. 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?
  6. 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.
  7. 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>
  8. 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.
  9. 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
  10. 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!
  11. 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 })
  12. 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:
  13. 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?
  14. 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!
  15. I have read the documentation on how to load custom JavaScript into the developer site, such as jQuery. I have implemented it the way the documentation suggests: <script>window.jQuery || document.write('<script src="scripts/jquery-1.9.0.min.js"><\/script>')</script> Loading the JavaScript file that I have uploaded to my ‘scripts’ directory on the server. That returned an 404 error saying that the file doesn’t exist. Because it was looking under /index/scripts/.. which of course does not exist. Thus the documentation is wrong. I then went ahead and wrote this: <script>window.jQuery || document.write('<script src="../scripts/jquery-1.9.0.min.js"><\/script>')</script> Adding a ‘../’ infront of the referenced source. This stopped the 404 error meaning that the script does get loaded. But it’s not affecting anything on my page as expected? I'm starting to fail to understand the benefit of using the squarespace developer platform as it posses more errors than suggested solutions. Any help would GREATLY be appreciated!
  16. I am trying to change the background color of the header element in my site using custom CSS and code injection. I found this previous, non-Squarespace solution. I have attempted to adapt it, but given my lack of jQuery knowledge and how exactly Squarespace uses code injection, I am at a loss. In the custom CSS area I have added .transparent-header #header { background-color: rgba(0,0,0,0.7); } In the code injection area I have added <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(window).on('scroll',function(){ if ($(window).scrollTop() >= 100) { $('.transparent-header #header').css({ 'background-color:' : 'rgba(0,0,0,0.7)' }); } else { $('.transparent-header #header').css({ 'background-color:' : 'rgba(0,0,0,0.0)' }); } }); </script> The homepage of our website can be accessed here. Expected result: After scrolling some distance x (currently 100px) navigation header will add a semi-transparant fill Current result: no change
  17. I want to add a testimonial carousel without having to use images. Any ideas?
  18. I’m building a site — firstpersonessaycoaching.com — and I’d like to hide the answers to the questions on my FAQ page so that they are revealed when you click on the text of the question. I read Silvabokis’ How to create hide/show FAQs in Squarespace — but I would be out of my depth with jQuery. Would someone be able to suggest another way, or perhaps provide a little more guidance for the jQuery suggestions so that someone with very little experience can do it? Thanks in advance.
  19. I'm want to use Google Analytics to track conversions from my Squarespace 6 site - those conversions being a completed form on the site - but cannot find a way to include the code in the submission button or the form submitted page. Does anyone know of a workaround to allow me to track completed forms?
×
×
  • Create New...