search

thedigicraft / Atom.CMS

Atom.CMS
56 stars 50 forks source link

Video 17 js.php hide and toggle did not work for me #59

Open swordfighter79 opened 10 years ago

swordfighter79 commented 10 years ago

in my js.php file I have.

$(document).ready(function() {
   $("#console-debug").hide();
       $("#btn-debug").click(function() {
       $("#console-debug").toggle();
   });     
});
thedigicraft commented 10 years ago

Can I see the html too please :-)

swordfighter79 commented 10 years ago 
<?php include('config/setup.php'); ?>

<!DOCTYPE html>
<html>

<head>

    <title><?php echo $page['title'].' | '.$site_title; ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?php include('config/css.php'); ?>

    <?php include('config/js.php'); ?>

</head>

<body>

    <div id="wrap">

        <?php include(D_TEMPLATE.'/navigation.php'); // Main Navigation ?>

        <div class="container">

            <h1><?php echo $page['header']; ?></h1>

            <p><?php echo $page['body_formatted']; ?>

            <?php if(isset($_GET['debug']) == 1) {?>

            <pre>
            <?php print_r($page);  ?>
            </pre>  

            <?php } ?>  

        </div><!-- END CONTAINER -->    

    </div><!-- END WRAP --> 

    <?php include(D_TEMPLATE.'/footer.php'); ?> 

        <div id="console-debug">
            Test debug window                           
        </div> 
</body>
</html>
thedigicraft commented 10 years ago

Thanks. Can I also see the code where the button is please.

swordfighter79 commented 10 years ago

Navigation.php

<nav class="navbar navbar-default" role="navigation">

    <button id="btn-debug" class="btn btn-default">Debug</button>
    <div class="container">     

        <ul class="nav navbar-nav">

            <?php nav_main($dbc, $pageid); ?>

            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>

        </ul>

    </div><! -- END CONTAINER -->       

</nav><! -- END NAV -->

js,php

<?php
// Javascript:
?>

<!-- JQuery -->
<script scr="//code.jquery.com/jquery-1.10.2.min.js"></script>  

<!-- JQuery UI -->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script>

    $(document).ready(function() { 

        $("#console-debug").hide();

    });
</script>

data.php

<?php

function data_page($dbc, $id) {

    $q = "SELECT * FROM pages WHERE id = $id";
    $r = mysqli_query($dbc, $q);

    $data = mysqli_fetch_assoc($r);

    $data['body_nohtml'] = strip_tags($data['body']);

    if($data['body'] == $data['body_nohtml']) {

        $data['body_formatted'] = '<p>' .$data['body'].'</p>';

    } else {

        $data['body_formatted'] = $data['body'];

    }

    return $data;
}

?>

footer.php

<footer id="footer">

    <div class="container">

        <p>This is my Footer</p>

    </div><!-- END CONTAINER -->

</footer><!-- END FOOTER -->

<?php

template.php

function nav_main($dbc, $pageid) {

    $q = "SELECT * FROM pages";
    $r = mysqli_query($dbc, $q);

    while($nav = mysqli_fetch_assoc($r)) { ?>   

        <li<?php if($pageid == ['id']) { echo ' class="active"'; } ?>><a href="?page=<?php echo $nav['id']; ?>"><?php echo $nav['label']; ?></a></li>   

    <?php }     
}
?>

<?php

css.php

// CSS:
?>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- JQuery CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smothness/jquery-ui.css">

<!-- FontAwesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<style>

        /* -------------  Sticky footer styles  -------------- */
        html,
        body {
          height: 100%;
          /* html and body elements cannot have any padding or margins, */
        }

        /* wrapper for page cannot have any padding or margin. */
        #wrap {
          min-height: 100%;
          height: auto;
          Margin: 0 auto -60px;
          padding: 0 0 60px;
        }

        /* set the fixed height of the footer */
        #footer {
          height: 60px;
          background-color: #f5f5f5;
         }

         #btn-debug {
            position: absolute;         

         }

       #console-debug: {
         position: absoluts;
         top: 50px;
         left: 0px;
         width:30%;

        }

</style>

thanks

I went through the videos again I can't find it.

thedigicraft commented 10 years ago

oh one thing... are you using your local server or a remote server? I notice that with local servers you cannot leave the http: out of your script links.

<!-- JQuery -->
<script scr="//code.jquery.com/jquery-1.10.2.min.js"></script>  

<!-- JQuery UI -->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

needs to be:

<!-- JQuery -->
<script scr="http://code.jquery.com/jquery-1.10.2.min.js"></script>  

<!-- JQuery UI -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

This could be the issue.

swordfighter79 commented 10 years ago

I'm on local server add the http: did not help it's like it does not see the Javascript page I'm going on to make a second copy and go on with the tutorial. go back and play around with it My be even start over from the begging my even try it with Dreamweaver. mite be a bug in Aptana studio 3. I'm using vista 64 bit going to upgrade this week to windows 7 see if that helps. need window 7 for the new adobe anyway.

thanks a lot your videos have helped a lot. your great at what you do.

Chriswilldo commented 10 years ago

First did you script your $(document).ready tag in js? Second, now this may or may not work for you, but try using jquery 1.11.1. and bootstrap 3.2.0 . As for your css, did you do <?php ?>, or just ?> ? Same with your template, except I think you put your <?php at the bottom instead on template.php.. And you don't need <?php in your footer.

swordfighter79 commented 10 years ago

I want to thank you for all your help.

I'm starting over. this is what I have started with.

they changed nstdna to maxcdn 3.0.03 to 3.20

the same as above

could not find on web to copy so I copied it like you have it.

change netdns to maxcdn 4.0.3 to 4.1.0

<script src="//code.jquery.com/jquery-2.1.0.min.js"

could not find on web to copy so I copied it like you have it.

changed netdna to maccdn 3.0.3 to 3.2.0

should I change keep the maxcdn or change them to netdns

I'm going to keep it the new way till I hear from you ( not hard to go back and change it) but I'm goi to change jquery to 1.11.1 and see how that works.

in <script src="//code.jquery.com/jquery-2.1.0.min.js"
I see there's a new jquery 2.1.1 I'm going to change that to the 2.1.1 if you want me to change it back let me know.

thanks

Johnkariungi commented 10 years ago

Hello thedigicraft,

Really appreciate the wonderful web design videos. My outcome is not the same. The debug button won't work and debug text won't toggle, it's permanently on the page. Here is my code, what I'm I missing? Thanks, John.

JS.php

<?php

// JavaScript File:

?>

<script src"http://code.jquery.com/jquery-2.1.0.min.js">

CSS.php

<?php

// CSS File:

?>

<link rel="stylesheet href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<style> 
                /* Sticky footer styles
    -------------------------------------------------- */
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
    }
    .footer {
     /**/ position: absolute;
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 60px;
      background-color: #f5f5f5;
    }
    #btn-debug {
      position: absolute;   
    }
    #console-debug {
        position: absolute;
        top: 50px;
        left: 0px;
        width: 30%;
        height: 700px;
    }
    #console-debug pre {
        height: 700px;
        overflow-y: scroll;
    }
    #
</style>

index.php

<?php include('config/setup.php'); ?>

<!DOCTYPE html>

<?php echo $page['title'].' | '.$site_title; ?> ``` ```
```
```
swordfighter79 commented 10 years ago

I just got done with video 17 and it all works. I'm using all the new settings

thanks a lot for all your help.

thedigicraft commented 10 years ago

you bet man!