creating a webpage with jQuery UI tabs and a side navigation bar

I've been working on creating a menu tab with a navigation bar on the same page within a web form using asp.net C#. The "Home" tab works fine, but I'm having trouble with the "Study Setup" tab. Here is the HTML code from the content page where the Jquery UI library is utilized. Any advice would be greatly appreciated. Thank you.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TestTabs.aspx.cs" Inherits="ImageTableEditorNew.TestTabs" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.11.3.js"></script>

  <script src="//code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
    <style>
#tabs-left{
        position:relative;
        padding-left: 6.5em;
}
#tabs-left2 {
        position:relative;
        padding-left: 6.5em;
}
#tabs-left .ui-tabs-nav
 {
    position: absolute;
    left: 0.25em;
    top: 0.25em;
    bottom: 0.25em;
    width: 9em;
    padding: 0.2em 0 0.2em 0.2em;
}
#tabs-left2 .ui-tabs-nav2
 {
    position: absolute;
    left: 0.25em;
    top: 0.25em;
    bottom: 0.25em;
    width: 9em;
    padding: 0.2em 0 0.2em 0.2em;
}
#tabs-left .ui-tabs-nav li
 {
    right: 1px;
    width: 100%;
    border-right: none;
    border-bottom-width: 1px !important;
    -moz-border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px  0px 4px;
    border-radius: 4px 0px 0px 4px;
    overflow: hidden;
}
#tabs-left2 .ui-tabs-nav2 li
 {
    right: 1px;
    width: 100%;
    border-right: none;
    border-bottom-width: 1px !important;
    -moz-border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px  0px 4px;
    border-radius: 4px 0px 0px 4px;
    overflow: hidden;
}
#tabs-left .ui-tabs-nav li.ui-tabs_selected,
#tabs-left .ui-tabs-nav li.ui-state-active
 {
    border-right: 1px solid transparent;
}
#tabs-left2 .ui-tabs-nav2 li.ui-tabs_selected,
#tabs-left2 .ui-tabs-nav2 li.ui-state-active

 {
    border-right: 1px solid transparent;
}
#tabs-left .ui-tabs-nav li a
 {
    float: right;
...
$(function() {
    $( "#tabs" ).tabs();
    $("#tabs-left").tabs();
    $("#tabs-left2").tabs();

});

                  </script>
</asp:Content>
javascriptc#jqueryhtmlcss

Answer №1

It's imperative that you familiarize yourself with the class selector concept. There seems to be a minor oversight in not applying the necessary css for that menu. Instead of duplicating the css for each id, consider utilizing the class selector.

.tabs-left {
  position: relative;
  padding-left: 6.5em;
}

... (omitted for brevity)

.tabs-left .ui-tabs-panel {
  height: 40em;
}

.nested-tabs {
  margin-left: 150px;
}
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TestTabs.aspx.cs" Inherits="ImageTableEditorNew.TestTabs" %>
  <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css">

... (omitted for brevity)

</script>
  </asp:Content>

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

Retrieve the value of a paragraph within a cell by clicking on the cell itself

I need assistance with detecting tapping on td elements. Specifically, I want to retrieve the value of one of the p tags (cal_date) when tapped. How can I achieve this? Here is my current jQuery code: $( document ).on ( "tap", "td", function(event) { ...

javascriptjqueryhtml

Enhancing User Experience with Real-Time Control Updates using ASP.Net and Bootstrap

I am struggling to figure out how to update bootstrap controls with ASP.Net. Here is the code I am working with: @{ Layout = null; } <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width ...

javascriptc#asp.netasp.net-mvctwitter-bootstrap

Converting a .NET object into JSON format

I've been struggling with serializing a .NET object to JSON. Despite trying the code below, I keep getting a blank result. Can anyone point out what I might be doing wrong? [DataContract] public class JsonObject2 { [DataMe ...

c#.netjsonserialization

Testing the screen size automatically using Javascript

Hello everyone, I've implemented a JavaScript code that triggers an image to slowly appear and darken the background when a link is clicked. However, on an iPad, the background doesn't completely turn black as intended. The CSS specifies that the ...

javascriptcssipadhtml

Removing various data entries based on timestamp and additional fields in Firebase Firestore

I stumbled upon a similar query before. Being new to coding, I am attempting to remove all documents in the "users" collection that are older than 1 month and not marked as premium. The deletion criteria involve checking if the "user_online" field is at le ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

When setting an empty URL with Fabricjs' setBackgroundImage function, a null reference error occurs in the _setWidthHeight

Recently, I stumbled upon an article detailing a method to clear the background of a fabric canvas... canvas.setBackgroundImage('', canvas.renderAll.bind(canvas)); In the development of my online design tool which utilizes Fabricjs 1.4.4, I have ...

javascripthtmlfabricjs

Sharing the checkbox's checked status with an AJAX script

I am faced with a challenge involving a table that contains checkboxes in the first column. When a checkbox is checked, it triggers an AJAX script that updates a PHP session variable with the selected values. The functionality is currently operational, but ...

javascriptjqueryajaxcheckbox

Dynamic implementation of INotifyChangedProperty

Many tutorials suggest writing a method like this: private void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } ...

c#.netmvvmmetaprogramming

Efficiently transfer items between windows forms in C# using this guide

I have a ListView in my Windows form that loads with personnel objects when the form is loaded. I would like to have it so that when a user double-clicks on a ListView item, the personnel object from the ListView.SelectedItem property is retrieved and tran ...

c#.netwinforms

Transmitting various form data using jQuery Ajax Requests

I am facing a challenge with sending data from two forms using a jQuery Ajax call. I have successfully sent data from one form but I am struggling to send data from both forms in a single Ajax call. The structure of my forms is as follows: <form id="f ...

jqueryajax

Tips for applying various CSS properties to a single element using styled-components

Is there a way to style similar elements differently using different CSS properties in styled components? For example: <div></div> <div></div> With the knowledge I have, I can do: export const StyledDiv = styled.div` color: red; ` ...

javascripthtmlcssreactjsstyled-components

Is it possible to integrate Wavify with React for a seamless user experience?

For my website designs, I have been experimenting with a JavaScript library known as Wavify (https://github.com/peacepostman/wavify) to incorporate wave animations. Recently delving into the world of React, I pondered whether I could integrate Wavify into ...

javascriptnode.jsreactjsgsap

What is the most effective way to append a new key-value pair to the end of an OrderedMap?

Possible duplicate: Adding Items in OrderedMap using Immutable.js Utilizing redux store and Immutable js with OrderedMap. Structure of Redux store: { "app": { "name": "Test app", "dataPack":{ "chemID": "aaaa", ...

javascriptreactjsreduximmutable.jsordered-map

Transform an array into an object utilizing only underscore

I'm currently learning about underscore and came across a task that I could use some assistance with. I have an array containing objects like the following: [ // ... { "type": "presence", "params": { "i ...

javascriptarraysunderscore.js

Struggling to grasp the concept of fit-content? Let me

For my personal project, I am creating a simple react webpage. To incorporate zoom capabilities, I decided to use the library called React-zoom-pan-pinch. Initially, without implementing this library, my SVG element filled the screen in red, which was the ...

htmlcssreactjssvg

What is the best way to consistently resize elements to the same pixel value, like "10px", using jquery-ui?

Is there a method to consistently resize a div element by a specific pixel value each time, such as "10px"? I am attempting to achieve this using jquery-ui, where I can resize the element but desire to resize it consistently by a set pixel value. $(child ...

javascriptjqueryhtmljquery-ui

What could be the reason for the error message when using rs.send with a string input?

I'm a beginner in node and express, and I was trying to create an HTML form that takes two numbers and displays the result using "express" and "node". However, when I use rs.send(result), I encounter the following error: https://i.sstatic.net/FcUNJ.p ...

javascriptnode.jsexpress

Python: Change text within HTML content rather than the HTML tags

Looking for help with converting HTML code? <pre class="script">template("main/GlobalShared");</pre> <pre class="script"> var link = '/Draft/Tracker_1.1'; if (wiki.pageexists(link)) { &lt;div class="version"&gt; web ...

pythonhtmlregexmindtouch

Pause jQuery at the conclusion and head back to the beginning

As a beginner in the world of jQuery, I am eager to create a slider for my website. My goal is to design a slideshow that can loop infinitely with simplicity. Should I manually count the number of <li> elements or images, calculate their width, and ...

javascriptjqueryhtmlcssslideshow

Automatically open the first panel of the Jquery Accordion

Is there a way to automatically have the first panel in my JQuery accordion open when all panels are initially closed? Here is the HTML code for my accordion: <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> ...

javascriptjqueryhtmlaccordion