Nic727

Ok thank you. I only have one search box on my website. That's why I don't really use else if in my code. The focus should only be activated automatically when clicking the button/icon.

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.

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

Nevermind, I just replaced the div with an <a> tag instead. I tried to add a <a> as a parent of the <div>, but it was broken.

Hi, I have this design currently. If I add a link to each of my cards, I get this blank page. Do you know why <a> is affecting the child element? I though <a> didn't have styles. Thank you

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. 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

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

ok thank you

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

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. 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). Here I hover image 1 : Here is the bug. When hovering the second image, it remove the backdrop-filter from the first image. 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

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.

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.

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. 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. 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

I fixed the problem by removing 100vh for the height of my home container and added 100% height and position absolute. But I guess it only work on website with a fullscreen page and not one-pager since it's an absolute position.

Well, I have the latest safari version on IOS 12. I just don’t know how to fixe that. I will look into it more deeply this evening. If you want to look by yourself, http://www.nicolas-duclos.com

I would like to know how to remove the overflow behind the mobile Safari UI? In most mobile browser I don’t have this problem and I would like to know a solution for Safari. http://image.noelshack.com/fichiers/2018/40/6/1538829555-c909ce35-46ec-47a7-b228-955550e95e03.png http://image.noelshack.com/fichiers/2018/40/6/1538829559-a0bc59fd-3b02-4cb7-ab0f-16d1e44aaceb.png Thank you

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

Ok it looks like it's a bug with Edge. I will report that to Edge devs to fixe this.

Edge.

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. 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

I found that background-attachment fixed remove my border-radius. If I remove the attachment of the image, border-radius is showing up, but I don't have the effect I wanted on image… What I have: http://image.noelshack.com/fichiers/2018/29/7/1532288938-1.png What I want with fixed background image: http://image.noelshack.com/fichiers/2018/29/7/1532288938-2.png

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

Nevermind, saw that justify-content:space-between to nav-container and adding vertical-align:middle to my image fixe that. Not sure why vertical-align work here since my image is not in a table, but nice to see it works.

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. 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

Thank you. It's now resolved, but just one thing. Is it normal that my regex is a weird color like that? Just want to make sure it will works, but other than that everything works fine now!