I have a bootstrap modal window and I want to hide a div element using javascript.
The bootstrap window is
<div class="modal hide editdialog" id="edit-dialog" data-backdrop="static" style="margin-top: -370px">
<div class="modal-header">
<div style="float: right; margin-right: 2px">
<a id="maximizebuttoneditor" href="#" onclick="maximizeEditor()" rel="tooltip" title="<spring:message code="label.Maximize" />"><i class="icon icon-fullscreen"></i></a>
<a id="restoredownbuttoneditor" style="display: none" href="#" onclick="restoreDownEditor()" rel="tooltip" title="<spring:message code="label.RestoreDown" />"><i class="icon icon-resize-small"></i></a>
</div>
<span id="edit-dialog-title"><spring:message code="label.Edit" /></span>
</div>
<div class="modal-body" style="max-height: 610px; height: 610px;">
<ul class="nav nav-tabs" id="edit-dialog-tabs">
<li><spring:message code="label.General" /></li>
<li id="question-dialog-advanced-tab"><spring:message code="label.Advanced" /></li>
<li><spring:message code="label.Dependencies" /></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="general" >
<div style="margin-top: 20px;" class="general-regex-dialog-questions" id="general-regex-dialog-questions">
<span class="overview-label"><spring:message code="label.RegEx" /></span><br />
<input id="question-dialog-regex" type="text" maxlength="255" />
<span id="question-dialog-regex-invalid" class="validation-error hide"><spring:message code="validation.NoRegExPattern" /></span>
</div>
</div>
<div class="tab-pane" id="advanced">
</div>
<div class="tab-pane" id="dependencies">
</div>
</div>
</div>
<div class="modal-footer">
<a id="btnEditOk" onclick="updateSurvey();" class="btn btn-info"><spring:message code="label.OK" /></a>
<a id="btnEditCancel" class="btn" onclick="selectedElement = null;$('#edit-dialog').modal('hide');"><spring:message code="label.Cancel" /></a>
</div>
</div>
I want to hide the div general-regex-dialog-questions
I use the following javascript code
$("#general-regex-dialog-questions").css({"display": "none !important"});
The div element isn't hidden.
I dont't understand why.
Maybe because it is inside the modal.
You can try it like this:
$(window).ready(function(){
$("#edit-dialog").find("#general-regex-dialog-questions").hide();
//or
$("#edit-dialog").find("#general-regex-dialog-questions").css({"display": "none"});
});
Hope it will help.
This syntax {"display": "none !important"} doesn't work because of the !important.
If you leave out the !important it works fine.
However, if you want to set the importance as well, you can set it like this:
$( '.foo' ).each(function () {
this.style.setProperty( 'display', 'none', 'important' );
});
To hide an element using jquery, you should use the .hide() method. If you want to show it back use .show().
If you might switch beetween the two you could also use .toggle() that will alternate the state (hidden/visible).
If it's still not working, try printing something when calling your event function to make sure your .hide() is called or print out the result of the selection $("#...")
$("#test").click( function(e){
$("#test").hide();
} );
function show() {
$("#test").show()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Title </h1>
<button onclick="show()">Show it back</button>
<div id="test" style="background-color: #CCC">
<h2>Bunch of stuff</h2>
<p>Blabla blabla blabla <br>
Click on me to make me disappear </p>
<span> I'm a span and I dissapear too </span>
</div>
<p> Bunch of stuff that will not disappear neither </p>
Related
I have create a button via Javascript.
JS Code:
var print_via_pos_button = this.add_action_button({
label: _t('Print via POS'),
name: 'pos_print',
click: function(){
//functionalities
}
});
HTML Code:
NOTE: The is dynamically created and i dont have access to change it.
<div class="pos-actionbar">
<ul class="pos-actionbar-button-list">
<li class="button ">
<div class="icon">
<img src="/point_of_sale/static/src/img/icons/png48/printer.png">
<div class="iconlabel">Print</div>
</div>
</li><li class="button ">
<div class="icon">
<img src="/point_of_sale/static/src/img/icons/png48/go-next.png">
<div class="iconlabel">Next Order</div>
</div>
</li><li class="button ">
<div class="label">
Print via POS
</div>
</li></ul>
</div>
Output:
The 3rd button in the row is Custom and i want to auto-tiggert it on screen initialize, but the problem is and the 3 buttons has the same classes, i think to add a id but name tag didnt add anything inline, so how can i trigger the button. Any solution?
Thanks in Advance
I'm trying to create a one page scrolling site without using a plugin. Following this tutorial https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2
The links work but there is no scrolling effect, it just jumps to the section.
JS
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
HTML (updated to remove errors)
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info"></a>
//CONTENT
</div>
<div class="full-column" id="tiles">
<a id="events"></a>
//CONTENT
</div>
<div id="contact">
<a id="contact"></a>
</div>
</div>
Hey here's the Fiddle which is working.
https://jsfiddle.net/fj1dfcsr/2/
Errors I've encountered.
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome" href="#"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info" href="#">INfo</a> //Here, you have used </div> instead of </a>
</div>
<div class="full-column" id="tiles">
<a id="events" href="#"></a> //Here also, you have used </div> instead of </a>
</div>
<div id="contact">
</div>
</div>
Few things you should keep in mind that you are calling a particular div whose id you know.
For example
<div id="home"></div>
then you'll have to use Home
not <a id="#home"> Home </a> //Wrong way
There are a lot of mistakes in the code you presented,so it's hard to tell what your original problem was. Here's a working fiddle based on your example.
https://jsfiddle.net/1dqhqpet/1/
I used the id attribute on anchors you place in the document to identify the location of a field you want to "go to". I also didn't put the content inside the anchor tags, because that is not how you do that normally. The anchor tag is a marker. But I don't see why that would be too much of a problem (although with the href on the anchor tag that would turn the whole text into a link). As you can see, since I didn't have access to your images I put some filler content in so you can see it scroll, but again, that shouldn't really affect anything.
It's likely your problem is not in the code you presented.
Some further notes on your code:
I know it was copy pasted, but you have an extra </div> after each //Content comment which makes it not working HTML
Your anchors that are used to identify the location of portions of the document don't need href attributes either. All they need is id. So
<a id="welcome" href="#"></a>
in your example becomes
<a id="welcome"></a>
Note that the content shouldn't go in the anchor tag either. It should go under it. The anchor is just like a bookmark to identify a portion of the page.
Based on how this works, the JQuery is only there to provide "smooth" scrolling. It works just fine without it.
I have the code below that should display the chat window when I click on the user name in <li>
Code <ul> which contains the User list and received the click
<ul class="chat-contacts">
<li class="online" data-user-id="USERCODE">
<a href="#">
<div class="media">
<div class="media-body">
<div class="contact-name">USERNAME</div>
</div>
</div>
</a>
</li>
</ul>
This is the chat window code. If I put a static content of the <ul> window appears, however when I feed the the <ul> with content dynamic the click does not work. Can someone help me??
<script id="chat-window-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
</div>
<div class="panel-body" id="chat-bill">
</div>
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" />
</form>
</div>
</script>
Your click event is not working. The event doesn't know the element exists.
This can happen when using jQuery('.chat-contacts li').click(function(){// do something})
I would try setting the click event with this:
jQuery(document).on('click', '.chat-contacts li', function(){
});
Setting the event with on will force jQuery to scan for new elements in the list.
Currently I have the below HTML elements.
<div class="ow_box_empty ow_stdmargin clearfix">
<div id="avatar-console" class="ow_avatar_console ow_center">
<div style="height: 190px; background: url(7.jpg) no-repeat;>
<div style="display: none;" id="avatar-change">
Change Avatar
</div>
</div>
<div class="user_online_wrap">
<div class="ow_miniic_live"><span class="ow_live_on"></span></div>
</div>
</div>
</div>
I want to wrap the first DIV(inside DIV with id "avatar-console") with an LI tag and insert new LI tag at the end as shown below.
Below is the required ouput.
<div class="ow_box_empty ow_stdmargin clearfix">
<div id="avatar-console" class="ow_avatar_console ow_center">
<ul>
<li>
<div style="height: 190px; background: url(7.jpg) no-repeat">
<div style="display: none;" id="avatar-change">
Change Avatar
</div>
</div>
</li>
<li class="star">★</li>
</ul>
<div class="user_online_wrap">
<div class="ow_miniic_live"><span class="ow_live_on"></span></div>
</div>
</div>
</div>
I tried the below code to start with but it gives unwanted results. I am not sure where and how to start on this.
$("#avatar-console div:first-child").append('<li class="star">★</li>')
Fiddle Link: http://jsfiddle.net/Purus/U3KC8/
This should work:
http://jsfiddle.net/da4dz/
$("#avatar-console > div:first")
.wrap('<ul><li></li></ul>')
.closest('ul').append('<li class="star">star</li>');
You can use the jQuery wrap() method:
$("div:first-child", "#avatar-console").wrap("<ul><li></li></ul>");
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