Jump to content

Javascript in loop

webhoes

By webhoes,
in API & Templates

 Share

Recommended Posts

webhoes Sr. Member

webhoes

Posted
Posted

Hello, I am just started playing around with processwire and it looks very nice. I am not a real developer (hopefully start this education next year).

I am working on a template where I took some javascript from aother template. For the front page I have created a repeating field blok wich holds a text blok, a background color and a waves color and waves checkbox (0/1). This all is working. But when the waves checkbox is unchecked I want to add to the div display:none. This part is not working as it is part of the for each for the block (I think). I am a bit stuck, can anyboy give me a hint?

testpage is pw.webhoes.nl

This is the for each loop 

<?php
foreach($page->extra_body as $extra_bodies) { ?>
    <div class="container-fullwidth" style="background-color:<?php echo "{$extra_bodies->extra_bg_color}"; ?>">

        <div class="container">
            <section>
                <div class="row">

                    <div class="col-md-12 body-front wow fadeInUp animated">

                        <?php echo "<p>{$extra_bodies->extra_body_text}</p>"; ?>
                        <?php echo "<p>{$extra_bodies->extra_waves}</p>"; ?>

                    </div>
                </div>
            </section>
        </div>
        <script type="text/javascript">var waves = <?php echo "{$extra_bodies->extra_waves}";?>;
            if (waves = 0) document.getElementById('svg_waves').style.display = "none"</script>
        <div class="svg_waves">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 157">
                <g id="footer_wave" fill="none">
                    <g id="Artboard" fill="<?php echo "{$extra_bodies->extra_wave_color}" ; ?>">
                        <g id="waves" transform="matrix(-1 0 0 1 1649 31)">
                            <path id="wave--bg"
                                  d="M62.871 104.03C216.871 87.324 286 79.324 589 79.324S958 125 1249 125s445.587 1 445.587 1L1678 225 183.67 235.324S-91.129 120.734 62.871 104.03z"/>
                            <path id="wave--bottom"
                                  d="M72.868 151.295C103.996 138.363 484.122 47.5 650.155 47.5c166.034 0 320.54 45.056 611.54 45.056 291 0 464.044-67.495 464.044-67.495l-80 132.939-1437 32s-167-98.777-135.871-111.71v73.005z"
                                  opacity=".06" transform="matrix(-1 0 0 1 1794.739 0)"/>
                            <path id="wave--middle"
                                  d="M43 2c154-9.807 423.81 29.65 538.81 45.5C696.81 63.35 966 94 1257 94c291 0 457.203-42.22 457.203-42.22l-69.753 97.447H201.001S-111 11.807 43 2z"
                                  opacity=".15"/>
                            <path id="wave--top"
                                  d="M616.074 103.938c-293.347 0-472.782-20.373-472.782-20.373l70.315 97.447h1455.087s329.601-143.286 174.36-153.093c-155.242-9.807-605.136 26.69-721.063 42.54-115.927 15.85-212.571 33.479-505.917 33.479z"
                                  opacity=".1"/>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
    </div>
<?php } ?>

 

 

Below is my code for the home.php template that includes the above code. 

<?php namespace ProcessWire; ?>
<?php /* include_once("./_header.inc"); */

// home.php (homepage) template file.
// See README.txt for more information ?>

    <div class="container">
        <header>
            <!-- Top Navbar -->
            <nav id="headeroom" class="navbar navbar-fixed-top navbar-intro navbar-intro-full headeroom-padd" role="navigation">

                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse-fixed-top">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand navbar-brand-img-lg" href="/"><img src="<?php echo $config->urls->templates?>/images/Logo_webhoes.png" alt="Webhoes" class="img-responsive"></a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="main-navbar-collapse-fixed-top">


                        <?php /*    <div id="search-wrap" class="navbar-form navbar-right">
                        <form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
                            <input type='text' name='q' placeholder='Search' value='<?php echo $sanitizer->entities($input->whitelist('q')); ?>' />
                            <button type='submit' name='submit'>Zoeken</button>
                        </form>
                    </div> */ ?>
                        <ul class="nav navbar-nav navbar-right">
                            <?php foreach($homepage->and($homepage->children) as $item) {
                                if($item->id == $page->rootParent->id) {
                                    echo "<li class='current'>";
                                } else {
                                    echo "<li>";
                                }
                                echo "<a href='$item->url'>$item->title</a></li>";
                            }

                            // output an "Edit" link if this page happens to be editable by the current user
                            if($page->editable()) echo "<li class='edit'><a href='$page->editUrl'>Edit</a></li>";
                            ?></ul>

                    </div><!-- /.navbar-collapse -->
                </div>

            </nav>
        </header>
    </div>
