Menu icon Foundation

Designer | London

My Posts

  • 1
    Reply
  • Accordion item wrapping div

    By Kyle De Sousa

    accordions

    Hi there is there a way to have a containing wrapper "wantToAddaWrappingDivHere" for according-item elements, I really need a solution for this to add a wrapping div within the accordion. If I add the extra div wrapping the elements i cant toggle the acc... (continued)

    Last Reply by Rafi Benkual 17 days ago











My Comments

Kyle De Sousa commented on Kyle De Sousa's post 6 months

@Ryan Patterson, I tried implementing your method and adding the "$" variable for jQuery, after I do that i get "jQuery" is not difined, the only work around i got was to place jquery as a CDN link in the header, to call it off an external server.
Defiantly not a way the way would move forward into production, just wish there was more in explaining on how to use GULP or web pack setup of foundations

Kyle De Sousa commented on Kyle De Sousa's post 6 months

RUN : foundation new
 
-- > A website (Foundation for Sites)
-- > ZURB Template: includes Handlebars templates and Sass/JS compilers 
 
After the intial setup is all there.
 
Then I create a new custom-scripts.js file is /src/assets/js/lib/custom-scripts.js
 
Then i add this to my app.js file  import './lib/custom-scripts';
 
The scripts in the custom-scripts.js file contain some custom jQuery that I created.
 
 
$(document).on('ready', function () {
 
    $(".cs-select").each(function() {
        var classes = $(this).attr("class"),
            id      = $(this).attr("id"),
            name    = $(this).attr("name");
        var template =  '<div class="' + classes + '">';
        template += '<span class="cs-select-trigger">' + $(this).attr("placeholder") + '</span>';
        template += '<div class="cs-options">';
        $(this).find("option").each(function() {
            template += '<span class="cs-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
        });
        template += '</div></div>';
 
        $(this).wrap('<div class="cs-select-wrapper"></div>');
        $(this).hide();
        $(this).after(template);
    });
    $(".cs-option:first-of-type").hover(function() {
        $(this).parents(".cs-options").addClass("option-hover");
    }, function() {
        $(this).parents(".cs-options").removeClass("option-hover");
    });
    $(".cs-select-trigger").on("click", function() {
        $('html').one('click',function() {
            $(".cs-select").removeClass("opened");
        });
        $(this).parents(".cs-select").toggleClass("opened");
        event.stopPropagation();
    });
    $(".cs-option").on("click", function() {
        $(this).parents(".cs-select-wrapper").find("select").val($(this).data("value"));
        $(this).parents(".cs-options").find(".cs-option").removeClass("selection");
        $(this).addClass("selection");
        $(this).parents(".cs-select").removeClass("opened");
        $(this).parents(".cs-select").find(".cs-select-trigger").text($(this).text());
    });
});
 
 
That I want to import into my main  JS file
 
but i keep on getting $ not defined
 

Kyle De Sousa commented on Martin's post 6 months

But how do you get Jquery to be loaded, i thought its included in the Foundation already, maybe its due to the variable changing 
import $ from 'jquery';import whatInput from 'what-input';window.$ = $;

Kyle De Sousa commented on Reind Dooyeweerd's post 6 months

Also stuck on this, anyone find a solution it out yet?
 

Kyle De Sousa commented on Martin's post 6 months

Im also getting this error
 
app.js:22248 Uncaught ReferenceError: $ is not defined
    at Object.<anonymous> (app.js:22248)
    at webpack_require (app.js:20)
    at Object.defineProperty.value (app.js:14485)
    at webpack_require (app.js:20)
    at Object.<anonymous> (app.js:22290)
    at webpack_require (app.js:20)
    at typeof (app.js:66)
    at app.js:69
(anonymous) @ app.js:22248
webpack_require_ @ app.js:20
Object.defineProperty.value @ app.js:14485
webpack_require @ app.js:20
(anonymous) @ app.js:22290
webpack_require @ app.js:20
_typeof @ app.js:66
(anonymous) @ app.js:69

Kyle De Sousa commented on Kyle De Sousa's post 11 months

Thank you Rafi,
I got all of that, but my question relates more to where do you add the slick.js file, do you have to add it manually in the page template or could one call the node_module to be loaded all in one js file as iIdon't want to have lots of http requests in the header or closing body tag.
 
just like all the scss files are imported to one minified css file 
 
 

Kyle De Sousa commented on Stacey Irvin's post 11 months

Hi there did you get the slick carousel working with bower
 

Kyle De Sousa commented on Jules Webb's post 11 months

Hey guys, did you get to do this eventually would love to see how you got it working with block grid 
 

Kyle De Sousa commented on Kyle De Sousa's post about 1 year

