img

[Javer]

Hello! Problem, I want a menu to open by clicking on the picture, I made the menu myself, I just need to change the position of the menu by clicking on the picture.

[kirupa]

Hi @Javer - can you share more details like a screenshot or what your current markup/code looks like?

Cheers,
Kirupa

[Javer]

I have already removed the script because it did not work, I did it as in the book on chapter 30

[Javer]

<a href="#" class="logo" id="setting"><img src="/Users/daniil/Documents/qwins/png/imgonline-com-ua-Resize-xxZoL2fDi8Sp.png"></a>

<script>
     let setting-menu = document.querySelecor("#setting");
     setting-menu.addEvenListener("click",menu_open, false);

     function menu_open(e){
       document.logo.style.border = "20px solid darkred";
     }

    </script>

here is the code. relying on a book

[Javer]

@kirupa

[kirupa]

When you check in the console, what error are you seeing? Here is a guide on how to work with the console: Console Logging Basics

Now, one thing that seems off is the spelling of your properties:

• querySelecor should be querySelector
• addEvenListener should be addEventListener

Once you make these spelling updates, see if your code works. If it still doesn’t work, check the Console (using the guide from the earlier link if you aren’t sure how to do that) and let me know what errors you see.

Cheers,
Kirupa

[Javer]

writes no errors, but the code still does not work exactly
@kirupa

[kirupa]

Did you fix the spelling of the misspelled properties? Can you paste a screenshot of what it is that you currently are seeing in your browser when you try to run this app?

[Javer]

[Javer]

throw something else? @kirupa

[kirupa]

When I ran the snippet you posted, the Console showed me another error:

It turns out you can’t name a variable as setting-menu where you have the - character. Also, this line “document.logo.style.border” doesn’t work either. What does document.logo refer to here?

Here is a working example where clicking on the image gives it a border: https://codepen.io/kirupa/pen/rNJrpYj

Take a moment and see where the book’s instructions and what you have differ. JavaScript isn’t very forgiving of misspellings and syntax errors. You have to ensure your code is exactly as specified.

Hopefully this helps

[Javer]

helped, thanks.
And how to make it so that when you click in an empty area, this frame disappears in the picture? @kirupa

[kirupa]

You can listen for a click event on the body element and essentially undo the inline style you are setting on the image.

Two tutorials that can help you out:

• Events in JavaScript
• Setting CSS Styles using JavaScript | KIRUPA

[Javer]

Good afternoon, the problem is not solved. I don’t understand how to make it so that when you click on the picture, the property of another class changes, that is, I made a menu and indicated an indent from the right -100%, it is necessary that when you click on the picture this indent disappears (that is, it was 0%), I think I clearly explained . Sorry for such stupid questions

@kirupa

[kirupa]

This tutorial sounds like it can help you out: Creating a Smooth Sliding Menu | KIRUPA

What it highlights and what you describe trying to do are very similar

[Javer]

Thanks, I already figured it out myself, but thanks for the answer)

[Javer]

Hi again!
I had such a problem, I created a border-radius and put a few lines of text into it, but I can’t put the picture there (I’m doing a project with a partner, he said the position is absolute and you can’t use others)
Can you please help? I will attach the code below

[Javer]

type or paste code here

 <main>
    <div class="Kurs">
      <img src="/Users/daniil/Downloads/9945b037-c6dd-4b68-8091-ce5614962c0d 1.png" alt="геи" class="ImgKurs">
               <div class="NameKurs"> Название курса </div>
                <div class="shortOpisanie"> Краткое описание курса <div>
    </div>
 </main>

[Javer]

type or paste code here

.main {
display: flex;
flex-direction: row;
gap: 30px;
height: 248px;
width: 800px;
background: #DFE6FF;
}

.NameKurs {
padding-left: 635px;
margin-top: 209px;
height: 248px;
width: 970px;
margin-left: 235px;
font-family: ‘Raleway’;
font-style: normal;
font-weight: 800;
font-size: 18px;
line-height: 100%;
padding-top: 12px;
padding-left: 400px;
padding-bottom: 218px;

box-shadow: 4px 4px 5px 3px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

.shortOpisanie {
margin-left: 635px;
}

[kirupa]

If I understand correctly, you have an absolutely positioned image. Its parent is not absolutely positioned, so you need a way to have the parent’s border radius apply to the image. Right?