Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Jquery ui slider step 0.5
nikestylex7
post
Post #1





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----

Tak jak w temacie mam problem z sliderem aby ustawić step na 0.5 na jsfiddle działa a u mnie na stronie jest problem mianowicie po wyborze select np 2.5 slider nie ustawia sie i consola daje błąd : Syntax error, unrecognized expression: option[value=2.5]
https://jsfiddle.net/5o5dtfwj/2/

[HTML] pobierz, plaintext 
  1. <select class="needSlider" id="minbeds" name="spalaniemiasto" class="form-text" style="padding-right:0;">
  2.                                     <option value="1">1</option>
  3.                                 <option value="1.5">1.5</option>
  4.  
  5.                                 <option value="2">2</option>
  6.  
  7.                                 <option value="2.5">2.5</option>
  8.  
  9.                                 <option value="3">3</option>
  10.  
  11.                                 <option value="3.5">3.5</option>
  12.  
  13.                                 <option value="4">4</option>
  14.  
  15.                                 <option value="4.5">4.5</option>
  16.  
  17.                                 <option value="5">5</option>
  18.  
  19.                                 <option value="5.5">5.5</option>
  20.  
  21.                                 <option value="6">6</option>
  22.  
  23.                                 <option value="6.5">6.5</option>
  24.  
  25.                                 <option value="7">7</option>
  26.  
  27.                                 <option value="7.5">7.5</option>
  28.  
  29.                                 <option value="8">8</option>
  30.  
  31.                                 <option value="8.5">8.5</option>
  32.  
  33.                                 <option value="9">9</option>
  34.  
  35.                                 <option value="9.5">9.5</option>
  36.  
  37.                                 <option value="10">10</option>
  38. </select>
[HTML] pobierz, plaintext 



[JAVASCRIPT] pobierz, plaintext 
  1. $(".needSlider").each(function() {
  2.        var select = $(this);
  3.         var slider = $("<div id='slider'></div>").insertAfter(select).slider({
  4.           min: 1,
  5.           max: 19,
  6.           step:0.5,
  7.           range: "min",
  8.           value: select[0].selectedIndex + 1,
  9.           slide: function( event, ui ) {
  10.             select[0].selectedIndex = ui.value - 1;
  11.           }
  12.         });
  13.         select.change(function() {
  14.           slider.slider("value", this.selectedIndex + 1);
  15.        });
  16.     });
[JAVASCRIPT] pobierz, plaintext


Ten post edytował nikestylex7 18.12.2015, 17:39:01
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
patwoj98
post
Post #2





Grupa: Zarejestrowani
Postów: 218
Pomógł: 16
Dołączył: 6.06.2014
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Skoro problem leży po stronie Twojej strony to podaj mi adres, żebyśmy mogli poanalizować na kodzie, który nie działa.
Go to the top of the page
+Quote Post
nikestylex7
post
Post #3





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----

ale chodzi o to że na stronie jest to samo tylko select z pętli jest aby nie zawalać strony id class wszystko to samo

[PHP] pobierz, plaintext 
  1. <select class="needSlider" id="minbeds1" name="fun" class="form-text" style="padding-right:0;" >
  2. <?php for ($i = 1; $i <= 50; $i+=0.5): ?>   
  3. <option value="<?php echo $i; ?>"<?php if($data['dane']['fun'] == $i){ echo' selected'; }?>><?php echo $i; ?></option>
  4. <?php endfor; ?>												
  5. </select>
  6. <div id="slider"></div>
[PHP] pobierz, plaintext


Ten post edytował nikestylex7 18.12.2015, 18:23:28
Go to the top of the page
+Quote Post
koodo218
post
Post #4





Grupa: Zarejestrowani
Postów: 114
Pomógł: 25
Dołączył: 22.11.2015

Ostrzeżenie: (0%)
-----

U mnie na serwerze działa poprawnie. Jeżeli kod na dole nie działa, podaj adres strony do analizy.

Kod
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <title>Index</title>
</head>
<body>
<select class="needSlider1" id="minbeds1" name="fun" class="form-text" style="padding-right:0;" >
<?php for ($i = 1; $i <= 50; $i+=0.5): ?>  
<option value="<?php echo $i; ?>"<?php if($data['dane']['fun'] == $i){ echo' selected'; }?>><?php echo $i; ?></option>
<?php endfor; ?>                                                
</select>
<div id="slider1"></div>
<script>
  $(".needSlider1").each(function() {
       var select = $(this);
        var slider = $("<div id='slider'></div>").insertAfter(select).slider({
          min: 1,
          max: 19,
          step:0.5,
          range: "min",
          value: select[0].selectedIndex + 1,
          slide: function( event, ui ) {
            select[0].selectedIndex = ui.value - 1;
          }
        });
        select.change(function() {
          slider.slider("value", this.selectedIndex + 1);
       });
    });
