Hide a specific H2 id using javascript or CSS - javascript

We're looking into Zendesk for our support site but it's not very customizable. I'm trying to remove specific text from the page using their widgets function (which can be created in javascript or css).
I'm trying to hide the following h2 tag while displaying the page:
<h2 id="search_box">Knowledge Base & Forums</h2>
I've tried the following CSS:
.search_box {
display: none;
}
But it doesn't seem to work. I'm not great with either CSS or javascript and I also don't know exactly when these widgets run, but I assume I'm doing something wrong in terms of accessing the element on the page.
I've been able to hide the text using the following combination of Javascript and CSS codes, but it doesn't do what I need because it will hide any part of the page that has the text in it:
Javascript:
$j('h2:contains(Knowledge Base & Forums)').addClass('forumtitle');
CSS:
.forumtitle {
display: none;
}
Thanks for any help!

#search_box {
display: none;
}
. is for classes, # is for ids

Try using in your CSS:
#search_box {
display: none;
}

Your CSS is off - to hide an id `search_box your CSS would be
#search_box {
display: none;
}
Note the # for id - . is for classes.

If you wish to use jQuery you can try this...
$(document).ready(function(){
$("h2").each(function(){
if(trim($(this).html()) == "Knowledge Base & Forums") {
$(this).hide();
}
});
});

Try document.getElementByID("search_box").style.visibility = 'hidden'; in Javascript

Related

Alternative to display-toggle when I am not certain that the element uses display:block when visible?

I am working in a project where theer are many js procedures like the following:
if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');
How can I achieve the same thing when I don't want to require that .some-element uses display: block; when visible?
.some-element might for example have been designed to use display: inline-block; or display: flex;.
Limitations:
I don't want the element to take up any space when hidden. For this reason I think that the popular methods visibility: none; and opacity: 0; would not work.
I don't want to save any state in js, for example to remember the original display property value.
Do it like this
if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');
This code ($('.some-element').css('display', '');) will remove the inline display: none property , when it is not needed.
jQuery's already solved this problem for you with toggle, show, and hide:
$('.some-element').toggle(show);
or
if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}
What I generally do is use a class for the hidden state, because you do know that when the element is hidden the display property should be none.
.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}
Then you manipulate the visibility of the element by adding or removing the "hidden" class. Since your rules don't affect the visible rules for the element, it can be display: inline; or display: table-cell; or anything else.
This approach can get complicated when there are in-line "style" attributes; that's a reason I don't generally like those in my code.
Another alternative to using display is to give the element an absolute position far off the visible page:
.whatever.hidden {
position: absolute;
left: -10000px;
}
This is useful for form fields that need to be invisible but which also need to actually work as form fields. Internet Explorer in particular does not like invisible (display: none) inputs, but it's OK with ones positioned off the screen.

Having a small issue adding CSS to some JS

I'm trying to convert the following CSS
img.rsImg.rsMainSlideImage {
display: inline-block;
}
Into Javascript
$('img').closest('.rsImg').closest('.rsMainSlideImage').css('display', 'inline-block');
And something I'm doing seems to be a bit off. I used the same script with a single div and it worked, but this is a bit nested.
What about
$("img.rsImg.rsMainSlideImage").css("display", "inline-block");

How to hide this button using JavaScript?

We are using a .Net web application from a vendor. It has a feature for user to enter JavaScript and CSS for performing some simple UI modification. They are executed when loading the application.
We want to hide a button on the web UI temporary.
In F12 developer tools, we found the id for that button.
We used this CSS script to hide the button and it works.
#ext-gen391 {
display: none !important;}
However, the id is not fixed. It changes with different groups of login users. So that CSS script is not good enough.
I am thinking of using JavaScript but not sure how to start. Can someone help?
Edit:
Thanks everyone for the input. Sorry that I did not mention that other buttons have the id starts with ext-gen too.
It seems to me that the only "unique identity" I can refer to is the button's position.
How to hide that 3rd td element? Take note that the id ext-gen391 is not fixed. It will be different for different groups of login users.
First off that small snippet of CSS you have tries to select the button based on a class not an Id. Which is why it doesn't work.
You could use CSS
[id^=ext-gen] {
display: none !important;
}
or jQuery
$('[id^=ext-gen]').hide();
but, really, the best way if you have control over what gets rendered you should try and add a more unique id/class instead.
You could try using an id matcher like this in the css:
*[id^="ext-gen"] {
}
To select all the HTML elements that ahve an id that starts with ext-gen.
This should work:
td.x-toolbar-cell[id^=ext-gen]{
display: none !important;
}
if only the number changes, see attribute selectors for more info.
try you use css class name to do that.
You could solve it by putting your Open link inside the #show div
JSFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
This solution was used here.
Congratulations #Mathias

bootstrap blocking jquery function

i need to use slideDown function from jQuery, which requires the content to be animated to be put under class " .hide ",
for .hide I had this in my custom css :
.hide {
display: none;
}
which conflicted with Bootstrap css as it contains :
.hide {
display: none !important;
}
thus when i linked both these stylesheets, slideDown was'nt working, then i tried diffrent variations of .hide in both files, finally removing .hide from my custom css file completely worked,
so my ques is why does .hide in custom css affect the results when the properties defined in Bootstrap ".hide" and custom css ".hide" are exactly same except having " !important " in addition which (i guess, please correct if i am wrong) implies that custom selector would be given preference?
i am trying to share the working version of my code using codepen, but i dont know why my code still does'nt wrok on codepen : http://codepen.io/anon/pen/RaGJwE
The !important is always very strong. It could just be bypassed if you use a display: block !important; afterwards.
The simpliest way would be to not use the "hide" or "hidden" classes which are targeted by bootstrap. Just change the class to "hideit" or something else like in this updated fiddle:
http://codepen.io/anon/pen/MyjXOv

How can I have my links display a little transparent box on a:hover?

I'd like to display a little tooltip similar to this:
That little black box appears when I put my mouse over it. How can I achieve this? Is it using jQuery or MooTools or what?
Thanks from this beginnig web designer!
I think you can do it with CSS, no need for Javascript.
The black box (the tooltip) can be an absolutely positioned child with display: none by default, and on :hover you can show it.
Here is a little demo.
Example CSS:
.tooltipped { position: relative; }
.tooltip { display: none; position: absolute; width: 100%; left: 0; top: 35px; }
.tooltipped:hover .tooltip { display: block; }
for the HTML (which remains readable without CSS!):
<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></div>​
This method will work in every modern browser and IE >= 7. IE6 only supports the :hover selector on links, so you need to use an a element if you want to support it (or find a different workaround).
This is done through JavaScript. I would recommend using the jQuery framework, as there are a load of different jQuery Tool Tip plug-ins ready for you to use.
For example.
Definitely looks like Tipsy, a jQuery plugin I used.
With jQuery, assuming you had a div properly formatted like thus: (notice this is an extremely simple example. I'm not defining the classes to properly format the elements or anything like that)
3
and
<div class="onmouseoverpopup parent">
<div class="onmouesoverpopup arrowontopmiddle"></div>
<div class="onmouesoverpopup text">Acorns remaining</div>
</div>
You might do something like this
$(document).ready( function() {
$(".acornsremaining").hover( function() {
$(".onmouseoverpopup.parent").show();
}, function() {
$(".onmouseoverpopup.parent").hide();
});
});

Categories

Resources