Jump to content

Search the Community

Showing results for tags 'Javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome to ProcessWire
    • News & Announcements
    • Showcase
    • Wishlist & Roadmap
  • Community Support
    • Getting Started
    • Tutorials
    • FAQs
    • General Support
    • API & Templates
    • Modules/Plugins
    • Themes and Profiles
    • Multi-Language Support
    • Security
    • Jobs
  • Off Topic
    • Pub
    • Dev Talk

Product Groups

  • Form Builder
  • ProFields
  • ProCache
  • ProMailer
  • Login Register Pro
  • ProDrafts
  • ListerPro
  • ProDevTools
  • Likes
  • Custom Development

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. I have a table in my template that I would like to update using Ajax when a button is pressed. I am not sure how to go about this and hope somebody here could point me in the right direction. Here is my code for the table output. You can see I loop through the fields to output using a hard wired selector to list the retailer type. I have a button for Supermarkets that fires a js handler myFunc and I need to put the ajax there to call this page again with a param so I can then form the selector for supermarkets and update the table. When I get this working and understand how to do it in ajax I will code up a selector that is formed dependant on a bank of buttons and the table will update without the rest of the page - like magic! That's what ajax is for right?! Thanks for any help - Paul <button type="button" onclick="myFunc()" value="1" class="btn btn-primary">Supermarkets</button> <div class= "table-responsive"> <table class="table table-hover table-striped"> <thead> <tr> <th>Retailer</th> <th>No. bags issued</th> <th>Gross proceeds £</th> <th>Net proceeds £</th> <th>Other use of net proceeds</th> <th>Amount donated £</th> <th>Good causes in receipt of proceed</th> <th>No. of paper bags issued</th> <th>No. of bags for life</th> </tr> </thead> <tbody> <?php $pg = $pages->get("/single-use-carrier-bags/"); $retailer = $pg->find("category=DIY, sort=title, include=all"); foreach ($retailer as $r) { echo "<tr> <td><a href= '$r->url'>$r->title</a></td> <td>".numFormat($r->no_bags_issued)."</td> <td>".numFormat($r->gross_proceeds)."</td> <td>".numFormat($r->net_proceeds)."</td> <td>$r->other_use_net_proceeds</td> <td>".numFormat($r->amount_donated)."</td> <td>$r->good_causes_in_receipt</td> <td>".numFormat($r->no_paper_bags_issued)."</td> <td>".numFormat($r->no_bags_for_life)."</td> </tr>"; } ?> </tbody> </table> </div> </div> </div> <script type="text/javascript"> function myFunc() { } </script>
  2. Hi, I'm using the excellent new front-end editing in PW 3.0.30 on a new project. I have a slick carousel that contains editable content. I'm able to edit the content in the slideshow fine but when I save, the page shows without the carousel initialized. Is it therefore possible to reinitialize something like slick after saving in front-end editing?
  3. CodeRunner 2 is on sale at MacUpdate: https://www.macupdate.com/app/mac/38362/coderunner Mostly I use it for writing shell scripts, mocking up algorithms in PHP, JavaScript/jQuery. But is also supports other programming languages as well. https://coderunnerapp.com/ "An advanced, highly flexible, and easy-to-use programming editor for your Mac. CodeRunner supports a large number of languages, and delivers big IDE features while remaining lightweight and clutter-free."
  4. I had situations come up that just seemed like AJAX was the right way to handle interactions with the ProcessWire server - pages with an element like a button or link that should cause an action to occur but shouldn't require a form or actually following a link - it should just take the action and only update the toggle (a checkbox in this case) when the interaction is completed. Another use case is with a large page on which there are multiple possible interactions. When the page is heavy enough that redrawing results in a less than optimal user experience then it's nice to be able to submit a form without having to redraw the page in order to update the relevant parts. So with that preamble, here's what I put together. I was going to try to clean it up a bit but that has prevented me from posting this so I figured it's better to post it and clean it up if there is any interest. You'll see references to the namespace whale - the name of our project - that would ultimately be removed. There are two major components - the PHP side and the client-side. On the PHP side there are two functional areas: 1. "wrapping" an entity to be inserted into the HTML on a page Wrapping (the function 'makeContainer()' puts a predefined wrapper around one of three types of objects: FormBuilderForm, InputfieldForm, or Template). The wrapper provides context and attaches classes that allows the client JavaScript code to find the wrapper and figure out what to do with it. // // define a function that makes a "form" of a single button. // function makeButton ($label) { // get the form $form = wire('modules')->get("InputfieldForm"); $form->attr('action', './'); $form->attr('method', 'post'); $submit = wire('modules')->get("InputfieldSubmit"); $submit->attr('id+name', 'submit'); $submit->attr('value', $label); $form->add($submit); return $form; } // wrapper function to set label on submit button function requestUserDeleteList() { return makeButton('Do it!'); } // // makeContainer wraps the rendered InputfieldForm in HTML so the client JavaScript can recognize it and handle // AJAX interactions with the server. // It returns the InputfieldForm object and the HTML to be inserted into the page. Note that makeContainer // is in a different namespace so it requires the function name must be qualified with the \ProcessWire prefix. // list ($form, $deleteUsersHTML) = ajax\Request::makeContainer('do-something', '\ProcessWire\requestUserDeleteList'); 2. helping with the processing of an AJAX request that is submitted to the page. Helping with the AJAX request - the code is invoked on page load and determines where there is a valid AJAX request from something it wrapped. It also allows messages to be returned, classes to be added or removed from specific elements, redirects to be executed, or even wholesale replacement of DOM elements (with plenty of caveats). It will even update a submit key so it is possible for the client to execute a single transaction multiple times. // get a new request object for the AJAX transaction $request = new ajax\Request(); // if it isn't formatted correctly handle the error if (!$request->isValidCall()) { return $request->echoError(); } // get the data and function-specific contents (Whale Ajax Context) $data = $request->data(); $wac = wireDecodeJSON($data['wac']); // if ($request->id('wants-newsletter')) { if (!ajax\Request::hasCorrectProperties($data, ['wac', 'value'])) { return $request->echoError(__('invalid call')); } // implement function here } else if ($request->id('another-function')) { // implement function here } // it didn't match any of the AJAX IDs implemented return $request->echoError('not implemented'); The client code requires jQuery and is packaged as three separate functions because both the form and template processing share a common core set of functions. My original intent was to only load the form or non-form code as needed but they're small enough that it really doesn't matter. See attachments for the Request class and the client code. There are many helper functions. Here is a kind of an unfocused extract that illustrates using the code with more context (from an internal sandbox page): <?php namespace ProcessWire; using whale\ajax; // include server-side code for making forms and processing them require_once './utility/ajaxform.inc'; // custom version of ProcessWire/wire/core/WireFileTools.php render() that returns the // template object, not the rendered HTML require_once './utility/get-file-template.inc'; // START AJAX submitted form processing - decodes the request and stores results in $aaform. $aaform = new ajax\Request(); // // this page handles multiple ajax calls so I check to see if it is valid once and then check IDs. // It's also possible to use $aaform->isValidCall('get-user-delete-list') to check specifically // for a specific AJAX ID. The ID is the name provided to Request::makeContainer() when the object // is wrapped. It's also possible to make calls to $aaform->id('get-user-delete-list') to check // for a specific ID. // // to create the forms/input elements that are submitted via AJAX start with: // Request::makeContainer('unique-name-on-page', object) // unique-name-on-page will become the ID of the element that wraps your object. // object - one of ProcessWire\InputfieldForm, \FormBuilderForm, ProcessWire\Template. // if ($aaform->isValidCall()) { if ($aaform->id() === 'get-user-delete-list') { $form = requestUserDeleteList(); // process using the form. the Request object will check to make sure it's the right type. if (!$aaform->process($form)) { return $aaform->echoError(); } // build new form with usernames for selections to delete. the function getUsersToDelete() // returns a user count and a function that will make the form that includes the users in // a list of checkboxes. list($usercount, $formmaker) = getUsersToDelete(); // this returns a replacement to part of the existing DOM. There are limitations but it // handles adding a form or replacing an existing form. if ($usercount === 0) { $replacement = '<div id="ajax-place">No users to delete</div>'; } else { // we pass the $formmaker function to makeContainer(). It returns the form and the // rendered wrapper and form. list($xform, $xhtml) = ajax\Request::makeContainer('do-delete', $formmaker); $replacement = '<div id="ajax-place">' . $xhtml . '</div>'; } // this makes sure the return is formatted so the client can handle it correctly. in // this case a replacement in the DOM is being returned. The first argument is the // selector, the second is the HTML to replace the selected element with. return $aaform->echoReplacement('#ajax-place', $replacement); } else if ($aaform->id() === 'do-delete') { list($usercount, $formmaker) = getUsersToDelete(); // process using the form returned by $formmaker. this will check to make sure it's // the right type of form. This abstracts FormBuilder forms and InputfieldForms. if (!$aaform->process($formmaker())) { return $aaform->echoError(); } // a bunch of logic where the checked users are deleted $deleted = []; $failed = []; $data = $aaform->data(); foreach($data as $name => $value) { if ($name === $value) { $user = wire('users')->get("name=$name"); $email = $user->email; // delete the user and try to get it again to see if the delete worked wire('users')->delete($user); $u = wire('users')->get("name=$name"); if (!count($u)) { $deleted[] = $email . " ($name)"; } else { $failed[] = $email . " ($name)"; } } } $deleted_users = $failed_deletions = ''; if ($deleted) { $deleted_users = 'deleted:<br/>' . join($deleted, '<br/>') . '<br/>'; } if ($failed) { $failed_deletions = 'failed to delete:<br/>' . join($failed, '<br/>') . '<br/>'; } $replacement = '<div id="ajax-place">' . $deleted_users . $failed_deletions . '</div>'; return $aaform->echoReplacement('#ajax-place', $replacement); } else if ($aaform->id() === 'contact') { // here a FormBuilderForm is being loaded if (!$aaform->process($forms->load('contact'))) { return $aaform->echoError(); } // this sends a notice back. the client will place it in a predefined notice area. // Request::makeContainer() will create an area for notices (or you can supply one). // It is also possible to return errors; notices and errors get different classes. $msg = ajax\Request::makeNotice('bruce says hi'); return $aaform->echoSuccess($msg); } else { // it was a valid form but it doesn't match any ID that this page knows about. return $aaform->echoError('what is this?'); } } // normal processing to render the initial page follows as it was not a valid AJAX post // that is handled by Request(). That's a lot of code, so I won't post anymore. If people have interest I'm happy to explain or provide other bits of code, like the extracted get-file-template.inc function. Wrapping a template is similar to wrapping a form except that only certain HTML elements are tracked and each are sent to the server when they are clicked on (technically it varies). It handles radio buttons, checkboxes, links, and buttons (radios and checkboxes on "change" and links and buttons on "click"). So when a checkbox is checked an AJAX call will be made so it can be acted upon by the server. @microcipcip, @ryan, @valan (sorry to any if this isn't interesting to you - I did a quick scan of what looked like semi-related AJAX posts). ajaxform.inc ajaxclient.js
  5. Hi all, I'm searching for a better solution on a problem with permanent monitoring positions of page elements when scrolling. I have a table with table header, where a copy of it in a fixed header should popup when the original header is out of the viewport. That works very nice with one table and one fixed header. But there are also pages with multiple of those objects, and I don't want to check for each table, if it is currently within the viewport, but its header out of it. A much better aprouch would be, if I could check which object is currently at top of the viewport. But I haven't found any examples on the web. Maybe I used the wrong keywords for searching, but everytime I found something, it only was checking the scrolltop position of an object. I want to check at vertical position 0 or 100 of the viewport what object is there currently positioned. All my tables have IDs. Does anybody has a hint or tip for me?
  6. 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 } ?>
  7. Hi, Trust this message finds you hale and hearty. Need your help, if you'd be so kind. I just can't seem to get the file paths correct for a template I'm converting to Processwire. Js folder is inside the site -> templates folder: In this folder are calls to js files, in my _head.inc and _foot.inc files: In the _head.inc file: jquery.js jquery-migrate-1.2.1.js device.min.js In the _foot.inc file: script.js Here's the code I use to call these files: _head.inc <script src="<?php echo $config->urls->templates; ?>js/jquery.js"></script> <script src="<?php echo $config->urls->templates; ?>js/jquery-migrate-1.2.1.js"></script> <script src='<?php echo $config->urls->templates; ?>js/device.min.js'></script> _foot.inc <script src="<?php echo $config->urls->templates?>js/script.js"></script> Inside the script.js file, there are a bunch of includes, like the following: include('js/jquery.cookie.js'); I'm on Chrome, and the console shows a bunch of 404 errors. The main files don't find the files referenced in script.js. Here's an example: http://localhost/surfinn.rocks/js/jquery.cookie.js http://localhost/surfinn.rocks/js/jquery.cookie.js That shows an error. The HTML demo of the site I installed on my Wamp works fine. No errors. Not the case when loaded in Processwire. Any idea what I'm missing? Thanks so much for your time.
  8. Hi, I read this and I would like add it to my site. https://www.gavick.com/blog/scrollreveal-js-the-easiest-way-to-create-on-scroll-animations Excuse me if it's off topic! My probem is: I add the new js file in folder of the site (...assets/js/scrollReveal.js), then I add the code in the html page : <!--SCROLL ANIMATION SCRIPTS--> <script src="assets/js/scrollReveal.js"></script> Then I add: data-scroll-reveal="enter from the bottom after 0.9s" near the css class But the js effect don't start. I read this: https://www.gavick.com/blog/scrollreveal-js-the-easiest-way-to-create-on-scroll-animations where the chef say: Then, to include library, please open the template/layout/blocks/head.php file and use this code: 1 $this->API->addJS($this->API->URLtemplate() .'/js/scrollreveal.js'); That’s all you need to do, and the library is now good to go. Now, it's necessary in processwire add that api code in the head.php file?
  9. Just found http://intercoolerjs.org/ It does declarative ajax. Frontend wizardry without writing javascript. I'm impressed.
  10. elabx

    Forms engine

    Hi everyone! I'm building some Liferay portlets for a call center and I'm looking for form engines like Alpaca Forms which is the one I'm currently using (and fits my needs), but I would only like to ask around if someone knows of a similar alternative when it comes to generating forms on the front.
  11. Hi there, I just recently discovered ProcessWire and am still pretty exited about it and the ways it enables you to do anything. Thanks a lot to Ryan and everything who created it! What I was missing (or just overlooking?) recently, was some kind of char counter for textual input fields. Just an (en-/disable-able) are that shows, how many chars have been typed in. If you have some char limit defined for the field, it should show you, how many chars are left. Just think of the twitter online interface for writing new tweets. So, did I miss something here and this is already existing? If not, I think that this would make a nice addition to the backend modules. I'd give a try to develop it, if it doesn't exist, but since I'm quite new to the PW world, I haven't ever developed a module before and it will probably take some time. Please just let me know what you think of it. With kind regards, Marc Edit: Thanks so Soma, there is some Code there already. While still rough around the edges, it's definitely usable: https://github.com/boundaryfunctions/TextareaCounter
  12. Hi, We're looking for a PW freelancer (preferably based around Gloucestershire/South West - but will consider further afield) to build the front-end for a PW site we're currently building. The site has been designed (files available) and prototyped. Currently we are building the backend (members) area which pulls in a JSON feed and stores it in PW. This information is then shown to the Members. A restricted view of the data is shown to the public. Timescales for this project are to go live on W/C 18th April. Please post here with contact details and website URLs and I will contact you. Many thanks Pete Jones Head of Digital www.jfd.co.uk
  13. Hello again. Thought i share my way of creating sliders in my ProcessWire websites, by using the images field type and some HTML, JavaScript, CSS and a pinch of love. Step One: Go to http://flickity.metafizzy.co/ and download Flickity slider. They also have a CDN option for thoose who prefere that. Also have the page handy cause it has alot of usefull info for configuring the slider and such. Note: In my example i use jQuery to initialize Flickity but you can use it without, see the website for more info. So you need to load jQuery before flickity in the header section for my example to work. Step Two: Here is an example of how you could write some code and HTML for your template file where the slider should render. This code assumes your images field is named images. <div class="slider-container"> <?PHP /* check if there is any images to display */ if(count($page->images) > 0) { /* render out the images and resize to 700 pixel width */ foreach($page->images AS $key => $image) { echo('<img src="' . $image->width(700)->url . '" class="slider-container-item" alt="' . $image->description . '">'); } } else { echo('<p>Houston we have a problem...there are no images to see here...</p>'); } ?> </div> Also lets put together some simple CSS for our container and items. Alter it to your own needs and preference. For the Flickitys sliders default CSS and configuring see the website. .slider-container { position: relative; display: block; overflow: hidden; width: 100%; max-width: 700px; padding: 0; margin-bottom: 15px; clear: both; } .slider-container-item { position: relative; display: block; width: 100%; height: auto; max-width: 700px; } Step Three: Put the default CSS and also Flickitys JS files and load jQuery before Flickity in the header of your site so that flickity works as intended. Or use the CDN option mentioned on the flickity website. <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/jquery.js"></script> <script src="/path/to/flickity.pkgd.min.js"></script> Don´t forget to put the Flickity JavaScript initalization code at the bottom of the template file. For all the Options and configuration see the website: http://flickity.metafizzy.co/ In the example code below i use just a few of the many options. <script type="text/javascript"> /* initiate Flickity Slider JS */ $(document).ready(function(e){ $('.slider-container').flickity({ // options cellSelector: '.slider-container-item', cellAlign: 'center', imagesLoaded: true, percentPosition: true, contain: true }); }); </script> Note: This is my prefered way of doing it. But there are alternative ways to initialize Flickity if you read the info on the website. This should be enough to get you started. And with a little imagination i think you could see the potential. Good luck with all your Slider making dreams
  14. Hi, I have been googling around like crazy to find a suitable very light-weight javascript library for showing a simple image gallery with one bigger main picture (just on the page, not in a lightbox), with clickable thumbnails that will show the selected image in a bigger version in the main image area when clicked. See the attached screenshot for an example! Most libraries out there seem to focus on fancy transitions, lightbox style image viewing, or don't include the thumbnail feature (just showing these dots, for selecting pictures) ... and so I haven't so far found what I'm looking for. Any hints? (Again, preferrably something super-lightweight, that is super-easy to integrate with pw).
  15. Hey guys I was wondering if anyone had already exported a Cargo Collective site to ProcessWire?! I have two Cargo sites I'd like to convert to ProcessWire, they're using these templates: - http://cargocollective.com/voyager1 - http://cargocollective.com/sirius It's all working fine but I can't figure out how to "replicate" the famous Cargo effect to PW (the effect where links open fastly without reloading the page). Can anyone please help me achieve this with PW? Cheers
  16. Hello, i am trying to solve one issue from 2 days but no luck. i am developing one project in PW and its working perfect as always but issue is in footer file i am using one JS file as bellow <script src="<?php echo $config->urls->templates?>assets/js/script.js"></script> file load but script.js use few other files as bellow include('js/jquery.easing.1.3.js'); these files are not loading , i have copied the JS folder in root and Home page start working but when i goto sub pages JS again stop working. issue is with JS path. how to fix that ? Thanks
  17. http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ Please check your code for how you use the .show() and .hide() methods! I did a quick grep for a 2.6.9 site (has a dozen random modules) and the .js files listed below were using .show(). It might well be that some of them will break with jQuery 3.0. BatchChildEditor.js ProcessBatcher.js AdminThemeReno\scripts\main.js InputfieldFile.js InputfieldPageAutocomplete.js InputfieldSelector.js JqueryTableSorter\widgets.js JqueryWireTabs.js ProcessField.js ProcessModule.js ProcessPageAdd.js ProcessPageEditImageSelect.js ProcessPageEditLink.js ProcessPageList.js ProcessPageLister.js ProcessPageSearch.js ProcessTemplate.js SystemNotifications\Notifications.js templates-admin\scripts\inputfields.js templates-admin\scripts\main.js
  18. Hi folks, I am using AJAX on a site I am building, specifically PJAX, and I have built all this locally and it has all been working great with no problems. Upon pushing this from local to remote the AJAX is failing to retrieve my pages, and thus falling back to the normal page loading. I have had a look at the Network tab in Google devtools to find out more and it looks like the request goes through but the PJAX url call (for example: http://www.juleslister.co.uk/projects/photography?_pjax=%23pjax) is returning as a 301 error. I have a screenshot of the Network issue here: http://i.imgur.com/oC2ZPce.png Any thoughts? Many thanks, R
  19. Hi, So I'm just getting started with using Processwire(PW) and I really like it so far. I've also recently started using AngularJS and loving it. Now i'm trying to setup angular routing to work with PW but not having much luck. I've google around etc and tried following the following post https://processwire.com/talk/topic/6281-angularjs-routing-with-processwire/?hl=%2Bangular+%2Brouting but still can't get it to work. I have a simple site setup for a portfolio, Home/About/Work/Contact I would love to have angular route all the other pages into the homepage. At the moment it just goes to the no-found url. If anyone could give me some tips that would be awesome.
  20. how do I get jquery/javascript code online and use it on pw? I'm trying to port my static html in pw by the way. I successfully used the css code since there are css files included in my template folders which I placed it there. and used the <?php echo $config->urls->templates?> to make it work. see code above. however there is a jquery code which is being called online. I know <?php echo $config->urls->templates?> wont work. So how do I call it in pw? to make the jquery codes work? it doesnt work if I left it like that by the way. or should I just download the js files place it on my scripts folder then use <?php echo $config->urls->templates?> way again?
  21. Hi, I'm experimenting with using AJAX to deliver just a portion of the page, as described here by Ryan. I've got it working on using this javascript: $(document).ready(function () { $("#topnav a").click(function() { $("#topnav a.alert").removeClass('alert'); // unhighlight selected nav item... $(this).addClass('alert'); // ...and highlight new nav item $("#bodycopy").html(""); $.get($(this).attr('href'), function(data) { $("#bodycopy").hide().html(data).fadeIn(500); }); return false; }); }); However I've also got a 'load more' button powered by Infinite AJAX Scroll which works fine when you first load the page. This is the javascript I'm using for the 'load more' button: var ias = $.ias({ container: "#container", item: ".item", pagination: "#pagination", next: ".next a" }); ias.extension(new IASTriggerExtension({ html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>', })); ias.extension(new IASSpinnerExtension({ })); The 'load more' button works on the first load of the page, however if you click 'all' (or any of the filter buttons, the back to 'all') it doesn't load the Infinite Ajax Scroll script and just shows the plain ol' text link to /page2/ Could anyone point me at how I might be able to make the Infinite Ajax Scroll 'load more' work when the AJAX controlled buttons are used? Any help is greatly appreciated!
  22. Hey folks, I've never used ProcessWire before. I took a quick look at the API documentation, but wasn't able to find anything that met my needs. I would like to add a JavaScript snippet to specific pages. We're implementing a heatmapping tool, and each page that it will be implemented on will have a unique JS code that can only appear on that page. My first thought was to look into the template file for the actual page, but I'm not quite sure which method to use to say "Only add this Javascript code to this page." Any help would be greatly appreciated. I've attached a screenshot of one of the template pages in question. I didn't write it, but perhaps it could be helpful.
  23. Hey all, I thought this might be useful for anyone who uses preprocessing tools (like the excellent CodeKit: http://incident57.com/codekit). I came across Prepros the other day: http://alphapixels.com/prepros/ I always used CodeKit up until recently. However, it's only available for mac and recently I have had to dip my toes into the waters of the dark side again with a PC laptop I needed something that would work cross-platform (Prepros works across PC, Mac and Linux). From what I have seen so far Prepros is growing quickly, free, supports nearly every type compiled CSS, has real time refreshes and works across platforms.
  24. Hi all, I'm actually try to handle some mixed sort of adaptive and responsive image display in a gallery. That means I want to serve one out of three or four image-length that best fit to the current client-device-viewport, (to avoid sending 1600x1200 images to smartphones). The plan is as follows: The first page displays only thumbnails, so with them there is only one length. When the thumbnail page is loaded, it should send the actual viewport dimensions to PW. Dimensions get stored in session. Image-src is linked to /img/ID/, /img/ is a PW php script that compare last stored viewport dimensions against the width-height of desired image and send that one that fits best. As I have half of that already running long time on my old website (but with prototype and scriptaculous) I think I can solve that with jquery too. But with browser compatibility and all that stuff I'm feeling pretty much uncomfortable, so I want to ask if the following JS-code is bullet proof and also up to date for my needs or if I should use something different these days: function sendViewportDimensions() { // some jquery-ajax code } document.observe('dom:loaded', function() { sendViewportDimensions(); Event.observe(document.onresize ? document : window, "resize", function() { sendViewportDimensions(); }); }); And second question is if I have to add some kind of session-id to the ajax-request or if that is send automatically with it, or if it is send only sometimes automatically and sometimes not? (and I better have to add it to be save) ??
  25. Hello there - So I'm migrating an existing yoga studio site that I built into ProcessWire. I created a template for the "teachers" page, which has teacher bios, that uses repeating fields for each teacher & wraps each one in a section tag: <?php foreach($page->Info_Block as $Info_Block) { ?> <section class="bio"> <? echo "<h2>{$Info_Block->Name}</h2>"; echo "<div><img src='{$Info_Block->Image->eq(0)->url}'>"; echo "<p>{$Info_Block->Information}</p></div> "; }?> </section> I would like to make it so that only the teachers' names show, and then the bio section opens when the name is clicked, which I've done with CSS on the existing site: http://saniyoga.com/teachers.php. But the pure CSS solution uses modified inputs, which doesn't seem like a viable solution here. I've tried adding the script for the JQuery UI accordion to the template in both its original form (the containing div for the above code is "dropdown_cont") $(function() { $( ".dropdown_cont" ).accordion(); }); .... and with a modifier to take the section into account, $(function() { $( ".dropdown_cont" ).accordion( { header: '> section.bio > h2' } ); }); but it doesn't work. Still very new to ProcessWire so would appreciate any suggestions.
×
×
  • Create New...