Step-by-step guide to enabling native Bootstrap 2.3.2 JavaScript elements within Liferay

In my web development project, I am working with Liferay 6.2 and utilizing Alloy UI's version of Bootstrap in the html pages by adding these lines:

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>

I am trying to implement Bootstrap's responsive navbar within my html, similar to the example on the Bootstrap website. However, this requires the jquery collapse plugin to be included. Unfortunately, my boss has instructed that we should not include jquery and should rely solely on YUI. Although Alloy UI offers several Bootstrap equivalent jquery components like Modal, TabView, Accordion, etc., I am struggling to get a mobile responsive navbar functioning without jQuery. Is there any workaround to achieve this feature without adding jQuery and Bootstrap as a Module within YUI?

javascripttwitter-bootstrapliferayliferay-6alloy-ui

Answer №1

In order to make a Liferay theme responsive, there is no need for the JavaScript portion of Bootstrap.

Liferay 6.2 comes with Bootstrap 2.3 but without the JavaScript part, making it unnecessary for achieving a responsive navigation bar as it is solely a CSS matter.

The Classic theme already includes responsiveness, so you can simply copy from it.

Answer №2

This JavaScript snippet is utilized to toggle the responsive navbar menu using AlloyUI, avoiding the use of jQuery/collapse. It appears to function properly on the default browsers of Android and iOS.

YUI().use(
    'aui-node',
    function (Y) {
        var navbarButton = Y.one(".btn-navbar");
        var navbarCollapse = Y.one(".nav-collapse");

        navbarButton.on('click', function (e) {
            if (navbarCollapse.hasClass("in")) {
                navbarCollapse.removeClass("in");
                navbarCollapse.setStyle("height", "0px");
            } else {
                navbarCollapse.addClass("in");
                navbarCollapse.setStyle("height", "auto");
            }
        });
    }
);

In addition, I have configured the responsive navbar using this code. I made modifications to the original example by removing the data-toggle and data-target attributes from the navbar button.

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">

            <a class="btn btn-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="brand" href="#">Project name</a>

            <div class="nav-collapse collapse">
                <!-- .nav, .navbar-search, .navbar-form, etc -->
            </div>

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

I am unsure if this solution fully meets your requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manage the number of choices available on a drop-down selection form

I am working with a PHP variable $a of an integer type. Based on the value assigned to $a, I want certain options to be visible in a form. For example, if $a=1; then only the first two options should be displayed, and if $a=2; then the first three option ...

javascriptphpjqueryforms

updating the count of items in a react virtual list

Popular libraries such as react-virtualized, react-window, and react-virtuoso all include an item count property similar to the one shown in the code snippet below from material-ui. However, this property is typically located within the return statement. ...

javascriptreactjsmaterial-ui

Unable to establish React API communication on cloud-based IDE for MERN Stack development

Exploring the MERN stack through this informative tutorial: https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1 I've opted to use goorm IDE, a cloud platform similar to cloud 9 IDE. As I pro ...

javascriptnode.jsreactjsexpress

A guide to crafting a fresh WordPress post with the help of the wpapi library for Node.js

