I am developing an ecommerce website on wordpress with as much css as possible as I have minimal experience with Javascript. I came across this website though and was impressed by the 'soft scroll' animation, the only way I can describe it is the browser equivalent of soft closing kitchen drawers.
https://mouthwash.co/news/an-introduction-to-mouthwash
I noticed in the source code they are using Javascript and was wondering if anyone could shed some light on how they have achieved this scroll effect. I have included the following css in my stylesheet, however it's not quite the same.
html {scroll-behavior: smooth;}
If you check the styles of the body element, you'll see that they're using overflow: hidden; which disables the native scroll of the browser.
Instead, on the article-item copy media-content element, they're using translateY to achieve the scroll effect.
This type of effects are achieved using smooth scroll javascript plugins.
The one I use is this one
tympanus.net/Tutorials/SmoothScrollAnimations
Is exactly what I'm describing and has a tutorial if anyone else is interested.
Related
I need something like what is described here: Sticky sidebar: stick to bottom when scrolling down, top when scrolling up . Some of the solutions on that page worked. However, in recent modern times, Google's Core Web Vitals are flagging pages that use these solutions with very high CLS (Cumulative Layout Shift) errors - which hurts search rankings for pages. This is because in the old solutions, the sidebar moves around during scrolling based on changing "top" positioning (technically a layout shift). It causes ugly CLS errors in Google's Search Console and they flag the pages as "Poor URLS".
I've been trying to find the modern solution, which was to use either CSS Transformation to move the sidebar, or a combination of CSS "sticky" positioning, etc. I've been trying to build my own, but I'm not as experienced with CSS "Transform" as I am with CSS "top/bottom/left/right".
Requirements: It needs to work like the image below, or the example in old post above. It needs to be in pure JavaScript and CSS, with no external libraries. A real world example of this is on any person's Facebook wall. It seems they are using some kind of solution involving "position:sticky", again, I'm not too familiar with using it. It doesn't have to be just like the Facebook solution, I would prefer the simplest and cleanest way.
This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.
It was working for a while, and I then checked it after a lot of additions and it wasn't working.
Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.
https://cyan-aeriel-49.tiiny.site
I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.
It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.
Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp
Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.
So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold
Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.
I highly recommend using a browser debugger, such as FireBug to identify problems with your js
I made the download of several free responsive layout (you can find them simply through google if you're curious) and I see that the layout has at least one or two javascript files.
The question is: javascript is essential to create a responsive layout?
Then, in the reply to this question is "no" and you have also the possibility to link a free responsive layout made only with html and css, well, you will receive a wonderfull BIG thank you.
The whole point of responsive layouts is that it can (and should) be done with CSS3 media queries only.
However, this can often require some clever HTML design, especially if you want to have a slide-in menu (hint: :active can be very powerful when combined with tabindex to make an otherwise "inert" element respond to click events like a link) and many developers just can't be bothered with that, especially when jQuery is so readily available.
So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to make things easier, but in general if you think you need it, you probably just need to rethink how you're doing things.
Unfortunately, I have no links to JavaScript-less responsive layouts for you, that's because I'm very DIM - Doin' It Meself!
Edit back While I appreciate Martijn's demonstration of a use of JavaScript in making images essentially have variable resolution depending on screen size, images can be made responsive simply by using SVG if possible. If this is not an option, consider using a container with a background-image - only the image that matches the media query will be loaded :)
Sometimes yes, sometimes no.
First understand what is response layout: Responsive Layout is the one that dynamically changes itself. Depending on the Browser's screen size. So that it fits perfectly on every screen type, size, resolution etc. So that the website's layout doesn't break.
You can just use CSS3 media query to change the layout, or else you can use jQuery or some other JavaScript to make this happen.
But remember, JavaScript is not required to make the document Responsive.
Sometimes Yes!
Sometimes the developer is better in writing the code using JavaScript, such as jQuery API. So he would find it easy to write the code in jQuery to dynamically handle all the events in the Browser window to make a website Responsive.
I myself would find it pretty easy to write the code in jQuery as compared to CSS. So for that purpose, I would have to add the jQuery source file to the document to render it that way. Otherwise I won't be able to create the responsiveness in the Website or would have to stick to the pure JavaScript
Example would be:
if($(window).width() > '1300') {
$('body').css({
'height': '100%' /* etc */
});
}
Sometimes No!
Some developers are good at CSS (CSS3, and its media Queries too). So they try using CSS3 to render the document and make it responsive.
CSS3 is really much easy than jQuery and it would be helpfull to use it. It would also won't require any of the Script file to be included. You can easily write the code, in the default CSS file. And the changes would be made accordingly.
#media only screen and (max-width: 1300px) {
body {
height: 100%;
}
}
But Remember
If you use plain CSS and then use CSS3 Media Queries to change the layout of the website, you will be able to just detect the screen size and other elements. You won't be able to check for the Browser's properties or the content on the screen etc.
Both answers are acceptable.
No, if you pretend to work with something like a flash site, which I hardly discourage it.
Yes, because javascript is essential to do that, CSS3/HTML5 are solutions to your case, but, they come with some javascript included functions, that you will not see, so, there is javascript.
Responsive by Default
No, you do not need JavaScript for Responsive Webdesign. It is necessary for those cool fly outs and sliding effects.
If you do a website in pure CSS, you might need to take some compromises like a different menu layout or always visible sidebar content. Sliders are a problem.
But consider this:
If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers.
Andy Hume in "Responsive by Default",
http://blog.andyhume.net/responsive-by-default/
Media queries allows you, to do responsive pages with css only. But you should remember about jquery function '.resize()' when user change horizontal layout to vertical on phone or tablet.
I am hoping to incorporate custom scrollbars in my site as there are divs with set heights that will overflow. I have managed to get exactly what I want using webkit styling in css however I am aware that there will be issues when looking at the site in Firefox or IE.
As a result, I tried to incorporate the jScrollPane library into my site but its causing all sorts of js "clashes" which is throwing the whole site into a mess!
Are there any simpler methods to customise my scroll bar so that I have cross browser compatibility without adding a new js page to the site?
Alternatively - is there a way I can attach something to the css for when the browser is firefox!?
Thanks
JD
Fast forward to 2017, and there are a lot of good custom scrollbar scripts these days. By good I mean ones that rely on native scrolling mechanics and works on mobile devices too. The one I use is Perfect Scrollbar. Some other good ones can be found here in this blog post.
I'm a little confused with what exactly you're asking for, but if you're looking for a scroll bar of some sort that can be customized with CSS, look no further than jQuery UI's Slider.
You'll have to add some event handlers to do the scrolling, but it shouldn't be too difficult over-all.
Here are some custom scrollbars you can use:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
One off these solutions should work. BTW i use JScrollpane and it works like a charm for me
I went through all of the suggestions above and was disappointed by either of the following issues:
poor cross-browser compatibility
lag
a lot of redundant code/ dependencies (jQuery UI)
Therefore, I've used some CSS trickery and JavaScript (depends on jQuery selectors) to build my own custom scrollbar implementation. The demo is available at https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. The source code is hosted at https://github.com/anuary/jquery-custom-scrollbar.
My approach relies on the native browser scrollbar. However, this implementation does not support horizontal scrollbars.
Just found this, without jQuery, if anyone is interested:
http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!