Hiding jpg and profile_image

[davy_yg]

Cek this website: http://fresway.com/

On the left corner you see there is a big circle when you press it hides all other round buttons around it. Now, I would like it to hide the profile_picture as well and the light jpg under it. How to make such a thing?

Here is the profile_image codes:

home.blade.php

<div id="profile_image">

                <img id="profile_picture" src="{{url("").'/'.$user->image_profile}}"/>
                {{--<div class="dropzone" id="edit_image" data-width="176" data-height="174" data-resize="true" data-url="{{action('AjaxController@postUploadProfile')}}" style="width: 176px;height: 174px;left: 0px;display: none;">--}}
                {{--<input type="file" id="profilefileupload" name="thumb" />--}}
                {{--</div>--}}

                <div id="image_upload"></div>

                <div id="profile_image_edit" style="display: none;">
                    <a href="#" id="btn_upload" onclick="javascript:editProfile();"><span
                                class="glyphicon glyphicon-edit icon-pp" aria-hidden="true"></span></a>
                </div>

                {{--<div id="profile_pict" class="dropzone" data-resize="true" data-url="canvas.php">--}}
                {{--<img src="{{url("")}}/images/user1.png"/>--}}
                {{--<input type="file" id="profilefileupload" name="thumb" />--}}
                {{--</div>--}}
            </div>

What other codes should I add to hide the profile image and the light jpg under it?

Here is the js code to hide the round buttons under it:

$('#profile_picture').click(function (e) {

    toggleOptions($(".selector"));
});

What other codes should I add to it to hide the light jpg?

[hericles]

You'll want to either toggle or set display: none on:
$('.image_road img') and $('.profile_picture img')

Although you'll want to remember that if you hide the profile pic completely there is nothing left to click on to bring the buttons back.

[gentlemedia]

You could do this:

$('#profile_picture').click(function (e) {
    toggleOptions($(".selector"));
    $('#profile_picture, .image_road').hide();
});

But theh you can't interact wth the profile picture anymore, because it wil set it to display: none, so you will have to be more specific how you want to hide it and how do you want it to to show up again.

[davy_yg]

To show it up again I create another image that initially should be hidden under the profile_picture.

<img id="water" src="{{url("").'/images/water.gif'}}" height="100">

...

$('#water').click(function (e) {

    $('#profile_picture, .image_road').show();
});

I already create the jquery and I wonder why the gif image is not clickable just like the profile_picture?

[gentlemedia]

I wonder why the gif image is not clickable

Hard to tell why without seeing any page with that image

[davy_yg]

Recheck the page again:

http://fresway.com/

If you click the profile image it will hide the light jpg and profile image. Then, there is this gif water image. but I you cannot click it. I thought I already code it right for it to be clickable.

[gentlemedia]

Your .selector .social-media-box is covering that water.gif image due to the position: absolute;. If you add a z-index: -1; then it doesn't cover the image anymore.

[davy_yg]

1) What should I do so that the gif image is clickable?

I forget where I put the z-index: -1;

Should I write it like this:

$('.selector open .social-media-box #profile_image #water').click(function (e) {

    $('#profile_picture, .image_road').show();
});

There are too many id and class parent for water. There are around 8.

2) Another thing: how to create water effect for each background changes?

I try to put a water gif image on top of the background but it doesn't do any good. Is there any other way to create a water effect for every background changes?

3) Is it possible to make it like this: on the first click it hides the circle navigation around it. on the second click it hides the light jpg.

$('#profile_picture').click1(function (e) {

    toggleOptions($(".selector"));
  });

$('#profile_picture').click2(function (e) {

    $('#profile_picture, .image_road').hide();
});

How to code it correct?

[gentlemedia]

1 - Add the z-index to the CSS block .selector .social-media-box in your CSS file

2 - I have no idea what you want with a water effect

3 - No that's not how it works. Just use a delay. In the example below if you click on the profile picture first the options gets hidden and after 2 seconds, the profile picture itself and the rays of light gets hidden. Adjust the delay to your linking.

$('#profile_picture').click(function () {
    toggleOptions($(".selector")).delay(2000).queue(function () {
        $('#profile_picture, .image_road').hide();
    }).dequeue();
});

[davy_yg]

I already try placing the following code:

$('#profile_picture').click(function (e) {

    toggleOptions($(".selector")).delay(2000).queue(function () {
      $('#profile_picture, .image_road').hide();
    }).dequeue();  
});

I wait after 2 seconds and nothing happen.

[davy_yg]

http://fresway.com/

Well, this is the latest update. I already insert the codes just doesn't work yet.

[gentlemedia]

Okay, not sure why it gives a delay undefined, but try it with a setTimeout function instead.

$('#profile_picture').click(function () {
    toggleOptions($(".selector"));
    setTimeout(function() {
        $('#profile_picture, .image_road').hide();
    }, 2000);
});

[davy_yg]

Thanks it works. You solved no 3).

I still have two more:

1) What should I do so that the gif image is clickable?

I forget where I put the z-index: -1;

Should I write it like this:

$('.selector open .social-media-box #profile_image #water').click(function (e) {
    $('#profile_picture, .image_road').show();
});

There are too many id and class parent for water. There are around 8.

2) Another thing: how to create water effect for each background changes?

I try to put a water gif image on top of the background but it doesn't do any good. Is there any other way to create a water effect for every background changes?

Thanks.

[gentlemedia]

I explained 1 already in a previous post and 2 also kind of. For that you might want to look into HTML5 Canvas and/or SVG.