After attempting to use the wpapi module to generate a post in WordPress, I encountered a puzzling issue. Despite receiving a 200 Success response, the request body was empty and no post was actually created. var wp = new WPAPI({ endpoint: 'http:/ ...

javascriptnode.jswordpressrestapi

Communicating through Socket.io between various Node.js routes

Building a Node.js application that utilizes the Express Framework and Socket.io has presented me with a challenge. I am struggling to receive messages from the server across different express routes. Is there a method for receiving messages sent from one ...

javascripthtmlnode.jsexpresssocket.io

Ways to determine the completion of the compilation process in Angular using the $compile service

Imagine having a popup directive that inherits a string template for the content it should display from the $scope. scope: { template: '=popInfo'//<div another directive></div> } This template string may even include another dire ...

javascriptangularjsangularjs-directive

Utilizing JSONLOADER in Three.js allows for efficient loading and

Currently, I am using JSONloader in three.js to load models and it works perfectly. However, I am struggling to find detailed steps or documentation on how to preload textures (which are images) in order to create an interactive feature where I can switc ...

javascriptthree.js

Stop ajax request when select2 is clicked

Is there a way to change the ajax call behavior in select2 drop down items so that it only retrieves data when I start typing in the search box, and not on click of the element? Your guidance on this issue would be highly appreciated. $("#ddlItems").sel ...

javascriptjqueryjquery-select2

What is the preferred method for transferring server-side data to JavaScript: Using Scriplets or making an AJAX call?

At the server side, there is a property file that contains a list of words separated by commas. words.for.js=some,comma,separated,words The goal is to convert these words into a JavaScript array. var words = [some,comma,separated,words]; There are two ...

javajavascriptajaxjspscriptlet

Unable to arrange an array of JavaScript objects retrieved via an Angular REST request

I'm currently encountering an unusual issue with sorting an array of JavaScript objects. While sorting some dummy data works fine, I am unable to sort the array when fetching the object through an Angular REST call. The structure of the message is as ...

javascriptjsonangularjs

Navigating to a different page in the app following a document update: a step-by-step guide

I am facing an issue with a page where I am trying to print a specific DIV using the script below... function printReceiptDiv() { var divElements; if (vm.isDLR) { divElements = document.getElementById("DLRreportCont ...

javascriptjqueryhtmldom

Check and validate the adjacent field whenever a change is detected in this field in Angular

Currently, I have a select menu with options and a text field that accepts numerical input. The text field needs to adhere to specific ranges based on the selection from the select menu, which is managed through custom validation. My dilemma lies in trigge ...

javascriptangularjsvalidation

Testing the capabilities of AngularJS with e2e testing using the angular-recaptcha library

I have been attempting to e2e test my basic application, but I am facing challenges with the angular-recaptcha plugin from VividCortex (https://github.com/VividCortex/angular-recaptcha). Here is the test case I am working on: it('should redirect t ...

javascriptangularjsseleniumprotractor

Best practice for integrating configuration settings into a Redux application

One essential step before launching my application is to read the config.json file. This file contains the URLs to my backend services, which will be utilized in my Redux action creators. I have contemplated two different approaches: Fetching the JSON a ...

javascriptreactjswebpackredux

"Interactive elements like dropdown menus and clickable buttons that transform the content of an HTML

My webpage includes three buttons that, when clicked, reveal hidden div elements containing forms. Here is the HTML code for the buttons: <button id="edituser" type="submit" onclick="toggle_visibility('c');" style="border:0;width:100px;margin ...

javascriptjqueryhtml

An error occurs when attempting to assign a value to a MUI file TextField

Struggling with setting the value of a MUI Textfield that has type="file" props, resulting in the following exception being thrown: Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable Interest ...

javascripthtmlreactjsmaterial-ui

Using JavaScript within HTML documents

Need help with inserting JavaScript code from Google: <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1362706866260-0'); }); </script> into existing JavaScript / HTML code: va ...

javascriptjqueryhtmlwordpress

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website. The main text in the center needs to change every 60 seconds. I have over 150 individual lines of text that I want to cycle through on the page. What would be the most efficient way to load all these te ...

javascriptcssajaxhtml

What causes certain files to sporadically duplicate themselves in Visual Studio Code?

While using vscode for NodeJS development, I have noticed that certain files seem to duplicate themselves sporadically. Why is this happening and what steps can I take to resolve it? I am unsure of how to tackle this issue... ...

javascriptnode.jsvisual-studio-codetailwind-cssvscode-extensions

React and Express are incompatible due to the error message "TypeError: undefined is not a function

I am attempting to display the data from this array on my website using react and express: [{"LocationName":"LIBERTY DOGS","Address":"105 Greenwood Ave N, Seattle WA","Available":"Y"},{"LocationName":"FREEDOM DOGS","Address":"105 Greenwood Ave N, Seattle ...

javascriptsqlreactjsexpress