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';
Related
I have a website project, I created buttons such as "About Me" "Other" when clicked it should lead the user to another part of the website that looks different but still be in the same website sort of like I would "display: none" and hide the rest of the content onclick of a button and let new code fill the page.
If I am getting your question correct, and you want the link to be the exact same but load different content inside the page, you may want to use jquery and the load function to change a div on your page. Normally though, for navigating to those types of pages, you would just change the page as they should be placed in the same domain (www.yourdomain.com\aboutme.html, www.yourdomain.com\other.html).
The pages need to be on the same domain for this to work, which is why I just have some js files showing in the snippet.
function load(link){
$('#contentarea').load(link);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js')">Load Jquery Script Text</button>
<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js')">Load Flower</button>
<div id="contentarea">
</div>
I don't fully understand your question, but I think what you want is that when the user clicks a button, the browser scrolls to a chapter of the webpage.
You don't even need JavaScript or jQuery for this, just create an anchor tag.
with the href attribute referring to the id of the div or section (This works for any tag, not only div and section), assuming that the id is "aboutMe", you will be adding this:
About Me
And the div or section would be:
<div id="aboutMe">
...
</div>
The browser will scroll automatically so the viewport is displaying the section. You can also make it smooth by:
html {
scroll-behavior: smooth;
}
You may also add scroll padding just so if your navbar is too big, it doesn't show over the text.
html {
scroll-behavior: smooth;
scroll-padding: 70px;
}
I hope this is what you are looking for.
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?
<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.
I have a page with a lot of jQuery elements (large jquery files) and the problem with this is that the styled elements that replace standard HTML elements (checkboxes, radiobuttons and selectboxes/dropdown) shows the standard appearance for some millisecond at page load.
Is there any way to make the exchanged for those elements to show faster?
The elements scripts use ready() and is placed in head. The optimal solution would be if the changed elements load direcly insteed of the standard elements (but I guess that dont work).
The plugin I use to style the elements is:
jqtransform
Selectyze
Thanks for answers.
shows the standard appearance for some millisecond at page load
You can prevent that by hiding your whole page (via display:none) until the elements are styled by your plugins:
<head>
…
<style …>
<script src="plugins…" …>
<script>
(function() {
var hide = $('<style type="text/css">body { display: none; }</style>');
$("head").append(hide);
$(document).ready(function(){
…
// apply your plugins
…
hide.remove();
});
})();
</head>
You could have your standard elements with display: none as style at page load and only show() them using JQuery after they have been styled.
Sidenote: jqTransform is no longer supported as a plugin.
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.