Jump to content

dsonesuk

Members
  • Content count

    8,826
  • Joined

  • Last visited

  • Days Won

    293

dsonesuk last won the day on August 20

dsonesuk had the most liked content!

Community Reputation

676 Excellent

5 Followers

About dsonesuk

Contact Methods

  • ICQ
    0

Profile Information

  • Gender

Recent Profile Visitors

76,722 profile views
  1. How to edit my w3schools bootstrap website

    I don't understand what you mean by editing page? all editing can be done through an editor like notepad++, this will edit, bootstrap css and JavaScript, but it would be better to create your own custom css to override bootstrap css, and custom js, for you own JavaScript.
  2. How to add multiple images within a modal

    Bootstrap is NOT a editor, its a framework of predefined classes, JavaScript that is used to style, and manipulate elements (example modal, sideshow) so it works! in a responsive manner. IF you look at links at top with bootstrap, they are linking externally to these files, same with jquery. I see you are opening the file directly from O/S filesystem, and not on local server wamp or xamp, then that could be problem, if linking to bootstrap and jquery externally. These files have to be downloaded to specific location, especially when linking to glyph icons in fonts folder.
  3. How to add multiple images within a modal

    This is what it should be or similar to <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> </style> </head> <body> <div class="container text-center"> <h1> Click Me </h1> <!-- Large modal --> <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img class="img-responsive" src="http://placehold.it/1200x600/555/000&amp;text=One" alt="..."> <div class="carousel-caption"> One Image </div> </div> <div class="item"> <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&amp;text=Two" alt="..."> <div class="carousel-caption"> Another Image </div> </div> <div class="item"> <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&amp;text=Three" alt="..."> <div class="carousel-caption"> Another Image </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div> </body> </html> You maybe using different version of bootstrap, jquery and obviously the images are different. CSS styling goes between <head>...</head> (unless placed inline to element themselves. JavaScript can go in with css in <head> or within body element, but any element, element class or id, must exist before JavaScript references them. That is why it is norm to place JS LINKS at bottom of page before </body>, so as page is read from top to bottom, the html with id and classes are rendered first, and JavaScript loaded last can reference them with no problems, plus it helps renders the whole page quicker.
  4. Localhost

    Which IP address? 127.0.0.1 (localhost) or the ip address of network o/s hosting the web site? check out https://stackoverflow.com/questions/9682262/how-do-i-connect-to-this-localhost-from-another-computer-on-the-same-network
  5. Need Two Slideshows — Both with Arrow and Dots

    You had wrongly referenced a JavaScript function, and wrongly named a css selector so very important position: relative was not applied. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none; width: 100%;} /* Slideshow container */ .slideshow { /*NOT slideshow-container*/ max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #f44336; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div id="wrapper"> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <a class="prev" onclick="plusDivs(-1, 0)">&#10094;</a> <a class="next" onclick="plusDivs(1, 0)">&#10095;</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1, 0)"></span> <span class="dot" onclick="currentDiv(2, 0)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <a class="prev" onclick="plusDivs(-1, 1)">&#10094;</a> <a class="next" onclick="plusDivs(1, 1)">&#10095;</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1, 1)"></span> <span class="dot" onclick="currentDiv(2, 1)"></span> </div> </div> <script> var slideIndex = 1; var z = document.getElementsByClassName("slideshow"); for (i = 0; i < z.length; i++) { //set custom data attribute to first current image index z[i].setAttribute("data-currentslide", 1); showDivs(z[i].getAttribute("data-currentslide"), i); } function plusDivs(n, j) { //get custom data attribute value of current image index to slideshow class index j slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]); showDivs(slideIndex += n, j); } function currentDiv(n, j) { showDivs(slideIndex = n, j); /* showDivs Not showSlides*/ } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); var dots = z.getElementsByClassName("dot"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length; } //set custom data attribute to current image index z.setAttribute("data-currentslide", slideIndex); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </div> </body> </html>
  6. Please help a newbie

    $db = mysqli_connect('localhost','root','1234','learnning_over_here'); tired
  7. Image overlay hover CSS

    The images must be within a container, so you apply this feature to a specific image, you won't be able to apply overlay background to image, identify its size, position iwithout this container.
  8. CSS :hover problem

    The space between '.dropdown-content:hover' and '.opa' means it will be referring to child element, in other word a element within '.dropdown-content' container element with class 'opa', NO element such as this exists. The only element that has this class is a sibling img element of '.dropdown-content' placed above it, which you can't access, because you can only cascade down, not up.
  9. Unusual Code - A PHP Shortcut?

    Its shorthand, but your PHP has to be permitted to allow it through PHP settings file under "short open tag" , else problems will occur.
  10. How to add multiple images within a modal

    Did you also download and add links to css, JavaScript required to style and make it work?
  11. Bootstrap Grid Question

    The grid works to whatever element you assign a grid percentage width class/es reference to, and ALL elements header, footer, nav etc are WITHIN the body, which altogether makes up the whole page.
  12. Issue with float:left

    The parent element of floated child elements, collapses to zero height, meaning the uneven height of image and text, causes the next element to float up against bottom edge of text, and stop at right edge of image. Overflow causes the parent to regain the boundary to the highest child element, causing any sibling elements not to get hooked by exposed elements, Flex is used to give equal height columns, even if the content only fills a small portion of an element, the image is vertically aligned to bottom of equal height right column. The 'test' class is used to create a textual element same height as column, this help in the image being forced to bottom of column.
  13. Bootstrap Grid Question

    You would use 'container-fluid' class (check class name, it may have change depending on version of bootstrap), the body area is/or will be the whole page?, you would not set a size to body, only to child div elements. The 'container' which adjusts to fixed size depending on media query for device width, can be placed inside the 'container-fluid' class.
  14. Issue with float:left

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> .test{text-align: center;} .test:before { content: ""; display: inline-block; width:0; height: 100%; } .test img {width: 97%;} </style> </head> <body> <div style="width: 960px; margin: 0px auto; overflow: hidden; vertical-align: bottom; display: flex;"> <div style="width: 70%; float: left;"> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> <div style=" overflow: hidden;"> <div style="width:30%; float: left;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-34.png" alt=""> </div> <div style="width:70%; float: left;"> <h3>Asesorías y Servicios Contables</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deserunt velit culpa aliquam expedita ex neque nostrum amet debitis ea dolore ipsam eos ratione dicta maxime libero, dolorem consectetur obcaecati.</p> </div> </div> </div> <div class="test" style="width: 30%;"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-37.png" alt=""> </div> </div> </body> </html>
  15. How to add multiple images within a modal

    Then you need to add slideshow to modal https://www.w3schools.com/howto/howto_js_slideshow.asp But im afraid its going to be more complicated than just that, as you have use JavaScript to bring up the image you selected when modal appears. Also i foresee conflicting problems using multiple modals with slideshows and even more complicated code.
×