Jump to content

Nic727

Members
  • Posts

    269
  • Joined

  • Last visited

Posts posted by Nic727

  1. Hi,

    I removed the if condition, because like you mention, I don't think it was useful for this action. However, I don't understand what you mean by true or false... Well, I understand what it means, but I don't understand why my focus() is returning false (I guess since it's not focusing). From every websites I visited, they are always using .focus() the exact same way I do... It even worked two days ago when I was testing another kind of search bar...

    ----
    Edit

    It works now when I add this 

    setTimeout(function(){ $('.searchbox'). focus (); }, 500);

    I don't know the reason it need a timeout, but now it works.

  2. Hi,

    I'm creating a search form that is appearing full screen when clicking on a "search" icon.

    The code I have for the HTML is :

    <!--SEARCH OVERLAY-->
        <div class="search-overlay">
            <i class="close-search fas fa-times"></i>
            <form>
            <input type="search" id="search" name="search" class="searchbox" placeholder="Rechercher sur le site...">
            </form>
        </div>

    and the JQuery

    // Search bar
        if($(".search-icon").click(function(){
            $(".search-overlay").addClass("open-search");
            $(".searchbox").focus();
        }));
        if($(".close-search").click(function(){
            $(".search-overlay").removeClass("open-search");
        }));

    What I don't understand is that the .focus() is not working at all, but the rest of the code is correct. I tried with a console.log and it just seems to pass through this line like if it doesn't exist.

    I tried everything like setTimeOut, placing the focus in another function, etc.

    Thank you for your help

  3. Hi,

     

    I have this design currently.

    1557632534-web1.png

    If I add a link to each of my cards, I get this blank page.

    1557632529-web11.png

    Do you know why <a> is affecting the child element? I though <a> didn't have styles.

    Thank you

  4. Hi,

     

    I know a link is not possible inside another link, but I'm trying to find a solution to this.

    <div class="ex-story">',
        <a class="ex-story-link" rel="noopener noreferrer" target="_blank" href="website" title="Title">
              <div class="ex-story-img" style="background-image:url('url')">
                     <div class="ex-story-meta">
                              <div class="category">Travel</div> <!-- I WANT A LINK HERE -->
                              <div class="blog-name"><h1>TITLE<span class="blog-date">// March 10 2019</span></h1></div>
                              <div class="blog-description">subtitle</div>
                              <div class="blog-authorname">author</div>  
                     </div>
                     <div class="bg-filter"></div>
              </div>   
        </a> 
    </div>

    Here you can see how my block look like.

    1552245198-untitled123.png

    All my block is a link, so you can click anywhere to access the blog post. The problem is my "category" div. I want people to be able to click on the category name to show blog posts in the same category. But this div is inside a link, so I'm unable to make it work. Do you know how I can fixe that? Right now I have no idea how to make it possible to click on the category link.

     

    Thank you

  5. Just want to update.

     

    Look like backdrop filter doesn't take transition into consideration even if it's transition happening in the background. Backdrop-filter should only used for certain case like blurred navigation or other things without transitions.

     

    Thank you

  6. Hi,

     

    What is the best use of height for the HTML and body tag?

    I currently use auto to don't have problem, but for my design, I need a background image to be height 100%. Should I use background height 100vh or 100% and have body/html height at 100%?

     

    Thank you

  7. Hi,

     

    I'm trying to add some blur background with backdrop filter and it's really a nice feature if you want to get the fluent design from Microsoft, but I have a weird glitch and I don't know if it's a bug with the filter itself or the fact that I'm working on an offline website with MS Edge.

    Backdrop filter doesn't seem to take transition into consideration.

    Problem 1 :

    Home screen. The button has a blurred background, but since my page go from black to image while loading, it keep the black until the image finish the transition. Same when changing the image.

    1546731304-bug.png

     

    Problem 2 :

    While creating my blog page, I thought it was cool to have a grayscale image, but since it's a background image, it only work with a backdrop filter layer.

    Here is what it looks like (I took some feeds from WWF for my work in progress only since I don't have blog yet).

    1546731306-bug2.png

    Here I hover image 1 :

    1546731306-bug3.png

    Here is the bug. When hovering the second image, it remove the backdrop-filter from the first image.

    1546731306-bug4.png

    It's very weird, because it only affect the image above and not the one bellow or the second above. If I hover the image with the bug, it go back to normal...

    Do you have any idea what may be the problem here?

     

    Thank you

  8. Just wanted to update this a bit since I just started to work on my website again after a break and I tried to use that for something else.

    I use backdrop-filter blur for a nice hover effect. The thing is that for some reason, the blur (1px) effect is adding 0.5px to my margin which I need to correct. It's very weird. Blur should stop right where you put it no?

    Whatever, I think my problem got fixed in Edge update. The only weird thing is aliasing around the corner which make a little artifact on the corner.

    1545611853-dasd.png

  9. Ok thank you. It worked. I will do more testing.

    https://www.w3schools.com/css/css_rwd_viewport.asp

     

    But what do you mean by device-independent resolution smaller than 768px?

    From what I saw, from the apple website, my device has a 750px width, but without the meta tag, it's like if it is a 1080px width and 1920px height. Just weird, but thank you for the tips. I will use that more often in my project since it's saving lot of times and a better use of media queries.

  10. Hi,

     

    What are the best media query to fully support normal desktop and laptop, tablets and phone?

    For now I always went with what I was feeling would be ok by figuring how it works by resizing my browser, but with a single live testing on my iPhone 8, I saw that it wasn't working. I don't really know why. Now mobile screens have almost the same resolution as desktop PC and it's hard to only use media query. For example, I use that to remove the white borders around my home screen here http://nicolas-duclos.com and my iPhone 8 show as a 750px width, but

    @media only screen and (max-width: 860px) {
        .home-border{
            display:none;
        }
    }

    it doesn't work.

    1538959325-file1.png

    I don't really know why the white border is still here and why the text is so small. It's 25px for my title and on my desktop for testing it look so big and horizontal screen too, but on vertical position text look smaller.

    1538959328-file.png

    Also, now there are lot of phones of different size on the market, what are the best way to support phone size without breaking tablets and desktop/laptop?

    What are the best media query to use?

     

    Thank you

     

  11. Hi,

    My computer is creating JPG file while editing the original picture and when working locally on my website everything is working well even if I use .jpg for my images.

    When on my server, it doesn't work and I need to change all my code to .JPG instead (capital letter). Is there a way in modern server to make that .jpg and .JPG is the same?

     

    Thank you

  12. weird… I will try to clear my browser cache and see if it helps.

    ------

    EDIT: Not working… Maybe something else...

    I tried in codepen https://codepen.io/anon/pen/wxJWxG

    It works when loading the page, but if you make the window smaller to get a scrollbar and activate the fixed attachment, it goes back to rectangular shape.

    I added a border-color and it looks like my image just doesn't care of the overflow hidden.

    1532290587-2.png
     

    EDIT 2: Well… If nothing works, I will just keep a mixed design between round and rectangle.

    - Round : Buttons, main album image on the album page and textarea to type message.

    - Rectangle : Blog images and images inside albums

     

  13. Hi,

     

    So I have a div containing a link containing an image and a filter, but I'm unable to hide part of the child elements.

     

    <div class="ex-story">
      <a title="Link to Indonesia: Responsible palm oil production by WWF" class="ex-stoy-link" href="https://wwf.exposure.co/indonesia-responsible-palm-oil-production" target="_blank" rel="noopener noreferrer">
        <div class="ex-story-img" style="background-image:url(https://exposure.imgix.net/production/posts/297733/cover-photo/cover-1530781336.JPG?w=1200&amp;q=50&amp;sharp=10&amp;fit=crop&amp;fm=pjpg&amp;auto=format)">
        <div class="bg-filter"></div>
        </div>
      </a>
    </div>
    .ex-story{
        width:100%;
        height:250px;
        margin-bottom:10px;
        border-radius:20px;
        overflow:hidden;
        position:relative;
    }
    .ex-stoy-link{
        text-decoration:none;
        color:white;
    }
    .ex-story-img{
        width:auto;
        height:100%;
        background-position: center;
        background-size: cover;
        position:relative;
        background-attachment: fixed;
    }
    .bg-filter{
        position:absolute;
        width:100%;
        height:100%;
        background-color:black;
        opacity:0.4;
        transition:opacity 0.2s;
    }
    .ex-stoy-link:hover .bg-filter{
        opacity:0.2;
        -webkit-backdrop-filter: blur(3px);
    }

    I'm trying to make my block a bit circular. It looks like a new trend… The problem is that I added border-radius 20px and overflow hidden to the parent element, but I still see a rectangular shape.

     

    Thank you

  14. Hi,

     

    I have a little problem. I finished my logo and want to add it to my website right before my name in the nav bar, but if I had the image, it break my navigation.

    1529269368-sketch.png

     

    I'm not really sure how I can fixe that. I tried some stuffs here and there, but wasn't really successful. I would like to set a height to my image, but I don't want my image to mess up with the general height of the navigation.

    <!-- NAVIGATION BAR -->
            <header class="navigation">
                <div class="nav-container">
                    <a class="logo" href="nicolas-duclos.com"><img src="images/Logo-black.png"> NICOLAS DUCLOS</a>
                    <!-- MOBILE MENU -->
                    <a class="mobile-menu" href="#"><i class="fas fa-bars" aria-hidden="true"></i></a>
                    <nav class="right-menu">
                        <a class="close-mobile-menu" href="#"><i class="fas fa-times"></i></a>
                        <ul class="menu">
                            <li class="menu-item"><a href="index.html">ACCUEIL</a></li>
                            <li class="menu-item"><a href="albums.html">ALBUMS</a></li>
                            <li class="menu-item"><a href="blogue.html">BLOGUE</a></li>
                            <li class="menu-item current"><a href="a-propos.html">À PROPOS</a></li>
                            <li class="menu-item"><a href="#">CONTACT</a></li>
                        </ul>
                    </nav>
                </div>
            </header> 

    My idea would be to use display flex to my nav-container and items-align:center, but it make my floating right "right-menu" going to the left next to my logo and name. My goal is to have logo+name on left and menu on the right. Do you have any idea how I can do that?

     

    Thank you

×
×
  • Create New...