CODEWITHSUNDEEP
jquery
user641595
user641595

Reputation: 61

jQuery problems in Firefox but work's fine in Chrome

I am trying to do a datepicker without using jQueryUI but i have this problem, my code work's fine in Chrome but not in Firefox and IE. Can someone give me an idea of how to make it work?This is my code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="ceva.css" />
    <script src="jquery-1.7.min.js" type="text/javascript"> </script>
        <script src="querycode.js" type="text/javascript"> </script>
</head>
<body>
    <div class="year">
        <div class="year" id="year"></div>
    </div>
    <div class="months">
        <div>
            <table>
                <td id="m1">1</td>
                <td id="m2">2</td>
                <td id="m3">3</td>
                <td id="m4">4</td>
                <td id="m5">5</td>
                <td id="m6">6</td>
                <td id="m7">7</td>
                <td id="m8">8</td>
                <td id="m9">9</td>
                <td id="m10">10</td>
                <td id="m11">11</td>
                <td id="m12">12</td>
            </table>
        </div>
    </div>

    <div class="daysl1">
        <div>
            <table id="trtd">
                <tr>
                <td id="d1"></td>
                <td id="d2"></td>
                <td id="d3"></td>
                <td id="d4"></td>
                <td id="d5"></td>
                <td id="d6"></td>
                <td id="d7"></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="daysl2">
        <div>
            <table id="trtd1">
                <td id="d8"></td>
                <td id="d9"></td>
                <td id="d10"></td>
                <td id="d11"></td>
                <td id="d12"></td>
                <td id="d13"></td>
                <td id="d14"></td>
            </table>
        </div>
    </div>
    <div class="daysl3">
        <div>
            <table id="trtd2">
                <td id="d15"></td>
                <td id="d16"></td>
                <td id="d17"></td>
                <td id="d18"></td>
                <td id="d19"></td>
                <td id="d20"></td>
                <td id="d21"></td>
            </table>
        </div>
    </div>
    <div class="daysl4">
        <div>
            <table id="trtd3">
                <td id="d22"></td>
                <td id="d23"></td>
                <td id="d24"></td>
                <td id="d25"></td>
                <td id="d26"></td>
                <td id="d27"></td>
                <td id="d28"></td>
            </table>
        </div>
    </div>
    <div class="daysl5">
        <div>
            <table id="trtd4">
                <td id="d29"></td>
                <td id="d30"></td>
                <td id="d31"></td>
                <td id="d32"></td>
                <td id="d33"></td>
                <td id="d34"></td>
                <td id="d35"></td>
            </table>
        </div>
    </div>
    <input id="ly" type="button" value="-Year" ></input>
    <input id="ny" type="button" value="+Year" ></input>
    <input id="lm" type="button" value="-Month" ></input>
    <input id="nm" type="button" value="+Month" ></input>
</body>
</html>

The jQuery

$(function(){
    var selected=parseInt(new Date().getMonth()+1);
    var ml=0;
    var ysel=0;
    var date1=parseInt(daysInMonth(selected,ysel));
    function salut(){
        var date=parseInt(new Date().getFullYear());
       $("#year").text(date);

        //selected=date;
        ysel=date;
        date1=parseInt(daysInMonth(selected,ysel));
    }
    function lastYear(){
        var date=$("#year").text()-1;
        ysel=date;
       $("#year").text(date);
       date1=parseInt(daysInMonth(selected,ysel));

    }
    function nextYear(){
        var date=parseInt($("#year").text());
        date=date+1;
        ysel=date;
       $("#year").text(date);
       date1=parseInt(daysInMonth(selected,ysel));

    }
    function clear(m){
        var date=parseInt($("#m"+m+"").text());
       var ceva=$("#m"+date+"");
       ceva.css('background-color','#5B90F6');

    }
    function pastMonth(){
        var cm=selected;
        clear(selected);
        if(cm==1)
            cm=13;
        var pm=cm-1;
        var m=$("#m"+pm+"");
                m.css('background-color','#1464F4');
        selected=pm;
        ysel=ysel;
        date1=parseInt(daysInMonth(selected,ysel));
    }
    function nextMonth(){
        var cm=selected;
        clear(selected);
        if(cm==12)
            cm=0;
        var nm=cm+1;
        var m=$("#m"+nm+"");
                m.css('background-color','#1464F4');

        selected=nm;
        ysel=ysel;
        date1=parseInt(daysInMonth(selected,ysel)); 

    }
    function showMonth(){
        var cm=selected;
        var m=$("#m"+cm+"");
                m.css('background-color','#1464F4');
    }
    function daysInMonth(month, year) {
        return new Date(year, month, 0).getDate();
    }
    function showDay(){
        var adate=new Date('"'+selected+'/01/'+ysel+'"');
        var sd=parseInt(adate.getDay());
        var cm=parseInt(new Date().getDate());
        cm=cm+sd;
        var m=$("#d"+cm+"");
                m.css('background-color','#1464F4');
    }

    function clearData(){
            $('.para').remove();

    }

    function addData(){
        var adate=new Date('"'+selected+'/01/'+ysel+'"');
        var sd=parseInt(adate.getDay()+1);
        var i=1;
        var tex='';
        while(i<=date1)
        {
            tex="<p class='para' id='z"+i+"'>"+i+"</p>";
            $("#d"+sd+"").text(i);
            sd++;
            i++;
        }


    }
    function forButtons(){
        var bly=$("#ly");
        bly.click(function(){
            lastYear();
             //$("#day").text(date1);
             clearData();
             addData();
             showDayOne();
        });
        var bny=$("#ny");
        bny.click(function(){
            nextYear();
             //$("#day").text(date1);
             clearData();
             addData();
             showDayOne();
        });
        var blm=$("#lm");
        blm.click(function(){
            pastMonth();
             //$("#day").text(date1);
             clearData();
             addData();
             showDayOne();
        });
        var bnm=$("#nm");
        bnm.click(function(){
            nextMonth();
             //$("#day").text(date1);
             clearData()
             addData();
             showDayOne();
        });


    }

    $(document).ready(function(){
      salut();
      showMonth();
      addData();
      //addData2();
      showDay();
      forButtons();
    });
 });

