Search the Community
Showing results for tags 'horizontal'.
Found 3 results
-
Hi *** MY CONFIGURATION *** PHP 7.2.24 WBCE CMS 1.4.23 TEMPLATE : Acourdesz (horizontal accordion header) The “Acourdesz“ template comes with a horizontal accordion header that panes are opening on following mouse cursor movement detection : left to right and reversely ; up to down and reversely. I think that one may better reply to my question hereafter, knowing the accordion code structure from this demo page : http://www.dynamicdrive.com/dynamicindex17/haccordion.htm My wish is to prevent the panes opening when the mouse cursor is moved from up to down and reversely, so that panes only opens when mouse cursor is moved from left to right (and inversely). To achieve this, I may use one of my CMS add-on module that allows to include PHP, JS, or HTML code to a template or page (screenshot) : https://addons.wbce.org/pages/addons.php?do=item&item=37 Can someone help me to know what coding string to include using this module, so that it constrains the accordion to behave as I wish it to ? Regards -
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 All, I am having an issue with a simple site where I would like an image inside a div to bleed top and bottom, no scroll bar, and have text on either side that is centered horizontally with the image. This is what I have for CSS: body { margin:0; padding:0; border:0; width:100%; background:#fff; max-height:100%; font-size:90%;}a { color:#7e99ad; text-decoration:none; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}a:hover { color:#000000; text-decoration:none;}a:active{ color:#000000; text-decoration:none;}h1 { margin:.8em 0 .2em 0; padding:0; font-size:18px; font-weight:lighter;}h2, h3 { margin:.8em 0 .2em 0; padding:0; font-size:14px; font-weight:lighter;}p { margin:.4em 0 .8em 0; padding:0;}img { margin:10px 0 0px;}#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;}#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%;}#ads img { display:block; padding-top:0px;}/* column container */.colmask { position:relative; clear:both; float:left; max-width:100%; overflow:hidden; }/* common column settings */.colright,.colmid,.colleft { float:left; max-width:100%; position:relative;}.col1{ float:left; position:relative; overflow:hidden; margin: 0; white-space: nowrap; padding: 0; text-align: center;}.col2,.col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden;}/* 2 Column (left menu) settings */.leftmenu { background:#fff; /* right column background colour */}.leftmenu .colleft { right:75%; /* right column width */ background:#fff; /* left column background colour */}.leftmenu .col1 { width:71%; /* right column content width */ left:102%; /* 100% plus left column left padding */}.leftmenu .col2 { width:13%; /* left column content width (column width minus left and right padding) */ left:6%; /* (right column left and right padding) plus (left column left padding) */ font:"Plantagenet Cherokee", "New times Roman", serif; color:#86A1BC;} /* Footer styles */#footer { clear:both; float:left; width:100%; border-top:1px solid #000;}#footer p { padding:10px; margin:0;} This is the HTML: <!doctype html><html><head><meta charset="UTF-8"><title>Thornton Rockwell Preservation Services</title><link href="stylesheet.css" rel="stylesheet" type="text/css"></head><body><!--CODE STARTS HERE --><div class="colmask leftmenu"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --><h1><</h1> <img src="images/Abraham_Garfield/beforeafter.jpg" style="float: center; max-width: 100%;"> <h1>></h1> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <div id="ads"> <a href="Contact.html"><img src="images/Logo.png" width="100%"; border="0" alt="Thornton Rockwell Fine Art Conservation" /></a> </div> <br/> <br> <br/> <table style="width:75%; text-align:right" /> <tr> <td> <h1><p><a href="index.html">Portfolio</a></p></h1> <h1><p><a href="AGarfield.html">Abraham Garfield</a></p></h1> <h2><p><a href="Cenci.html">Beatrice Cenci 17th Century Copy</a></p></h2> <h2><p><a href="Deakin.html">Edwin Deakin</a></p></h2> <h2><p><a href="Healy.html">G.P.A. Healy</a></p></h2> <h2><p><a href="LadyJane.html">Lady Jane Grey</a></p></h2> <h2><p><a href="Hurd.html">Peter Hurd</a></p></h2> <h2><p><a href="RussianIcon.html">Russian Icon</a></p></h2> <h2><p><a href="Sully.html">Thomas Sully</a></p></h2> <h2><p><a href="Coulter.html">William A. Coulter</a></p></h2> </td> </tr> <tr> <td> <br/> <br/> <h1><p><a href="Contact.html">Contact</a></p></h1> </td> </tr> </div> <!-- Column 2 end --> </div> </div></div></body></html> Check out my screen shots as well. You will see that the page scrolls to fit in the whole image. I would like the image to bleed on top and bottom of page with NO scroll. I would like the arrows to be on either side of the image, horizontally centered with the image. Help!
