Hello  i hope all is well


i wonder could i get some help with this progress bar. i have it working . it loads just fine if all required fields are correctly selected (except when i select free or ask seller but that is for another time)
the problem i need help with today is when location required field is not selected the progress bar will start counting even though the upload hasn't started yet .

for some reason the script isn't recognising "#countryId, #regionId, #cityId, #address" and with the progress bar indicating progress when it was a false start, it would cause abit of confusion with the end user.

do you have any pointers to help me out it doesn't seem like the script is able to count the location fields

<?php
<script>
     function move() {
          var selected = $("#catId").val();
          var selected = $("#countryId").val();
          var selected = $("#regionId").val();
          var selected = $("#cityId").val();
          var selected = $("#address").val();
          var selected = $("#price").val();
        if(selected>0){
              var elem = document.getElementById("myBar");
              var width = 10;
              var id = setInterval(frame, 10);
          function frame() {
              if (width >= 100) {
              clearInterval(id);
          } else {
              width++;
              elem.style.width = width + '%';
              document.getElementById("label").innerHTML = width * 1 + '%';
        }
    }
  }
}
</script>
?>

i have been searching through the forums and i came across an old post from yourself concerning something similar.
http://forums.osclass.org/tips-and-tricks/(tip)-adding-the-'wait'-cursor-for-uploads-all-themes/msg89271/#msg89271

i have been trying to add/replace this in but even with the edits it still not recognised
<?php
<script>
      if($("catId").val() <> '' and $("#price").val() <> '' and  $("#countryId").val() <> '' and $("#regionId").val() <> '' and $("#cityId").val() <> '' and $("#address").val() <> '' ) {}
</script>
?>

Thanks in Advance
Chris

@BabyDunk

Doing this is not very wise:
          var selected = $("#catId").val();
          var selected = $("#countryId").val();
          var selected = $("#regionId").val();
          var selected = $("#cityId").val();
          var selected = $("#address").val();
          var selected = $("#price").val();

It is same like this:
          var selected = $("#price").val();

You should also check if input/select exists. I.e. if it is disabled, it may be considered as not exisitng.

You are mixing javascript and jQuery in code, you should choose which language you are going to do. However from code is not clear what are you trying to achieve.

Hey Frosticek

thanks for pointing out my misunderstanding. i had a time of it trying to find a js way of holding back the load of progressbar until all required elements where selected/inputted. i decided to have a look for a jquery  progress bar and came across this little beauty http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/.

the only problem i can see with this, is when "Ask the Seller"  is selected the progress bar does not load. do you have any ideas?


Heres is the code.

this code is set for required category, price, country, region, city, address. if you dont required these things on you publish and edit pages then remove or even add to what suits you

 if($("#catId").val() && $("#price").val() &&  $("#countryId").val() && $("#regionId").val() && $("#cityId").val() && $("#address").val() )



first find this on item-edit.php
<button type="submit" id="blue"><?php _e('Save changes', 'patricia'); ?></button>

Replace with this
      <button type="submit" onclick="progress(100, $('#progressBar'))" id="blue"><?php _e('Save changes', 'patricia'); ?></button>
          <div id="progressBar"><div></div></div>

add this the bottom of item-edit.php before <?php osc_current_web_theme_path('footer.php') ; ?>
 increase/decrease the number 2000 to change load time for progress bar

    <script>
     function progress(percent, $element) {
       if($("#catId").val() && $("#price").val() &&  $("#countryId").val() && $("#regionId").val() && $("#cityId").val() && $("#address").val() ) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 2000).html(percent + "% ");
       }
      }
    </script>


now open item-post.php and find this
<button type="submit" id="blue"><?php _e('Publish item', 'patricia'); ?></button>

 replace with this
      <button type="submit" onclick="progress(100, $('#progressBar'));" id="blue"><?php _e('Publish item', 'patricia'); ?></button>
          <div id="progressBar"><div></div></div>

add this to the bottom of item-post.php just before  <?php osc_current_web_theme_path('footer.php') ; ?>
 increase/decrease the number 2000 to change load time for progress bar

    <script>
     function progress(percent, $element) {
       if($("#catId").val() && $("#price").val() &&  $("#countryId").val() && $("#regionId").val() && $("#cityId").val() && $("#address").val() ) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 2000).html(percent + "% ");
       }
      }
    </script>


finally add the css to you style
/* ITEM ADD/EDIT PROGRESS LOADING */
#progressBar {display: inline-block;width: 40%;max-width:250px;margin:30px 0 0 10px;height: 30px;border: 1px solid #bbb;background-color: #efefef;}
#progressBar div {height: 100%;color: #4CAF50;text-align: center;line-height: 30px;width: 0;background-color: #4CAF50;}

one last thing. it looks like the percentage is supposed to count as the bar loads but i can't get it to display.  so i have coloured the percent number the same as the bar. its not really need as long as the user can see a progress when the bar loads.

Thanks Frosticek yet again

@BabyDunk
Do you mean "Contact seller"?

i mis-worded that bit. in patricia it is "Check with seller"