</script>
</body>
</html>


--------------------
Słaba znajomość (ale się staram): HTML5, CSS3, JavaScript, SQL, Access
Go to the top of the page
+Quote Post
nikestylex7
post
Post #5





Grupa: Zarejestrowani
Postów: 386
Pomógł: 7
Dołączył: 22.04.2010
Skąd: Ziemia

Ostrzeżenie: (20%)
X----

Rzeczywiście czyli to wina znajduje się na stronie. Zaraz sprawdzę co jest grane dodam że skrypty mam dodane w footer przed zamknięciem body

Może problem jest po stronie dodanych js dodam że próbowałem już wszystkiego i dupa z tego wyszła.

header:
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="<?php echo LANGUAGE_CODE; ?>">
  3. <head> 
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta name="description" content="">
  8.     <title><?php echo $data['title'].' - '.SITETITLE; ?></title>
  9.     <link rel="icon" href="/app/templates/default/ico/favicon.png">
  10.     <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
  11.     <?php
  12. 		helpers\assets::css(array(
  13. 			'//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css',
  14.                         '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
  15.                         helpers\url::template_path() . 'css/bootstrap-select.min.css',
  16.                         helpers\url::template_path() . 'css/animate.min.css',
  17.                         helpers\url::template_path() . 'css/owl.carousel.css',
  18.                         helpers\url::template_path() . 'css/jquery.jcrop.min.css',
  19.                         helpers\url::template_path() . 'css/datepicker.css',
  20.                         helpers\url::template_path() . 'css/modal.css',
  21.                         helpers\url::template_path() . 'css/slider.css',
  22.                         helpers\url::template_path() . 'css/theme.css',
  23.                         helpers\url::template_path() . 'css/style.css',
  24.                         helpers\url::template_path() . 'css/star-rating.css',
  25.                         helpers\url::template_path() . 'css/jquery.tagit.css',
  26. 		));
  27.  
  28.  
  29.                 helpers\assets::js(array(
  30.                           helpers\url::template_path() . 'js/modernizr.custom.js',
  31.                         '//code.jquery.com/jquery-1.11.2.min.js',
  32.  
  33.  
  34. 		));
  35.  
  36.  
  37.                 ?>
  38.  
  39. </head>
[PHP] pobierz, plaintext


footer:

[PHP] pobierz, plaintext 
  1.     <?php 
  2.                 helpers\assets::js(array(
  3.                         '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js',
  4.                         helpers\url::template_path() . 'js/bootstrap-select.min.js',
  5.                         helpers\url::template_path() . 'js/bootstrap-datepicker.js',
  6.                         helpers\url::template_path() . 'js/owl.carousel.min.js',
  7.                         helpers\url::template_path() . 'js/modalEffects.js',
  8.                         helpers\url::template_path() . 'js/classie.js',
  9.                         helpers\url::template_path() . 'js/jquery.ba-cond.min.js',
  10.                         helpers\url::template_path() . 'js/jquery.slitslider.js',
  11.                         helpers\url::template_path() . 'js/jquery.jcrop.min.js',
  12.                         helpers\url::template_path() . 'js/uploadavatar.js',
  13.                         helpers\url::template_path() . 'js/bselect.js',
  14.                         helpers\url::template_path() . 'js/custom.js',
  15.                         helpers\url::template_path() . 'js/star-rating.js',
  16.  
  17.  
  18. 		))
  19. ?>  
  20. 		<script src="/app/templates/default/js/slider.js"></script>
[PHP] pobierz, plaintext


Error :

Uncaught Error: Syntax error, unrecognized expression: option[value=1.5] jquery-1.11.2.min.js:2

Zauważmy że przykład kolegi wyżej działa na moim serwerze lecz nie jest dodany do strony podejrzewam że mam problem z skryptami js coś nie obsługuje danej funkcji bądź jest konflikt lecz powiem Wam szczerze że zmieniałem już w head i footerze i nic to nie dało nie wiem co może być jakieś pomysły ?
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 05:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn