Jump to content

man5

Members
  • Posts

    173
  • Joined

  • Last visited

Everything posted by man5

  1. Say I want to allow users to chat with each other either through text or video on my site, what would be the best way to go on about doing that? I know basic text chat system can be created with PHP/Mysql/Ajax. What about video chat? Or is there a chat plugin/service out there that I can use to implement in my site? Note that I am looking for something can allow thousands of registered users to chat with each other at the same time.
  2. It seems like the sessions are now being saved, despite redirecting to another page. I didn't change anything. I guess the online servers need a bit of time to be updated.
  3. So I have a code that is suppose to save form sessions and then redirect to another website. It does redirect but the sessions are never saved when I go back to my site. And yes, I do have session_start() at the very top of the page. And also, the sessions do get saved on locahost server but not live server. Do you know why this is happening? Here's the code example. if(isset($_POST['submit'])) { $name = trim($_POST['name']); $email = trim($_POST['email']); $_SESSION['name'] = $name; $_SESSION['email'] = $email; $errors = array(); $db->beginTransaction(); if(empty($name)) { $errors[] = 'Name is required.'; } if(empty($email)) { $errors[] = 'Email is required.'; } if(empty($errors)) { $db->commit(); $new_url = 'https://www.google.ca/'; ?> <script> window.location.href = '<?php echo $new_url; ?>'; </script> <?php exit(); } else { $db->rollBack(); } }
  4. Say I have this link where I've added a product to the cart. https://www.adidas.ca/on/demandware.store/Sites-adidas-CA-Site/en_CA/Cart-Show You will see the cart empty because you're on a different computer and the cookies are unique only to the browser I'm browsing on. Basically what I'm trying to do is have products on my own site and when a user goes to buy them, it will link them directly to the cart/checkout page of that said product on that site(eg. adidas). Is something like that possible to do?
  5. I'm using Shopify platform so it doesn't support PHP, only Ruby. Could you please show me an example of the AJAX call you're talking about. To give you a better look at how the chained select drop downs look, here's a small bit. Note that the #model options are around 6000 in number. <select id="make" name="make" required> <option value="" >Select Make</option> <option value="acura">Acura</option> <option value="alfa-romeo">Alfa Romeo</option> <option value="american-motors">American Motors</option> <option value="aston-martin">Aston Martin</option> <option value="audi">Audi</option> <option value="bmw">BMW</option> </select> <select id="year" name="year" required> <option value="" class="grey-option">Select Year</option> <option value="2017 acura" class="acura">2017</option> <option value="2016 acura" class="acura">2016</option> <option value="2015 acura" class="acura">2015</option> <option value="2014 acura" class="acura">2014</option> <option value="1974 alfa-romeo" class="alfa-romeo">1974</option> <option value="1973 alfa-romeo" class="alfa-romeo">1973</option> </select> <select id="model" name="model" required> <option value="" class="grey-option">Select Model</option> <option value="ILX" class="2016 acura">ILX</option> <option value="ILX A-SPEC Package" class="2016 acura">ILX A-SPEC Package</option> <option value="MDX-FWD" class="2016 acura">MDX FWD</option> <option value="MDX-SH-AWD" class="2016 acura">MDX SH-AWD</option> <option value="RDX-AWD" class="2016 acura">RDX AWD</option> <option value="RDX-FWD" class="2016 acura">RDX FWD</option> <option value="RLX-FWD" class="2016 acura">RLX FWD</option> <option value="RLX-SH-AWD" class="2016 acura">RLX SH-AWD</option> <option value="TLX" class="2016 acura">TLX</option> <option value="GTV" class="1974 alfa-romeo">GTV</option> <option value="Spider" class="1974 alfa-romeo">Spider</option> <option value="GTV" class="1973 alfa-romeo">GTV</option> <option value="Spider" class="1973 alfa-romeo">Spider</option> </select>
  6. Gentlemen, Let me explain the situation. The platform I'm using doesn't allow access to back-end, other wise I would have taken that route. Basically I'm trying to replicate "Shop by Vehicle" search box here tirerack.com. The fastest way for me to copy that was to directly copy the individual select dropdowns. I have found a way to do that and now completed it using http://www.appelsiini.net/projects/chained. As for replacing the spacing with dash, I have figured it out and it works out fine when I search. var model = formObj.elements['model'].value.replace(/[\. ,:-]+/g, "-"); Outside of the javascript drop down list, I also needed the same list without spaces and other special characters. Thanks to your suggestion "Psycho", I did that using Excel. That's all good now. But now there is a new issue. On mobile and tablet, it takes very long to load the search box. On PC it loads fine. I noticed the reason is because I have such a long list of select options for the "model". It's almost 6000 lines. The thing is, since I'm using chained plugin above, it only shows the options relative to what I chose in the "make" and "year". But still the page loads extremely slow on mobile and tablet. Do you know why that is? Here's the full code. <script> // Code goes here function submitAction(formObj) { var root = formObj.action; var type = formObj.elements['type'].value; var make = formObj.elements['make'].value; var year = formObj.elements['year'].value; var model = formObj.elements['model'].value.replace(/[\. ,:-]+/g, "-"); var href = root + type + '/' + make + '+' + year + '+' + model; window.location.href = href; return false; } </script> <script> jQuery(document).ready(function($){ /* For jquery.chained.js */ $("#year").chained("#make"); $("#model").chained("#year"); }); </script> <form id="w-form" action="/collections/" method="get" onsubmit="return submitAction(this);"> <select id="make" name="make" required> <option value="" >Select Make</option> {% include 'part-1-search-make' %} </select> <select id="year" name="year" required> <option value="" class="grey-option">Select Year</option> {% include 'part-1-search-year' %} </select> <select id="model" name="model" required> <option value="" class="grey-option">Select Model</option> {% include 'part-1-search-options' %} {% include 'part-2-search-options' %} {% include 'part-3-search-options' %} {% include 'part-4-search-options' %} {% include 'part-5-search-options' %} {% include 'part-6-search-options' %} {% include 'part-7-search-options' %} {% include 'part-8-search-options' %} {% include 'part-9-search-options' %} {% include 'part-10-search-options' %} {% include 'part-11-search-options' %} </select> <select id="type" name="type" required> <option value="">I'm Shopping For</option> <option value="wheels">Wheels</option> <option value="tires">Tires</option> </select> <input type="submit" id="w-search-btn" value="View Results"> </form>
  7. Basically I have a very long form select option drop down list. What I would like to do is that for each option "value", I want to remove the spaces and instead add dash to it. Doing each option value by hand would take me a very long time, so I thought I might try jquery for short cut. If you have another method, let me know. Here's what I have so far. Doesn't seem to work. <script> $(document).ready(function () { $('#model').change(function(){ var str = $(this).val(); str = str.replace(/\s+/g, "-"); }); }); </script> // here's an example of select options <select id="model" name="model"> <option value="john doe" >John Doe</option> <option value="john smith lu" >John Smith Lu</option> </select>
  8. I tried your method with screen width and it doesn't work the way I want it. But if I use the css code, it works exactly as I want it to.
  9. Alright I've solved by second issue. This is the new code. $(document).ready(function($){ //PROCESS A TITLE BUTTON CLICK $(".mobile-collapse__title").click(function(e) { e.preventDefault(); if($(this).next('div.mobile-collapse__content').css('display') == 'none') { $('.mobile-collapse__content:visible').hide(); $(this).next('div.mobile-collapse__content').show(); } else { $('.mobile-collapse__content:visible').hide(); } }); }); @media (max-width: 767px) { .mobile-collapse__content { display: none; } }
  10. One last thing I forgot. I only want that jquery code to run if it's a certain screen size. Like the code below. Once I add the screen width limit, the code inside it won't run for those menus. Can you see what's going wrong here? jQuery(document).ready(function($){ if (screen.width <= 767) { //HIDE ALL LISTS $('.mobile-collapse__content:visible').hide(); //PROCESS A TITLE BUTTON CLICK $(".mobile-collapse__title").click(function(e) { e.preventDefault(); if($(this).next('div.mobile-collapse__content').css('display') == 'none') { $('.mobile-collapse__content:visible').hide(); $(this).next('div.mobile-collapse__content').show(); } else { $('.mobile-collapse__content:visible').hide(); } }); } });
  11. You're correct. I had the function inside "$(document).ready(function($)" which is why it wasn't working. Removing that, It works perfectly now. Thanks!
  12. Yes what you described is what I'm looking for. Having said that, I still get the wrong url format on form submit. It looks like this. /collections/?type=wheels&make=Acura&year=2016&model=ILX
  13. Typically when you submit a form, it's in a format like this "collections?type='wheels'&make='acura'&year='2016'&model='mdx' ". Instead of that format, I would like to do something like this " collections/wheels/acura+2016+mdx ". How would I go on about doing that format with jquery submit form? This is my setup so far. <script> // Code goes here $(document).ready(function() { $('#search').on('submit', function() { var type = $('#type').val(); var make = $('#make').val(); var year = $('#year').val(); var model = $('#model').val(); var formAction = $('#search-form').attr('action'); $('#search-form').attr('action', formAction + type + make + year + model); }); </script> <form id="search-form" action="/collections/" method="get"> <select id="type" name="type"> // type list goes here </select> <select id="make" name="make"> // make list goes here </select> <select id="year" name="year"> // year list goes here </select> <select id="model" name="model"> // model list goes here </select> <input type="submit" id="search" value="Search"> </form>
  14. I have a simple setup where I have a collapsed menu. When you click on the button, it will open a menu. If the menu is already opened and you open another menu, the previous menu will collapse. All that works. The only thing I noticed is that It will not collapse the opened menu if I click the same button. That menu will only collapse if I open a different menu. I was wondering how the code below will look with that extra function added? Here's the code for that. <h5 class="mobile-collapse__title">Title Button</h5> <div class="mobile-collapse__content"> <ul> <li>list 1</li> <li>list 2</li> <li>list 3</li> </ul> </div> <script> $(document).ready(function($){ $(".mobile-collapse__title").click(function(e) { e.preventDefault(); $('.mobile-collapse__content:visible').hide(); $(this).next('div.mobile-collapse__content').show(); }); }); </script>
  15. Perfect! That's exactly what I was looking for. Thanks a bunch.
  16. http://www.tirerack.com/content/tirerack/desktop/en/wheels.html See the window where it says "Shop by Vehicle"? Is there a script already out there that does the dropdown search by make/model/year? I am only looking for the front-end code; javascript/jquery code in particular.
  17. I am looking to do something like this. Showing multiple locations of a business on Google Maps. Living Social has it and so does Groupon. https://www.livingsocial.com/ca/cities/83-ottawa/deals/1542906-basic-training-style-boot-camp?append_ref_code=home_whats_new I know it can be done manually but since it's a user based website, how would the user(business)'s added locations correspond with the Google Maps? Can you point me in the right direction?
  18. So I have it finally working. Someone else helped me out. There was a small mistake in the above code. Here is the full working code. function Timer(container, timeLeft) { // get hour, minute and second element using jQuery selector var daysContainer = $(container).find('.day'); var hoursContainer = $(container).find('.hour'); var minsContainer = $(container).find('.min'); var secsContainer = $(container).find('.sec'); // hold time left var currentTimeLeft = timeLeft; // 1 second = 1000 ms var secondsForTimer = 1000; // hold ID value return by setInterval() var timerInterval; // call setInteval() only when timeLeft is greater than 0 if (currentTimeLeft == 0) { return; } else { //Call setInterval()function and store ID value to timerInterval. timerInterval = setInterval(countdown, secondsForTimer); } //function being passed to setInterval() function countdown() { currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer); if (currentTimeLeft == 0) { //stop calling countdown function by calling clearInterval() clearInterval(timerInterval); return; } else { //calculate hours left var wholeSeconds = parseInt(currentTimeLeft / 1000,10); var wholeMinutes = parseInt(currentTimeLeft / 60000,10); var wholeHours = parseInt(wholeMinutes / 60,10); var wholeDays = parseInt(wholeHours / 24,10); //calculate hours left var hours = parseInt(wholeHours % 24,10); //calculate minutes left var minutes = parseInt(wholeMinutes % 60,10); //calculate seconds left var seconds = parseInt(wholeSeconds % 60,10); //prefix 0 to hour, min and second counter $(daysContainer).text((wholeDays < 10 ? "0" : "") + wholeDays + (wholeDays <=0 ? " day" : " days")); $(hoursContainer).text((hours < 10 ? "0" : "") + hours + (hours <=0 ? " hr" : " hrs")); $(minsContainer).text((minutes < 10 ? "0" : "") + minutes + (minutes <=0 ? " min" : " mins")); $(secsContainer).text((seconds < 10 ? "0" : "") + seconds + (seconds <=0 ? " sec" : " secs")); } } }
  19. Here's the above js code I updated. I now included the additional hours and days in the function. This does show the days but it also shows the total hours as well. For eg. Original code shows: 48 hours 5 mins 10 seconds New code shows: 2 days 48 hours 5 mins 10 seconds function Timer(container, timeLeft) { // get hour, minute and second element using jQuery selector var daysContainer = $(container).find('.day'); var hoursContainer = $(container).find('.hour'); var minsContainer = $(container).find('.min'); var secsContainer = $(container).find('.sec'); // hold time left var currentTimeLeft = timeLeft; // 1 second = 1000 ms var secondsForTimer = 1000; // hold ID value return by setInterval() var timerInterval; // call setInteval() only when timeLeft is greater than 0 if (currentTimeLeft == 0) { return; } else { //Call setInterval()function and store ID value to timerInterval. timerInterval = setInterval(countdown, secondsForTimer); } //function being passed to setInterval() function countdown() { currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer); if (currentTimeLeft == 0) { //stop calling countdown function by calling clearInterval() clearInterval(timerInterval); return; } else { //calculate hours left var wholeSeconds = parseInt(currentTimeLeft / 1000,10); var wholeMinutes = parseInt(currentTimeLeft / 60000,10); var wholeHours = parseInt(wholeMinutes / 60,10); // NEW ADDED var wholeDays = parseInt(wholeHours / 24,10); //calculate hours left NEW ADDED var hours = parseInt(wholeHours % 24,10); //calculate minutes left var minutes = parseInt(wholeMinutes % 60,10); //calculate seconds left var seconds = parseInt(wholeSeconds % 60,10); //prefix 0 to hour, min and second counter $(daysContainer).text((wholeDays < 10 ? "0" : "") + wholeDays + (wholeDays <=0 ? " day" : " days")); $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs")); $(minsContainer).text((minutes < 10 ? "0" : "") + minutes + (minutes <=0 ? " min" : " mins")); $(secsContainer).text((seconds < 10 ? "0" : "") + seconds + (seconds <=0 ? " sec" : " secs")); } } }
  20. Ah yes, here's the new code. Looking at it, doesn't the days also have to be added in the function countdown() at the bottom? function Timer(container, timeLeft) { // get hour, minute and second element using jQuery selector var daysContainer = $(container).find('.day'); var hoursContainer = $(container).find('.hour'); var minsContainer = $(container).find('.min'); var secsContainer = $(container).find('.sec'); // hold time left var currentTimeLeft = timeLeft; // 1 second = 1000 ms var secondsForTimer = 1000; // hold ID value return by setInterval() var timerInterval; // call setInteval() only when timeLeft is greater than 0 if (currentTimeLeft == 0) { return; } else { //Call setInterval()function and store ID value to timerInterval. timerInterval = setInterval(countdown, secondsForTimer); } //function being passed to setInterval() function countdown() { currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer); if (currentTimeLeft == 0) { //stop calling countdown function by calling clearInterval() clearInterval(timerInterval); return; } else { //calculate hours left var wholeSeconds = parseInt(currentTimeLeft / 1000,10); var wholeMinutes = parseInt(currentTimeLeft / 60000,10); var wholeHours = parseInt(wholeMinutes / 60,10); //calculate minutes left var minutes = parseInt(wholeMinutes % 60,10); //calculate seconds left var seconds = parseInt(wholeSeconds % 60,10); //prefix 0 to hour, min and second counter $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs")); $(minsContainer).text((minutes < 10 ? "0" : "") + minutes + (minutes <=0 ? " min" : " mins")); $(secsContainer).text((seconds < 10 ? "0" : "") + seconds + (seconds <=0 ? " sec" : " secs")); } } }
  21. I did that and the days stay at 00. As you can see, my "$timeLeft" variable == hours only. So those hours have to somehow be converted to days if they go past 24 hours. I found another counter that includes the days. It works perfectly, except it always adds extra "6 hours" on top of my time. Which is weird. Can't figure out why. This is the one. http://trulycode.com/bytes/easy-countdown-to-date-with-javascript-jquery/
  22. Here is the html/php code. <?php // db query here to get the expiry time from the database foreach($results as $k => $row) { $expiry_date = $row['expiry_date']; $timeLeft = (strtotime($expiry_date) - time()) * 1000; $counterName = "counter_$k"; ?> <div class="counter <?php echo $counterName; ?>"> <span class="hour">00</span> <span class="min">00</span> <span class="sec">00</span> </div> <script> // initiate new timer var timer = new Timer($('.<?php echo $counterName; ?>'), <?php echo $timeLeft; ?>); </script> <?php } ?>
  23. I have this js code that works great. Now the new option I would like to add is the "days". Right now it's only based on hours, mins, seconds. Can you show me how you would add the "days" option to it? function Timer(container, timeLeft) { // get hour, minute and second element using jQuery selector var hoursContainer = $(container).find('.hour'); var minsContainer = $(container).find('.min'); var secsContainer = $(container).find('.sec'); // hold time left var currentTimeLeft = timeLeft; // 1 second = 1000 ms var secondsForTimer = 1000; // hold ID value return by setInterval() var timerInterval; // call setInteval() only when timeLeft is greater than 0 if (currentTimeLeft == 0) { return; } else { //Call setInterval()function and store ID value to timerInterval. timerInterval = setInterval(countdown, secondsForTimer); } //function being passed to setInterval() function countdown() { currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer); if (currentTimeLeft == 0) { //stop calling countdown function by calling clearInterval() clearInterval(timerInterval); return; } else { //calculate hours left var wholeSeconds = parseInt(currentTimeLeft / 1000,10); var wholeMinutes = parseInt(currentTimeLeft / 60000,10); var wholeHours = parseInt(wholeMinutes / 60,10); //calculate minutes left var minutes = parseInt(wholeMinutes % 60,10); //calculate seconds left var seconds = parseInt(wholeSeconds % 60,10); //prefix 0 to hour, min and second counter $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs")); $(minsContainer).text((minutes < 10 ? "0" : "") + minutes + (minutes <=0 ? " min" : " mins")); $(secsContainer).text((seconds < 10 ? "0" : "") + seconds + (seconds <=0 ? " sec" : " secs")); } } } Thanks.
  24. I am retriving records from mysql database that has expiry time limit. The time in the database is saved in "minutes". So for one hour, it'll be "3600" minutes. That's all fine. Now what I am trying to do is create a countdown clock using Javascript/jquery and I have ran into a bit of a problem. 1. I am retriving multiple records from the database that all have a countdown timer. Currently, it's only taking the time value of the first record and using that for all the records. I would like to know how I can make it so that each record will have it's own countdown timer value? 2. Everytime I refresh a page, it will reset the timer. How can I fix this? Here's my code. <?php foreach($rows as $row) { $get_expiry_time = $row['expiry_time']; <div class="record"> <div class="timer"> </div> </div> } ?> <script> $(document).ready(function(){ var countDownTime = <?php echo $get_expiry_time; ?>; function countDownTimer() { var hours = parseInt( countDownTime / 3600 ) % 24; var minutes = parseInt( countDownTime / 60 ) % 60; var seconds = countDownTime % 60; var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); $('.timer').html(result); if(countDownTime == 0 ){ countDownTime = 60*60*60; } countDownTime = countDownTime - 1; setTimeout(function(){ countDownTimer() }, 1000); } countDownTimer(); }); </script>
×
×
  • 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.