Jump to content

dsonesuk

Members
  • Content count

    8,826
  • Joined

  • Last visited

  • Days Won

    293

Everything posted by dsonesuk

  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.
  16. Load Page with Filler Update

    Unless you set html to be treated as php, then yes! you would have to change the file to php, but also instead of querystring you could use session to store data.
  17. Problem Connecting to MySQL

    This should not be bring up 404 error, but you have missed a semi colon that will cause a php server error <?php $servername = "localhost"; $username = "root"; $password = ""; // Create connection $conn = new mysqli($servername, $username, $password); // Check connection if($conn ->connect_error) { die("Connection failed: " . $conn->connect_error); } echo "Connected successfully"; ?>
  18. Problem Connecting to MySQL

    That suggests it can't find that contact.php page, not that there is a database connection problem.
  19. Sending mail

    Do you actually have! A mail server installed and setup? They are not usually supplied by default with local server installation, but you could use 'TestMailServerTools' (google), it will listen for email being sent at a port, and show in your o/s email program, while also storing the email in question.
  20. How to add multiple images within a modal

    So you want, slideshow of images in modal, with slideshow image of the one you selected, plus the other group images associated with that image, with left/right navigation?
  21. By default the mysql db host has always been IP 127.0.0.1 ( also ::1) OR 'localhost' (which is user friendly way of pointing to 127.0.0.1) The user mysql 'root' is the default username, which gives all privileges used for mysql db. The mysql 'password' is what you should have setup. The mysql 'database' is the database name you wish to connect to, which you should have created. There is also an optional mysql 'port' and mysql 'socket' which would used if an alternative to default is used. Its obvious the tutorial mistakenly placed a '.' Instead of ',' between mysql host and user parameters, whatever happened its wrong!
  22. Fade In and Fade Out Slideshow

    Yes! its possible, bit complicated, The idea is to get the previous image, and place it as a background using position: absolute with low z-index, then fade in what will be next image with higher z-index, because this image is layered above the bg image it will give effect that both are cross fading, but only the top layered image is.
  23. Fade In and Fade Out Slideshow

    Use percentages, along with fill mode /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; animation-fill-mode: forwards; } @-webkit-keyframes fade { 0% {opacity: .4} 50% {opacity: 1} 100% {opacity:0.4} }
  24. something I cannot understand in javascript code

    IF the values in the array are taken from text type input, the numbers in array will be a string/text, it is precautionary to make sure when used in math operations that 16 + "4" don't equal "164", but 20.
  25. Help fixing this

    I presume you have session_start(); at top of pages that use sessions? Then i suggest you check value of $count and $mode either of which can cause this error to appear, also clear all history etc, that may stored failed results.
×