Search the Community

In the webpage two_sections.html I tried to use two scrollbars and cancel the browser scrollbar. However the lower scrollbar does not work at all. I know the bug might rest in the body section `overflow:hidden` But it is the only way I know to split the two sections without a scrollbar on browser. Any walk-around? common.css two_sections.html

Hi im trying to make my site scroll and I cant seem to figure out why, all web pages appear with no scroll bar, and im wondering if its due to the template or the styles sheet. Findus.html

Hi The guide on making a scrolling header is great, but it relies on javascript running every time you scroll. That is really expensive (resource-wise) and contributes to a laggy an unresponsive website. I think the guide should be updated to use sticky css-elements instead of js. This method does not have the same performance issues, and I'd argue it's an easier and more elegant solution. The new guide is pretty much already written here. The support for sticky elements is not perfect, so there is a discussion to be had about whether to prioritize browser support or performance, but i think at the very least the page should have a yellow box, mentioning that the sticky element is a better solution.

I followed the following tutorial and I was finally able to add a slide in menu on my WordPress site. However, I noticed that the body scrolls when moving up and down on my mobile phone. Can someone explain to me how I can disable body scroll when the menu is opened? Many thanks in advance! Tutorial: https://www.w3schools.com/howto/howto_js_sidenav.asp <script> function openNav() { document.getElementById("mySidenav").style.width = "100%"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script>

I have many lines of text. <div style="max-height:400px; overflow:scroll;"> many lines of text </div> How do I get my css to display a div at the bottom instead of the top of a scrollable div?

REQUEST: Please compare the results in the middle panel of the following two actions: ACTION ONE: Click on the phrase Weekly Podcasts under the heading Products in the navigation bar of the Grammar Captive mainpage. Scroll to the bottom of the page and view how the middle panel exceeds the height of the navigation bar and side panel. ACTION TWO: While on the same page with the same panel open click on the phrase Click and Listen. This will bring you to a different document in the same window. Notice that the middle panel does not exceed the height of the navigation bar and side panel. Also, note that the panel's scroll functionality is well in place. Now return to the Grammar Captive mainpage and perform the following: Find the phrase Q&A under the heading Search Grammar Captive in the navigation bar and click on it. Notice the absence of a border around the middle panel. Enter the word Frage in the search box and click on the Search button. (Do not hit the ENTER/RETURN key, else you will be blown away) Notice that middle content is now enclosed in a border and that the height of the content is nearly that of the navigation bar and side panel. (I acknowledge that there are some problems with the CSS, and I believe that I know how to fix them.) Click on the phrase The Answer ... wherever you would like and notice that the content of the middle panel fill below either of the two side panels. Click on the phrase Click and Read below the answer on watch the role of digital toilet paper unravel. It is this phenomenon that I am seeking to prevent with the introduction of scroll functionality. The Javascript that works for ACTION TWO on the Podcast hostpage refuses to work on the Grammar Captive mainpage. if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } This, no matter the placement or alteration. Adding the property-value pair 'overflow-y' : 'scroll' achieves nothing. $('#main').css({'min-height':aside_height,'overflow-y':'scroll'}); Any ideas? Roddy

WONDERMENT: In anticipation of my next question while I continue my struggle with the implementation of optional key and button functionality on my own website, I thought that it might be helpful to bring the following to your attention. https://www.w3schools.com/CSSref/playit.asp?filename=playcss_overflow-y&preval=scroll QUESTION: Is there a good reason why the scroll bar does not appear when the [scroll] option has been selected? Roddy 🙃

Noob questions here, why does the w3-sidebar scroll as the page scrolls, I know the css itself has a "fixed" position but when I alter this I lose the 100% on the height and the rest of the content displays below the level of the sidebar. Is there anyway I can cause the sidebar to remain staticly positioned I don't want it scrolling with the page. Or do I have to resort to changing the css myself to make this work?

Hello everyone. I am new to this forum. I have build my first parallax website based on Petr Tichy's very good tutorial. I recommend it (https://ihatetomatoes.net). Here is my new site. The idea was to get an attractive intro for this new project using altered-perspective images in full width. http://www.ticket2utopia.com/Alpha/zHome.php I struggle a bit especially that I want to control the ratio of the images in a certain way. They must always be full page but depending on the width of the browser window, I apply a certain correction to the height. As the whole project is about "changing your perspective"... it's great... IMO. However, I would like to change the height of the picture when the browser window is square or taller than wide. I have tried so many different things... but nothing does not work. The problem is that the background-attachment must be fixed to work with parallax and I can not change that. At the moment I just resize the browser window to the ratio of the image (16/9) but this is not ideal at all. I control the situation when the browser window is wide, but in the case it's not I would like to force the image to its exact ratio... Any idea? There is also a section at the bottom of the page (#20 - visual meditation) which I can not control properly... the text box should fade in and out later. I used the code : data-100-top="opacity: 1" data-center="opacity: 1" data-center-top="opacity: 0" data--100-bottom="opacity: 0;" data-anchor-target="#slide-20". What should be changed to achieve that? Greetings from Cape Town, Paul

