CODEWITHSUNDEEP
javascriptjquery
Harshil Shah
Harshil Shah

Reputation: 203

Error while converting javascript code to jquery code

i have following code where openNav function is called.

<div id="main">
        <h2>Sidenav Push Example</h2>
        <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
        <span id="sp1" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
    </div>

i have Javascript code which works fine 

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

i tried to convert it in jquery but it shows error openNav is not defined.

<script type="text/javascript">
 $('#sp1').click(function openNav() {
        $('#mySidenav').style.width = "250px";
        $('#main').style.marginLeft = "250px";
    })
</script>

It compiles and run properly but when i click on open (onclick event) it throws an exception that openNav is undefined.

Please explain what is the problem ? thanks

Upvotes: 0

Views: 256

Answers (6)

Wajih
Wajih

Reputation: 4383

Try removing opennav:

<script type="text/javascript">
    $('#sp1').click(function() {
        $('#mySidenav').css('width', "250px");
        $('#main').css('marginLeft', "250px");
    })
</script>

Upvotes: 0

brk
brk

Reputation: 50291

If you use $('#sp1').click(function openNav() { ..}) you may see an error openNav is not defined

function openNav() {
         $('#mySidenav').css( "width", "250px" );
    $('#main').css( "margin-Left", "250px");
    }

Check this jsFiddle

Upvotes: 0

JAIGANESH
JAIGANESH

Reputation: 87

    <html>
            <head>
            <title>Sample Page</title>
            </head>

        <body>
             <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <div id="main">
                <h2>Sidenav Push Example</h2>
                <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
                <span id="sp1" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
            </div>
            <script type="text/javascript">
                function openNav() {
                 $('#mySidenav').css( "width", "250px" );
                 $('#main').css( "margin-Left", "250px");
               }
        </script>
        </body>

        </html>

Upvotes: 1

Dhara Parmar
Dhara Parmar

Reputation: 8101

If you want to use jquery, remove on click function from html:

<div id="main">
        <h2>Sidenav Push Example</h2>
        <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
        <span id="sp1" style="font-size:30px;cursor:pointer">☰ open</span>
    </div>

Jquery:

<script type="text/javascript">
 $('#sp1').click(function() {
        $('#mySidenav').css('width','250px'); 
        $('#main').css('margin-left','250px');
 });
</script>

Upvotes: 0

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

Change 

<script type="text/javascript">
 $('#sp1').click(function openNav() {
        $('#mySidenav').style.width = "250px";
        $('#main').style.marginLeft = "250px";
    })
</script>

To:

<script type="text/javascript">
 $('#sp1').click(function(){
        $('#mySidenav').css({"width":"250px"});
        $('#main').css({"magin-left":"250px"});
    })
</script>

And remove the onclick attribute from your html its obsolete in this approach

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

Pure jQuery - You need to use the css method

    $('#mySidenav').css( "width", "250px" );
    $('#main').css( "margin-Left", "250px");

Your approach - Or simply access the DOM element from jquery object using [0] index

   $('#mySidenav')[0].style.width = "250px";
    $('#main')[0].style.marginLeft = "250px";

Upvotes: 2

Related Questions