How to display a div over other containts of an html page? - javascript

I am new to html and css,I have created a div that contains citynames.
I am trying to display that div on a button click.But when i click on button then that div gets hidden behind the next section of my page.
here is the image it looks like:
but i want to display that div over the section bellow that div and not behind. For getting more idea how i want ot display see askme.com and click on 'rest of india' dropdown button.
here is my html code:
<!--start SearchBox section-->
<section id="searchbox"style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form style="">
<center>
<div id="SearchBoxBorder" style="background:white;border-style:soli;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
</div></center>
</td>
<td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" placeholder="in locality"
style="border-width:5px;background:white; margin-top:2px; margin-left:10px; margin-right:20px;width:;font-size:18px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px;">
<div class="input-group-btn" >
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownBtn"
style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
border-color:#eee;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;margin-top:2px;">Select<span class="caret"></span></button>
<!--City dropdown -->
<div class="SearchCities" id="dialog" title="Basic dialog" >
<div id="outer" style="">
<div id="innerLeft" style="">
<h5 >North India:</h5>
<ul class="city" type="none";>
<li><a>Delhi</a></li>
<li><a>Agra</a></li>
<li><a>Shrinagar</a></li>
<li><a>Noida</a></li>
<li><a>Himachal</a></li>
<li><a>Patna</a></li>
</ul>
</div>
<div id="innerRight" style="">
<a class="close">×</a>
<h5>West India:</h5>
<ul class="city" type="none";>
<li><a>Mumbai</a></li>
<li><a>Pune</a></li>
<li><a>Nashik</a></li>
<li><a>Kolhapur</a></li>
<li><a>Osmanabad</a></li>
<li><a>Ahamdabad</a></li>
</ul>
</div>
</div><!--/outer-->
</div><!--/SearchCities-->
</div><!-- /btn-group -->
<button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i> Search</button>
</div><!-- /input-group -->
</center>
</td>
</table>
</center>
</form>
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/end of container-->
</section>
<!--End of SearchBox section-->
and following is my css for displaying that div:
.SearchCities {
float: right;
position:absolute;
margin-top:3px;
top: 100%;
right:20px;
}
so please help me ,and suggest any solution to achive above mentioned. .
Thank u in advence.
I have added .searchCiries{z-index:1;} and here is my output:
I dont want the city names come out of the container div.So please suggest any correction

In css add a z-index value like say : z-index:100

You should put
z-index: 9990;
in your div's class. This CSS option will bring your div to the front (unless value of z-index of other elements is more than 9990, the maximum value is 9999).
http://www.w3schools.com/cssref/pr_pos_z-index.asp

Related

Button's message pop up without click

This is a screenshot of a normal google search
I'm trying to get the tiny message box when you go to the mic icon on Google search engine. I want to incorporate that to my bootstrap buttons. Following is the code where i want to add a similar message box on Connect and Disconnect button.
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-6">
<br>
<img style="width:30%" src="icon1.jpg">
<br>
<br>
<button type="button" class="btn btn-success" >
<a style="color:white;" href= "options.html" >
Connect
</a>
</button>
</div>
<div class = "col-12 col-sm-6 col-md-6 ">
<br>
<img style="width:30%" class="float-right" src="icon1.jpg" >
<br>
<br>
<br>
<br>
<br>
<div class ="text-right">
<button type="button" class="btn btn-danger ">
<a style="color:white;" href= "options.html" >
Disconnect
</a>
</button>
</div>
</div>
</div>
</div>
What you're looking for are tooltips. Check out bootstrap's documentation about them here.
You can follow this code with bootstrap. use data-toggle="tooltip" to your button from where you want hover, title is the tooltip/popup and add below script to the footer. For more follow the link https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
Hover over me
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Auto click button if style display is block

everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

Using meteor js to change the text dynamically

Please check the image for reference
The editable div is added using tags and text. Text is inputted by the user. The tags are selected from the two boxes above them.
When the data in the tags is changed then the tags selection list data is also changed accordingly.
But the data in the content-editable div remains same. I need it to also change accordingly or notify missing when deleted.
I am using Meteor JS and Blaze , React for this . I took some reference from this fiddle link
"click .selectable-tags"(e, t) {
// sets the tags inside the Method box on click
let el = e.target.cloneNode(true);
el.setAttribute('contenteditable', false);
document.querySelector('[contenteditable]').appendChild(el);
},
<div class="recipe_create_form_input_lable">Ing</div>
<div class="ingredients-list">
{{#each ing}}
<div class="ingredients-div" id="ing_parent_{{#index}}">
<div class="ing-list-box-left">
<input type="text" value="{{this}}" placeholder="Ing " class="ree-create-text_box_rectangle ingredient_input" id="ing_{{#index}}"> <span class="timeLable"></span>
</div>
<div class="ings-list-box-right">
<button type="button" class="btn btn-default delete-ing-btn" style="margin-left : 5px;">
<!-- <img src="/images/remove-copy-2.svg" style="width:30px;"/> -->
<label style="width:30px;height: 18px;">x</label>
</button>
</div>
</div>
{{/each}}
</div>
{{#each stepList}}
<div class="step-div" id="step_{{#index}}">
<div class="step-list-box-left">
<div class="rec_create_form_input_lable stepLabel">Step {{getStepNo(#index)}}</div>
<div value="{{this}}" id="step_input_{{#index}}" name="step" class="rec-create-text_box_rectangle stepbox step_input" contenteditable="true"></div>
</div>
<div class="step-list-box-right">
<button type="button" class="btn btn-default delete-step-btn" style="margin-left : 5px;">
<label style="width:30px;height: 18px;">x</label>
</button>
</div>
</div>
<div class="showbiz">
<div class="custom-input">
<div class="selectable-tags">
{{#each ing }}
<span style=" background: #E1ECF4;border: 1px dotted #39739d;" class="ingredients-tags"> {{this}} </span>
{{/each}}
</div> </div>
</div>
{{/each}}
<div>

Unable to add vertical scroll bar in html?

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
i am working on news feed module . I have two div's ,in first div (left-side) list of all news title is displayed and on right side div the description and image about that title is shown.But i am not able to add vertical scroll bar on left-side div(title-div),if i apply div then it goes to every particular title only.and second one is when page is load the first title, description will automatically load, so how to do this two things?
Add a wrapper.
The overflow scroll goes to all tittle because the title class is inside ng-repeat and thus is repeated for every individual title.
Add another wrapper div outside ng-repeat and apply overflow scroll to that.
<div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
And add overflow:scroll to wrapper.
.wrapper {
overflow:scroll;
}
Note that this will create scroll for both title and text combined. Since they are in single wrapper. If you want different then, you will have to create two different wrappers with two different ng-repeat.

Loading a tab on button click

I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)
I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});

Categories