<?php /*

        ?>   <div class="container-fullwidth  animated fadeIn">

            <section id="zoom-out-header">
                <div id="zoom-out-background" style="background: url('[[*blog_main_image]]') no-repeat center center; background-size: cover; "></div>
                <div id="zoom-out-tagline">

                    <div class="container">
                        <div class="row no-border no-marg-tb">
                            <div class="col-md-12">
                                <h1 class="no-marg-b backg-black-transp20 color-light  text-center padd-20">$page->title;  </h1>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

        </div>  */ ?>
    <?php
// if there are images, lets choose one to output in the sidebar
if(count($page->images)) {
// if the page has images on it, grab one of them randomly...
    $image = $page->images->getRandom();
// resize it to 400 pixels wide
//$image = $image->width(1140); uit om responsive te maken
// output the image at the top of the sidebar...
    $header = $image->url;
// ...and append sidebar text under the image
// $sidebar .= $page->sidebar;
} else {
// no images...
// append sidebar text if the page has it
//  $sidebar = $page->sidebar;
    echo "$config->urls->templates"; ?>images/full-bg.jpg" <?php
} ?>
    <!-- Full Page Image Background Carousel Header -->
    <div id="carouselFade" class="container-fullwidth container-marg-b color-primary-backg carousel carousel-fade slide bs-full-slider bs-full-slider-h50 animated fadeInDown">
        <!-- Indicators -->
        <ol class="carousel-indicators  z-index-2">
            <!--<li data-target="#carouselFade" data-slide-to="[[+idx:decr]]" [[+idx:is=`1`:then=`class="active"`]]></li> -->
        </ol>
        <!-- Wrapper for Slides -->
        <div class="carousel-inner">

            <div class="item active">
                <div class="fill header-fill" style="background-image:url(<?php echo $header; ?>)"> </div>
                <div class="carousel-caption height-100 caption-vertical  z-index-1" >
                    <div class="caption-vertical-item">
                        <h1><?php echo "$page->title"; ?> </h1>
                        <p class="lead marg-b20"><?php echo "$page->headline"; ?></p>
                    </div>
                </div>
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control z-index-2" href="#carouselFade" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control z-index-2" href="#carouselFade" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

    </div>
    </div>

    <div class="container">
        <section>
            <div class="row">

                <div class="col-md-12">


                    <!-- breadcrumbs -->
                    <div class='breadcrumbs'><?php
                        // breadcrumbs are the current page's parents
                        foreach($page->parents() as $item) {
                            echo "<span><a href='$item->url'>$item->title</a></span> ";
                        }
                        // optionally output the current page as the last item
                        echo "<span>$page->title</span> ";
                        ?></div>

                </div>
            </div>
        </section>
    </div>

    <div class="container-fullwidth" style="background-color:<?php echo $page->bodyBackgroundColor; ?>">
        <div class="container">
            <section>
                <div class="row">

                    <div class="col-md-12 body-front">
                        <?php $page->headline; ?>
                        <div class="wow fadeInUp animated">
                            <?php echo $content; ?>
                        </div>
                        <?php
                        // Primary content is the page body copy and navigation to children.
                        // See the _func.php file for the renderNav() function example
                        $content = $page->body . renderNav($page->children);
                        ?>

                    </div>
                </div>
            </section>
        </div>
        <div class="svg_waves"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 157"><g id="footer_wave" fill="none"><g id="Artboard" fill="<?php echo $page->bodyWavesColor; ?>"><g id="waves" transform="matrix(-1 0 0 1 1649 31)"><path id="wave--bg" d="M62.871 104.03C216.871 87.324 286 79.324 589 79.324S958 125 1249 125s445.587 1 445.587 1L1678 225 183.67 235.324S-91.129 120.734 62.871 104.03z"/><path id="wave--bottom" d="M72.868 151.295C103.996 138.363 484.122 47.5 650.155 47.5c166.034 0 320.54 45.056 611.54 45.056 291 0 464.044-67.495 464.044-67.495l-80 132.939-1437 32s-167-98.777-135.871-111.71v73.005z" opacity=".06" transform="matrix(-1 0 0 1 1794.739 0)"/><path id="wave--middle" d="M43 2c154-9.807 423.81 29.65 538.81 45.5C696.81 63.35 966 94 1257 94c291 0 457.203-42.22 457.203-42.22l-69.753 97.447H201.001S-111 11.807 43 2z" opacity=".15"/><path id="wave--top" d="M616.074 103.938c-293.347 0-472.782-20.373-472.782-20.373l70.315 97.447h1455.087s329.601-143.286 174.36-153.093c-155.242-9.807-605.136 26.69-721.063 42.54-115.927 15.85-212.571 33.479-505.917 33.479z" opacity=".1"/></g></g></g></svg></div>
    </div>
    <div class="container-fullwidth" style="background-color:#<?php echo $page->body2BackgroundColor; ?>">

        <div class="container">
            <section>
                <div class="row">

                    <div class="col-md-12 body-front wow fadeInUp animated">
                        <?php echo "$page->body2"; ?>

                    </div>
                </div>
            </section>
        </div>
        <div class="svg_waves"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 157"><g id="footer_wave" fill="none"><g id="Artboard" fill="#<?php echo $page->body2WavesColor; ?>"><g id="waves" transform="matrix(-1 0 0 1 1649 31)"><path id="wave--bg" d="M62.871 104.03C216.871 87.324 286 79.324 589 79.324S958 125 1249 125s445.587 1 445.587 1L1678 225 183.67 235.324S-91.129 120.734 62.871 104.03z"/><path id="wave--bottom" d="M72.868 151.295C103.996 138.363 484.122 47.5 650.155 47.5c166.034 0 320.54 45.056 611.54 45.056 291 0 464.044-67.495 464.044-67.495l-80 132.939-1437 32s-167-98.777-135.871-111.71v73.005z" opacity=".06" transform="matrix(-1 0 0 1 1794.739 0)"/><path id="wave--middle" d="M43 2c154-9.807 423.81 29.65 538.81 45.5C696.81 63.35 966 94 1257 94c291 0 457.203-42.22 457.203-42.22l-69.753 97.447H201.001S-111 11.807 43 2z" opacity=".15"/><path id="wave--top" d="M616.074 103.938c-293.347 0-472.782-20.373-472.782-20.373l70.315 97.447h1455.087s329.601-143.286 174.36-153.093c-155.242-9.807-605.136 26.69-721.063 42.54-115.927 15.85-212.571 33.479-505.917 33.479z" opacity=".1"/></g></g></g></svg></div>

    </div>

    <?php
