hide element on load page and show it onclick - javascript

hello i'm using javascript to show and hide element. its working but when loading the page the element still visible until i click on the button then it will be hiding. in my case i need the opposite ( the element should not be visible on loading page until i click on the button)
this is my code :
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
(function($){
$(document).ready(function(){
$('#hideshow').click(function(){
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
did i miss something ?

Apply display:none:
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
Alternatively you can hide it programmatically on page load:
$('.price-rules-table-wrapper').hide();
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>

Related

How to remove a div on click and show another div

I want to show a hidden div once a user click on a text input and remove the div that was displayed, but if the user click again on the text input I don't want the div that just got deleted to show up again.
I have tried this so far:
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
.
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$(" #div2").toggle();
});
});
I think this below snippet solves your problem, please let me know if this helps you!
$(function(){
$("#div2").hide();
$("#div1").show();
$("#input").on("click", function(){
$("#div1").hide();
$(" #div2").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
I want to show a hidden div once a user click on a text input and
remove the div that was displayed
Add a focus event to the input
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
Demo
$("#input").on("focus", function() {
$("#div1").remove(); //div1 is removed
$(" #div2").show(); //hidden div is shown
});
$("#input").on("blur", function() {
$(" #div2").hide(); //div2 is hidden again
});
#div2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Have to be remove on click</div>
<div id="div2">Hidden on page load and show on click</div>
<input type="text" id="input" placeholder="click here" />
$(document).ready(function(){
$("#input").click(function(){
$("#div1").toggle();
});
});
Don't make two buttons, one for hide and other one for show.
Make one button and use toggle().
Now that's all you need ... This will definitely work.
Read this it will help you
https://www.javatpoint.com/jquery-toggle
:)

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

Javascript loading / spinning image/icon while loading the search results

I just want to understand more of the previous post from this site and w3school, where the loading image/icon is displayed while loading the page content.
Here's the script I've re-used -
<script type="text/javascript">
$(document).ready(function(){
$('#Btn_5').click(function() {
$('#spinner').show();
});
});
</script>
Here's the form section and script -
<form id="iform" method="get" action="">
Search: <input type="text" id="search_box"><br>
<div id="Btn_5" class="btn">Search</div>
</form>
<br>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://www.w3schools.com/jquery/demo_wait.gif" alt="Loading"/>
</div>
<br>
<body>
<script type="text/javascript">
...
$( "div.content:contains('"+ filterarray[i] +"')").css( "display", "block" );
$("#results").append(results);
...
</script>
<div id="results"></div>
</body>
I have this loading icon spinner, but it doesn't work after the results are displayed. It only spins when button (Btn_5) is clicked and loading icon disappears when the page reloads.
QUESTION: I want to run the loading/spinning icon from the start of the button click until all content under the are displayed. Is there a way to do this?
I hope I am understanding correctly.
But, you want to show the spinner before:
$("#results").append(results);
and hide it after the results are appended?
If that is the case, then you should just be able to do;
$('#spinner').show(); //show spinner
$( "div.content:contains('"+ filterarray[i] +"')")
.css( "display", "block" ); //not sure what you are doing here
$('#results').append(results); //append results, which you have not defined in example
$('#spinner').hide(); //hide spinner
Use that as
//before load
window.onbeforeunload = function () { $('#spinner').show(); }
//after loaded
$(window).load(function() {
$('#spinner').hide();
});

Running script with onclick event when only inside a particular div element

I'm looking at running this script:
$(document).ready(function() {
$('a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load($(urlyep).attr('href'));
});
});
This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.
Err… You mean $('#menubar a').click(…) ?
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load("yourexternalpage.html");
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" >menubar</div>
If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this.name);
e.preventDefault();
$("#content").load(urlyep);
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>

JQuery - Problem with Modal Dialog after reload page in div

take a look to the example:
example.jsp:
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").load("example_1.jsp");
});
});
</script>
<input id="Button1" type="button" value="RELOAD" />
<div id="mainContent"></div>
example_1.jsp:
<script type="text/javascript">
$(document).ready(function() {
$("#a").button().click(function() {
$("#a_form").dialog("open");
});
$("#a_form").dialog({
autoOpen: false,
height: 480,
width: 625,
modal: true
});
});
</script>
<input id="a" type="button" value="MODAL" />
<div id="a_form" title="Modal Dialog" class="ui-widget">
Hello!
</div>
I load example.jsp and I press the button "RELOAD".
Then, in "mainContent", appears the button "MODAL", that open a modal dialog.
But if I press again "RELOAD" button and then "MODAL" the MODAL DIALOG doesn't appear anymore!
why?
where am i doing wrong?
That is because :
<input id="a" type="button" value="MODAL" />
Is using an ID.
When you run load again you are creating another input with the id=a which is not allowed.
Try using a class identifier instead of an id
The problem might be because the script block of example_1 is ignored because it is loaded dynamically into the page.
So what you need to do is to move that script block to example.jsp and use .live() for '#a' instead of .click()
$("#a").button().live("click", function() {
$("#a_form").dialog("open");
});
Before you load/reload the main content try to empty it and then load.
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").html('').load("example_1.jsp");
});
});
</script>

Categories