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