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 reaso

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"); $(".sea

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

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.

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 an

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