Jump to content

All Activity

This stream auto-updates     

  1. Last week
  2. Modals with combo boxes

    You have missed closing div's for second modal, the btn1 still refers to first class 'close' found using index of 0, the 'bin' variable which has onclick event in second modal code, should be 'bin1'. You also need to reduce number of window.onclick events to 1, and add 'else if' condition to check for modal1 target event.
  3. Modals with combo boxes

    Ok I have 2 types of files I want people to be able to get. Article and Calendar. The differences are 1) the file names are a bit different - Year month Article.ext and Calendar month year.ext and 2) the extensions are different - doc for articles, docx for calendar, htm for article, html for calendar. There's a bunch of files so I'd really not have to go changing the file names. Here's the code I have so far. <style> body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>Please Select Star or Calendar.</h2> <!-- Trigger/Open The Modal --> <button id="myBtn">Monthly Star</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <form> Select the year: <select id="mySelect"> <option>2018</option> <option>2017</option> <option>2016</option> <option>2015</option> </select> <br /> Select the month: <select id="mySelect1"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <br /> Select PDF, Word or Webpage: <select id="mySelect3"> <option>pdf</option> <option>doc</option> <option>htm</option> </select> <br><br> <input type="button" onclick="myFunction()" value="Click Me!"> <br /> </form> <a id="myLink" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a> <script> function myFunction() { var obj = document.getElementById("mySelect"); var obj1 = document.getElementById("mySelect1"); var obj3 = document.getElementById("mySelect3"); document.getElementById("myLink").innerHTML = "New Link"; document.getElementById("myLink").href = "http://www.bethlehemvinton.org/Star/" + obj1.options[obj1.selectedIndex].text + " " + obj.options[obj.selectedIndex].text + " Bethlehem Star." + obj3.options[obj3.selectedIndex].text; document.getElementById("myLink").target = "_blank"; } </script> </div> </div> <!-- Trigger/Open The Modal --> <button id="myBtn1">Monthly Calendar</button> <!-- The Modal --> <div id="myModal1" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <form> Select the year: <select id="mySelectC"> <option>2018</option> <option>2017</option> <option>2016</option> <option>2015</option> </select> <br /> Select the month: <select id="mySelectC1"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <br /> Select PDF, Word or Webpage: <select id="mySelectC3"> <option>pdf</option> <option>docx</option> <option>htm</option> </select> <br><br> <input type="button" onclick="myFunctionC()" value="Click Me!"> <br /> </form> <a id="myLinkC" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a> <script> function myFunctionC() { var objC = document.getElementById("mySelectC"); var objC1 = document.getElementById("mySelectC1"); var objC3 = document.getElementById("mySelectC3"); document.getElementById("myLinkC").innerHTML = "New Link"; document.getElementById("myLinkC").href = "http://www.bethlehemvinton.org/Star/Calendar for " + objC1.options[obj1.selectedIndex].text + " " + objC3.options[obj3.selectedIndex].text; document.getElementById("myLinkC").target = "_blank"; } // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // Get the modal var modal1 = document.getElementById('myModal1'); // Get the button that opens the modal var btn1 = document.getElementById("myBtn1"); // Get the <span> element that closes the modal var span1 = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal1.style.display = "block"; } // When the user clicks on <span> (x), close the modal span1.onclick = function() { modal1.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal1) { modal1.style.display = "none"; } } </script> </body> If I do just 1 modal (the first one) it works fine. But when I add the 2nd it breaks so I'm assuming I've got 2 variables somewhere with the same name. 1) is this the easiest way to handle this? 2) I'd rather not have the link "Current..." showing but if I delete it then I can't make it work. I know I could probably do some scripting to create it on button click but ... well, sad to say I'm running out of time to get this done. Any help would be appreciated.
  4. Populating link with combo box values

    Thanks. It doesn't matter when it changes as long it's before populating the link. I've decided to try a different approach as the file names are different for Calendar and Article beyond the extension. So I was thinking that I could do 2 modals. 1 for article and 1 for calendar. but they're not working. I'm starting a different topic for that.
  5. Thanks for your help with this dsoneuk. At this point in time it is the only option. It makes sense what you are saying, and can see how this is a less-than ideal scenario. I will continue to explore options...
  6. CSS Required Field X Not Displaying Properly

    Try given it overflow: visible; or increase padding so is shows completely within the container.
  7. As far as the parent knows it has no content, because using position: absolute for child element takes it out of the flow from other elements. They will collapse, or attempt to fill the space left by these elements. The parent has no height and now no width because you are using float, which causes the element to shrink to content which as stated above does not exist. So all child element are moved now to the right, moving content from just inside the parent right edge outwards beyond the right edge. The child elements will overlap each other as well. ARE you sure you don't have an option? you see what you have to consider and issue you have to endure using position: absolute.
  8. Hi there, I have a scenario where I have no option but to absolute position some elements within a div. So I set the parent to position relative, the children absolute, job done. But if I float the parent container to the right, it jumps outside its wrapper. Is there a way to stop this happening? .wrapper{} .parent{position: relative; float: right;} .child{position:absolute;} <div class="wrapper"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> Thanks
  9. Hi I have created a Contact 7 Form and added some custom css as shown below. When I click the Sign-Up button and don't enter any data, the red box displaying the error X is being cut off. I thought it might have been my border, so I removed that and tested and the issue persists. How do I resolve this? div#wpcf7-f3791-p3734-o1 { border-radius: 25px; border: 2px dashed #0c6bb5; padding: 20px; }
  10. Populating link with combo box values

    Depends when you want it to change? On selection of 'calendar' Or on button click. On selection, requires you add onchange event to mySelect2 element, then check value, if true go to mySelect3 value/text directly using index for option element OR a 'for' loop, looping through each option then change when value/text matches. This option means the user will see the text/value of 'docx' for selection. On button click, the text/value of mySelect2 element is checked, if equals 'calendar', the value/text of mySelect3 is changed, the user will not see change take place. Note: You should avoid spaces in file names, as this can be problematic, I suggest you use hyphens '-', this is still readable by SEO. So not a case of simply saying it!
  11. Php.ini file?

    Ah I see, The host I use, has a plan for £50 for a year or something. I use a basic £11.39p hosting per month, only when I can, so I have to cancel if I don't have that amount. So this certificate authentication isn't really cheap, it is separate from a package. The free host I use is ad based, and just for the testing, has no real features, sub domains, but that is it, free forum packages and all that, but pretty pointless in learning php 7/mysql. Obviously I'm trying to create an account registration site, so something really basic like I've stated in the previous posts, sadly I can't get anywhere with this. The whole certificate cost is out of the question, I can only just try and make the site work. I'm stuck with that.
  12. Php.ini file?

    There are three main types of SSL and depending on type of website site you plan on having, determines the type of SSL you should use. See the bottom of this host certificate page on types and what they are used for. https://www.1and1.co.uk/ssl-certificate
  13. Php.ini file?

    I can't speak to your particular host, but in general you create a certificate signing request on your server, then buy a certificate with the CSR from a reputable certificate authority, and when you get the certificate from the CA you install it on your server. That will allow your server to encrypt traffic. It is not possible to do this on a web server that serves multiple domains from the same IP address, only one of those domains can have a certificate on it (or, more specifically, it will try to encrypt all traffic using a certificate for a single domain). So each secured domain needs a dedicated IP address.
  14. Php.ini file?

    Hmm, so what can you inform on this, what do I need to do to have a padlock for just simply registering to begin with, that wasn't on the free host or the paid host I am using.
  15. Php.ini file?

    It's always a good idea in general to support HTTPS.
  16. Populating link with combo box values

    Options have a value attribute that you can use to store the extension while you display something else for the text, you don't need to do that with Javascript. Why are you stuck? The code is hardly different than saying it: if (val == 'Calendar') { ext = 'docx'; }
  17. Php.ini file?

    Okay, that wasn't any help. I wanted to inquire, what about secure transfer for data, like a secure connection. I don't have one of those on the host I am using.
  18. Populating link with combo box values

    Ok, so I have 4 combo boxes with $Year, $Month, $Type, $extension to create file name of URL. http://www.myOrg.Org/Articles/$Month + $Year + MyOrg + $Type . $extension This is what I have (doing only 1 variable - Year). <form> Select the year: <select id="mySelect"> <option>2018</option> <option>2017</option> <option>2016</option> <option>2015</option> </select> Select the month: <select id="mySelect1"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> Select Article or Calendar: <select id="mySelect2"> <option>Article</option> <option>Calendar</option> </select> Select PDF, Word or Webpage: <select id="mySelect3"> <option>pdf</option> <option>doc</option> <option>htm</option> </select> <br><br> <input type="button" onclick="myFunction()" value="Click Me!"> </form> <a id="myLink" href="http://www.myOrg.org/Article/April 2018 myOrg.pdf">Current Article</a> <script> function myFunction() { var obj = document.getElementById("mySelect"); var obj1 = document.getElementById("mySelect1"); var obj2 = document.getElementById("mySelect2"); var obj3 = document.getElementById("mySelect3"); document.getElementById("myLink").innerHTML = "New Link"; document.getElementById("myLink").href = "http://www.myOrg.org/Article/" + obj1.options[obj1.selectedIndex].text + " " + obj.options[obj.selectedIndex].text + " " + obj2.options[obj2.selectedIndex].text + "." + obj3.options[obj3.selectedIndex].text; document.getElementById("myLink").target = "_blank"; } </script> Works but now I want to have some if then statements. Instead of pdf, doc and htm I want to show PDF File, Word Document and Webpage but when it inserts it into the address is needs to be pdf, doc and htm. But if Calendar is selected it needs to be docx not doc. So....kinda stuck at this point.
  19. How to overwrite list style

    You can't then, unless you lose the option to create bootstrap menu with current used classes.
  20. list-style-image

    Create a element to apply background-image, with height and width. The two option would be to use a span or content: textual element, and use position: absolute; left, top properties within a position: relative list item.
  21. list-style-image

    How do you resize the background image?
  22. How to overwrite list style

    Unfortunately I am not able to remove the classes and add a new class. How can I overwrite?
  23. You want to move which posts into their own topic?
  24. Flexible in array for table in the Database

    Did you understand my previous comments? You need to fix the issues with the loops, if you want to print one input per column then you need to do that, right now you're defining a variable called $input in the loop but you only print it outside the loop, so it's only going to print the last value. If you name the inputs with the square brackets then that will make an array in $_POST, you can get that array and loop through it to get the submitted values.
  25. How to create subdomain, park domain

    If you want to do that automatically with PHP, it will help if your server software has an API you can use to do that. With a cPanel server, for example, there is an API you can use to automate most things you can do in cPanel.
  26. return ajax data outside the ajax

    If marker isn't defined on that same page, it's not going to be defined in that function for you to update.
  1. Load more activity
×