Search the Community
Showing results for tags 'auto'.
Found 4 results
-
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.
-
Hi everyone, Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ? Also, why does my "display: inline;" not work? You can see what I mean here: http://www.jasonwangart2.blogspot.ca/ Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row. Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs. Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up. Does anyone know the answers to the 2 above questions? My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement. The code is below. Thank you very much, Jason <!doctype html> <style>/* HEADER OUTER BOX */ .jw-1-header-box { border: 1px dashed red; width:100%; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: rgba(0,0,0,1); }/* GRAPHICS */ .jw-2-graphics-bar { border: 1px dashed purple; width: 100%; height: 0px; overflow: visible; } .jw-3-circle-large { position: relative; left: 10px; top: -200px; width: 270px; height: 270px; background-color: rgba(180,200,255,1); border-radius: 135px; } /* NAVIGATION */ .jw-2-nav-bar { border: 1px dashed cyan; width: 100%; overflow: hidden; } .jw-3-nav-bar-left-section { border: 1px dashed maroon; display: inline; float: left; } .jw-3-nav-bar-right-section { border: 5px dashed red; width: auto; display: inline; float: right; } /* HOME BUTTON */ .jw-3-button-home a:link, .jw-3-button-home a:visited { border: 1px dashed purple; position: relative; z-index: 1; font-size: 41px; color: rgba(80,100,155,1); } .jw-3-button-home a:hover, .jw-3-button-home a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } /* PAGES */ .jw-3-button-pages a:link, .jw-3-button-pages a:visited { border: 5px dotted orange; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(80,100,155,1); } .jw-3-button-pages a:hover, .jw-3-button-pages a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } .jw-3-social-text-box { border: 5px dotted green; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(0,0,0,0.7); } .jw-3-social-icon-box { border: 5px dotted blue; margin: 0px 10px 0px 10px; display: inline; font-size: 16px; /* need this to align block-1 */ } .jw-opacity-link a:link, .jw-opacity-link a:visited { border: 0px solid black; width: 30px; opacity: 0.45; } .jw-opacity-link a:hover, .jw-opacity-link a:active { border: 0px solid black; text-decoration: none; /* to remove the little line */ opacity: 1.0; } img /* need this to align icon image */ { vertical-align:top; /* top or bottom */ }/* DIVIDER */ .jw-2-divider-1 { border: 1px dashed violet; width: 100%; padding: 50px 0px 0px 0px; text-align: center; } .jw-3-circle-small { display: inline-block; width: 10px; height: 10px; background-color: rgba(171,225,250,1); border-radius: 5px; margin: 0px 50px 0px 50px; } /* UPDATE */ .jw-2-update-bar { border: 1px dashed pink; width:100%; text-align: center; } .jw-3-update-text-box { border: 1px dashed turquoise; font-size: 16px; color: rgba(0,0,0,1); }</style> <!-- HTML --><!-- MAIN BOX --> <div class="jw-1-header-box"><!-- GRPHICS --> <div class="jw-2-graphics-bar"> <div class="jw-3-circle-large"></div> </div><!-- NAVIGATION --> <div class="jw-2-nav-bar"> <div class="jw-3-nav-bar-left-section"> <div class="jw-3-button-home"> <a href="http://www.jasonwangart.com">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a> <a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a> <a href="http://www.jasonwangart.com/search/label/reference">references</a> <a href="http://www.jasonwangart.com/p/about-web.html">about & contact</a> </div> <div class="jw-3-social-text-box"> Follow me on </div> <div class="jw-3-social-icon-box"> <div class="jw-opacity-link"> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="24px" height="24px" alt="facebook"/> </a> </div> </div> </div> </div> <!-- DIVIDER --> <div class="jw-2-divider-1"> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> </div><!-- UPDATE --> <div class="jw-2-update-bar"> <div class="jw-3-update-text-box"> Berry Season 9 coming soon! </div> </div> </div> </!doctype> -
Hello, I have recently been working on a HTML form to submit new results into a search engine. However I have ran into a problem that I cant seem to get past. I have one page where the info from the form can be properly submitted, however it requires a password to get into. (its the admin panel) located at index.php?a=admin However when a user tries to insert a new site to the form the just are denied access because they cant log into the admin panel, even though the form itself is not actually in the admin panel... The HTML form looks like this and is located in a page called /AddSite.html however its trying to submit the info to /index.php?a=admin how can I use JavaScript to possibly bypass needing the password? and not redirecting to the admin panel when you click submit? (Also, not as important as the above issue... but as you can see I tried to add a capatcha, but I cant get it to be required, users can press submit without even using the capatcha... if anyone could tell me what I did wrong that would be helpful ) my current code: <form action="/index.php?a=admin" method="post"><div class=""> Site Title: <input type="text" name="addtitle" value="" required/><br /> Site URL: <input type="url" name="addurl" value="http://" required/><br /> Site Description: <br /><textarea lass="ads" name="adddesc" required></textarea><div align="center" class="g-recaptcha" data-sitekey="6LfDoAYTAAAAAOUmPcjfwv3I84xYqFBV5tyQMPJu"></div></div><br /><input type="submit" value="Add new result"/></form> Any help works!!!
-
I've stumbled upon yet another trouble with internet explorer where my images mysteriously becomes 1px by 1px instead of sizing according to it's container like other browsers.I googled the problem and it seems like a lot of people gets this problem when applying heigh:auto; to an image. I accually had this applied but it wasn't solved by removing it.I'll just leave an url for the page here so you can see for yourselves:http://tec.macework.se/catalog/products/components/ Any clues?
