room-homepage simplified with pure javascript

Community feedback

• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greetings Ngouend raoul Gerard!!

  First Thank you so much for your feedback, I wasn't aware of that issue and I'm very grateful that you brought it to my attention. I will go back and try fix it.

  I think the reason why the transition and transform not apply, is because when the display:none; apply to an element, it will remove it completely from the accessibility tree so no element on the DOM to apply transform and transition to it, use the visibility property instead.

  you can change this variables to use visibility instead .

    --display-slide: none;
    --display-shadow: none;
  
    --display-slide: hidden;
    --display-shadow: visible;
  

  and apply flex to the elements that needed, and the transition should applied .

  and also when speaking of the accessibility, I see that you're nested a main element inside section, which is semantically not correct, that why you see that accessibility errors and warnings. to fix that just replace <section class="our_home"> with <main class="our_home"> and <main class="showcase"> with <section class="showcase">, and for label ether give the input an id with the same for value like on the hamburger menu or use button instead mush easy to style and is interactive by default.

   <label for="toggle_hamburger" class="menu_wrap">
                    <input type="checkbox" class="toggle_hamburger">
  
  
   <label for="toggle_hamburger" class="menu_wrap">
                    <input type="checkbox" class="toggle_hamburger" id="toggle_hamburger">
  

  I Hope this give you some hints if not please feel free to Call me anytime, " I will try my best", and correct me if am wrong on something, am on the learning process too.

  Marked as helpful

  0

  ---

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Greetings Imad , hope you are fine . I wanted first to make changes in my lines codes before replying your feedback. And guess ? You aimed right with your rocket, the sliding is working but, it tooks me times to understand how to apply visibility as usual i like play with display, i also got a headache to make the icon-left button operating well between yesterday and today. To find out the math function thats works.

  1

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  I fail to the same random pop up of images i was telling you in my feedback for your home-page-master project, seems it wasn't an error. I find out that when sliding forth or rear , at the times you reach the last sliding card respectively with the sense tooks, you have to reset the position of your variable slideIndex and then by doing that it turns the sense of the motion of cards. It's why their appearing with random pattern not just one pattern like we may like

  1

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  I still have a matter with the body shadow of my project it"s not acting in the right way:

  Below are the change i made in css and JS :

  .menu_wrap input[type="checkbox"]{
    position:absolute;
    top: 20%;
    left: 16%;
    transform: translate(-36%, -10%);
    width: 50px;
    height: 30px;
    background: transparent;
    opacity: 0;
    z-index: 300;
  }
  
  .menu_wrap .hamburger_image{
    position: relative;
    top: 0;
    left: 0;
    width: 50px;
    height: 30px;
  }
  
  .menu_wrap .hamburger_image img.hamburger_open{
    visibility: var(--display-shadow-close);
    position: absolute;
    top: 25%;
    left: 0;
    width: 30px;
    height: 20px;
    z-index: 100;
   
  }
  .menu_wrap .hamburger_image img.hamburger_close{
    visibility: var(--display-shadow-close);
    position: absolute;
    top: 66%;
    left: 30%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    z-index: 100;
  
  }
  
  .menu_content{
    position: absolute;
    display: flex;
    visibility: hidden;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    top: -1rem;
    left: -1rem;
    width: 100vw;
    height: 70px;
    background: var(--white);
  }
  
  .menu_wrap .menu_content ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    z-index: 100;
  }
  

   body::before{
      content: '';
      position: absolute;
      visibility: var(--display-shadow-close);
      top: 0;
      left: 0;
      width: 100vw;
      min-height: 365vh;
      background: var(--light-black);
      z-index: 1;
    }
  
    .nav_mobile{
      display: flex;
    }
  
    .showcase .nav_desktop{
      display: none;
    }
  
    .menu_wrap .hamburger_image img.hamburger_open{
      visibility: var(--display-shadow-open);
    }
  

  doc.addEventListener('click', bodyShadowedLive);
  
  function bodyShadowedLive(){
    if(toggleHamb.checked === true){
      doc.style.setProperty("--display-shadow-close", "visible");
    } else if(toggleHamb.checked === false) {
      doc.style.setProperty("--display-shadow-close", "hidden");
    }
  }
  

  1

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  I want also to say , feel free to reach me whatever times you like for projects you want feedback. I hope we could continue to enjoy times on working each one at his side and also together.

  Your concern helps me a lot thanks you, we are still learning and i wish my answers or suggestions in the future will have added value to you, and give you clues to reconsider what need to be improved.

  Hope haven't being too long through my says, just wanna makes things clear when slicing my messages , and gives you the right pitch to understand me.

  Have a Great day, Imad. We stay stuned.

  1

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  if you get once again time please see under my style of shadowed body to helps me see what is wrong with.

  Live links:

  • Solution URL: [https://github.com/BeinRain06/room-homepage-master.git]
  • Live Site URL: [https://beinrain06.github.io/room-homepage-master/]

  1
• 

  imad•3,330

  @imadvvPosted about 2 years ago

  This comment was deleted about 2 years ago

  0

  ---

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Thanks you Imad. I was a little busy on doing other stuff throughout yesterday. And end tired, that's why I haven't reply at you a few hours later this feed.

  I wasn't near to my computer.

  Yeah I noticed the lack of shadow, when clicking the menu. But I restricted myself to talk about it. Because I felt you'll look at it like I'm not trying to flex and think of you like a safe wheel at anytime, just as you decided to help me the day, the first you made me a feed.

  I will do change probably tommorow, and leave you a message after that

  I will try to fix the problem of accessibility. And organise to start a new project with frontend.

  I learned a lot on your feedbacks

  Once Again I'm writing thankfully to you.

  Have a great Day/night Imad. And Let's talk soon.

  0

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Greetings Imad, hope your day is running well.

  I have quite end to apply the change concerning the class spot_ct, and correct the html code for accessibility.

  I also add a shadowed body when clicking to the hamburger menu.

  Have a look, and see if this small add are good displaying

  Have a nice or beautiful day/ night with fun in whatever you do, Imad

  0

  

  imad•3,330

  @imadvvPosted about 2 years ago

  @BeinRain06

  Greetings Ngouend raoul Gerard.

  Thank you very much for getting in touch and being patient with me, in fact, my day was very good, I hope you are too.

  I really liked the end result, it looks amazing, I well use it as a reference to update my solution now.

  I just feel like this conversation should have been in Slack, not here as this section more for feedback not collaboration, and use it for collaboration, and the reason for that PR was just to remove some of that duplication that make it hard to debug and just give you a hint, that you can customize pretty easily as you did, and am sorry if I did something wrong that I didn't notice, please feel free to point to my stupid mistake as we learn most from our mistakes, but over all I gess we learned something wich amazing!! and just if you don't mind, I want to delete some of this comments, as we finished now, and you can reach me in slack anytime. for future collaboration.

  Have a Good day/night Ngouend raoul Gerard, peace

  0

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Feel free, but you are free! To delete some comments on the feeds. I understand.

  Joining the slack community, I will see yeah how to be in, I talk in such kinds if I have all the requirements needed.

  Ok, i wish we will soon be cooperating in slack.

  Spend fun times Imad while making your ways throughout the end of the day

  0
• 

  imad•3,330

  @imadvvPosted about 2 years ago

  This comment was deleted about 2 years ago

  0

  ---

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01 I'm very grateful, you took times really on my project, I have to get this good habit of you why, learning.
  I will check your pull request and the tools used for accessibility later in the day. By then, I will end this challenge effectively and move to one another, I'll also write you about the things ends in place. Now what might comes to say else : Have a Great Day/ I hope you'll share some advices again in one another project

  0

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Greetings Imad,hope the day is shining.

  I really want to join the slack community, but my android is 7.0 and I still have an aged computers which use Windows 7

  How can I do?

  I don't know if any solution is to resolve the problem,

  Good day/ night Imad

  0

  

  imad•3,330

  @imadvvPosted about 2 years ago

  @BeinRain06 Hi Ngouend raoul Gerard, why do still running windows 7 ??, I think the support for windows 7 ends on 2020, do you ever tried Linux before ? , i mean you can give linuxmint a try !! and the cool think about it, is has all tools you need including slack and it's pretty fast.

  0

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Humm ok i see, I think it's yeah one solution, I have find out that you can also update your Android phone system but that one is a bit risky,...

  0

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Ok, i don't need to uninstalled windows.
  Great, Imad, I will give it a try.

  I find to access slack with my phone from the beginning of the day but without success, as my phone has an old software

  Thanks you, I'll install Linuxmint...

  0

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Greetings Imad! How are you today, I hope well. I finally receive a message that helps me open slack with the desktop on Windows in my Gmail inbox mail.

  I need to transfer all the important of my laptop in a drive before trying Linuxmint.

  Once I could do it, i will ease my life by moving to Linux.

  Like said earlier I opened my slack in the desktop.

  Would you mind to send me your username on slack, by that we could discuss on projects effectively.

  Have a great an bright Day/ night Imadbg01

  1

  

  imad•3,330

  @imadvvPosted about 2 years ago

  @BeinRain06 Greeting my friend! yes make such to back up all you're important data, before booting to linux, and maybe watch some video on youtube to get an idea on it.

  for my username is imad bg, see you there .

  peace

  0
• 

  imad•3,330

  @imadvvPosted about 2 years ago

  This comment was deleted about 2 years ago

  0

  ---

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  Thanks you imad, It's a pleasure, I will check your link and let you know if I success to make my cards appears softly. But I will do my best. Thanks for your concern and your encouragement, it's a kind of wind with a positive energy I'm going soon to tell you about the issue. Also have a good day/night

  1

  

  Ngouend raoul Gerard•560

  @BeinRain06Posted about 2 years ago

  @imadbg01

  Feedback about sliding room-homepage-master

  Hi , imad through the last night i learned a lot from your code. How you manage to perform your sliders with transform and transition, especially under the class image and content where activation of transform were done via attribute data-show=true.

  I also added your process to make card sliding cards, however it's not working. Let's understand my approach:

  in a similar way in my css code class : 'image' represents 'show_slide' and the class 'content' represents 'spot_sight'. I activate transition while displaying the proper card with the **setProperty("--display-slide", "block") and adds transition and transform along the side but under my cap i'm not obtaining the result espected(the sliding)

  here below is my style of css an JS under the part concerning sliding effects:

  CSS

  
  .show_slide{
    object-fit: cover;
    background-repeat: no-repeat;
    background-position:  center center;
    transform: translateX(-100%);
    opacity: 0.72;
    visibility: hidden;
    /* transition: transform 450ms ease-in-out, opacity 400ms ease-in-out, visibility 350ms ease-in; */
    transition: transform 4s ease-in-out, opacity 2s ease-in-out, visibility 2.3s ease-in;
  }
  
  
  .spot_sight{
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 0 auto;  
    transform: translateX(100%);
    /* translate: transform 400ms ease-in-out; */
    translate: transform 4s ease-in-out;
   }
  

  doc.addEventListener('click', slideToTheRightBoxLive);
  
  function slideToTheRightBoxLive(e){
    if(e.target.classList.contains('icon_left')){
      n= -1;
      slideIndex= slideIndex + n;
      if(slideIndex> showSlides.length){
        slideIndex= 1;
      }else if (slideIndex < 1){
        slideIndex= showSlides.length;
      }
      for(let i=0; i<showSlides.length; i++){
        showSlides[i].style.setProperty("--display-slide", "none");
        spotSlides[i].style.setProperty("--display-slide", "none");
      }
      let k= slideIndex - 1;
      showSlides[k].style.setProperty("--display-slide", "block");
      spotSlides[k].style.setProperty("--display-slide", "flex");
  
      showSlides[k].style.transform= "translateX(0%)";
      showSlides[k].style.opacity="1";
      showSlides[k].style.visibility="visible";
      spotSlides[k].style.transform= "translateX(0%)";  
  
    } else if(e.target.classList.contains('icon_right')){
      n=1;
      slideIndex= slideIndex + n;
      if(slideIndex> showSlides.length){
        slideIndex= 1;
      }else if (slideIndex < 1){
        slideIndex= showSlides.length;
      }
      for(let i=0; i<showSlides.length; i++){
        showSlides[i].style.setProperty("--display-slide", "none");
        spotSlides[i].style.setProperty("--display-slide", "none");
      }
      let k= slideIndex - 1;
      showSlides[k].style.setProperty("--display-slide", "block");
      spotSlides[k].style.setProperty("--display-slide", "flex");
  
      showSlides[k].style.transform= "translateX(0%)";
      showSlides[k].style.opacity="1";
      showSlides[k].style.visibility="visible";
      spotSlides[k].style.transform= "translateX(0%)";
    }
  }
  

  perhaps hope you might glance an eyes on it , quite few minutes and let me know what you are thinking. Maybe i missing something when writings code lines. give me your feedback once again about what you see, of my code

  below the live url :

  • Live Site URL: [https://beinrain06.github.io/room-homepage-master/]

  i"m going to look yours with desktop , i mean your design of room-homepage-master , and i would leave my impressions

  Thanks you, have a bright and delighting day/ or night, Imad!

  1