<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.
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.
In wordpress is there a way to set the body tag attribute on a Page like this :
<body onBlur="window.focus()">
WP Block editor does not allow editing the page html, because it is visual editor of course.
I would use this code so I can make a popup window stay always on top.
BTW I solved the problem how to popup the window, just dont know how to make it stay on top
how to create Popup window
If there is other way let me know.
thanks #ruvee
Wrote step by step instruction here: update body tag
There is a hook you could use called wp_footer. You could add extra attributes to your body tag using pure/vanilla javascript like this:
add_action("wp_footer", "your_theme_adding_extra_attributes");
function your_theme_adding_extra_attributes(){
?>
<script>
let body = document.getElementsByTagName("body");
body[0].setAttribute("onBlur", "window.focus()");
</script>
<?php }
Code goes into the functions.php file of your active theme.
This answer has been tested on wordpress 5.8 and works.
Running it on a specific page:
Depending on which page you would need to run it on, you could use different conditional statements. For example:
Only on archive pages:
is_archive() would be a proper conditional check
Only on the index of your blog:
is_home() would be a conditional check.
Only on front page that may or may not be your blog index:
is_front_page() would be a conditional check
etc...
UPDATE (related to the second request that was not part of the first question)
If you have a page with a slug of blah and you want to modify its body tag, you could use the following snippet:
# The following code would only get executed on yourwebsite.com/blah
add_action("wp_footer", "your_theme_adding_extra_attributes");
function your_theme_adding_extra_attributes(){
if(is_page("blah")){ ?>
<script>
let body = document.getElementsByTagName("body");
body[0].setAttribute("onBlur", "window.focus()");
</script>
<?php }
}
is_pageDocs
For people who would need to add an extra class NOT an extra attributes, there is a hook called body_class and there are too many answers already on Stackoverflow, such as:
Add a custom class name to Wordpress body tag?
body class in WooCommerce
You could hook into the body class filter and do a echo for your attribute, not how filters are meant to work but it gets the job done without js.
add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
echo 'onBlur="window.focus()"';
return $classes;
}
I noticed from your comments that you would also like to limit to specific pages.
Lets say you want to to happen only on front page.
Youll need to add a if condition for front page, like this
add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
if (is_front_page()) echo 'onBlur="window.focus()"';
return $classes;
}
Based on where you want this attribute to appeare, you will need to create the appropriate condition.
Till now we are using Iframe to load HTML and script to show the form to the user.
Now, we want to move from Iframe to DIV, but here we have a problem with script.
Because Iframe is responsible to apply the loaded script to the only iframe, but coming to div script will be loaded into entire HTMLDocument.
Is There any way that loaded script can be applied to that specific DIV only?
Thanks.
First, change your <iframe></frame> to <div></div> after this, you have this way to do this for your CSS(to a certain div):
#projectName{
style:value;
}
#divAnnounce{
}
The # targets things with ID's if you use a . before it will target the class names,
You can also use both if you need to get specific such as
#idname.classname{
}
If you have another div inside of the divAnnounce you can do
#divAnnounce #yournewdiv{
}
OR
#divAnnounce div{
}
OR
#newdivid{
}
Notice the space inbetween the two targets saying that they are a parent and child.
For your javascript I don't know with you are using plain javascript or jQuery
if it is jQuery then you can use jQuery noconflict. Create separate aliases to use jQuery for example to div1 & div2
Simple Example:
<script>
var div1Alias = $.noConflict();
var div2Alias = div1Alias.noConflict();
jQuery(document).ready(function(){
alert(div1Alias( "#div1" ).html());
alert(div2Alias( "#div2" ).html());
});
</script>
Try to do this changes in your code and let me know if it helps :)
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';
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.