Having a CSS issue I can't seem to figure out with a client website built on the Squarespace.com platform. I can't get the page to scroll down to view entire cart item image and description. Also, in certain resolutions the "add to cart" button is hidden. Here is link to page: http://www.shopalexandrino.com/shop/abstract-n-1 Please help! I'm on a paid deadline and I'm stuck! And here is the CSS code for the page: <style> select { background: none repeat scroll 0 rgba(0, 0, 0, 0) !important; padding: 20px 0 0; position: absolute; width: 151px; z-index: 2147483647; line-height: 50px; height: 50px;} .variant-option-title { position:absolute; margin-left: 4px; } .variant-option-title:after { content: "E009"; margin-left: 5px; font-family: "squarespace-ui-font"; } /* #innerWrapper #content .main-content-wrapper, #innerWrapper #content .filter { width: 65% !important;}*/ .alexandrino-additional-views { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); height: 50px; overflow: hidden !important; position: relative; width: 130px;} .alexandrino-additional-views:after { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); content: " "; font-family: "squarespace-ui-font"; ; overflow: hidden; padding: 30px; position: relative; z-index: 999999;} .product-quantity-input { display:none; } option { border: 1px solid rgba(100, 100, 100, 0.5); padding: 1px 15px; text-align: center;} @media screen and (max-width:1100px){ #innerWrapper{ position:relative !important; } } @media screen and (min-width:1100px) and (max-width:1280px){ #productSlideshow .sqs-gallery-design-stacked-slide img { /* max-height:98%; max-width:90%;*/ } } @media screen and (min-width:1280px){ #productSlideshow .sqs-gallery-design-stacked-slide img { /* max-height:74%; max-width:74%;*/ } } @media screen and (min-width:1100px){ /*1 item IMAGE*/ #productSlideshow .sqs-gallery-design-stacked-slide img { height: 83% !important; width: auto !important;}#productGallery #productSlideshow .slide { width: 83% !important;} /**/ /*.sqs-add-to-cart-button-wrapper{ position:fixed; bottom:0; }*/ /*Nex Prev Items*/ .next:before, .previous:before { font-size: 24px; height: 24px; line-height: 24px; width: 24px;}.previous:before, .next:before { font-size: 32px; height: 32px; line-height: 32px; width: 32px;}.previous:before { content: "E02c"; display: inline-block; font-family: "squarespace-ui-font"; font-style: normal; font-weight: normal; text-align: center; vertical-align: middle;}.next:before { content: "E02d"; display: inline-block; font-family: "squarespace-ui-font"; font-style: normal; font-weight: normal; text-align: center; vertical-align: middle;}.previous { left: 0;}.next { right: 0;} .previous, .next { background-color: rgba(0, 0, 0, 0.12); color: #ffffff !important; display: inline-block; font-size: 14px; line-height: 40px; margin-top: -30px; outline: medium none; padding: 10px; position: absolute; top: 45%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; z-index: 999;} /*END*/ .product-excerpt ul { ; } html { overflow-y: visible; overflow-x: hidden; } #productList { margin-left: 6% !important; width: 95%; } #innerWrapper #content { padding: 5% 0 0 0 !important;} #productSlideshow .sqs-gallery-design-stacked-slide img { float:right !important; } .sqs-preview-frame-content {height: 99% !important; } /*FIXED*/ #productDetails { float: left !important; margin-left: 20px; margin-top: 21%; position: absolute !important; right: 9%; top: 0; width: 20% !important;} #productGallery { float: none; margin: -6% auto; padding-left: 10%;} #innerWrapper { margin: 30px auto 0 !important;} #main-navigation { z-index: 2147483647 !important; } #innerWrapper { /* position: fixed !important;*/} .sqs-block .sqs-intrinsic {margin-right: -10% !important;z-index: 99999999 !important;} } @media screen and (min-width:900px) { #main-navigation { width: 20% !important;} } </style><script>var isShop = true;</script>

