Search the Community
Showing results for tags 'scrolling'.
Found 8 results
-
I incorporated the "Dropdown in TopNav" code, but I have a dropdown list that's over 70 items long. How would I incorporated a scrolling function to this menu, or make it possible to view all the entries by scrolling down using the mouse wheel? Thanks!
-
Hey, I´m looking for an easy scroll animation on my website. So when the user starts scrolling with the mousewheel it should autoscroll to the next ID. It should have a smooth animation and while scrolling, the user can´t interfere. It´s for the purpose that the website is always at certain points. Can some help me out? Thanks in advance =D
-
Hi, I am creating a portfolio website. Here I want that the testimonials will scroll horizontally automatically and will pause on hover. Guys, please give me some hints on how can I perform this action. Here is the markup and style. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .testimonials-container::-webkit-scrollbar { display: none; .testimonials-wrapper { max-width: 100%; height: 450px; border: 1px solid lightgrey; background: linear-gradient(#000000, #777474); padding-left: 25px; padding-right: 25px; position: relative; } .testimonials-quote { width: 100%; text-align: center; padding-bottom: 20px; color: white; } .testimonials-container { width: 100%; height: 100%; text-align: center; display: flex; margin: 0; padding: 0; padding-bottom: 20px; overflow: scroll; } .testimonials-item { min-width: 230.99px; max-width: 230px; height: 70%; background-color: white; margin-right: 20px; margin-left: 20px; color: black; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .testimonials-item:last-child { margin-right: 0; } .testimonials-item:first-child { margin-left: 0; } .testimonials-image { width: 124px; border-radius: 50%; padding-top: 20px; } .testimonials-image img { width: 150px; height: 150px; border-radius: 50%; margin-left: 30%; } .testimonials-prev, .testimonials-next { position: absolute; top: 50%; padding: 10px 5px; font-size: 25px; color: white; cursor: pointer; z-index: 5; } .testimonials-prev { left: 0; border-radius: 0 3px 3px 0; } .testimonials-next { right: 0; border-radius: 3px 0 0 3px; } .testimonials-prev:hover, .testimonials-next:hover { background-color: white; color: black; } </style> </head> <body> <div class= "testimonials-wrapper"> <div class= "testimonials-quote"> <h1>What Others Say About Us</h1> </div> <div class= "testimonials-container"> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Rahim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Karim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Abdullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Yasir</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Mahmudullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Riad</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> </div> <span class= "testimonials-prev">❰</span> <span class= "testimonials-next">❱</span> </div> <script src= "jquery-3.1.1.min.js"></script> <script> var x = 270; $(document).ready(function() { $(".testimonials-next").click(function() { $(".testimonials-container").scrollLeft(x += 270); }); $(".testimonials-prev").click(function() { $(".testimonials-container").scrollLeft(x -= 270); }); }); </script> </body> </html> Waiting for your great hints. Thank you in advance.
-
Hello In this Wordpress theme the nav menu changes when you scroll-down the page. At the begining is transparent and big, but then it gets smaller and white. http://feriapixel.cl/wordpress/ How can i do that myself?
-
Hello all, I am relatively new to HTML and am having a problem that I don't know the best way to solve. Please can anyone help. I am creating an HTML5 web page with a sticky header that contains copyright information that needs to always remain visible at the top of the page. I successfully created the header using the fixed position attribute. The header is a constant size, the full screen width, and remains visible throughout. When the page is scrolled the text scrolls up under the header. That, in itself, is not a problem. What is a problem, however, is when there is a link using the <a href="yyyyy.html#xxxxx"> tag. The display jumps to the link, but the link text is now displayed at the very top of the screen, under, and consequently hidden by, the fixed header. Is there a way to either: 1) Make the bulk of the web page only use the space below the header, or 2) Make the jump to the link display not at the top of the screen, but lower by the height of the header. My only other consideration is that I would like to do this in a manner that has the most backward compatibility. The web pages I am creating might need to be displayed world wide on older systems. So, even though I am currently testing HTML5 I am actually trying not to take advantage of new HTML5 features. Many thanks in anticipation, Roy
-
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>
-
hi there, i have implemented a scrolling tbody for a css loaded dynamic table. the results i have saved - can be viewed at http://www.performatix.co/Customer%20Counts.htm, but what descriptors need to be added to the css to stretch the scrollable tbody as wide as the thead? (100%) the css used sofar is as follows: /* define height and width of scrollable area. Add 16px to width for scrollbar *//* allow WinIE to scale 100% width of browser by not defining a width *//* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x */div.tableContainer { clear: both; border: 1px outset #808080; height: 500px; overflow: auto; width: 100%;}html div.tableContainer/* */ { padding: 0 16px 0 0; width: 100%;}html>body div.tableContainer { height: 467px; padding: 0;}head:first-child+body div[class].tableContainer { width: 97%; height: 467px; overflow: hidden;}div.tableContainer table { float: left; width: 100%}html div.tableContainer table/* */ { margin: 0 -16px 0 0;}html>body div.tableContainer table { float: none; margin: 0; width: 100%;}head:first-child+body div[class].tableContainer table { width: 100%;}thead.fixedHeader tr { position: relative; width: 100%; top: expression(document.getElementById("tableContainer").scrollTop);} */head:first-child+body thead[class].fixedHeader tr { display: block; width: 100%;}thead.fixedHeader th { background: #d8d8d8; font-weight: normal; padding: 4px 3px; text-align: left;}head:first-child+body tbody[class].scrollContent { display: block; width: 100%; height: 400px; overflow: auto;}tbody.scrollContent td, tbody.scrollContent tr.normalRow td { background-color: #f8f8f8; border-bottom: none; border-left: none; border-right: 1px solid #d8d8d8; border-top: none; padding: 2px 3px 2px 3px;}tbody.scrollContent tr.normalRow td + td + td + td + td + td { background-color: #f8f8f8; border-bottom: none; border-left: none; border-right: none; border-top: none; padding: 2px 3px 2px 3px;}tbody.scrollContent tr.alternateRow td { background-color: #d8d8d8; border-bottom: none; border-left: none; border-right: 1px solid #f8f8f8; border-top: none; padding: 2px 3px 2px 3px;}tbody.scrollContent tr.alternateRow td + td + td + td + td + td { background-color: #d8d8d8; border-bottom: none; border-left: none; border-right: none; border-top: none; padding: 2px 3px 2px 3px;}head:first-child+body thead[class].fixedHeader th { border-right: none; padding: 2px 4px 2px 4px;}head:first-child+body thead[class].fixedHeader th[title=EXECUTE], head:first-child+body thead[class].fixedHeader th[title=RESET] { width: 50%;};head:first-child+body tbody[class].scrollContent td { border-right: none; padding: 2px 4px 2px 4px;}#form_services thead.fixedHead { margin-top: 2px; margin-bottom: 2px; width: 100%;}#form_services tbody.scrollContent { width: 100%; height: 350px; overflow-y: scroll; background: #d8d8d8;}#form_transactions input[type="button"]#button_preview, #form_transactions input[type="button"]#button_sendcontact, #form_transactions input[type="button"]#button_sendaccmgr, #form_transactions input[type="button"]#button_sendsvcmgr, #form_transactions input[type="button"]#button_refresh { width: 19.22%;}#form_services input[type="button"]#title_service, #form_services input[type="button"]#title_country, #form_services input[type="button"]#title_region, #form_services input[type="button"]#title_supplier, #form_services input[type="button"]#title_status, #form_services input[type="button"]#title_primattval, #form_services input[type="button"]#group_service, #form_services input[type="button"]#group_country, #form_services input[type="button"]#group_region, #form_services input[type="button"]#group_supplier, #form_services input[type="button"]#group_status, #form_services input[type="button"]#group_primattval, #form_services input[type="button"]#execute_query, #form_services input[type="button"]#reset_query { width: 100%;}#form_services select#where_service, #form_services select#where_country, #form_services select#where_region, #form_services select#where_supplier, #form_services select#where_status, #form_services select#where_primattval { width: 98%; margin-top: 1px; margin-left: 1%;} the html is an excerpt of the dhtml populated mysql table from a select. my last two posts (one and more accurately two) were on this functionality. this is highly important to resolve, got lots of other php work to do! -
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!
