Tabs navigation using HTML5 - javascript

I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>

just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily

Related

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

materializecss collapsible panel with a different html structure

I'm trying to create a custom collapsible panel using materialize but I don't know why the button is not triggering and showing the panel body. I have created a fiddle with my custom example that doesn't work and one materilaize example with their structure that works.
From my inspect I saw that the active class is not being added on panel body while clicking on panel header which is quite strange.
So if anyone can help me with that please ... modifying materialize components is like a pain in the ass !
<div class="collapsible">
<div class="box">
<div class="1left">Left</div>
<div class="2center">Center</div>
<div class="3right">Right
<a class="collapsible-header">Colapse header</a>
</div>
</div>
</div>
<div class="collapsible-body">
This should be the body collapsed
</div
http://jsfiddle.net/zt5515zt/90/
In Materialize you need both collapsible-header and collapsible-body at the same level in order to make Collapsible work.
Just Change the level of you collapsible-body as shown below and it will work.
<a class="collapsible-header">Colapse header</a>
<div class="collapsible-body">
This should be the body collapsed
</div>
Hope this helps you solve the problem.

Change column class of div in bootstrap

I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-
There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV

Refreshing Form or DIV Container in BootStrap Tab on Input Form

I have a Boot-Strap Tab as follows
<html> <head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- INPUT PANEL -->
<div class="CustomSideBar" style="width: 300px ">
<form class="well" method="POST" id="inputForm">
<select name="pickTheSelected" onchange="??????">
<option value="OPTION1">OPTION1</option>
<option value="OPTION2">OPTION2</option>
</select>
</form>
</div>
<!-- BOOT STRAP -->
<ul id="myTab" class="nav nav-tabs">
<li class="active">tab1</li>
<li class="active">tab2</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<!-- IT Can be a Form or Div Container -->
<div class="well" id="LinePlot">
</div>
</div>
<div class="tab-pane fade in active" id="tab2">
<!-- IT Can be a Form or Div Container -->
<div class="well" id="BarPlot">
</div>
</div>
</div>
</body>
</html>
Consider the BootStrap Tab div Container with ID id="LinePlot" or id="BarPlot", plot's a graph based on the Input selected within the form with ID "inputForm"
I have an Idea to Plot data or Graph based on the Input selected.
I am fine with it.
But need information or help on my requirements.
Requirement
1) Based on the Input Change with in Form ID "inputForm"
I need the Active Bootstrap Tab DIV container to be refreshed.
While the Unselected tab should not be refreshed
Example if active Tab is with ID "tab2" on Input change within form with ID "inputForm" I need the div container belonging to "BarPlot" to be refreshed. While div container within the "LinePlot "need not be refershed-
And vice versa if "tab1" is active.
2)
Similarly the Div container should Load only in the Tab is active or Selected. Based on the Selected value in the Form with ID "InputForm".
Hope I have explained my requirement
I am finding it very difficult for me to achieve my requirement
Based on JavaScript. More over I am new to it.
Would it be possible if someone, let me know the way to achieve my requirement.
Either via JavaScript / JQuery or Bootstrap with Ajax.
Thanks and Regards
This is actually not that hard with jquery. You can get the data with the $.ajax() function. Load the data into the target with $("#target-id").html(newContent);. To know which tab is active you can select over the parent, in your case $("#myTabContent div.tab-pane.active") (in your code only one tab should have class active). To get the value of an input: $("#my-input").val(). You don't have to specify any event handlers in html, for this you can use $("...").click(function() {...} ), .change() and so on.

How can I get the scrollbar to stay at the bottom?

I have a web application that performs certain task, and have created a tabbed box in the web app that will print any log information to the designated area.
As you can see from the code below I have three tabs, and when one is clicked I have javascript and jQuery display the div area associated with that tab. Under each div area there is a nested div that will be used for the log to print to.
All is working great other than the scroll bar not staying at the bottom.
I have tried:
HTML:
<div id="main" class="main">
<div id="tabbed-box"class="tabbed-box">
<ul id="tabs" class="tabs">
<li>Tail</li>
<li>Access Log</li>
<li>Conduit Log</li>
</ul>
<div id="tail_box" class="tabbed-content">
<div id="tail_print" class="print-area"></div>
</div>
<div id="access_content" class="tabbed-content">
<div id="access_log_print" class="print-area"></div>
</div>
<div id="log_content" class="tabbed-content">
<div id="log_keywords" class="keywords"></div>
<div id="log_print" class="print-area"></div>
</div>
</div>
jQuery:
document.getElementById("access_log_print").scrollTop = document.getElementById("access_log_print").scrollHeight;
But with no luck. All of the div's with class="print-area" I need the scroll bar to be at the bottom.
If you are using jQuery then you can try this.
$('.print-area').each(function(){
$(this).scrollTop($(this).prop('scrollHeight'));
});

Categories