This would be quite a simple issue for someone more experienced: (I have just begun with Jquery and Javascript)I have coded a really simple HTML, CSS, Jquery animation.. The ball <div> moves from side to side (Pretty Damn COOL!) BUT... I need to try and trigger the animation with scrolling, basically creating a 'Pong' game. From one side of the scren to the other. HOW do I do this? I have been trying to find a sollution online and can't. Please help, or I will find you and kill you. <!DOCTYPE html><html> <head> <title> Pong </title> <style type="text/css"> .pong{ position: relative; border-radius:100%; top:250px; float:left; z-index: 1; width: 100px; height: 100px; transition-property: transform, -webkit-transform; transition-duration: 0.2s; transition-timing-function: ease-out; background-color:#FFF700; } #stage{ min-height:500px; min-width:500px; background-size:cover; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function () { move(); }); function move() { $(".pong").animate({ left: 900 }, { duration: 5000, complete: function () { $(".pong").animate({ left: 40 }, { duration: 5000, complete: function () { move(); } }); } }); } </script> <script type="text/javascript"> </script> </head> <body> <div class id="stage"> <div class="pong"> </div> </div> </body></html> any help would be greatly appreciated.

hello w3 once again, i have a question. for the momment being, im trying to play a little bit with the scrollbars, to edit the colors on the and stuff like that. well, a question is needed to be asked X).. as you can see on the attached picture i have added, there is a little annoying white box if the scroll-bars ARE going horizontal ect... is there a way to edit that part also?... right now i have following in my css style: ::-webkit-scrollbar { width: 10px;background-color:#333;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;background-color:#333;}::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);background-color:#666;} is there something i need to add?, or something i just can add to the following i already has here?... thanks in advance!

In my website I have Fancyboxes that pop out with an HTML website embedded in them. Those work perfectly fine. What I want to do is in one of the boxes is to scroll over in the fancybox (like in an image gallery) to an additional amount of info. The html contact page will open in a fancybox with one business location and then the viewer will be able to click an arrow to the right to shift to the next set of location information (still in the SAME fancybox). Is this possible? What is the fancybox/javascript code to allow a manually scrolling gallery to be possible? This is my current javascript coding: <script type="text/javascript"> $(document).ready(function(){$(".contact").fancybox({'width' : '50%','height' : '50%','autoScale' : false,'transitionIn' : 'fade','transitionOut' : 'fade','overlayOpacity' : 0,'speedIn' : 2000,'speedOut' : 1000,'type' : 'iframe','cyclic' : true}); }); </script> .contact is the class that leads to contact.html page. Any help would be fantastic. Thanks!

Hello Everyone, Could you please tell me how do I fix Scrolling Action in “A Segment”? Please help. Thank you.

Hi all, I am trying to print ALL the content of a scrolling table without usingiframes, opening a new window or hiding all the other elements on my screen. It it possible to send a command that will only print a specific element based onthe id without having to change screen displays? <!--Html table code I need to print, table is dynamically populated from javascript so the length constantly varies.--> <!--some code--><div id="printme"><table border="1" width="598" id="ccblanktableheader"> <tr bgcolor="#E4E5E5"> <th width="15%"><font face="tahoma" color="rgb(6,79,168)">Date</font></th> <th width="20%"><font face="tahoma" color="rgb(6,79,168)">Customer No.</font></th> <th width="23%"><font face="tahoma" color="rgb(6,79,168)">Complaint No.</font></th> <th width="12%"><font face="tahoma" color="rgb(6,79,168)">Status</font></th> <th width="23%"><font face="tahoma" color="rgb(6,79,168)">Type</font></th> <th width="7%"><font face="tahoma" color="rgb(6,79,168)">View</font></th> </tr> </table> <div style="font-size: 12px; face:tahoma; height: 315px; overflow:auto;border:1 "> <table border="1" width="593" id="ccblanktable" align="center"> <tr bgcolor="#E4E5E5"> <th width="15%"></th> <th width="20%"></th> <th width="23%"></th> <th width="12%"></th> <th width="23%"></th> <th width="7%"></th> </tr> </table> </div></div><!--more code--> I have tried multiple javascripts but none work without either opening a new window or changing displays.This was my most recent test. var content_innerhtml = document.getElementById("ccblanktable").innerHTML; var document_print=window.open("","",display_setting); //Opens new windowdocument_print.document.open(); document_print.document.write('<html><head><title>print using javascript</title></head>'); document_print.document.write('<body style="font-family:verdana; font-size:12px;" onLoad="self.print();self.close();" >'); document_print.document.write(content_innerhtml); document_print.document.write('</body></html>'); //does not show as a table, rather a a single rowdocument_print.print(); document_print.document.close(); Any ideas how I can do this?Thanks.