Jump to content
webhoes

Javascript in loop

Recommended Posts

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 } ?>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By adisharma
      Hello Everyone, I am new in this community and I am learning typescript but my friend was suggested to me go with javascript profile because it is most popular scripting language for many web projects and huge community support with lots of documentation and support for solving issues. Can anyone clear this point which one is better for future points of view typescript or javascript?
    • By Marvin
      Hello, i want to ask, i maintain a website that using a processwire and php, and i want to make an archive at my website using a subfolder system, but when i try,
      the sebfolder is show but when i click the files in that subfolder not show, and my browser just show me an error Invalid argument supplied for foreach(), i don't know why it error
      Here i attach my code and my screenshoot website :
      This is my code

      This is result of my website

      This is my error

       
       
    • By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • By Mithlesh
      Hi there,
      My form is not getting submitted, it is showing:
      Unable to verify successful email delivery of this form submission.
      Attaching for your reference as well: 

      In the Backend, it is showing Connection timed out with smtp.gmail.com
      Pl guide me how to resolve that
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
×
×
  • Create New...