Jump to content

Search the Community

Showing results for tags 'scroll'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 8 results

  1. w3-sidebar

    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?
  2. 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
  3. Help with CSS - Page won't scroll!

    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>
  4. 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.
  5. scrollbar question...

    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!
  6. 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!
  7. Hello Everyone, Could you please tell me how do I fix Scrolling Action in “A Segment”? Please help. Thank you.
  8. 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.