Awesome, thanks man

Kyle De Sousa commented on huameim10's post about 1 year

test

Posts Followed


  • 11
    Replies
  • Foundation 6.4.1 - Add JS files

    By Martin

    js6.4.1

    Hi all,&nbsp; Ive installed a clean version of 6.4.1 through the CLI. On previous versions I would add a js file into the js folder and it would be compiled into app.js file, just as the foundation docs outline. &nbsp; I'm unfamiliar with webpack, but ... (continued)

    Last Reply by Toni 5 days ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Kyle De Sousa's post 6 months

@Ryan Patterson, I tried implementing your method and adding the "$" variable for jQuery, after I do that i get "jQuery" is not difined, the only work around i got was to place jquery as a CDN link in the header, to call it off an external server.
Defiantly not a way the way would move forward into production, just wish there was more in explaining on how to use GULP or web pack setup of foundations

You commented on Kyle De Sousa's post 6 months

RUN : foundation new
 
-- > A website (Foundation for Sites)
-- > ZURB Template: includes Handlebars templates and Sass/JS compilers 
 
After the intial setup is all there.
 
Then I create a new custom-scripts.js file is /src/assets/js/lib/custom-scripts.js
 
Then i add this to my app.js file  import './lib/custom-scripts';
 
The scripts in the custom-scripts.js file contain some custom jQuery that I created.
 
 
$(document).on('ready', function () {
 
    $(".cs-select").each(function() {
        var classes = $(this).attr("class"),
            id      = $(this).attr("id"),
            name    = $(this).attr("name");
        var template =  '<div class="' + classes + '">';
        template += '<span class="cs-select-trigger">' + $(this).attr("placeholder") + '</span>';
        template += '<div class="cs-options">';
        $(this).find("option").each(function() {
            template += '<span class="cs-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
        });
        template += '</div></div>';
 
        $(this).wrap('<div class="cs-select-wrapper"></div>');
        $(this).hide();
        $(this).after(template);
    });
    $(".cs-option:first-of-type").hover(function() {
        $(this).parents(".cs-options").addClass("option-hover");
    }, function() {
        $(this).parents(".cs-options").removeClass("option-hover");
    });
    $(".cs-select-trigger").on("click", function() {
        $('html').one('click',function() {
            $(".cs-select").removeClass("opened");
        });
        $(this).parents(".cs-select").toggleClass("opened");
        event.stopPropagation();
    });
    $(".cs-option").on("click", function() {
        $(this).parents(".cs-select-wrapper").find("select").val($(this).data("value"));
        $(this).parents(".cs-options").find(".cs-option").removeClass("selection");
        $(this).addClass("selection");
        $(this).parents(".cs-select").removeClass("opened");
        $(this).parents(".cs-select").find(".cs-select-trigger").text($(this).text());
    });
});
 
 
That I want to import into my main  JS file
 
but i keep on getting $ not defined
 

You commented on Martin's post 6 months

But how do you get Jquery to be loaded, i thought its included in the Foundation already, maybe its due to the variable changing 
import $ from 'jquery';import whatInput from 'what-input';window.$ = $;

You commented on Reind Dooyeweerd's post 6 months

Also stuck on this, anyone find a solution it out yet?
 

You commented on Martin's post 6 months

Im also getting this error
 
app.js:22248 Uncaught ReferenceError: $ is not defined
    at Object.<anonymous> (app.js:22248)
    at webpack_require (app.js:20)
    at Object.defineProperty.value (app.js:14485)
    at webpack_require (app.js:20)
    at Object.<anonymous> (app.js:22290)
    at webpack_require (app.js:20)
    at typeof (app.js:66)
    at app.js:69
(anonymous) @ app.js:22248
webpack_require_ @ app.js:20
Object.defineProperty.value @ app.js:14485
webpack_require @ app.js:20
(anonymous) @ app.js:22290
webpack_require @ app.js:20
_typeof @ app.js:66
(anonymous) @ app.js:69

You commented on Kyle De Sousa's post 11 months

Thank you Rafi,
I got all of that, but my question relates more to where do you add the slick.js file, do you have to add it manually in the page template or could one call the node_module to be loaded all in one js file as iIdon't want to have lots of http requests in the header or closing body tag.
 
just like all the scss files are imported to one minified css file 
 
 

You commented on Stacey Irvin's post 11 months

Hi there did you get the slick carousel working with bower
 

You commented on Jules Webb's post 11 months

Hey guys, did you get to do this eventually would love to see how you got it working with block grid 
 

You commented on Kyle De Sousa's post about 1 year

Awesome, thanks man

You commented on huameim10's post about 1 year

test

Posts Followed



Following

  • No Content

Followers