foreach($page->extra_body as $extra_bodies) { ?>
    <div class="container-fullwidth" style="background-color:<?php echo "{$extra_bodies->extra_bg_color}"; ?>">

        <div class="container">
            <section>
                <div class="row">

                    <div class="col-md-12 body-front wow fadeInUp animated">

                        <?php echo "<p>{$extra_bodies->extra_body_text}</p>"; ?>
                        <?php echo "<p>{$extra_bodies->extra_waves}</p>"; ?>

                    </div>
                </div>
            </section>
        </div>
        <script type="text/javascript">var waves = <?php echo "{$extra_bodies->extra_waves}";?>;
            if (waves = 0) document.getElementById('svg_waves').style.display = "none"</script>
        <div class="svg_waves">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 157">
                <g id="footer_wave" fill="none">
                    <g id="Artboard" fill="<?php echo "{$extra_bodies->extra_wave_color}" ; ?>">
                        <g id="waves" transform="matrix(-1 0 0 1 1649 31)">
                            <path id="wave--bg"
                                  d="M62.871 104.03C216.871 87.324 286 79.324 589 79.324S958 125 1249 125s445.587 1 445.587 1L1678 225 183.67 235.324S-91.129 120.734 62.871 104.03z"/>
                            <path id="wave--bottom"
                                  d="M72.868 151.295C103.996 138.363 484.122 47.5 650.155 47.5c166.034 0 320.54 45.056 611.54 45.056 291 0 464.044-67.495 464.044-67.495l-80 132.939-1437 32s-167-98.777-135.871-111.71v73.005z"
                                  opacity=".06" transform="matrix(-1 0 0 1 1794.739 0)"/>
                            <path id="wave--middle"
                                  d="M43 2c154-9.807 423.81 29.65 538.81 45.5C696.81 63.35 966 94 1257 94c291 0 457.203-42.22 457.203-42.22l-69.753 97.447H201.001S-111 11.807 43 2z"
                                  opacity=".15"/>
                            <path id="wave--top"
                                  d="M616.074 103.938c-293.347 0-472.782-20.373-472.782-20.373l70.315 97.447h1455.087s329.601-143.286 174.36-153.093c-155.242-9.807-605.136 26.69-721.063 42.54-115.927 15.85-212.571 33.479-505.917 33.479z"
                                  opacity=".1"/>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
    </div>
<?php } ?>

 

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

Welcome to PW and the forums @webhoes,

I didn't go through your whole code but noticed this: 

 if (waves = 0)//.......

That's not a comparison but an assignment.  Should be 

 if (waves == 0)//....
// or....depending on your needs
 if (waves === 0) //...

Other than that, you might want to separate the PHP from JavaScript. E.g. for the checked input..., in a foreach loop, assign a CSS class, e.g. 'checked-input' and use that to find elements that are checked.

  • Like 2
Link to comment
Share on other sites
webhoes Sr. Member

webhoes

Posted
  • Author
Posted

Thanks

I had == at first but could not get it working and thought it might be that.

I got it workig this way: 

<?php $waves_yes = $extra_bodies->extra_waves; ?>
        <div class="svg_waves" <?php if ($waves_yes == 1) { echo "";} else { echo ' style="display:none"';}; ?>>

I know it is better to seperate, but I am still learning and getting this far with all was quite challenging ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...