Jump to content

MoeTalks

Member
 View Profile  See their activity

  • Posts

    130

  • Joined

  • Last visited

 Content Type 

Posts posted by MoeTalks

    Can't stop opacity animation at 50%

    in Customize with code

    Posted

    Good Morning @Ziggy.  Thank you for that.  It did not work until I modified it by adding .sqs-shape to it since the colors are shapes.  Once I did that your original CSS worked perfectly, but with one caveat and maybe you have some insight on this.  On yours at 10s, the 50% color just popped in at 0.5.  I could clearly see that it was fading in but at that last keyframe, bam, 0.5.  I've tried the below thinking that every 1s would increase the fade in by 20% so that the last keyframe wouldn't have that visible contrast.  Is there a way to better fade that in or is this the best under the circumstances.  20% could very well make a difference in the fade so not a big deal if it is the best for right now.  And thanks again for pointing me in the right direction. 

    #block-9d6cf7bb31c4ae46e470 .sqs-shape, #block-42eab21575a620f1535a .sqs-shape {
      animation: fade-me-in 6s;
    }
    @keyframes fade-me-in {
      0% {opacity:0;}
      20% {opacity:0.1;}
      40% {opacity:0.2;}
      60% {opacity:0.3;}
      80% {opacity:0.4;}
      100% {opacity:0.5;}
    }
     

    Can't stop opacity animation at 50%

    in Customize with code

    Posted

    Both of these blocks are .sqs-shapes.  I have two different colors on each shape that I want to fade in but only up to 50%.  The problem is they keep going to 100% and I can't for the life of me figure out why?   I read something about jQuery and using fadeTo{} but that looked complicated for what I want.  I know the opacity can be at 50% because when I remove the animation and just use 50% it works.  But I have the blocks on top of a video that gives it a cool affect.  See video attached.

    The only reason I'm having it fade in is because when the page loads the shapes load before the video so you see this start pink/blue color and then the video comes on.  Thanks.

    moetalks.com/home

    PW 2024

    #block-9d6cf7bb31c4ae46e470, #block-42eab21575a620f1535a  {
    animation: fade-me-in 10s;
    }
    @keyframes fade-me-in {
      0% {opacity:0;}
      50% {opacity:1;}
    }

    Point portfolio url slug back to home page

    in Customize with code

    Posted

    Hi David. 

    I tried copying yours and those didn't work. I tried mine below and those didn't work either. 

    /television/wait -> /home 301. that didn't work for me

    https://www.moetalks.com/television/wait -> https://www.moetalks.com/ 301.  That didn't work either.

    No worries here.  I'm going to give up on this one right now and just create something for that wait page in the portfolio section for the time being.  The site is still a work in progress so eventually I will look back at this and figure it out.

    Thank you anyway.  I do appreciate your time.  

    Point portfolio url slug back to home page

    in Customize with code

    Posted

    @DavidStewart  Hi David.  Unfortunately that did not work for me and I should have mentioned that this is a portfolio page.  

    I've tried

    www.moetalks.com/portfolio/television/wait -> www.moetalks.com 302
    www.moetalks.com/television/wait -> www.moetalks.com 302

    and I've replaced the moetalks with moecritiques since that is what I signed up with squarespacewith, however, I have moved my moetalks away from wordpress to SS but I have another 3 weeks before I can officially hand it over to SS but moetalks is tied to SS and working.  I'm sure this is user error.  Any thoughts on this?  Thanks. 

    Adding a sound effect (WAV file) to an image click

    in Customize with code

    Posted

    On 11/30/2021 at 6:05 PM, iamdavehart said:

    Hey,

    You'll probably need a business or premium subscription to do this as it has code.

    firstly you need to upload your file, so create a text box and insert a link. In the little link dialog click the cog and select File from the dialog and then upload your file. click close and this will give you a url to access your file. it will be something like "/s/key.wav". once you've uploaded it you can delete the link, the file is there now.

    image.png.c0b7f7a3dce31d96badb3df61d47959a.png

    image.thumb.png.520b4c7b2c9be2d2ab5c03f1b05dbce4.png

     

    Now you can add the code. Insert a code block and do something like this. This is just a demo, so you'll need to provide your actual site to get it exactly right, but you can try this to get your sound file working: 

    <a href="#" id="linkToPlaySound">Click Me For Sound</a>

<script>
document.querySelector("#linkToPlaySound").onclick = function(e) {
  e.preventDefault();
  const audio = new Audio("/s/key.wav");
  audio.play();
}
</script>

    this has two parts. 

    • the first part is the link. you won't need this in your final code because you've got some key pictures or something like that, but use this first to get the sound playing
    • the second part is the script. this finds the link and sets its click event to find the audio element and play it. note that it has our key.wav file. if yours is named differently change that code.

    Once you've got that working we should edit it for your site. (but it's easier to debug the code block above first until you've got the sound playing).

    On your site we need to target the section with the keys and attach our code to each of the URLs, we also need to make sure that the links aren't followed immediately otherwise you wont hear the sound it will just navigate to the other page.

    using a code block on the page (the same one above if you want) 

    <script>

  function playKeySound(e) {
  	e.preventDefault();
    const clicked = e.target;
    const audio = document.querySelector("audio");
    audio.play();
    // now remove the handler and click it again
    // after enough time has elapsed to play the audio
    clicked.onclick = null;
    setTimeout(function() { clicked.click(); }, 2000);
  }
  
  const keyImages = document.querySelectorAll("section[data-section-id='615c8149fd9a9c637af255f4'] a.sqs-block-image-link");
  for (let i=0; i<keyImages.length; i++) { keyImages[i].onclick = keyHandler; }
  
</script>

    this time round, we have a function that plays your key sound and then waits 2 seconds (2000 = milliseconds) and clicks the link a second time. After the function we go through every link in the relevant section on your website and assign that function to all of them so it doesn't matter which one you click.

    Hopefully this works out, although I should point out that I'm really not sure about sound on websites unless its absolutely necessary. Putting it here for educational purposes though and I appreciate its a stylistic choice.

     

     

    First, thank you thank you thank you.  I got this working but I did it in an unusual way and I want to make sure tha the way I did it was still correct.  I do have the business plan but I wanted a word in a sentence to play audio when clicked .   Here is a example of what I did in markdown and it works.  

    This is test of the word that when I click on it it plays the audio.  The word is  <a id="agathokakological">agathokakological🔊</a>, and it worked.

    <script>
    document.querySelector("#agathokakological").onclick = function(e) {
      e.preventDefault();
      const audio = new Audio("/s/agathokakological.mp3");
      audio.play();
    }
    </script>

    My only question is, is this the correct way to do this or should the script of gone somewhere else.  I originally did this in a code block as was suggested and when i pasted my paragraph in, it worked as well but of course it's a code block so everything was on one line, and I got that message that said script is disabled until I exit.  I just want to make sure I've done this properly.  I may pose this as a question as I am not sure if @iamdavehart is still on but if he is thank you again.   If you are one please send me your coffee link.
     

    Customize the audio block

    in Customize with code

    Posted

    This is the easiest way to describe what I would like to accomplish.  I would like to put that audio symbol as my audio block and have it play within SS.  Audio blocks can do this but they are HIDEOUS looking 😂 and I've tried to customize the player from insidethesquare but I suck at trying to customize it to this degree.  I would only one the audio symbol.  Is it possible to customize the audio block to this degree?

    https://www.dictionary.com/browse/sesquipedalian

    image.thumb.png.b68087adbc8420c8b5b5100025e28504.png

    https://www.dictionary.com/browse/sesquipedalian

     

    Gallery Workarounds if possible 7.1

    in Images & Videos

    Posted · Edited by MoeTalks
    Changed Ttitle

    I’m using a portfolio gallery to upload photos of film, tv shows, etc that I review. I have css script so that when you highlight over the image it transforms in scale and works beautifully.

    image.thumb.png.114ed98a886ab4982abc65b9b527cf9e.png

    But I don’t see a way to have a gallery like this and have text next to it so I’m stuck with just an image and I cannot for the life of me figure out how to target that image to do the the same transform with image and text over it.   Is this even possible?  @Beyondspace  made a Classic Gallery Blocks that works exactly as intended but again, even when inspecting I cannot seem to get this to transform.

    The Site is: https://www.moetalks.com/film-tv

    And the password is 2024

    If you scroll down you will see one that says abbott elementary in the portfolio that works but the one below it is the one that I cannot get to work and I want to separate film and tv.

    Any suggestions and thanks in advance.

    This is just a portion of the script.  There is more to this but I just wanted to give you an idea of the script that’s working.  

    {

    .gallery-grid-item 

      img:hover{height:100%!important; width:100%!important; transform:Scale(1.2);

    overflow:hidden!important; transition-duration:1s}

    .gallery-grid-item {overflow:hidden!important}

    Sound Effects on Hover/Click

    in Customize with code

    Posted · Edited by MoeTalks
    Add notes

    Let's make up a word.  sesquipedalian.  I would like that when a user clicks on that word or hovers over the word the audio for that word would lay.  Much like this google site except the SS player would play the audio.  Although I am now on the business plan, I thought I could just upload the .mp3, get the link for it and that would be that but that does not seem to work.  I'm not sure where to begin on this one.  Any ideas would be great and I buy lots of coffee for folks 😂  😂

    Oh, and I did go into chrome inspect and was able to copy out the mp3 link from SS static link which works as a link but it doesn't open on the same page it opens it on a new page (which I would expect). I just want it to play without showing an audio player like on the link below but I will settle for what i can get.

    Thanks.

     

    https://www.google.com/search?q=sesqupidlian&oq=sesqupidlian&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDM3ODlqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8

    I just lost 4 hours of work on Portfolio Page

    in Pages & Content

    Posted

    OMG I just had a heart attack.  I was about to join Fred Sanford and Elizabeth.  Fortunately I remembered everything I was doing and remembered I added a lot of code and removed code.  Once I removed all the code my portfolio pages came back.  I was trying to get rid of the footer of on the individual portfolio pages but I tried to combine .body-collections and I can't do that and I had an erroneous piece of code in there.  Thankfully it only took me about 25 minutes to figure it out.  I just wanted to explain it was my fault.  Crises averted.  

    I just lost 4 hours of work on Portfolio Page

    in Pages & Content

    Posted

    When I got to manage the portfolio page and i Hit edit, nothing shows up, nothing happens at all.  I just spent 4 hours on taking them from regular pages and putting them in portfolio page.  I was getting a 500 error but now nothing.  Is anyone else experiencing an issue.  I have put in a ticket but the ticket system is horrible because none of the suggested topics had anything to do with my issue.  I hope this is just temporary

     PW 2024

    missing porfolios.jpeg

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources