Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by BySplitDecision

  1. Good afternoon, I have a Wordpress website and I'm currently about to update my Woocommerce plugin but was wondering if I could have some advice please? I have the main Woocommerce plugin, Woocommerce Admin and Woocommerce Stripe Gateway. I'm wondering which order would be best to update them in? Does anyone have experience in doing this? Many thanks for any help you can give me. BSD
  2. Hi Requinix, Thanks for your message. I'll have another look over it, I'm just not sure on how to determine if the user has visited 2 pages so that I can stop the popup showing. Maxxd, It's not a case of me using JavaScript OR PHP, I'm using both within the website. I wanted to do it with JavaScript but after failing to grasp the 2 links sent, I simply asked if maybe PHP was the better way - as I know that's commonly how cookies are set. Jeez. Thanks Requinix, BSD
  3. Thank you both for your replies. I've gone through the websites but can't seem to figure out how I'm going to do it. My pages are built with the .php extension. Is it better to set a cookie using PHP? Many thanks, BSD
  4. Good morning Freaks! I'm currently working on a popup for my website but it appears every time I visit a page on my website. What I would like to do is show the popup only 2 times, and if the user visits anymore pages, it doesn't show. I'm sure it's a simple tweak to my code but I haven't got a clue on how to set the cookie and then determine the amount of pages visited etc. Here is my code below: HTML: <div id="popup-box"> <div class="close-popup">X</div> <p id="popup-text">This is my text.</p> <a href="#"> <img src="../img/isopod.jpg" alt="ISOPOD" title="ISOPOD"> </a> <a href="#" id="popup-btn">Learn More <span class="icon">r</span></a> </div> CSS: #popup-box { position: fixed; bottom: 0px; right: 0px; background: #fff; border: 2px solid #eaeaea; padding: 25px; z-index: 999999; text-align: center; display: none; box-sizing: border-box; } #popup-box .close-popup { position: absolute; right: 10px; top: 10px; cursor: pointer; z-index: 9999999; font-size: 22px; font-weight: bold; } #popup-box p { text-align: center; font-size: 26px; } #popup-box img { display: block; width: 280px; margin: auto; } #popup-box #popup-btn { width: 340px; border: 6px solid #455560; color: #455560; padding: 9px 16px 13px 20px; display: inline-block; z-index: 1; position: relative; font-size: 22px; text-align: left; text-transform: uppercase; margin-bottom: 10px; } #popup-box #popup-btn:hover { color: #ffffff; background-color: #455560; } #popup-box #popup-btn span.icon { font-size: 24px; float: right; font-weight: bold; padding-top: 4px; text-transform: none; } JS: jQuery(function(){ setTimeout(function(){ jQuery('#popup-box').fadeIn(500); }, 3000); jQuery('.close-popup').click(function(){ jQuery('#popup-box').css("display","none"); }); }); I believe I'd need to put the setTimeout function within an if() statement but I'm not sure how to store the cookie and then read that. Many thanks in advance for any help you can provide. Cheers, BSD
  5. Evening Requinix, Thanks for the reply. Just coming back to let you know I've wrote something which works well. The markup for the Modal is: <div id="animatedModal" class="popup-modal"> <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID --> <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div> <div class="clearfix"></div> <div class="modal-content"> <div class="container"> <div class="portfolio-padding"> <div class="col-md-8 col-md-offset-2"> </div> </div> </div> </div> </div> I've created 1 array to hold the different sets of Data: var projects = []; projects[0] = []; projects[0][0] = "Simple Glitter Application <br> By Creative Services"; projects[0][1] = "A quick and simple demonstration to show how to apply a fine glitter, this should only be completed at the designated glitter station, remember to tidy up afterwards. If you require glue pens ask the Mocking-up Team in creative support"; projects[0][2] = "mov/SimpleGlitter.mp4"; projects[0][3] = "Supplies:-<br>Glue pen, chosen glitter, a brush and a sheet of A3 paper not card."; projects[1] = []; projects[1][0] = "Heading 2"; projects[1][1] = "Description 2"; projects[1][2] = "mov/FoilHotStamper.mp4"; projects[1][3] = "Supplies 2"; projects[2] = []; projects[2][0] = "Heading 3"; projects[2][1] = "Description 3"; projects[2][2] = "mov/video3.mp4"; projects[2][3] = "Supplies 3"; And this is the jQuery I've done to add the data: $('#btn-close-modal').click(function(){ var vid = document.getElementById("video-element"); vid.pause(); vid.currentTime = 0; $('.modal-content .container .portfolio-padding .col-md-8.col-md-offset-2').empty(); }); $('.portfolio_item').click(function(){ var id = $(this).attr('id'); id = id.match(/\d+/); var theData = ""; theData = "<h2>" + projects[id][0] + "</h2>"; theData += "<p id='description'>"+ projects[id][1] + "</p>"; theData += "<video controls width='640' width='480' data-type='video' data-offsetY='2400' data-speed='1.5' id='video-element'>"; theData += "<source src='" + projects[id][2] + "' type='video/mp4' />"; theData += "</video>"; theData += "<p id='additional-info'>" + projects[id][3] + "</p>"; $('.modal-content .container .portfolio-padding .col-md-8.col-md-offset-2').append(theData); }); Thank you for responding. Am I able to mark this as 'completed' or 'answered' my end? Cheers, BSD
  6. Hi Requinix, Thank you for the reply. The images are just added to the HTML like normal, but it's the modal data that needs to be dynamic. I've attached a picture of the layout of my images and also the modal which opens upon click. I'm going to add all the different images via the HTML, but for the modals, I don't want to have lots of them - in case I need to add lots more. The second image attached is the modal data, this needs to be dynamic. Is there a way that when I click the box next to the Unicorn one, I can have the same modal open but with the relevant data? Maybe upon click, read a .txt file, find the line relating to that set of data and show that in the modal? Is that the best way to do it, or maybe save the data in a JavaScript array and upon click, find the array ID and do it that way? What's the best way please? Many thanks in advance, BSD
  7. Good evening Freaks! I have a simple HTML page, and in this are around 10 different images. When the images are clicked, I want to display different data (a heading, text and a video) - but using just 1 modal. I can obviously do this by adding 10 different modals and 10 different sets of data or by using a Database. --------------- What I was wondering, is there a way that I can have 1 modal, and depending on which image is clicked, show different data - without using a database. Could I have a simple .txt file, with the 10 different lines of data, separated by a comma or a pipe? And then dynamically read those lines into the modal? For example: Heading 1 | Text 1 | Video 1 Heading 2 | Text 2 | Video 2 Heading 3 | Text 3 | Video 3 I've used databases before and PHP so could do it that way but wanted to keep it simple so I don't have to add entries to phpMyAdmin every time - but I want to keep it very simple and never tried this way before. Is it possible? Many thanks for your time and answers in advance. Cheers, BSD
  8. Hi guys, I managed to get it working in case anyone wants to know and do the same in future. So I added a while loop within the for loop to check to see if the box has a red background already) and while that is true, keep generating another random number. So the jQuery now looks like this: <script> $(function(){ $('button').click(function(){ var num; var box = $('.box'); $(box).css('background','none'); for (num = 0; num < 3; num++) { var result = Math.floor(Math.random()*box.length+1); var color = $(box[result-1]).attr('style'); while(color == 'background: red;') { result = Math.floor(Math.random()*box.length+1); color = $(box[result-1]).attr('style'); } $(box[result-1]).css('background','red'); box.splice(result,1); } }); }); </script> Many thanks, BSD
  9. Good evening, I have 9 divs in a grid on a page and I also have a button. What I want to achieve is when I click the button, it chooses 3 random divs and changes their background colour to red. I have wrote this code so far but it is buggy. I think it's because it's getting the same random number in the for loop. I've put my code below and I hope someone can point me in the right direction please. <div class="row"> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> <div class="col-sm-4"> <div class="box"></div> </div> </div> <script> $(function(){ $('button').click(function(){ var box = $('.box'); $(box).css('background','none'); var num; for (num = 0; num < 3; num++) { var result = Math.floor(Math.random()*box.length+1); console.log(result); $(box[result-1]).css('background','red'); box.splice(result,1); } }); }); </script> Thank you in advance for any help. BSD
  10. I'd like to add my instagram feed to my html website that will update automatically. Is this possible because I cannot find anything tutorials online apart from Wordpress. Many thanks, BSD
  11. Good afternoon, I am currently building my first Wordpress websites which use 2 different languages. I have made 2 identical websites - 1 in English and 1 in German. What I'm looking to do is have the English version at my main domain and have the German version in a sub-directory on my server something like: www.mydomain.com/de/. I've uploaded the English version to my main public_html directory and the German version to the my domain.com/de/ directory. The English version in the main directory is viewing just fine and I can login to admin etc but on the German version - there is a missing style.css sheet. When I keep reloading the German version of the website, the missing file has a random string attached to the end for example: style-6857361jfj58.css and on reload could say: style-3049096884ab.css for example so I think it's being generated randomly by the backend. Does anyone know if I am able to have 2 separate Wordpress installations on 1 server - 1 in the main directory and one in a sub-directory? Many thanks, BSD
  12. Good evening, I'm trying to find where the image for a category on my homepage is set. I've looked at the Categories, clicked on the specific one, but when going to the 'Content' part, it is all empty. I've also looked at the Blocks and searched through each one but they do not show anything related. I've attached an image of the category section on my homepage. Many thanks, BSD
  13. Good evening, I'm trying to change the background color of my table header in my New Order email. Is this possible to do?, I can't seem to locate the HTML which generates the table. Many thanks, BSD
  14. Ah thank you. When adding a plain <style></style> tag to the <head> it still deletes it from the code editor, but setting data-fr-style to FALSE, makes all of the <style> and code appear. Thank you very much for your help. Kind regards, BSD
  15. Good evening, Only just got free time to work on this since your reply but this works exactly as needed except it seems to be stripping only the <style> tag now. Checking the source code, there is a <style> tag with some default CSS but when viewing the source via the 'Code Editor' button in Froala, it is completely removed. I've attached 2 images to show you what I mean... What I have done is explicitly set the 'htmlAllowedTags' option to allow the <style> tag as there is also an option called 'htmlRemoveTags', which lists <style> as a default removed element. Could it be something to do with sanitising? How can it appear in the browser source, but not the code editor source?
  16. Managed to find this in another set of documentation: Changing my code to this: <script> $(function() { $('textarea').froalaEditor(); $('textarea').editable('option', 'fullPage', true); }); </script> renders this error in the console: '.editable is not a function' ? Many thanks, BSD
  17. That's correct, when I reversed it, content is editable and the fullPage works. I attached the code and result below:
  18. Good evening, I managed to get the Froala editor to keep all of the HTML tags, but I also want to initialise it with 'edit.off' on some occasions depending on if another element has a 'disabled' class. The code I now have made for the froala editor initialisation is: <script> $(function() { $('textarea').froalaEditor({ fullPage: true }); $('textarea').froalaEditor('edit.off'); }); </script> Now, I know that I am initialising it twice, which is why the fullPage is not working. I've searched for days online and gone through the documentation over and over searching for something sounding similar but to no avail. Is there a way that I can combine the 2 into one initialisation? I have tried the following: <script> $(function() { $('textarea').froalaEditor('edit.off',{ fullPage: true }); // $('textarea').froalaEditor('edit.off'); }); </script> and <script> $(function() { $('textarea').froalaEditor({ fullPage: true, 'edit.off' }); // $('textarea').froalaEditor('edit.off'); }); </script> Many thanks for any information you can help me with. BSD
  19. Thank you very much! That's exactly what I was looking for. Kind regards, Tom
  20. Good afternoon, I'm trying to implement the Froala Text Editor into my site and couldn't get it working. I created a basic html file and managed to get a certain method to work which is great. The problem is that I want the editor to allow all of the HTML tags, but when I enter the <html><body> tags to the code editor and then go back to the text editor, it deletes it. I have tried to use the allowedTags method but it doesn't seem to stop stripping the <html> and <body> tags. Does anyone have experience with this? I've posted my code below. Many thanks, BySplitDecision <?php include("setup/start.php"); ?> <html> <head> <title>Code Testing Laboratory</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- Include external CSS. --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css"> <!-- Include Editor style. --> <link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.2/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.2/css/froala_style.min.css" rel="stylesheet" type="text/css" /> </head> <body> <section id="header"> <div class="container"> <h3 id="logo"> <a href="<?php { echo $page;} ?>">Laboratory Technician</a> </h3> </div> </section> <!-- Create a tag that we will use as the editable area. --> <!-- You can use a div tag as well. --> <textarea></textarea> <!-- Include external JS libs. --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script> <!-- Include Editor JS files. --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.2/js/froala_editor.pkgd.min.js"></script> <!-- Initialize the editor. --> <script> $(function() { $('textarea').froalaEditor({ htmlAllowedTags: ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'] }); // $('textarea').froalaEditor('edit.off'); }); </script> </body> </html>
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.