sabatiello
Posts: 9
Joined: Wed Jan 14, 2015 8:28 am

Problem Jquery

Tue Sep 08, 2015 11:26 am

I created a index.html as this http://jsfiddle.net/romimmo/wmroLbwe/ with 2 swich on/off. On http://jsfiddle.net/ the switches works well but on my server i can't view a pop up "checked or unchecked" Can you help me??
On my server I have:
index.html

Code: Select all

<html>
	<head>
		<title>MImmo Prova</title>	
		<link rel="stylesheet" href="/style.css" type="text/css">
		<script src='http://code.jquery.com/jquery-1.10.2.js'></script>
		<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>    
		<script type="text/javascript" src="/script.js"></script>    

	</head>
	<body>
		<div class="onoffswitch">

<input id="myonoffswitch" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"/>

<label class="onoffswitch-label" for="myonoffswitch">

<div class="onoffswitch-inner"></div>

<div class="onoffswitch-switch"></div>

</label>

</div>

<br></br>

<div class="onoffswitch1">

<input id="myonoffswitch1" type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox"/>

<label class="onoffswitch-label" for="myonoffswitch1">

<div class="onoffswitch-inner"></div>

<div class="onoffswitch-switch"></div>


</label>
	</body>
</html>
style.css

Code: Select all

body

{

    background-color: #666;

}

.onoffswitch {

      position: relative;

      width: 82px;

      -webkit-user-select:none;

      -moz-user-select:none;

      -ms-user-select: none;

    }

    .onoffswitch-checkbox {

      display: none;

    }

    .onoffswitch-label {

      display: block; overflow: hidden; cursor: pointer;

      border: 2px solid #FFFFFF; border-radius: 5px;

    }

    .onoffswitch-inner {

      width: 200%;

      margin-left: -100%;

      -moz-transition: margin 0.3s ease-in 0s;

      -webkit-transition: margin 0.3s ease-in 0s;

      -o-transition: margin 0.3s ease-in 0s;

      transition: margin 0.3s ease-in 0s;

    }

    .onoffswitch-inner:before, .onoffswitch-inner:after {

    float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;

    font-size: 18px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;

    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    }

    .onoffswitch-inner:before {

      content: "on";

      padding-left: 14px;

      background-color: #2FFF3D;

      color: #FFFFFF;

    }

    .onoffswitch-inner:after {

      content: "off";

      padding-right: 14px;

      background-color: #ADADAD;

      color: #FFFFFF;

      text-align: right;

    }

    .onoffswitch-switch {

      width: 28px; margin: 0px;

      background: #FFFFFF;

      border: 2px solid #FFFFFF; border-radius: 5px;

      position: absolute; top: 0; bottom: 0; right: 50px;

      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;

      -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;

      background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

      margin-left: 0;

    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {

      right: 0px;

    }



body

{

    background-color: #666;

}

.onoffswitch1 {

      position: relative;

      width: 82px;

      -webkit-user-select:none;

      -moz-user-select:none;

      -ms-user-select: none;

    }

    .onoffswitch-checkbox {

      display: none;

    }

    .onoffswitch-label {

      display: block; overflow: hidden; cursor: pointer;

      border: 2px solid #FFFFFF; border-radius: 5px;

    }

    .onoffswitch-inner {

      width: 200%;

      margin-left: -100%;

      -moz-transition: margin 0.3s ease-in 0s;

      -webkit-transition: margin 0.3s ease-in 0s;

      -o-transition: margin 0.3s ease-in 0s;

      transition: margin 0.3s ease-in 0s;

    }

    .onoffswitch-inner:before, .onoffswitch-inner:after {

    float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;

    font-size: 18px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;

    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    }

    .onoffswitch-inner:before {

      content: "on";

      padding-left: 14px;

      background-color: #2FFF3D;

      color: #FFFFFF;

    }

    .onoffswitch-inner:after {

      content: "off";

      padding-right: 14px;

      background-color: #ADADAD;

      color: #FFFFFF;

      text-align: right;

    }

    .onoffswitch-switch {

      width: 28px; margin: 0px;

      background: #FFFFFF;

      border: 2px solid #FFFFFF; border-radius: 5px;

      position: absolute; top: 0; bottom: 0; right: 50px;

      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;

      -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;

      background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

      background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);

    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

      margin-left: 0;

    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {

      right: 0px;

    }
script.js

Code: Select all

$("#myonoffswitch").click(function(){
            if($("#myonoffswitch").is(":checked"))
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });

 $("#myonoffswitch1").click(function(){
            if($("#myonoffswitch1").is(":checked"))
            {
                alert('checked 1');
            }
            else
            {
                 alert('unchecked 1');
            }
        });

User avatar
xranby
Posts: 540
Joined: Sat Mar 03, 2012 10:02 pm
Contact: Website

Re: Problem Jquery

Tue Sep 08, 2015 12:13 pm

Try change the href to the style.css and src to the js files and remove the initial /
that would make the URL's relative and the browser will look for the files next to the index.html file.
like this:

Code: Select all

      <link rel="stylesheet" href="style.css" type="text/css">
      <script src='http://code.jquery.com/jquery-1.10.2.js'></script>
      <script type="text/javascript" src="jquery-1.10.2.min.js"></script>   
      <script type="text/javascript" src="script.js"></script>    
You need to show use the URL to your server if you want help debug this further.
Xerxes Rånby @xranby I once had two, then I gave one away. Now both are in use every day!
twitter.com/xranby

sabatiello
Posts: 9
Joined: Wed Jan 14, 2015 8:28 am

Re: Problem Jquery

Tue Sep 08, 2015 1:10 pm

I removed the initial / ma it does't work well. This is my server test url http://test1979.no-ip.info:8000/

Massi
Posts: 1691
Joined: Fri May 02, 2014 1:52 pm
Location: Italy

Re: Problem Jquery

Tue Sep 08, 2015 1:22 pm

shouldn't it be like this?

Code: Select all

$(document).ready(function(){
$("#myonoffswitch").click(function(){
            if($("#myonoffswitch").is(":checked"))
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });

 $("#myonoffswitch1").click(function(){
            if($("#myonoffswitch1").is(":checked"))
            {
                alert('checked 1');
            }
            else
            {
                 alert('unchecked 1');
            }
        });
});

sabatiello
Posts: 9
Joined: Wed Jan 14, 2015 8:28 am

Re: Problem Jquery

Tue Sep 08, 2015 1:34 pm

Thank you guys, it works well now ;)

Massi
Posts: 1691
Joined: Fri May 02, 2014 1:52 pm
Location: Italy

Re: Problem Jquery

Tue Sep 08, 2015 1:35 pm

grande Mimmo :)

Return to “Java”