Jump to content

EveR_

Member
 View Profile  See their activity

  • Posts

    36

  • Joined

  • Last visited

 Content Type 

Everything posted by EveR_

  1. EveR_
    Site URL: https://sapphire-poodle-5w36.squarespace.com/config/pages The following is the code we used for a testimonial; the pop-up works fine but when one closes it and the video is not paused, the background sound will keep playing. Please help us close the video pop-up without any background sound (aka stop the video on the background automatically ). The code is on the New Testimonial page https://sapphire-poodle-5w36.squarespace.com/config/pages password: hello97 Thank you for your time! <!DOCTYPE html> <head> <title>Creating a modal window with HTML5 &amp; CSS3</title> <style> .modalDialogH { position: fixed; font-family: Proxima Nova, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; !important> } .modalDialogH:target { opacity:1; pointer-events: auto; } .modalDialogH > div { max-width: 80%; height: 70%; position: relative; margin: 10% auto; padding: 5px 20px 20px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .closeH { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: 2%; text-align: center; top: 2%; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .closeH:hover { background: #00d9ff; } h2 { text-align:center; } </style> </head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <a href="#Haruka M., Phillips Exeter Academy (USA)"><img src="https://i.ibb.co/5L3Q0vL/Haruka-Image.png" alt="Haruka-Image" border="0"style="position:relative; display: block; margin-left: auto; margin-right: auto; width: 80%;"></a> <a href="#Haruka M., Phillips Exeter Academy (USA)">Haruka M., Phillips Exeter Academy (USA) [VIDEO]</a> <div id="Haruka M., Phillips Exeter Academy (USA)" class="modalDialogH"> <div> <a href="#closeH" title="Close" class="closeH">X</a> <h2 style="font-size:2.5vw;">Haruka M., Phillips Exeter Academy (USA)</h2> <h2></h2> <iframe width="100%" height="80%" src="https://www.youtube.com/embed/W27_K-9fpI8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </body>
  2. EveR_
    Thank you so much, but the image is not clickable...The title went over the image as well, and when I click edit, it says that jiro and alex are in one code block! it also looks that the video is being cut out the screen when on mobile preview.
  3. EveR_
    Hi thank you! So, for Jiro testimonial: (see picture) the video is super stretched. For Alex: the code is working, but when I select the mobile preview the pop-up gets cut off. How can we mke it fit the mobile preview as well? Also, is there any way to make the pop-up open from the image as well? The last code I used (that I found on Squarespace forum) did not work out and it disrupted the layout. If you can, please focus on Alex's testimonial, thank you very much. I really appreciate your help and insight.
  4. EveR_
    For Jiro I would like to make it smaller to fit desktop and mobile preview. Video should not be cut out. For Alex, I would like for the pop up to have margins and to not disrupt the page's layout. Thank you.
  5. EveR_
    Try now. There are two different pop ups. The one under Jiro has two issues: (1)it's not centred and in order to adjust the vode to the mobile preview, on the desktop (2) layout the video got stretched. (here there is only one code block) The one under Alex needs (1) margins and it gets cut out when in preview mode. (here there are two code blocks) If you go on edit mode you can see the blocks under the images and the codes that have been used. i can share the codes here if you cannot access the page, even though you should have no issues. if you want I can add you as an admin ...this issue os really dragging to much time ufff (the password is the same, the page is Home page) https://mayflower-oriole-63kg.squarespace.com/home?noredirect You choose which one to focus on, because we have tried almost everything lol. Thank you for your time.
  6. EveR_
    Hi, the page is the "Home" page. I do not intend buying a new site since I already have one which is public; I use trial websites to try codes or structures, but thank you for the advice. Did you had any problems accessing this site? Did you manage to see the code? About SQ; all the codes we have been trying, even the ones that worked for ppl here in the forum, aren’t working properly this is why the SQ customer care replied to us with that message.
  7. EveR_
    Site URL: https://parrotfish-helix-nx86.squarespace.com/config/pages Hello, I found a way for SQ to accept a pop-up code without disrupting the layout. The only issue left is that it needs to be centred, insted it looks as in the picure. Not-linked page I am working on is: Testimonials EVE layout works (Copy) The pop-up code is the following: <!DOCTYPE html> <head> <title>Creating a modal window with HTML5 &amp; CSS3</title> <style> .modalDialog { position: fixed; font-family: Proxima Nova, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; !important> } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 560px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } h2 { text-align:center; } </style> </head> <body> <a href="#Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >">Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) ></a> <div id="Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >" class="modalDialog"> <div> <a href="#close" title="fadeout" class="close">X</a> <h2>Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA)</h2> <h2><p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> “I spent about 3 months at the Chamber of Commerce in Japan, and that was a transformative time for me! I got to both experience doing business with diverse clients from both Japan and North America, and also organize the events we met them at! Having the opportunity to hear the stories of businessmen/women from overseas working hard in a foreign country was a unique experience I wouldn’t forget. This internship taught me both the intricacies of handling clients of all backgrounds and also the mechanics of organizing large events. I am extremely grateful for this opportunity offered to me and hope to keep on developing my skills that were nurtured during this internship.” </h2> <iframe width="560" height="315" src="https://www.youtube.com/embed/jbcwGBmfzdQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </body>
  8. EveR_
    Hi! The trial website expired in the meantime. I created a new one https://mayflower-oriole-63kg.squarespace.com/config/home passw: hello97 SQ customer care told me that sometimes codes will not display properly because of the program's build in code; for example, in this page I cannot see the video when clicking on the title, but other times it displays.
  9. EveR_
    Hi @bangank36 could help please?
  10. EveR_
    @tuanphan please read above
  11. EveR_
    Hi! I can see the video now! Thank you, but can you help me to put some margins to the pop-up? the text, the video are attached to the margins I'd like to put a bit of space. Without the video, the pop-up has margins (please see image number 2), but they disappear once the video is inserted.
  12. EveR_
    Please go here @tuanphan
  13. EveR_
    @tuanphan this is the full code; I used your suggestion for the video part, but it won't show... <div style="display:none;"> <div id="bio-alex"> <h3>Alex S., University of McGill, The American High School in Japan (Japan)</h3> <p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> "Throughout the summer of 2021, I was given the opportunity to work for two companies, DASH and CITEK, as well as a Ski Resort Fund. Working under DASH, a co-living business, we furnished an apartment building and set up the utilities and internet services for future residents. Furthermore, we managed the finances to identify all of the ordered, cancelled, and returned purchases. For the Ski Resort Fund, we created a presentation directed at potential investors about a potential Ski Resort fund to aid the struggling ski industry in Japan amidst the COVID-19 pandemic. Our main focus involved research, data analysis, and communication skills to present our findings regarding the market. For CITEK, a construction services company, we developed a homepage for potential clients and learned how to create an engaging and modern interface. From being involved in real world businesses to developing my data management and analysis skills, this internship under ConnectEd U has given me an invaluable experience." </p> </div> </p> <video width="320" height="240" controls> <source src="https://youtu.be/NFyxml7idZA" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div>
  14. EveR_
    Also my video is from youtube.
  15. EveR_
    I tried but this is how it is showing...Did I do something wrong? Should I use the embedded link instead of the url?
  16. EveR_
    Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages Can someone help me understand why this youtube video is not showing? what is wrong with the code? site passw: hello97 i.e. this is the code <div style="display:none;"> <div id="bio-alex"> <h3>Title</h3> <p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> "text goes here." </p> <!DOCTYPE html> <html> <head> <title>HTML Video embed</title> </head> <body> <p></p> <br /> <iframe width="560" height="315" src="https://youtu.be/NFyxml7idZA"0" allowfullscreen></iframe> </iframe> </body> </html>
  17. EveR_
    Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages Hello everybody! I really need help to figure out how I can inject a video url into this pop-up code please. Step 01. Insert the following into the code injection area of the advanced tab of the page you wish to utilize the pop-ups: <link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> Step 2. Now you need to create two code boxes. Code box 01 - For Display (this is your image or text that will show on the page) <a href="#" data-featherlight="#bio-name"> <img src="image link goes here"</a> <p style="text-align:center; color:#727272;">Text Goes Here</p> Step 03. Code Box 02 - For your Bio/pop-up Window <div style="display:none;"> <div id="bio-name"> <h3>Header/Name</h3> <p style="font-family:Lato; font-weight:500; font-style:normal; font-size:12px; letter-spacing:.4px; line-height:2.18em; color:#999999;" !important> Text goes in here. </p> </div> </div> Where can I insert the video url? The password to this trial website is: hello97 You can see the edits/code on the Home page (Alex S., University of McGill, The American High School in Japan (Japan) SECTION
  18. EveR_
    @tuanphanIt has to be a video, not a gif...I just need to figure out how to insert it in the code. Thank you for your help.
  19. EveR_
    Hi, I found a way to create a pop-up by clicking on the title and on the image. Would you be so kind to help understand how could I insert videos in the pop up too? My boss would like to add for me to find a way to add video as well in the pop up...if you could help before the 18th that would be ideal...but no pressure, I understand if you cannot comply. I believe the source code was from this thread: 1step: Step 01. Insert the following into the code injection area of the advanced tab of the page you wish to utilize the pop-ups: <link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> Step 2. Now you need to create two code boxes. Code box 01 - For Display (this is your image or text that will show on the page) <a href="#" data-featherlight="#bio-name"> <img src="image link goes here"</a> <p style="text-align:center; color:#727272;">Text Goes Here</p> Step 03. Code Box 02 - For your Bio/pop-up Window <div style="display:none;"> <div id="bio-name"> <h3>Header/Name</h3> <p style="font-family:Lato; font-weight:500; font-style:normal; font-size:12px; letter-spacing:.4px; line-height:2.18em; color:#999999;" !important> Text goes in here. </p> </div> </div> You can see the edits/code on the Home page (Alex S., University of McGill, The American High School in Japan (Japan) SECTION) https://butterfly-magnolia-5ta9.squarespace.com/config/pages Although here it seems it's not working, it actually is, on the company's website. The video I would like to add can be found at the following link: https://www.youtube.com/watch?v=NFyxml7idZA Thank you again for the consideration.
  20. EveR_
    I see; the url is the same https://butterfly-magnolia-5ta9.squarespace.com/config/pages Pass: hello97 Thank you for looking into this as well.
  21. EveR_
    Hi, I'm sorry, I set up a password. Passw: hello97 https://butterfly-magnolia-5ta9.squarespace.com/config/settings
  22. EveR_
    Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages Hi! I have this code that works when outside of Sq. The first image shows how it should be; the second how it actually shows on Sq. Website (Home page): https://butterfly-magnolia-5ta9.squarespace.com/config/pages <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="container"> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Learn More </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Alex J. Shin</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Throughout the summer of 2021, I was given the opportunity to work for two companies, DASH and CITEK, as well as a Ski Resort Fund. Working under DASH, a co-living business, we furnished an apartment building and set up the utilities and internet services for future residents. Furthermore, we managed the finances to identify all of the ordered, cancelled, and returned purchases. For the Ski Resort Fund, we created a presentation directed at potential investors about a potential Ski Resort fund to aid the struggling ski industry in Japan amidst the COVID-19 pandemic. Our main focus involved research, data analysis, and communication skills to present our findings regarding the market. For CITEK, a construction services company, we developed a homepage for potential clients and learned how to create an engaging and modern interface. From being involved in real world businesses to developing my data management and analysis skills, this internship under ConnectEd U has given me an invaluable experience. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div>
  23. EveR_
    Hi! Thank you for replying. I added some text to the list, please tell me if I can help you in any other way.
  24. EveR_
    Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages Hello, could you help me create a pop-up window when clicking or hovering over a picture or a text in this section please? No plugins that require payment please, since I need an affordable solution and would also like to learn the code for future reference. You can find the page section of the screenshot on the Home page. Thank you all for your time and insight.
  25. EveR_
    Hi! Thank you for answering! Sadly, I can't afford to look for plugins that I have to pay. Is there any other way?
×
×
  • 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