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://tjr-new-site.squarespace.com/ hey hey! I'm using a code block (with HTML + JS, then CSS) to create a draggable block section. Under 'About.' (Brine/Rally 7.0) These images under 'About' can be moved around the page with cursor by a visitor. I used CSS to set the starting location of each individual image. When you view the section of the index page as its own page, it works as it should. When the section is viewed within its index page home, the images cannot be moved to the left on the x-axis. Works (able to slide img around): https://tjr-new-site.squarespace.com/about Does not work (img can't move to the left past its starting place): https://tjr-new-site.squarespace.com scroll down to About pw: troysitehelp Any ideas on why it works in one place and not the other, and how to address? Thx.
  2. Is there a way to change an item's colours depending on light or dark background colours? Any item like a header, or nav. I was wondering how we can implement colour change depending on section backgrounds.For example, a fixed H1 text in the middle of the screen, how do we make the text change colour WHILST SCROLLING between light and dark background colors?What's the best way to do this?I was trying out with color-blend-mode:difference but the effects felt too much on the eyes.Thanks in advance! ❤️ ❤️
  3. We are running version 7.0 on the Bedford template. Developer mode is activated and I have the local environment setup, but the default javascript code comes minified. The current default is that the Navigation folders/dropdowns will open on hover, but I would like to modify this to operate on click only. Is there anyway to make this change from within squarespace or the JS code? Or would I need to rebuild the nav with new CSS and ids?
  4. Site URL: https://www.nordlysenergi.com/ Is there a simple way to redirect Naked domain(Root domain) to another page with JavaScript? and if so does any one have a quick solution? Example -> nordlysenergi.com (Root domain) ---> nordlysenergi.com/strom/ 301 redirect does not work for this.
  5. My SEO advisor has suggested that we 'turn off lazy loading' as Google is not seeing any content 'below the fold'. Can this be done, or can anyone advise on this? Thanks
  6. Site URL: https://tracytredoux.com/journal-posts/2021/9/7/03slnvzopxaxb558ax3lvj1o1fnpua Hi, **I have amended the description of this problem after further investigation I created some java script code to display a total of checkboxes ticked in a form on a blog post. It seems that the script does not run when the page loads the first time, but then works if the page is refreshed. Also, I tried dropping the same code into a standard Squarespace web page and it works fine, so the issue is only happening with the blog pages. I'm very confused! I am attaching the code below. Thanks for any help. <script> $(function() { $("input[name*='symptom']").on("change", function() { var total = 0; $("input[type='checkbox']:checked").each(function() { total += Number($(this).val()); }); $("#total").val(total); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> legend { color:#a81918; padding-left:4px; padding-right:4px; } fieldset { border:1px solid #a81918; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } </style> <form action=""> <fieldset> <legend> <span style="color:#6a6a6a"> Select the symptoms that apply to you </span> </legend> <input type="checkbox" name="symptom1" value="1" id="cravings"> <label for="cravings">Cravings for carbs, sugar and caffeine</label><br> <input type="checkbox" name="symptom2" value="1" id="swelling"> <label for="swelling">Excess swelling</label><br> <input type="checkbox" name="symptom3" value="1" id="fatigue"> <label for="fatigue">Fatigue: relieved by eating</label><br> <input type="checkbox" name="symptom4" value="1" id="feel-off"> <label for="feel-off">Feel 'off' when you have not eaten</label><br> <input type="checkbox" name="symptom5" value="1" id="nervous"> <label for="nervous">Feeling nervous</label><br> <input type="checkbox" name="symptom6" value="1" id="hangry"> <label for="hangry">'Hangry' between meals</label><br> <input type="checkbox" name="symptom7" value="1" id="headaches"> <label for="headaches">Headaches</label><br> <input type="checkbox" name="symptom8" value="1" id="dizzy"> <label for="dizzy">Lightheaded, dizzy, or foggy brain</label><br> <input type="checkbox" name="symptom9" value="1" id="nausea"> <label for="nausea">Nausea</label><br> <input type="checkbox" name="symptom10" value="1" id="focus"> <label for="focus">Difficulty focussing</label><br> <input type="checkbox" name="symptom11" value="1" id="lethargy"> <label for="lethargy">Fatigue and lethargy</label><br> <input type="checkbox" name="symptom12" value="1" id="cravings2"> <label for="cravings2">Food cravings, not satisfied by eating</label><br> <input type="checkbox" name="symptom14" value="1" id="hunger"> <label for="hunger">Hunger, even after eating</label><br> <input type="checkbox" name="symptom15" value="1" id="thirst"> <label for="thirst">Increased thirst</label><br> <input type="checkbox" name="symptom16" value="1" id="fat"> <label for="fat">Mid-belly fat</label><br> <input type="checkbox" name="symptom17" value="1" id="vision"> <label for="vision">Vision disturbances</label><br><br> Total <input type="text" value="0" id="total"> </fieldset> </form>
  7. I'm trying to integrate this horizontal scroll into my website. Tried adding the html, css encased in <style> and adding all the necessary script. However it didn't seem to work. Anybody able to shed some light on this ? https://codepen.io/cameronknight/pen/qBNvrRQ <div class="container"> <section data-bgcolor="#bcb8ad" data-textcolor="#032f35"> <div> <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1> <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2> <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> </div> </section> <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2> </section> </div> <style> :root { --text-color: #111; --bg-color: #b9b3a9; } section:not(#sectionPin) { min-height: 100vh; width: 100%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2rem; padding: 50px 10vw; margin: auto; place-items: center; } img { height: 80vh; width: auto; object-fit: cover; } h1 { font-size: 5rem; line-height: 1; font-weight: 800; margin-bottom: 1rem; position: absolute; top: 10vw; left: 10vw; z-index: 4; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 768px) { h1 { font-size: 16vw; } } h1 span { display: block; } h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } * { box-sizing: border-box; } #sectionPin { height: 100vh; overflow: hidden; display: flex; left: 0; background: var(--text-color); color: var(--bg-color); } .pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 50px 10vw; } .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } p { position: absolute; bottom: 10vw; right: 10vw; width: 200px; line-height: 1.5; } </style> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".container"); /* SMOOTH SCROLL */ const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); //////////////////////////////////// //////////////////////////////////// window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); }); </script>
  8. 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).
  9. I need a cubic yard calculator on my site and have found the code that I want to use here: https://codepen.io/dwill/pen/WqwGeG I am just trying to figure out how to put the JS code onto my Squarespace site. I can put in the HTML into a code block fine but then obviously the calculation doesn't work without the JS. How do I put the JS code into my site and link it to the HTML code block? Or if there is an easier built-for-you way of doing this please let me know!
  10. Site URL: http://www.cherrytreeinteriordesign.com I'm wondering if there is a way to make a simple list with cards and make the cards themselves clickable to another page (I use 7.1). I'm aware you can add buttons, but I don't like the way they look. I want it to look more or less like the attached picture. Thanks!
  11. 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!
  12. 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,
  13. 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.
  14. 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; } }
  15. 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.
  16. 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>
  17. 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>
  18. Site URL: https://www.waterdragonfabrics.com/ Hi folks, I hope you are all doing well! This might not be something that's generally posted here but I thought there are probably some talented people that could point me in the right directions. I'm looking to realize something, (with the help of an expert of course) that I don't really have any knowledge about. The project is planned for this page: https://www.waterdragonfabrics.com/ It is about creating an interactive chart that let's people choose and visualize various color combinations and clothing designs in some kind of interavtice chart. This is a tailor-shop for traditional Chinese martial arts clothing. We offer a variety of different designs (cuts), fabrics, and options for the trim (multi colored outfits). The customer can browse the shop and choose from a variety of examples. He then adds his preferences, fabric choices and variations. Some products have a pop-up form that shows up when they click on the "add to cart" button. This is used to fill in sadditional information. The customer submits his measurements after placing the order. You can see that this process is rather difficult and creates lots of friction in the checkout process. I am not sure if this is something that can be realized but I'm sure you will let me know. 😉 My plan is to create a drawing (probably a vector file?) with simple black lines for each upper garment. This means there will be a shirt with long sleeves, another drawing is the same shirt with long sleeves but different cuffs, then a short sleeve shirt etc. Each design will be a different variation. Sometimes the variation is only slightly different like the amount of buttons. This means there will be a good 20-30 drawings in total. The next step I am imagining is to link all these pictures to a text link in a chart. In other words, if the customer clicks on "Traditional shirt with long sleeves" the allocated drawing will show up. Up to this point I believe it's not too bad to realize. However, my next wish is as follows: I would love a feature that allows the customer to color different sections of the individual drawings. That means the section of a trim detail, for example the cuff, can be colored by simply choosing a color from a normal color palette. The goal is that the customer can visualize the color combination. Our goal is to make the internal processes easier and get rid of the friction in the checkout process. If we can somehow connect the choices of the customer, may it be a direct link to the shopping cart with allocated variants connected (to adjust the price according to the customers choices) or even simply to submit the choice via email or to download the choices for sending them to us manually, that would be great. We try to get the customer to make a purchase as quickly and easily as possible to remove the friction. The prices will change depending on the design variations and not the color variations. This means the filled-in color choices would not have to be linked to a different price, only the design option (that's allocated to a different drawing). We do have different prices depending on the fabrics, but I'm open to simplify for the sake of convenience for the customer. The more intuitive this chart can be, the better. The more we can link the customers' choices to different price selections the better. If we can somehow guide the customer directly to the shopping cart after selecting this would be great too. I understand that this requires a bunch of coding, possibly Javascript, html or even programming. If you think that squarespace is a bit limiting for creating something like this, we'd also have a separate web server that possibly works instead. We could somehow connect them. If there are any simplified solutions that have a similar effect, reducing friction and making it easier for the customer, I'm open to hear any suggestions. For us it would be very convenient if the customer somehow submits this drawing with his color choices because we'd be able to use it for processing the order with our tailor. So we'd save some time there, too. I will be able to provide all the drawings made via illustrator or photoshop. Please let me know your thoughts on this project. If you think I can begin creating the drawings (since these will be part of the project no matter what) what file would you make them as? Or am I imagining things too easy? Again sorry if this in the wrong place. Maybe someone knows someone that's really good at this stuff. I am looking forward to your reply.
  19. 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
  20. 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
  21. 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);
  22. 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.
  23. 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>
  24. 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
  25. <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.
×
×
  • Create New...