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

Search the Community

Showing results for tags 'javascript'.

  • 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
    • Selling & Scheduling Your Services
    • 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 Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • 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
  • German Circle Members's Topics

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


Badges


Expert ID

  1. Site URL: https://pelican-snail-erg5.squarespace.com/ I'm trying to make a similar side navigation/ status bar shown in the video. Would there be a way to do this in Javascript or CSS, or is there a plugin for it? Thanks, Zack side statusbar.mp4
  2. Site URL: https://dtmg.io Is there a way to add an onclick function to a button's href code? I've been googling and can't find anything. Thank you!
  3. Site URL: https://www.betweenbox.com/shipping-cost/ I am trying to add a shipping rate calculator to my website - like the attached images and site. I would like to show a range of different carriers like... Royal Mail, FedEx, UPS, DHL I have been searching the internet for hours and have not got very far :( If anyone has any tips, it would be much appreciated. Thank you in advance!
  4. Does anybody know how to replicate the scrolling animation from this site https://selangorsummit.com/sabc-2/ at the Why attend section (yellow background) onto my website -- https://www.unswaseanconference.com/networking-info on the Why attend section (blue background).
  5. Site URL: https://www.cestplusquedelasf.com/podcasts Hello, I have a problem with a jQuery code injection, which works perfectly on the back-office but does not work on the online version of the website. The most frustrating thing is that it works fine on the online version when I refresh the page, but not when I get there by clicking on a link. I have of course checked and the code is indeed present in the <head> section of the relevant pages. The code concerns the replacement of certain words by others, more relevant for users and SEO, available here : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> jQuery(function($){ $(".BlogList-filter").html(function() { return $(this).html().replace("Articles", "Podcasts"); }); }); jQuery(function($){ $(".BlogList-pagination-link-label").html(function() { return $(this).html().replace("Plus anciens", "Podcasts précédents"); }); }); jQuery(function($){ $(".BlogList-pagination-link-label").html(function() { return $(this).html().replace("Plus récents", "Podcasts suivants"); }); }); </script> Do you have any idea what's going on? Thank you in advance, Best regards,
  6. I'm trying to add this code: <script charset="UTF-8" type="text/javascript" id="idxwidgetsrc-20693" src="//holmesgroupmn.idxbroker.com/idx/carousel.php?widgetid=20693"></script> Is there something wrong with it? The site I'm taking it from makes it sound like it's just as easy as dropping this into a code box. I tried that in the middle of the page where I'd like this to appear and as you can see it doesn't do anything. I've also tried putting it in the source code (header and footer) and nothing happens. This is a Current Listings widget for a realtor from the IDX Broker service, which Squarespace recommends. I'm using the Ventura template. No index pages. Any help is greatly appreciated!
  7. so i want to have users to agree on two things (in checkboxes) before they can submit a form to me.(just like you cant proceed without agreeing the term and conditions on some websites/services) how would i do that?is there a way in javascript to check by the ID of the checboxes if they are checked or not (true/false), and if they arent checked - and try to submit the form -> they will get a pop-up saying they must check the inboxes before submitting the form?thanks
  8. Hi there, Canva has this new option of designing whole web pages. Say like this: https://www.canva.com/design/DAEXCxiz7e0/payRZVwHhvQ2q2FtNnX2zg/view?website#2:quick-and-hassle-free-shopping Can anyone tell me if it's possible to embed the whole page design in Squarespace? When I enter the Canva embed code in the page header, which is the following: <div style="position: relative; width: 100%; height: 0; padding-top: 48.1481%; padding-bottom: 48px; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAEXCxiz7e0&#x2F;view?embed"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAEXCxiz7e0&#x2F;view?utm_content=DAEXCxiz7e0&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Black Experimental Art Deco Fashion Website</a> it only shows as a full width Canva slideshow, even if in Canva I have selected the option 'scrolling website'. I guess there is something in the code that needs to be changed so it shows as a website, not a slideshow. Can anyone help me display the whole thing as a site, like designed?
  9. We uploaded a javascript file at the below path, https://kale-tomato-bxfc.squarespace.com/s/service-worker.js but squarespace redirects it to https://static1.squarespace.com/static/612521ddb179295dafce3dac/t/61287e4bd384ad7c926e3199/1630064939345/service-worker.js But, The problem is the redirected path gives a http 403 error. Kindly suggest.
  10. Site URL: https://bywater-collective.squarespace.com/home Hey y'all - This animation was working earlier, but has recently stopped and I can't figure out why. I've targeted the "Footer-blocks--bottom," using javascript to add a class of ".loading-next" once the user has scrolled to the bottom of the page, then the animation is applied that blinks between different background colors of the "Footer-blocks-bottom" and the h2 text. I can see on inspection, that the script is executing correctly - so it seems that the CSS is the problem. I've played around, adding !important tags, and bringing the code to the bottom of the CSS block, using actual colors over the variables, but I can't get it to work... Any ideas appreciated! Thanks! Site: https://bywater-collective.squarespace.com/home (PW: byctest) .loading-next { -webkit-animation: loading01 8s ease-in-out 1 forwards; animation: loading01 8s ease-in-out 1 forwards; font-weight: 400 !important; } .loading-next h2 a { -webkit-animation: loading01 8s ease-in-out 1 forwards; animation: loading01 8s ease-in-out 1 forwards; font-weight: 400 !important; } @keyframes loading01 { 0% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 20% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } 40% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 60% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } 80% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 100% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } }
  11. Hi guys, I'd like to create an animated text that loops from left to right continously on a block. The principle would be the same as those LED screens in front of some shops or screen that exists at the top of a bus to show where we're going. What I want to do is a black text in CAP on white/transparent background that moves from left to right from one edge to another . Nothing much crazy as that. how can I do that in squarespace 7.1? Cheers guys
  12. Site URL: https://www.gorgeousgelato.com/next-day-delivery/gelato-pint I have a test page www.gorgeousgelato.com/automatic-gallery-test where I was able to pull firestore.onSnapshot query results and display them in a real-time gallery of images with this code (which works as intended): // CREATE GALLERY <div id="coolGallery" class='flavorsOfTheDayGallery'></div> // FIND FLAVORS THAT ARE MARKED AVAILABLE let flavors = db.collection("flavorsOfTheDay").where("isAvailable", "==", true) .limit(16) // ORDER AVAILABLE FLAVORS ALPHABETICALLY AND BUILD EACH AN IMG TAG WITH SOURCE AND ALT TEXT portlandsFlavors.orderBy('flavorName') .onSnapshot((querySnapshot) => { coolGallery.innerHTML = ""; querySnapshot.forEach((doc) => { coolGallery.innerHTML += "<img class='flavorImage' src='"+doc.data().url+"' alt='"+doc.data().flavorName+"'>" console.log(doc.id, " => ", doc.data()); }); }) I have been trying to recreate this success for product select dropdowns '<select><option value="">"text"</option></select>' where each 'value' and 'text' would be equal to a flavorName derived from the firestore query (standard dropdown shown below). I can push the query results to the console.log only if I remove reference to 'selectDropdown.innerHTML' from the querySnapshot. The goal is to update the dropdowns above with live code from a firestore .onsnapshot query // Target select ID let selectDropdown = document.getElementById('select-yui_3_17_2_1_1588782094999_71107-field'); // Search for Portland's available flavors & limit to 16 let dropdownOptions = db.collection("flavorsOfTheDay").where("isAvailablePortland", "==", true) .limit(16) // ALPHABETIZE AVAILABLE FLAVORS let alpha = dropdownOptions.orderBy('flavorName') .onSnapshot((querySnapshot) => { selectDropdown.innerHTML = ""; // .innerHTML cannot read querySnapshot.forEach((doc) => { selectDropdown.innerHTML += "<option value='"+doc.data().flavorName+"'>'"+doc.data().flavorName+"'</option>" console.log(doc.id, " => ", doc.data().flavorName); }); }) The last thing to mention is that the lightbox modals (shown below) which hold the select dropdowns are not loaded into the DOM until product "Add to Cart" buttons are clicked. My attempts at using MutationObservers have been unsuccessful and I'm not certain I will be able to make changes even if the mutationObserver catches the addition of the lightbox-modal to DOM.
  13. Site URL: https://moose-soybean-sxzd.squarespace.com/designselv-prisberegner Hi all, I have installed a custom renovation calculator onto my squarespace site. I was wondering if it was possible to create a "Save" button/link for the customer to fill out the form later? Every time the page is reloaded, all the data is deleted. And is it also possible to add a button next to "NÆSTE–>" that goes to the previous slide as a "BACK"? "Næste" means "next" fyi. This isn't priority. For the installation i used the script below and embedded it into a code block, but I have no experience with javascripts. Please help. Site url: https://moose-soybean-sxzd.squarespace.com/designselv-prisberegner No password needed. Best regards <div class="calculator" data-calc-id="tq9FCFquMbdWJg8q3"></div> <script type="text/javascript" id="convertcalculator-embedder-ykFDuajp8irTCZujR" class="convertcalculator-async-script-loader"> (function() { function async_load(){ var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; var url = 'https://app.convertcalculator.co/embed.js'; s.src = url + ( url.indexOf("?") >= 0 ? "&" : "?") + "ref=" + encodeURIComponent(window.location.href); var embedder = document.getElementById('convertcalculator-embedder-ykFDuajp8irTCZujR'); embedder.parentNode.insertBefore(s, embedder); } if (window.attachEvent) window.attachEvent("onload", async_load); else window.addEventListener("load", async_load, false); })(); </script>
  14. Looking for some javascript help: I have this script that Shows One Div while Hiding another based on a timer and I am fine to get that to work but now I would like to make it work on a whole section. I tried changing the parts that say div to section/sections - but that didn’t seem to work. I have another script that adds the needed .roll class which works fine. https://www.atgfnxt.net/mn2 - The Second section is currently hidden as the .roll class has been applied. I have a working example here using just two divs within the same section. https://www.atgfnxt.net/minnesota - Note: There is a different script for the Button that hides the text to show the form. <script type="text/javascript"> var current = 0; var divs = $(".roll"); var timer = setInterval(function() { if (current < divs.length - 1) { divs.eq(current).hide(); current++; divs.eq(current).fadeIn("normal"); } else clearInterval(timer); }, 2500); </script>
  15. Site URL: https://www.unswaseanconference.com/about-asean-2021-v2 I am trying to recreate this codepen code -- https://codepen.io/mdharo/pen/OJWeLKO -- into my site by injecting it into a code block and adding the css libraries and js files to the header. However, the slider is not working, it is not horizontal and the image is not displaying. I also already compiled the SCSS code from codepen to CSS. Any help would be greatly appreciated. This is how it looks like in my site: https://www.unswaseanconference.com/about-asean-2021-v2
  16. Site URL: https://bywater-collective.squarespace.com/ Hi all - I am trying to use Jquery in order to give the ability for visitors to choose between a specific color theme on my client's 7.0 website. I have seen a number of tutorials walking through light vs dark mode, however I am trying to accomplish the following : Have three separate "color themes," that alter the index-page background color, and h1 font-color Depending on the "color theme" that is selected, have the logo image source, and photo image source within our mega-menu change accordingly. Here is an example of a website that displays the ability to toggle between "themes," and I've attached mockup examples of each "style". You can find my client site here, I appreciate any help and direction!
  17. Site URL: https://codepen.io/caniswolfman24/pen/OJmZMaL Hello! Just started learning how to code a few days ago, and made a large character sheet on Codepen. The code appears to work on Codepen, but when I try to copy over to Squarespace, it doesn't work. I've tried putting everything into one block, with the CSS within <style> at the beginning, and the JS within <script> at the end. Do I need to format something differently, or am I running into a file-size limit? (The code could 100% be made shorter, I've learned a lot since I started last week) https://codepen.io/caniswolfman24/pen/OJmZMaL
  18. Site URL: https://nabazabih.com/ Look at the very bottom of the linked page to find the example I am trying to replicate. I am currently trying to approach it by using CSS, creating and SVG oval, and using JS to move it. I am having an issue getting the text to attach to the oval shape. Is the issue b/c my SVG doesn't include path elements? I exported my image using Affinity Designer <svg id="text-container" viewBox="0 0 3092 3784" xmlns="http://www.w3.org/2000/svg" ><ellipse id="text-curve" cx="1485.38" cy="1845.31" rx="814.122" ry="1555.76" fill="none" stroke="#000" stroke-width="3.29" transform="matrix(1.59384 0 0 1.09691 -821.465 -106.575)"/> <text y="140" font-size="92"> <textPath href="#text-curve"> website text here </textPath> </text> </svg> 927571396_ScreenRecording2021-08-12at6_37_44PM.mov
  19. Site URL: https://www.norwoodbaptistchurchri.org I have uploaded a text file (LastService.txt) and I am now trying to read the contents of it using JavaScript. Here is a snippet of code. I get an error because JavaScript doesn't find the page. I commented everything else out so I believe I don't have the right path to the text file. <script type="text/javascript"> function readTextFile() { var rawFile = new XMLHttpRequest(); var filepath = 'https://www.norwoodbaptistchurchri.org/s/LastService.txt'; rawFile.open('GET', filepath, true);
  20. Site URL: https://rangerclub.uk We are looking to embed ideally a custom Google map with multiple pinned locations within a single layer. This is easily done but uses JavaScript / iframe which isn't in our Square Space plan. Are there any other viable options? Google Maps does allow exporting to KML/KMZ.
  21. Site URL: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight Page Link: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight Password: SquarespaceDemoHelp! Hi, So I have been working on making my navigation change colour based on what the current visible page content background colour is. Surprisingly, I did manage to get it working for the most part, but I am having a few issues I am hoping to get help with. Problem/Goals 1. When the navigation reaches the first trigger, it changes as it should. However, when it reaches another area below that matches the same criteria, it does nothing. I would like to find a way to make the intersectional observer trigger on multiple sections, and ideally I want to be able to reorder sections and not have any issues. 2. When the navigation changes to black, and the menu is activated via the burger and then closed, the navigation returns to the original colour. I would like to keep the navigation colour the same after the menu is closed. 3. When the menu is opened, it only takes one colour theme. I would like the observer to change the menu overlay as well as the nav colour. This isn't as important as the other two. Here is the code I am currently using: <script> const sectionOne = document.querySelector(".black-section"); const sectionOneOptions = { rootMargin: '0px', threshold: .6 }; let prevYPosition = 0 let direction = 'up' const sectionOneObserver = new IntersectionObserver(function( entries, sectionOneObserver ) { entries.forEach(entry => { if (!entry.isIntersecting) { header.classList.add("white") } else { header.classList.remove("white") } }); }, sectionOneOptions); sectionOneObserver.observe(sectionOne); </script>
  22. I am trying to recreate this codepen code -- https://codepen.io/mdharo/pen/OJWeLKO -- into my site -- https://www.unswaseanconference.com/about-asean-2021-v2 -- by injecting it into a code block however the slider is not working and it is not horizontal. I also already compiled the SCSS code from codepen to CSS. Any help would be greatly appreciated
  23. <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author" content="Made with ❤ by Jorge Epuñan - @csslab"> <title>jQuery Timeline 0.9.54 - Dando vida al tiempo</title> <link rel="stylesheet" href="css/style.css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery.timelinr-0.9.54.js"></script> <script> $(function(){ $().timelinr({ arrowKeys: 'true' }) }); </script> </head> <body> <div id="timeline"> <ul id="dates"> <li><a href="#1984">1984</a></li> <li><a href="#1987">1987</a></li> <li><a href="#1991">1991</a></li> <li><a href="#1992">1992</a></li> <li><a href="#1993">1993</a></li> <li><a href="#1995">1995</a></li> <li><a href="#1996">1996</a></li> <li><a href="#1997">1997</a></li> <li><a href="#1998">1998</a></li> <li><a href="#1999">1999</a></li> <li><a href="#2000">2000</a></li> <li><a href="#2001">2001</a></li> <li><a href="#2002">2002</a></li> <li><a href="#2004">2004</a></li> <li><a href="#2006">2006</a></li> <li><a href="#2007">2007</a></li> <li><a href="#2009">2009</a></li> <li><a href="#2014">2014</a></li> <li><a href="#2015">2015</a></li> <li><a href="#2016">2016</a></li> </ul> <ul id="issues"> <li id="1984"> <h1>1984</h1> <p>DKN Hotels founded with the acquisition of the Surf Motel Carlsbad, CA</p> <br> <p>Acquisition of the Marco Polo Inn Anaheim, CA (repositioned as: Days Inn)</p> </li> <li id="1987"> <h1>1987</h1> <p>Acquisition of the Park Vue Anaheim, CA (repositioned as: Econo Lodge)</p> </li> <li id="1991"> <h1>1991</h1> <p>Acquisition of the Quality Inn in Ontario, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Construction of the Econo Lodge Flagstaff East, AZ (repositioned as: Days Inn)</p> </li> <li id="1992"> <h1>1992</h1> <p>Acquisition of the Sandman Inn Anaheim, CA (repositioned as: Ramada Limited)</p> </li> <li id="1993"> <h1>1993</h1> <p>Acquisition of the Summer House Inn in San Diego, CA</p> </li> <li id="1995"> <h1>1995</h1> <p>Acquisition of the Comfort Inn San Diego (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Harbor Inn Anaheim, CA (repositioned as: Comfort Inn)</p> <br> <p>Construction of the Hampton Inn Flagstaff East (repositioned as: Country Inn & Suites) </p> </li> <li id="1996"> <h1>1996</h1> <p>Acquisition of the Travelodge Midway San Diego, CA</p> <br> <p>Acquisition of the Midway Motel in San Diego, CA (repositioned as: Travelodge SeaWorld)</p> </li> <li id="1997"> <h1>1997</h1> <p>Acquisition of the Newport Bay Inn in Costa Mesa, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Newport Beach Inn in Newport Beach, CA (repositioned as: Best Western)</p> <br> <p>Acquisition of he Travelodge in San Marcos, CA (repositioned as: Ramada Limited) </p> </li> <li id="1998"> <h1>1998</h1> <p>Acquisition of the Days Inn I-40 in Flagstaff, AZ</p> <br> <p>Acquisition of the Days Inn in San Diego, CA (repositioned as: Best Western)</p> <br> <p>Acquisition of the Del Norte Inn in Camarillo, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Quality Inn in Fresno, CA</p> </p> </li> <li id="1999"> <h1>1999</h1> <p>Acquisition of the Days Inn Route 66 in Flagstaff, AZ</p> <br> <p>Acquisition of the Quality Suites in San Clemente, CA (repositioned as: Hampton Inn & Suites)</p> <br> <p>Acquisition of the Conestoga Hotel in Anaheim, CA (repositioned as: Holiday Inn & Suites)</p> </p> </li> <li id="2000"> <h1>2000</h1> <p>Acquisition of the Best Western Desert Villa Inn in Barstow, CA</p> </li> <li id="2001"> <h1>2001</h1> <p>Acquisition of the Newport Classic Inn in Newport Beach, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Goodnite Inn in Ontario, CA</p> <br> <p>Acquisition of the Laguna Beach Inn in Laguna Beach, CA</p> </li> <li id="2002"> <h1>2002</h1> <p>Acquisition of the Best Western Westwood Hotel in Los Angeles, CA (repositioned as: Holiday Inn Express)</p> <br> <p>Acquisition of the Super 8 Motel in Flagstaff, AZ</p> <br> <p>Acquisition of the Best Western Raffles Inn in Anaheim, CA</p> </li> <li id="2004"> <h1>2004</h1> <p>Acquisition of the Fairfield Inn in Buena Park, CA </p> <br> <p>Acquisition of the Heritage Hotel in Sacramento, CA (repositioned as Courtyard Inn and Fairfield Inn)</p> <br> <p>Construction of the New Town Place in Sacramento, CA</p> <br> <p>Acquisition of the Fairfield Inn in Placentia, CA (repositioned as: Quality Inn)</p> </li> <li id="2006"> <h1>2006</h1> <p>Acquisition of the Amerisuites Hotel in Ontario, CA (repositioned as: Hyatt Place)</p> </li> <li id="2007"> <h1>2007</h1> <p>Acquisitioon of the Country Plaza Inn in San Clemente, CA (repositioned as: Holiday Inn Express)</p> </li> <li id="2009"> <h1>2009</h1> <p>Construction of the Hilton Garden Inn in San Bernardino, CA</p> </li> <li id="2014"> <h1>2014</h1> <p>Construction of the SpringHill Suites Anaheim Maingate in Anaheim, CA</p> <br> <p>Acquisition of the Cardiff-by-the-Sea Lodge in Cardiff-by-the-Sea, CA</p> <br> <p>Acquisition of the Hilton Hotel in San Bernardino, CA (repositioned as: DoubleTree)</p> </li> <li id="2015"> <h1>2015</h1> <p>Acquisition of the Wyndham Garden Ventura Pierpont Inn in Ventura, CA</p> <br> <p>Construction of the Residence Inn in Rancho Cucamonga, CA</p> <br> <p>Construction of the Hampton Inn & Suites in Murrietta, CA</p> <br> <p>Construction of the Homewood Suites in Irvine, CA</p> </li> <li id="2016"> <h1>2016</h1> <p>Construction of the SpringHill Suites in Carlsbad, CA</p> </li> </ul> <div id="grad_left"></div> <div id="grad_right"></div> <a href="#" id="next">+</a> <a href="#" id="prev">-</a> </div> </body> <style> * { margin: 0; padding: 0; } body { background: #222; font-family: Georgia, serif; color: #fff; font-size: 14px; } a { color: #ffffcc; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover, a.selected { color: #ffcc00; } h1, h2, h4, h5, h6 { text-align: center; color: #ccc; text-shadow: #000 1px 1px 2px; margin-bottom: 5px; } h1 { font-size: 18px; } h2 { font-size: 14px; } .sociales { text-align: center; margin-bottom: 20px; } #timeline { width: 800px; height: 350px; overflow: hidden; margin: 100px auto; position: relative; background: url('../images/dot.gif') left 45px repeat-x; } #dates { width: 800px; height: 60px; overflow: hidden; } #dates li { list-style: none; float: left; width: 100px; height: 50px; font-size: 24px; text-align: center; background: url('../images/biggerdot.png') center bottom no-repeat; } #dates a { line-height: 38px; padding-bottom: 10px; } #dates .selected { font-size: 38px; } #issues { width: 800px; height: 350px; overflow: hidden; } #issues li { width: 800px; height: 350px; list-style: none; float: left; } #issues li.selected img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } #issues li img { float: left; margin: 10px 30px 10px 50px; background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); /* IE 6 & 7 */ zoom: 1; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } #issues li h1 { color: #ffcc00; font-size: 48px; margin: 20px 0; text-shadow: #000 1px 1px 2px; text-align: left; padding-left: 70px; } #issues li p { font-size: 14px; margin-right: 70px; margin-left: 70px; font-weight: normal; line-height: 22px; text-shadow: #000 1px 1px 2px; } #grad_left, #grad_right { width: 100px; height: 350px; position: absolute; top: 0; } #grad_left { left: 0; background: url('../images/grad_left.png') repeat-y; } #grad_right { right: 0; background: url('../images/grad_right.png') repeat-y; } #next, #prev { position: absolute; top: 0; font-size: 70px; top: 170px; width: 22px; height: 38px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; } #next:hover, #prev:hover { background-position: 0 -76px; } #next { right: 0; background: red; } #prev { left: 0; background: blue; } #next.disabled, #prev.disabled { opacity: 0.2; } </style> <script> /* ---------------------------------- jQuery Timelinr 0.9.54 tested with jQuery v1.6+ Copyright 2011, CSSLab.cl Free under the MIT license. https://www.opensource.org/licenses/mit-license.php instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/ ---------------------------------- */ jQuery.fn.timelinr = function(options){ // default plugin settings settings = jQuery.extend({ orientation: 'horizontal', // value: horizontal | vertical, default to horizontal containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline datesDiv: '#dates', // value: any HTML tag or #id, default to #dates datesSelectedClass: 'selected', // value: any class, default to selected datesSpeed: 'normal', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal issuesDiv: '#issues', // value: any HTML tag or #id, default to #issues issuesSelectedClass: 'selected', // value: any class, default to selected issuesSpeed: 'fast', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) prevButton: '#prev', // value: any HTML tag or #id, default to #prev nextButton: '#next', // value: any HTML tag or #id, default to #next arrowKeys: 'false', // value: true | false, default to false startAt: 1, // value: integer, default to 1 (first) autoPlay: 'false', // value: true | false, default to false autoPlayDirection: 'forward', // value: forward | backward, default to forward autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs) }, options); $(function(){ // setting variables... many of them var howManyDates = $(settings.datesDiv+' li').length; var howManyIssues = $(settings.issuesDiv+' li').length; var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass); var widthContainer = $(settings.containerDiv).width(); var heightContainer = $(settings.containerDiv).height(); var widthIssues = $(settings.issuesDiv).width(); var heightIssues = $(settings.issuesDiv).height(); var widthIssue = $(settings.issuesDiv+' li').width(); var heightIssue = $(settings.issuesDiv+' li').height(); var widthDates = $(settings.datesDiv).width(); var heightDates = $(settings.datesDiv).height(); var widthDate = $(settings.datesDiv+' li').width(); var heightDate = $(settings.datesDiv+' li').height(); // set positions! if(settings.orientation == 'horizontal') { $(settings.issuesDiv).width(widthIssue*howManyIssues); $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).height(heightIssue*howManyIssues); $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); } $(settings.datesDiv+' a').click(function(event){ event.preventDefault(); // first vars var whichIssue = $(this).text(); var currentIndex = $(this).parent().prevAll().length; // moving the elements if(settings.orientation == 'horizontal') { $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); } $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1); // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeIn('fast'); $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeIn('fast'); $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } // now moving the dates $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass); $(this).addClass(settings.datesSelectedClass); if(settings.orientation == 'horizontal') { $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); } else if(settings.orientation == 'vertical') { $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); } }); $(settings.nextButton).bind('click', function(event){ event.preventDefault(); // bugixed from 0.9.54: now the dates gets centered when there's too much dates. var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index(); if(settings.orientation == 'horizontal') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionIssues/widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates-widthDate; if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:last-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.52: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click'); } } } else if(settings.orientation == 'vertical') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionIssues/heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates-heightDate; if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:last-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.54: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click'); } } } // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } }); $(settings.prevButton).click(function(event){ event.preventDefault(); // bugixed from 0.9.54: now the dates gets centered when there's too much dates. var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index(); if(settings.orientation == 'horizontal') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionIssues/widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates+widthDate; if(currentPositionIssues >= 0) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:first-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.54: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click'); } } } else if(settings.orientation == 'vertical') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionIssues/heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates+heightDate; if(currentPositionIssues >= 0) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:first-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { // bugixed from 0.9.54: now the dates gets centered when there's too much dates. $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click'); } } } // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } }); // keyboard navigation, added since 0.9.1 if(settings.arrowKeys=='true') { if(settings.orientation=='horizontal') { $(document).keydown(function(event){ if (event.keyCode == 39) { $(settings.nextButton).click(); } if (event.keyCode == 37) { $(settings.prevButton).click(); } }); } else if(settings.orientation=='vertical') { $(document).keydown(function(event){ if (event.keyCode == 40) { $(settings.nextButton).click(); } if (event.keyCode == 38) { $(settings.prevButton).click(); } }); } } // default position startAt, added since 0.9.3 $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click'); // autoPlay, added since 0.9.4 if(settings.autoPlay == 'true') { setInterval("autoPlay()", settings.autoPlayPause); } }); }; // autoPlay, added since 0.9.4 function autoPlay(){ var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); if(settings.autoPlayDirection == 'forward') { if(currentDate.parent().is('li:last-child')) { $(settings.datesDiv+' li:first-child').find('a').trigger('click'); } else { currentDate.parent().next().find('a').trigger('click'); } } else if(settings.autoPlayDirection == 'backward') { if(currentDate.parent().is('li:first-child')) { $(settings.datesDiv+' li:last-child').find('a').trigger('click'); } else { currentDate.parent().prev().find('a').trigger('click'); } } } </script> I am trying to recreate this timeline from codepen.io --https://codepen.io/Naasa21/pen/qdxKMo/ . But it is not working as expected. My code does dynamically move the timeline like the one from codepen. Any help would be greatly appreciated.
  24. Site URL: https://grapefruit-fox-6gzs.squarespace.com/ Hello, I have two stores on my site because I want one to show up on the navigation and one to be hidden. This is fine, but I noticed the product pages display differently on each store. For the ones under "shop" they display how I'd like them to (proper spacing, markdowns, ect). However, the ones under "create" are formatted all wrong. Ideally, I'd like the "create" product listings to look the same as the "shop" product listings. We used Javascript to make sure the product description showed up before the quantity. However, the javascript is only working on the "Shop" page and not the "Create" page. Here is the Javascript we used: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('section.ProductItem-additional').insertAfter('.ProductItem-details-excerpt'); }); </script> <style> section.ProductItem-summary { align-items: flex-start !important; margin-bottom: 0px !important; } section.ProductItem-additional { margin-top: 0px !important; margin-bottom: 20px !important; } </style> <script> $(document).ready(function() { The password to view my site is "help"
  25. Site URL: https://bywater-collective.squarespace.com/photography-journal/madi-garrett Hey y'all - I'm using blog tags as way to target blog post for unique CSS application, and therefore have set the post to hide the names of these specific tags when displayed on the blog post header. However, this javascript is no longer hiding the loose comma that appears, between the visible tag, and the hidden and I'm not sure why.... Would appreciate any help! TIA! Note - would only like to remove commas of the meta item tag, not category <script> $('.Blog-meta-item .Blog-meta-item--tags').map(function(val, i) { this.innerHTML = this.innerHTML.replace(/,/g, ' '); }) </script> Site: https://bywater-collective.squarespace.com/photography-journal/madi-garrett PW: byctest
×
×
  • Create New...