I want to load this page on a Webview but I want to hide this header element with search bar and logo. I don't know much about Javascript, is there a way to do this?
this is the part I want to hide
I think you are asking for a solution using javascript.
you can copy the below script and excute through chrome inspect. ( Ctrl + Shift + i
, go to Console tab, paste the below script and press enter.)
document.getElementById("searchform").style.display = "none";
document.getElementById("sfcnt").style.display = "none";
document.getElementById("top_nav").style.display = "none";
document.getElementById("appbar").style.display = "none";
What am I doing is actually the same as other's answer, change those unwanted div's CSS style as display:none
Add this css:
#sfcnt, #top_nav, #appbar { display: none }
It will break if they change it
You can use the display property in css style sheet to hide stuff that you want.
element{
display:none;
}
here element can be anything(i.e body, *, div, navbar).
Related
I'm working on a full-stack project that is somehow loading inconsistent CSS styles on my anchor elements. Using Javascript I am doing something like the following:
recordData.forEach(record => {
let a = help.createElement('a');
let text = record.jobTitle + " (" + record.deptName + ", " + record.subDeptName + ")-" + record.email;
a.textContent = text;
a.href = `/frontend/contractorForm/contractorForm.html`;
a.addEventListener('click', function(event) {
sessionStorage.clear();
sessionStorage.setItem('record', JSON.stringify(record));
}, false);
parent.appendChild(a);
}
The idea of this was that although I have one single HTML form "template" created, I can populate the values inside contractorForm.html through values stored in my sessionStorage.
Below are my anchor tag frontend views and I also attached images of what happens when I click on other ones. The problem with this is that when I click on my anchor tags on the front end, this is what I get.
My CSS for contractorForm.html is basically display:flex; justify-content:center. But as shown in the images, only the first anchor link works.
Things I've checked and verified: CSS page does load when looking at Devtools, disabling and clearing cache, attaching ?version={random number} onto the .html href, changing style on devtools to see if it works (and it does), changing the background color (it works perfectly), loading my CSS code after bootstrap link, checking paths and links (all correct)
The only issue here is that my display: flex is simple just not working. Any help or ideas will be appreciated! Thank you!
anchortaghtmlview
first-anchortag-click-view
second-anchortag-click-view
Fixed it - if you have CSS issues, make sure you are referring correctly to the parent.
My CSS looked like this before:
#contractor-form-section {
width: 50rem;
}
#contractor-form is wrapping just the form element, and the way how my DOM structure looked like was something like this:
<body>
<div id="contractor-form-border">
<section id="contractor-form-section">
<h1>...</h1>
<form>
</form>
</section>
</div>
</body>
Essentially, my CSS was referring to #contractor-form-section rather than #contractor-form-border. Switching to that basically fixed the issue!
I am trying to use the 'Requestly' extension on google chrome to remove the description text and uploaders' profile on Pinterest. I used inspect elements to identify the class they belong to and wrote the following script to remove them.
const boxes = document.getElementsByClassName('zI7 iyn Hsu');
for (const box of boxes) {
// ️ Remove element
box.style.display = 'none';
// ️ hide element (still takes up space on page)
// box.style.visibility = 'hidden';
}
However, after saving the rule and reloading the page, nothing happens. I'm pretty new to programming and have no idea how to begin troubleshooting this being the first problem I'm trying to solve.
requestly editor screenshot
class name screenshot
How about trying:
box.style.display = 'none !important';
Does it change anything?
My divs are nested so i understand i cant display an element if its already hidden. I want the information(p1 inside my html code)to display once the mouse hovers over another element(h1 in my html. I have already made my paragraph 1 style to none in JavaScript, now i need it to re-appear, i have tried the following code to attempt to make it re-appear document.getElementById("1").onmouseover.style.display = "block"; but with no success.
This is My HTML code, ignore the order im new to web dev lol
This is the code i have tried but it doesnt seem to work
This is the end result i want, the circled text on hover display the paragraph
So a few things. For starters, put actual code into your questions instead of screen shots. If we can't reproduce your issue it's difficult to troubleshoot usually from just pictures.
Next, you might familiarize yourself with syntax a bit more since p1 isn't a valid HTML element.
Then, try not to rely on javascript too much and keep presentation stuff on the compositor thread. Here's an example accomplishing your goal with no javascript. Hope it helps, cheers!
p {
display: none;
}
h1:hover + p {
display: block;
}
<h1>Hover me</h1>
<p>PEEK A BOO!</p>
Yes, this is doable without javascript but since the question asked how to do it with, hopefully this helps get OP on the right track.
<div id="bioBlock" style="display:none">
<h2 id="1">
Cameron Lodge
</h2>
<p1 id="para">Im an avid learner of anything computers....</p1>
</div>
function showBioBlock() {
document.getElementById("bioBlock").style.display = "block";
}
https://jsfiddle.net/avL3j765/
document.getByElementId("myH1").onmouseover = function(){
displayH1("myP");
}
document.getByElementId("myH1").onmouseout = function(){
displayH1("myP");
}
function displayH1(myId){
if(document.getByElementId(myId).style.display == "block"){
document.getByElementId(myId).style.display = "none";
}else{
document.getByElementId(myId).style.display = "block";
}
}
This invokes a function that toggles the paragraph's style when the mouse enters and leaves the element. It assumes that you have an id on both your h1 and p tags, in my example myH1 and myP respectively.
I'm working on a simple javascript code.
Based on the condition I should change the visibility of the tag from hidden to visible.
I should use javascript alone. No jQuery or AJAX. Any idea or suggestion please.
Using the visibility attribute:
Show the div with id="yourID":
document.getElementById("yourID").style.visibility = "visible";
To hide it:
document.getElementById("main").style.visibility = "hidden";
Using the display attribute:
Show:
document.getElementById("yourID").style.display= "block";
Hide:
document.getElementById("yourID").style.display= "none";
<div id="contentDiv">
This is the content .
</div>
if you want to change the visibility of div with id="contentDiv" using javascript then you can do with..
var eleDiv = document.getElementById("contentDiv");
// based on condition you can change visibility
if(eleDiv.style.display == "block") {
eleDiv.style.display = "none";
}
else {
eleDiv .style.display = "block";
}
Hope this code helps you........
Though asked not to be done with jquery, but can be done as: $('.my_div_tag_id').css('visibility','hidden');
Visible:
var elem = document.getElementById("IdOfEl");
elem.style.display="block";
Hide:
var elem = document.getElementById("IdOfEl");
elem.style.display="none";
Call this function when you want to show the div. Write that conditions in your segment/case.
function showDiv() {
document.getElementById('divId').style.display = 'block'; // or 'inline'
}
Let me know your feedback.
One way to do this would be to create the control logic in JavaScript and add it in the "script" tag of the document. Then apply the logic to hide/show the "div" element.
I created an example HTML document based on “A First HTML Document” on page 16 (Musciano and Kennedy, 2002). It includes a "div" tag within the "body" tag near the top. The ShowAndHide function has been included in the "script" tag within the "head" tag. An application of the ShowAndHide may be found in the other "script" tag within the "body" tag near the end.
You can find the HTML example as an attachment to the PDF document "Show-and-Hide Control Logic: Inspired by a Question at Stack Overflow".
Reference
Musciano, C. and Kennedy, B. (2002). HTML and XHTML: The Definitive Guide, Fifth Edition. Sebastopol, CA: O’Reilly Media Inc.
Question : Beginner Level
Code: Pure Javascript
I had created a web page in which i am rendering the main nav items via a for loop in javascript. Below the main nav i had created some content assigned each main content div with different ids.
Now i want onclick of any nav item, respective content div should be displayed. please find the jsfiddle link : http://jsfiddle.net/shabirgilkar/GKLJz/1/
May i know how to do that in pure javascript. Any help will be highly appreciated.
Provided your text inside the navigation boxes match the id of the div.contents This code should work.
Hope i helped.
old="home";
function init() {
document.getElementById('about').style.display = 'none';
document.getElementById('products').style.display = 'none';
document.getElementById('services').style.display = 'none';
document.getElementById('career').style.display = 'none';
document.getElementById('faq').style.display = 'none';
document.getElementById('contact').style.display = 'none';
var pages = document.querySelectorAll('a.box');
for(i=0;i<pages.length;i++){
pages[i].onclick=function(e){
document.getElementById(old).style.display='none';
old=e.target.innerHTML.toLowerCase();
document.getElementById(old).style.display='inline-block';
}
}
}
Ok, I updated your fiddle: http://jsfiddle.net/GKLJz/3/
The trick is that you assign ids to menu items in your array and than you call onClick function that switches css classes accordig to what you click on...
And if you want to make it pretty, use some js animation effect instead of changing classes, like jQuery slide described here
Btw you can ommit init() function entirely an just assign .hidden to other divs as default