Search the Community
Showing results for tags 'java'.
-
Hello! I need help implementing animation into an SVG image I made. Its just a line that I would like to animate as you scroll down the page (the line forming down the page while scrolling) So far, I've only managed to have the SVG appear but it simply sits on top of all the elements without moving or animating. Does anyone know a code to have the SVG animate ? I've attached the current code I am working with. I am not too advanced with JavaScript, so animating the svg is proving to be a challenge for me. Any help on this would be greatly appreciated! Thank you! <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title› Document </title> </head> <body> <div class="line-container"> <svg viewBox="0 0 215 2074" fill="none" preserveAspectRatio="xMidYMax meet"> <path d="M127 0V886V1020C76.6 1070.4 63.3334 1057 63 1044C74 1055 89.4 1083.6 63 1110C36.6 1136.4 117.333 1121 161 1110C192.333 1099.33 242.2 1078 191 1078C139.8 1078 84.3334 1163.33 63 1206L115 1150V1064L147 1174C121 1169.33 78.2 1169.2 115 1206C151.8 1242.8 151.667 1276 147 1288V1642V1786C146.333 1796.67 139 1818 115 1818C91 1818 90.3333 1832.67 93 1840C89.6667 1847.33 89.4 1862 115 1862C140.6 1862 111 1876.67 93 1884L127 1918V1974V1884H147L161 1870H175V1840H1L201 1918L147 1974L115 1992V1946H161L127 2002V2074" stroke="#F55D5D" stroke-width="5"/> </svg> </div> </body> </html> </html> <style> body { height: 500vh; margin: 0; z-index:9999999; } .line-container { position:fixed; top:0; left:0; width: 100%; height: 100%; text-align: center; overflow: hidden; z-index:9999999; } svg{ display: inline-block; height:100%; z-index:9999999; } </style> <script> let path = document.querySelector('path') let pathLength = path.getTotalLength() path.style.strokeDasharray = pathLength + '' + pathLength; path.style.strokeDashoffset = pathLength; window.addEventListener('scroll',()=>{ var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); var drawLength = pathLength * scrollPercentage; path.style.strokeDashoffset = pathLength - drawLength; } </script>
-
Site URL: https://taranaomi.com/home Hi there, Looking to install githubs plugin for locomotive scroll. I tried to install the javascript and css but I'm likely putting it in the wrong places because when I go to edit the CSS properties nothing happens. If anyone has any idea what I need to do here it would be much appreciated. Here's a code pen version: https://codepen.io/dotpot420/pen/MWwWaaQ Github: https://github.com/locomotivemtl/locomotive-scroll End goal is something like this homepage but one image and no letter shuffle to the type centre: https://mathieulevesque.com/en Thanks so much- 1 reply
-
- 1
-
-
- code
- code-injection
- (and 3 more)
-
Hello! I'm currently using an age gateway plugin purchased from a third party website with limited customisable features. To ensure my website is compliant I need to have hyperlinks within the pop up directing visitors to the T&Cs and Privacy Policy pages. E.G: "...you confirm that you are over 18 years old and have read, understood, and accepted our Terms and Conditions". Is this possible to do in the header/footer code injection of Squarespace, I have tried using href and <a/> coding but it just adds it as plain text with no clickable link. SOLUTIONS: Any suggestions on how else I could add an age verification pop-up with clickable hyperlinks in the paragraph would be amazing! Alternatively, I would be open to hiring a dev to create this as needed. Thank you! -
Site URL: https://www.continuityguide.net/planetx Hi! I would like to add Rating Widget https://rating-widget.com/ to my site but I don't know how to do it correctly. My site is a reading guide for Marvel comics: https://www.continuityguide.net/planetx and I got rows of images with links in their descriptions. I'd like to add a Rating Widget to each image block in the best looking way possible. Either in them below the link, or below the image set to the right or left. The Rating Widget is javascript. At the moment I haven't got access to enter java to my Squarespace so I guess I have to raise my billing too. I hope I can get some help from ya'll with this 🙂 Thank you! /Tommy
-
Site URL: https://www.kevinwalton.ca Hi, I was wondering if someone can help me work Butter.js on my site. I have tried everything I can but I can't do it. Here is the link to the Js: https://www.cssscript.com/smooth-momentum-scrolling-butter/ Thanks, Kevin W
-
code-injection Update to Animated Text HTML & JAVASCRPT
Heybyrt posted a question in Coding and Customization
Site URL: https://icosahedron-orchid-nxj5.squarespace.com/ Hi, I have some animated text on my about page, which I'd like to apply to all pages. It's a series of statements that start with the same characters. E Ch O I want it to line break after each word, or where I specify. Currently it types out in one line until it hits the section border and wraps. I'd like it to type out each word on a new line (like below), over 3 lines but line-break tags don't work. Early <br /> Childhood <br /> Education <br /> Have treid <br>, <Br/> & <br /> Break tags work in the page viewer but not when testing the animation: <script> is in the header Code block below: <section class="sp-intro"> <h1 class="sp-headline letters type"> <span class="sp-words-wrapper"> <b class="is-visible">Early <br>Childhood <br>Organisation</b> <b>Embracing <br>Character & <br>Originality</b> <b>Encouraging <br>Children to be <br>Open-minded</b> <b>Enhancing <br>Childhood <br>Occupations</b> </span> </h1> </section> Site password is ECHOTEST. Any help would be awesome! -
Hi, Does anyone knows how to create a crossfade animation for two images? for example, i have to images, one of top of the other one and i need them to be like back and forth, like changing that 1 second one image is on top and the other second the second image is on top. I dont know i explained myself, if not please let me know so i can be more specific! Also, does anyone knows how i can create this slider effect to a gallery images? https://abdomohamed.com/ the one in the "boharat" section. Heres a video! Thank you in advanced!! Grabación de pantalla 2022-05-19 a la(s) 19.35.14.mov
-
Adjust the animation timing of specific text
bowermagic posted a question in Coding and Customization
Site URL: https://www.bowermagic.co.uk/ How can I adjust the timing of the appearance animation of some specific text? There are two lines of text which appear in succession using the default fade in animation. I'm looking to have the second line wait for a few seconds before appearing, although they're both overlaying the same picture. Is this possible? -
Site URL: https://kknomics.squarespace.com/program I've used a Blog to create an achive for festival events in 2017-2021. I've added Squarewebsite's Universal Filter to be able to navigate between tags and categories. I want to publish future events as blog posts - for the festival that will occur in october 2022. Is it possible to overrun the Squarespace settings and allow a future date as "published date" (NOT scheduled) ? When I try to choose October 21st 2022, it automatically chooses today's date... I chose not to use Event page because the limit of 30 past events was too low. Does anybody know how this can be done? 🙌 -
Site URL: https://www.visualmediachurch.com/testdesigner Hey, I am testing out img.ly image editor in my site. When it loads on the live page I cannot scroll. Any reason why? https://www.visualmediachurch.com/testdesigner
-
Site URL: http://www.tlastmarks.com Hi everyone! My client is looking to have a completely responsive/interactive rainbow on their website. Each 'color' of the rainbow corresponds to a different 'trait'. The client would like the rainbow to ideally have a hidden/reveal feature, in which hovering over the different colors would reveal their matching 'trait'. See below for a quick drawing of what they are looking for. I understand this would likely require java and/or jQuery which I know nothing about. To confirm, natural state would show no text, hover states would reveal different texts. Ex: when Red is hovered, the text for "kindness" appears, when Green is hovered, the text for "generosity" appears, etc. Hoping and praying someone can help me figure this out. @bangank36 @creedon
-
Site URL: https://www.ashtonography.com/ I have a simple slideshow on my site homepage. I have it set to autoplay, which is good - I want to cycle the images automatically. But, I recognize this can be annoying if the window is sitting half behind another window, etc, and it just goes and goes. Is it possible to add play and pause buttons so it'll still automatically cycle, but CAN be stopped if the user wants?
-
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>
-
I made a code in processing thats java. I'm having problems finding any resources or tutorials on how to put it into my site. If its even possible. I go into "Pages" > "Page Settings" > "Advanced" inject code here. It doesn't work. The code itself just shows up on the page. Another thing is that this code basically uses the mouse to control an image. So the image needs to be uploaded as well. Could I put my Java code into CSS? Again this is Java, not JavaScript. Any help would be appreciated. See code below. PImage img; void setup() { size(1440, 810); img = loadImage("test4.jpg"); img.resize (1440, 810); } void draw() { background(#FCEAEA); fill(0); noStroke(); float tiles = mouseX/2; float tileSize = width/tiles; translate(tileSize/2, tileSize/2); for (int x = 0; x < tiles; x++) { for (int y = 0; y < tiles; y++) { color c = img.get(int(x*tileSize), int(y*tileSize)); float size = map(brightness(c), 255, 0, 0, 3); ellipse(x*tileSize, y*tileSize, size, size); } } }
-
I am looking for a blog post counter for my website. The blog on my website focuses on cigar reviews and each new post is a new cigar review. I would visitors to know how many cigars have been reviewed on my website in total using a blog post counter or the likes. Is this possible?
-
Help with Multilingual Squarespace website
thecigarbible posted a question in Coding and Customization
Dear Community, I am in the process of making my website Multilingual. For the moment I have set up a test Squarespace website to experiment on, though the implementation on my live website will be the same. Website: http://lychee-sheep-23gt.squarespace.com/ Password: 123456789 Template: Brine I have followed the guide found here https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template with great success. However, I am stuck on the following: On the mobile / tablet view I would like the Language switcher to appear on the bottom of the mobile menu and not in the header... For reference here is the code I have used so far. CODE INJECTION FOOTER: CUSTOM CSS: Please take note: I am not a coder. I can understand instructions on code and modify them so they work for me.... If somebody could please help me with this, it would honestly make my day! Thanks Max -
Site URL: https://johnetterleebooks.com/ Does anyone know how I can make my header like the one in this website and do a video background? https://stevenkonkoly.com/
-
Diable announcement bar javascript on mobile
AllenMars posted a question in Coding and Customization
I'd like to diable the announment bar javascrip on mobile to increase the loading speed. I know how to do it with css (display:none). But it does not stop the script acutally. -
Site URL: https://www.smore.com/clippy-js Hi there - Can someone please give me a hand adding this to my site: https://www.smore.com/clippy-js. I'm looking for the 'Clippy' version to be added so when users first visit they are greeted with it - and then on every page after also. I am using Squarespace v7.1. Thanks!
- 1 reply
-
- 1
-
-
- javascript
- java
- (and 2 more)
-
Hello! I've recently changed my site template to Tudor (Skye Family), and noticed that most of my blog pages don't have an H1 associated with them. For example, on this blog page: https://bitbloggist.com/video-game-blog-collection/top-10-switch-games-so-far The text "10 Best Switch Games Right Now" is automatically classified as an H2 instead of an H1. There's no way to change this in the style editor, so I believe I'll need some custom CSS to change this. Also, this change only needs to apply to individual blog posts, as I don't want my home page to have multiple H1's listed. Thanks in advance! -
How do I add a javascript widget on a specific page?
AlexandraW posted a question in Coding and Customization
Hi all, I'm working on a website for an Amsterdam based real estate agent who would like to show real time reviews from an external housing platform on the website. The code I got from the platform is this: <script type="text/javascript" src="https://www.funda.nl/js/ifcom.js"></script> <script type="text/javascript"> // Initialize cross-iframe communication var ifcom = new IFCom('host', false); // Initialize frame ZoekWidget.init('https://www.funda.nl/beoordelingenwidget/61016/1/3=86A3AA;6=63/Verkoop'); </script> The widget should be shown at this page https://www.her-makelaardij.nl/beoordelingen in the black section between the three logo's (Funda, Google, Makelaar) and the pictures. Is it possible to put this on the website and if yes, what's the best way to do it? I don't have any experience with this. Thanks in advance! Alexandra Ps. Attached a screenshot of the actual platform page- 1 reply
-
- 1
-
-
- javascript
- java
- (and 1 more)
-
Site URL: https://www.ssteart.com/presets/p/essential-preset-pack-by-ssteart I would like to remove the scrollbar that appears next to the previews in a product slideshow. Right now I have used this code on the product page, though that also removes the main page scrollbar. Is there a way to specifically target the product item? -
Site URL: https://www.ssteart.com I have created a back to top button on my site using this code: While it works great in pretty much every way I found that when moving to another page the button is already there as soon as the new page loads (it should appear while scrolling down). If I start scrolling down and then up it starts behaving normally, but I would like to fix it so that when loading a page the button doesn't show up unless I scroll down a bit. Would that be possible? Thank you.
-
Site URL: https://lily-oboe-g479.squarespace.com/ Password is "1" Hi, I have no idea how to install Rolly.js to my site. I want to have smooth scrolling but I know nothing of javascript. Here is the website where you install it: https://rolly.maj.digital/ Here is where you install it: https://mickaelchanrion.github.io/rolly/guide/ Someone please help me Thanks, - Kevin
-
Add Looping Typewriter Typing and Deleting Effect to 7.1 Site
sethg posted a question in Coding and Customization
Site URL: http://www.sethgoodfellow.com/ Hi, I would like to add a looping typewriter typing effect that loops through a series of lines of text. A blinking cursor spelling out a line of text, deleting back over it, then typing the next line in a series. the password to my site: password example: https://www.innovativeink.ca/ I have found several forum queries that had some solutions on here already, but they do not seem to be working for Squarespace 7.1 which is what I am using to build this site. Does anyone know of a plugin for sale that offers this already coded with instructions for installation and modification? Thanks in advance!