and css

.year #year
{
    background-color:#5B90F6;
    width:60px;
    height:20px;
    border:1px solid;
    border-color:#B0B0B0;
    text-align:center;
}
.months div 
{
    border:0px solid  #B0B0B0;
    background-color:#8FD8D8;
    width:183px;
    height:25px;
    text-align:center;
    padding:1.5px;
}
.months td
{
    background-color: #5B90F6;
    font-size:0.5em;
    width:11px;
    height:10px;
    text-align:center;
}
.daysl1 div 
{
    background-color:#8FD8D8;
    width:182px;
    height:25px;
    text-align:center;
    padding:1.5px;
}
.daysname div 
{
    border-top:2px solid #E6E8FA;
    background-color:#8FD8D8;
    width:182px;
    height:25px;
    text-align:center;
    padding:1.5px;
}

.daysl1 td
{
    font-size:0.6em;
    width:21px;
    height:10px;
    text-align:center;
}
.daysname th
{
    font-size:0.7em;
    width:21px;
    height:10px;
    text-align:center;
}
.daysl1e
{
    font-size:0.6em;
    width:21px;
    height:10px;
    text-align:center;
}
.daysl2 div 
{
    background-color:#8FD8D8;
    width:182px;
    height:25px;
    text-align:center;
    padding:1.5px;
}
.daysl2 td
{
    font-size:0.6em;
    width:21px;
    height:10px;
    text-align:center;
}
.daysl3 div 
{
    background-color:#8FD8D8;
    width:182px;
    height:25px;
    text-align:center;
    padding:1.5px;
}
.daysl3 td
{
    font-size:0.6em;
    width:21px;
    height:10px;
    text-align:center;
}
.daysl4 div 
{
    background-color:#8FD8D8;
    width:182px;
    height:25px;
    text-align:center;
    padding:1.5px;
}
.daysl4 td
{
    font-size:0.6em;
    width:21px;
    height:10px;
    text-align:center;

}

.daysl5 div 
{
    background-color:#8FD8D8;
    width:182px;
    height:25px;
    text-align:center;
    padding:1.5px;
}
.daysl5 td
{
    font-size:0.6em;
    width:21px;
    height:10px;
    text-align:center;
}

* html .daysl1 table td { float: left; height: 1%; }
* html .daysl1 table td { height: 1%; }

Upvotes: 0

Views: 1488

Answers (1)

Stefan
Stefan

Reputation: 5672

You should not use $(document).ready(function(){ within $(function(){ as they tend to do the same thing.

Also, what errors are you getting? Check the console (using Firebug in Firefox) and what happens/does not happen as you expect it to?

UPDATE

Your code isn´t much of a beauty but I think what you´re trying to do is to add a p-tag inside each day element, am I right?

I created a jsFiddle for you and you can use jQuerys append() function to create your element like this:

        $("#d" + sd).append(
            $('<p>')
            .attr('id', ('z' + i))
            .addClass('para')
            .text(i)
        );

Is everything working now? :)

Upvotes: 1

Related Questions