I want create a menubar. when mouse is over a menu, a div appairs.
<li class="elementoMenu jmenu" tipomenu="jmcerca">
<div class="tleft"></div>
<div class="tabs">
<div class="inner">
FIND
</div>
</div>
<!-- DIV THATH WILL BE APPAIRS IS MOVED HERE-->
<div class="tright"></div>
</li>
The DIV that will be appears is moved where in place of comment via .appendTo jQuery function.
This is the div that appears:
<div id="jmcerca" class="jmenuOpen" style="width:600px;height:500px">
TITLE
<select class="jmenu noProp">
<option>1M</option>
<option>3M</option>
<option>5M</option>
</select>
FIND <input> </input>
<button>GO</button>
</div>
I have binded the event in this way:
$(document).ready(function(){
$('li.jmenu').mouseenter(jMenu.showMenu);
$('li.jmenu').mouseleave(jMenu.leaveTabs);
});
where showMenu and leaveTabs are function that show or hide the div.
It works fine, but when I click on select the option of select and disappears.
Any suggestions?
Thanks
Related
I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}
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.
So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!
kindly take a look at my HTML code below:
<div class="accordion">
<ul>
<li class="box1">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box2">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box3">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
</ul>
</div>
Basically it's an accordion powered by a jQuery plugin. It has 3 boxes and depending on which box the user is hovering on, I wish to have the inner divs (normal, expanded, hidden) shown or hidden. Here are the scenarios:
On default, all div.normal will be shown by default, div.expanded and div.hidden will be hidden.
When user hovers on li.box1 for example, its div.expanded will be shown and div.normal and div.hidden will be hidden. For li.box2 and li.box3 then however, only div.hidden will be shown respectively, the rest of the divs will be hidden.
I have begun with the code but I don't think it's going anywhere. (I am a designer, you see.)
It sounds complicated but I know it can be easily done via jQuery, to anyone who can help, I'd really appreciate it.
UPDATE:
Here's what I've done so far.
$(document).ready(function () {
$(".accordion li").hover(function () {
$(this).siblings().children(".normal").hide();
$(this).siblings()..children(".hidden").delay(700).show();
$(this).children(".expanded").delay(700).show();
}, function () {
$(this).siblings().children(".normal").delay(700).fadeIn("fast");
$(this).siblings().children(".hidden").fadeOut("fast");
$(this).children(".expanded").fadeOut("fast");
});
});
You can initially hide divs by using style='display:none'
for hover event;
$("li.box1").hover(function(){
$(this).find('.expanded').show();
$(this).find('.hidden').show();
$(this).find('.normal').hide();
});
$(document).ready(function(){
$('.expanded').hide();
$('.box1').hover(function(){
$('.expanded').show();
});
});
This is how you can hide and show DOM elements in jQuery. Please get that set according to the way you want it to be.
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'));
});