I would like to keep a table hidden at the time of loading. Later I would like to slideDown that table to show when a link is clicked.I write this code to hide that table.
$('.table_div').hide();
I placed that table in a div. Then I hide that div.
My problem is at time of loading first the table display for a moment then the table hide. I would like to prevent this display. Thanks
To prevent that Add Css Property to .table_div
.table_div {
display: none;
}
You can add css to hide it
.table_div {
display: none;
}
after load page just show it
$(document).ready(function(){
$(".table_div").slideDown();
});
Put all jquery statements in between these curly braces:
$(document).ready(function(){}
So that all scripts execute only after document is loaded.
For the starting display, use
.table_div{display:none;}
in the css page. Does it work now?
Related
newbie here, I'm currently working with html forms right now. I am using Jquery to hide forms on load of the page, but some forms keep showing for some short period of time and then hides after the page loads.
here's my jquery code for hiding forms
<script type="text/javascript" src="js/jquery1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$('#page1').show();
$('#page2').hide();
$('#page3').hide();
$('#page4').hide();
$('#page5').hide();
$('#white_bg').hide();
$('#background').hide();
$('#bgw').hide();
$('#bgb').hide();
$('#aql_bgw').hide();
$('#aql_bgb').hide();
$('#secondary_form').hide();
})
</script>
<!---body of the page goes here -->
I attached a picture of what happens when the page is loading
then after some miliseconds it dissapears
how do i make it load without showing the hidden divs and forms??
thanks
What you need to do is to use css rules to hide those elements instead of using jQuery. Since your jQuery is script to hide those elements executed on dom ready event, till that is fired those elements will be displayed.
So add a class like hidden to those elements and add a css rule to set display as none(Include the rule in the header of the page so that the elements will be rendered as hidden)
.hidden {
display: none;
}
The issue you are having is that javascript is executed after the page loads, and the form is visible by default, until the javascript changes that.
You should not use javascript on the initial page load to hide/show anything. You'll likely need javascript elsewhere in the page, to hide and show elements as appropriate, but this shouldn't be an issue since the page will have already been loaded at that point.
The best way to approach this is with CSS. The cleanest option, in my opinion, is to define a class style in the primary .css stylesheet used to style the page. The class definition would look something like .hidden { display: none; }. With that class style defined, you can add it to any form you want hidden by default by simply adding the class="hidden" attribute to the form. (eg, <form id="page1" class="hidden">).
This can also be done inline by defining the display property in the style attribute of the html (eg, <form id="page1" style="display: none;">).
A less clean option would be to add the following CSS rule
#page2, #page3, #page4, #page5,
#white_bg, #background, #bgw, #bgb,
#aql_bgw, #aql_bgb, #secondary_form {
display: none;
}
I suggest you add to the css of the forms
display: none;
Or you can add to the html part of the form something like
<form style="display: none;">
Then when you want to display the forms you just do so in javascript.
Try this way:
document.getElementById('elemtId').style.display = 'none';
<script>
function myFunction() {
if (/menu/.test(window.location.href)) {
document.getElementById('searchfield').display = 'none';
}
}
</script>
I would like to do this with JavaScript or JQuery -- thus far my attempts are not working. I have a div that is to be present on all pages but 1 page; in which I would like to hide it with JavaScript if that page.
Note: This is a Wordpress website; the above was inserted in the header.php head of the document. Same location of repetitive div.
This is easier with CSS.
HTML (make sure all of your pages have some unique identifier, generally on the body tag):
<body id="page-1">
<div id="menu">
[ ... ]
CSS
#page-1 #menu{
display:none;
}
Edit
I see you're working in WordPress. WP automatically adds unique classes to the body tag. Generally you can use something like this for your CSS:
.page.page-id-34{
/*
34 should be swapped with the page id.
You can customize the classes,
so just Inspect Element and see what it is for your page
*/
display:none;
}
myFunction is never called. You'll need to explicitly call it when the page is ready $(myFunction);, or if you want, call it in the footer (or close to it) directly with myFunction();.
An alternative, since this is a WordPress site, is to add PHP code to not show that div (or even send it to client!) based on a filter.
Another alternative is using CSS to block out that specific div on the page that's loaded.
Is there any work around for the pre-loaded/instantiated to prevent the lack of styling being present before the api loads the table?
Right now for example. The headers of my table are bunched up with no spacing looking like a funky sentence.
HeadHead1Head2Something
for example.
I've tried a number of ways to get around this, from how/when I load my table data.. to using the oLanguage setting for processing to have an image loader, figuring it was maybe lack of content. But no, the style just doesn't appear until after the $(' selector ').dataTable(); call is made.
you can hide the table before it is initialized and show it after initializing is complete.
Use CSS to hide the table.
.grid { display: none; }
add fnInitComplete to your datatable settings to show the table once it is intililized.
enter code here
$(".grid").dataTable({
// Your settings
"fnInitComplete": function(oSettings, json) {
$(".grid").show()
}
});
I'm using jQuery v1.8.3 and jQuery UI v1.9.2.
On a click of a button I wish a menu (via a ul) to hide if it's open, or show if it's closed, so I chose to use the toggle function in it's most basic form, on click, toggle(). Simple as that, e.g.
button.click =>
autocomplete = input_field.data("ui-autocomplete")
menu = autocomplete.menu
ul = menu.element
ul.toggle()
(it's coffeescript, but you get the gist)
What actually happens is that when the ul is displayed at first (not via the button) it has display property set the display property set to display: block.
Then, on first click of the button if I check within the click function what the current status of the display property is via:
console.log "display = #{ul.css('display')}"
ul.toggle()
console.log "display = #{ul.css('display')}"
the output is:
display = none
display = block
So for some reason the property is being incorrectly picked up initially.
it adds the display property as display: block and then on the next click sets display: none.
I'm not in control of the ul directly as it is rendered by the autocomplete widget and I'm not keen on having to fiddle about with that.
Is this expected behaviour, and what is the best way to work around this? I'm thinking of passing a function to click that checks if there is a display attr set and then show or hide dependent on that, but if there's an easier way or better function, maybe a newer version of toggle, then please let me know. The jQuery docs are, in my view, some of the worst of any tech project so I consider it quite likely that I'm using the wrong function entirely.
Any help is much appreciated.
Set the display attribute on page load. Something like
$(function(){
$("ul").hide();
});
once the autocomplete is rendered.
This will set display:none use .show() to make it display:block
toggle should work even if your element doesn't have a display property explicitly set. See this jsfiddle for an example. One thing to check is that you're doing the click handler in $(function() { ... });
You are saying that you see the li when the page first loads, if that is expected behavior then great - it shouldn't matter either way. I created this JS fiddle http://jsfiddle.net/r0k3t/Rcpet/ Go there and try it, whether the CSS sets the display property to block or none when you first load the page the toggle works just fine. If you had posted more code it would be easier to see what you want to accomplish but it's hard to know where the issue is just from your description, you could have a simple syntax error but we can't see that. Anyway - here is the same code that is on JS fiddle.
Toggle li element
<ul>
<li>You can see me now</li>
</ul>
//Here is the JS wired up in document load
function toggleLi() {
$("ul li").toggle();
}
$("#toggleButton").click(toggleLi);
/* Here is the CSS */
ul li {
display: block; /*change to none and test - works as well */
}
Check this code
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("ul").toggle();
});
});
</script>
<style>
ul {display:none;}
</style>
</head>
<body>
<button id="show">Show</button>
<ul>
<li>aaaa </li>
<li>bbbb </li>
<li>ccccccc </li>
</ul>
</body>
</html>
I have a module on my website that loads quite strangely, so I want to hide the div while the page loads, then reveal it on document ready. The following (simplified) code works just fine:
<div class="slideshow" style="display:none;">
This div should be hidden during load
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').show();
});
</script>
This works as intended. But what happens to users with Javascript disabled? Will the div remain hidden to them? How can I make sure all users will see the widget?
A quite common way is, to add a class .nojs to your <body> or <html> element and remove it via Javascript e.g. onload. Like this you can simple handle the two different states via CSS:
.slideshow {
display: none;
}
html.nojs .slideshow {
display: block;
}
Might want to try http://www.modernizr.com/ in this context.
You should remove the display:none style from the div and explicitly hide it in your document.ready function. That way, without javascript it will be visible from the start.
Personally, I prefer to use CSS to my advantage for such things. I add this line of script just inside my template HTML body tag.
<script type="text/javascript">document.body.className = "JS";</script>
Then, for the scenario you describe, I would use an additional CSS class on the div, like so.
<div class="slideshow initially-hidden">
This div should be hidden during load
</div>
With a matching style accounting for the class added via JavaScript in the template.
body.JS .initially-hidden {
display: none;
}
Your elements with a class of "initially-hidden" will now only be invisible if JavaScript is enabled. If it is disabled, they will be visible.
<div class="slideshow">
This div should be hidden during load
</div>
<script type="text/javascript">
$('.slideshow').hide();
$(document).ready(function() {
$('.slideshow').show();
});
</script>
If they have javascript disabled, it won't be shown... You can make sure they all see it by not hiding it in the first place.
But what happens to users with Javascript disabled? Will the div remain hidden to them?
Since the code you have to show the div cannot run, yes it will remain hidden.
How can I make sure all users will see the widget?
Make use of <noscript> to render the div as hidden when Javascript is not enabled, or load the div as visible and hide it with Javascript some point prior to the full page being loaded.