Porting html to jekyll has some features not function properly

1

I am doing my best, being a novice to port

template : luique-personal-portfolio-template

to a jekyll page : zarir

problem is the

  1. navbar is not turning transparent ( it is transparent in the template )
  2. light theme turns to dark theme but the moon lit sign disappears ( most likely to do with the navbar issue )
  3. web page is sizing doubly
  4. mouse pointer disappears in the process of porting.

code is : GitHub - zarirengineer/buildyourhome

You must excuse my silly questions , although i have been working with python, this is relatively new. Any help is much needed. Thank you

2

if you right click on your web page (anywhere) and choose Inspect a new panel should open up. One of the tabs in that panel will say Console. If you click on that tab you will see an error about jquery.

My guess is jquery is required for something but it is not loading properly and that is causing weird things to happen.

Not sure how to fix it, but maybe that can point you in the right direction? one possible issue might be when it is loaded. The order in which you load js files can be important.

jquery for the most part shouldn’t be needed these days, personally I would stay away from anything that requires it but that said there isn’t anything wrong with it and it should work if it is all setup properly.

1 Like
3

Thank you for your reply. But the points mentioned above and the error in console are two different things. I am missing something fundamentally in porting to jekyll that causes

  1. the navbar area to be not transparent
  2. make mouse pointer disappear
  3. increase page width to almost double

Any help here is needed and contribution appreciated.

Thank you

4

The most fundamental thing is how jekyll works, and it works by converting a set of templates into a fully html site, that is why it is a static site generator. Even though your problems happened because you are migrating it to jekyll, they are not jekyll related, meaning these are more likely css/js problems that happen after the jekyll build. That’s why @rdyar pointed to the Console tab.

Checking the Console tab will give you a hint about what these problems are, and some may be caused by the jekyll build doing things you are not expecting with the css/js files.

5

Thank you for all replies. This issue is resolved but I am facing another bottleneck in same direction i.e.

Neither css files not js files are getting loaded on the html page.

For example,

In _layouts/base.html

common-css:

  • “/assets/css/vendors/bootstrap.css”
  • “/assets/fonts/font-awesome/css/font-awesome.css”
  • “/assets/css/vendors/magnific-popup.css”
  • “/assets/css/vendors/splitting.css”
  • “/assets/css/vendors/swiper.css”
  • “/assets/css/vendors/animate.css”
  • “/assets/css/style.css”
  • “/assets/css/dark.css”

In _includes/head.html

  {% if layout.common-css %}
    {% for css in layout.common-css %}
      <link rel="stylesheet" href="{{ css | relative_url }}">
    {% endfor %}
  {% endif %}

And same applies for js scripts.

Code is here : GitHub - zarirengineer/woh-haina

I have created a new sub domain

I can create another ticket if so required. Otherwise what am I missing here.

6

when you do that what does it output? nothing? or a broken link? does the dev tools console show errors?

what is layout.common-css?

7

moving forward, @rdyar , the page now loads ( missing were two files in _includes )

_includes/ext-js.html
_includes/ext-css.html

Now the page attempts to load but gives these errors.

jquery-3.5.1.slim.min.js:2 Uncaught TypeError: $.cookie is not a function
common.js:19 Uncaught TypeError: preload.find(...).fadeOut is not a function

Also inside base.html frontmatter are variables


---
common-css:
  - "/assets/css/vendors/bootstrap.css"
  - "/assets/fonts/font-awesome/css/font-awesome.css"
  - "/assets/css/vendors/magnific-popup.css"
  - "/assets/css/vendors/splitting.css"
  - "/assets/css/vendors/swiper.css"
  - "/assets/css/vendors/animate.css"
  - "/assets/css/style.css"
  - "/assets/css/dark.css"

common-ext-css:
  - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    sri: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
  - "https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
  - "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"

common-ext-js:
  - href: "https://code.jquery.com/jquery-3.5.1.slim.min.js"
    sri: "sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  - href: "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    sri: "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    sri: "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"

common-js:
  - "/assets/js/common.js"
  - "/assets/js/jquery.min.js"
  - "/assets/js/jquery.validate.min.js"
  - "/assets/js/bootstrap.js"
  - "/assets/js/swiper.js"
  - "/assets/js/splitting.js"
  - "/assets/js/jarallax.min.js"
  - "/assets/js/magnific-popup.js"
  - "/assets/js/imagesloaded.pkgd.js"
  - "/assets/js/isotope.pkgd.js"
  - "/assets/js/jquery.scrolla.js"
  - "/assets/js/skrollr.js"
  - "/assets/js/jquery.cookie.js"
  - "/assets/js/typed.js"

---

In ext-js.html , condition includes.js.href is not met.

question is

  1. How to trouble shoot the above errors ?
  2. How to ensure all values are executed, viz includes.js.href ?

note: layout.common-css is working. ( view page source )

8

you probably need to pay attention to what order you load the js files in. If you load something that references jquery before jquery is loaded then I think you get errors like that.

The more files you have the harder this can be to manage if you don’t know exactly what each one is doing.

In your common js list you have the .cookie.js file listed near the end, my guess is that is part of the problem. Though you have so many jquery related files it may not be your only problem.

9

Moving further on, @rdyar , for now, the page shows up correctly as i have added all .js code direct in the page. please see woh-haina

However the light-theme, dark-theme on top right corner and menu options line do not work.

I could again open a new ticket but by now I think this is the place to put all issues together.

Any inputs or clues in line of direction that will make it work, are needed.

Thank you

10

no idea but I would assume it is a JS error. Maybe you missed a file? though there are no errors.

There still can be issues with where you load the JS on the page - in addition to the order the JS loads. If you load the JS first but then want to refer to an element on the page then I think it may not work? Not sure if this is the issue or not but could be.