I don't know how to do this but I need to hide a repeating (50 times in one page) string of html from being displayed in the browser.
The offending line of html is something like:
<li>Empty</li>
I know this would be a hack but I can't alter the source of this list content.
Is there some javascript code I could put in the head of my document which could hide this string?
Many thanks,
Dar.
You can use :contains to get elements based on their content.
HTML :
<li>Empty</li>
jQuery :
$('a:contains("Empty")').css('display', 'none');
Example : http://jsfiddle.net/9z5du/285
You could hide them without any scripting by setting;
.extLink {
display: none;
}
This will work whether or not JavaScript is enabled and it will mean they won't display even for a flash while the document loads.
If it is specifically the actor links, you can target those too - or if it is both you can make the rule cover both. Let me know if your requirement is more specific.
a[href=actor] {
display: none;
}
If you want to hide them based on the content, you will need to use JavaScript.
var clearEmptyActorLinks = function () {
var externalLinks = document.getElementsByClassName('extLink');
for (var i = 0; i < externalLinks.length; i++) {
if (externalLinks[i].innerHTML === 'Empty') {
externalLinks[i].parentNode.style.display = 'none';
}
}
};
window.onload = clearEmptyActorLinks;
Example: http://jsfiddle.net/ZnK59/
Like this?
window.onload = function () {
var n, hiddens = document.getElementsByClassName('extLink');
for (n = 0; n < hiddens.length; n++) {
if (hiddens[n].innerHTML === 'Empty')
hiddens[n].style.display = 'none';
}
if (hiddens[n].href === 'actor') {
hiddens[n].parentElement.style.display = 'none';
}
}
}
Based on jQuery:
$(function() {
var i = 0;
$('li').each(function() {
if (i == 0) {continue;i++}
$(this).remove();
i++;
});
});
I'm not sure what are you looking for.
Removing empty tags:
$(function() {
var i = 0;
$('li').each(function() {
if (i == 0) {continue;i++}
var $obj = $(this);
if ($obj.find('a').text() == 'Empty') {
$obj.remove();
}
i++;
});
});
Related
I am trying to convert a small script from javascript to jquery, but I don't know where I should be putting the [i] in jquery?. I am nearly there, I just need someone to point out where I have gone wrong.
This script expands a search input when focused, if the input contains any values, it retains it's expanded state, or else if the entry is removed and clicks elsewhere, it will snap back.
Here is the javascript:
const searchInput = document.querySelectorAll('.search');
for (i = 0; i < searchInput.length; ++i) {
searchInput[i].addEventListener("change", function() {
if(this.value == '') {
this.classList.remove('not-empty')
} else {
this.classList.add('not-empty')
}
});
}
and converting to jquery:
var $searchInput = $(".search");
for (i = 0; i < $searchInput.length; ++i) {
$searchInput.on("change", function () {
if ($(this).value == "") {
$(this).removeClass("not-empty");
} else {
$(this).addClass("not-empty");
}
});
}
Note the key benefit of jQuery that it works on collections of elements: methods such as .on automatically loop over the collection, so you don't need any more than this:
$('.search').on("change", function() {
this.classList.toggle('not-empty', this.value != "");
});
This adds a change event listener for each of the .search elements. I've used classList.toggle as it accepts a second argument telling it whether to add or remove the class, so the if statement isn't needed either.
The following code adds a class to the parent of the checkbox / radio button to highlight the radio button along with the label.
Here is the jQuery code which I need to convert to JavaScript.
I am new to both jQuery and JavaScript.
Any pointers will be appreciated !!
$('form input[type=checkbox]').click ( function(){
var $this = $(this);
if (this.checked)
{ $(this).parent().addClass("highlight"); }
else
{ $(this).parent().removeClass("highlight"); }
})
$('form input[type=radio]').change(function(){
var $this = $(this);
$this.parent().parent().find('label.highlight').removeClass('highlight');
$(this).parent().addClass("highlight");
});
I think I found the solution to this.
But I am sure this is not the most efficient code so if you can think of better options then do let me know.
function checkBox(obj) {
object=obj;
if (object.checked){
object.parentElement.classList.add("highLight1");
}
else {
object.parentElement.classList.remove("highLight1");
}
}
function highlight(obj) {
object = obj;
var radios = document.getElementsByName("A1");
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked){
radios[i].parentElement.classList.add("highLight1");
}
else {
radios[i].parentElement.classList.remove("highLight1");
}
}
}
Newbie to Javascript here
I have a html/php code, Whats happening right now is when I click the button all elements are shown not just the targeted element. any help most appreciated
HTML/PHP
<div class="te contentDiv">
<div class="myContent" style="display:none">
<?=$text?>
<a id="close_btn"
href="javascript:toggle_visibility('myContent','close_btn','open_btn');"
class="close-more"><?=localised_string('Close')?></a>
</div>
</div>
JavaScript
var toggle_visibility = (function () {
function toggle(cl) {
var els = document.getElementsByClassName(cl);
for (var i = 0; i < els.length; i++) {
var s = els[i].style;
s.display = s.display === 'none' ? 'block' : 'none';
};
}
return function (cl) {
if (cl instanceof Array) {
for (var i = 0; i < cl.length; i++) {
toggle(cl[i]);
}
} else {
toggle(cl);
}
};
})();
Not sure if this is the right way to do it, I have been working from other peoples examples
Your invocation of toggle_visibility() in HTML isn't matching code in JS for
if (cl instanceof Array)
isn't true, thus it's toggling all buttons declared with class myContent. cl in function returned from toggle_visibility() is first argument of invocation, which is 'myContent' in your case. But I think you want either use arguments rather than cl there or wrap the list of names in an array on invocation like this:
toggle_visibility( [ 'myContent', 'close_btn', 'open_btn' ] );
But this won't fix your issue nevertheless.
What about click handler like this:
function toggle_visibility(event) {
event.target.style.display = window.getComputedStyle(event.target, null).style == 'none' ? 'block' : 'none';
return false;
}
Note: see https://developer.mozilla.org/en-US/docs/Web/API/event.target
In your HTML you might use
Link
See that example in addition: https://developer.mozilla.org/en-US/docs/Web/API/event.currentTarget
In jQuery you can achieve it in one line...
$(".close-more").on("click",function(){$(this).toggle()})
I have the following code -
$(window).resize(function () {
if ($(window).width() >= 1023) {
for (var i = 0; i < seatInfo.length; i++) {
if (seatInfo[i].data == 'true') {
document.getElementById('Btn1').style.visibility = "visible";
break;
} else {
document.getElementById('Btn1').style.visibility = "hidden";
}
}
if (nameInfo[0].data == "true") {
document.getElementById('Btn2').style.visibility = "visible";
}
}
if ($(window).width() <= 1022) {
document.getElementById('Btn2').style.visibility = "hidden";
}
});
Is this is the correct way to write it? I notice that it contains a JavaScript and jQuery mix.
If you are specifically asking about the jQuery syntax then the answer is no. You are using the native JavaScript methods instead of the much shorter jQuery methods.
Take a look at some jQuery selectors. For instance:
An element with an id attribute of foo can be found using jQuery's id attribute selector #:
var element = $( "#foo" ); // match the element
Changing an elements visibility attribute is the same as changing any other css attribute:
element.css( "visibility", "visible" ); // change css properties
A great feature of jQuery is it's many shortcut methods. There are a few shortcut method to display and hide elements (and toggle them):
element.show()
element.hide()
element.toggle()
Why stop using jQuery half-way?
For document.getElementById('Btn1') use $('#Btn1').
For .style.visibility = "visible" use .show() (or, if you want to be very precise, .css('visibility', 'visible'))
There is lots of good documentation on the official jQuery site.
You can use $('#some-id').hide() and $('#some-id').show(). Instead of document.getElementById('some-id') with style.visibility = "visible" or style.visibility = "hidden".
you can use .css from jquery and set it as json structure to define one or multiple CSS attributes, this is more easier for me to remember.
$('#Btn1').css({
'property': 'value',
'property': 'value'
});
or just use it like this for a single attribute
var btn1 = $('#Btn1'),
btn2 = $('#Btn2'),
window = $(window);
window.resize(function () {
if (window.width() >= 1023) {
for (var i = 0; i < seatInfo.length; i++) {
if (seatInfo[i].data == 'true') {
btn1.css('visibility','visible');
break;
} else {
btn1.css('visibility','hidden');
}
}
if (nameInfo[0].data == "true") {
btn2.css('visibility','visible');
}
}
if (window.width() <= 1022) {
btn2.css('visibility','hidden');
}
});
I am trying to set up a system so that when a user clicks, if that click did not originate from within a specified div then a function should be fired that will do something with that div. Basically more when a user clicks outside of a div i want to hide it, but the problem is that i have a few elements that i want to do this with, so event.stopPropagation doesn't work very well.
document.onclick = function (e) {
e = !e ? window.event.srcElement : e.target;
if ($('#toppanel div#panel').not(e.id).is(':visible')) { $('.dashboardNav .addWidget').click(); }
if ($('#TrackRibbon').not(e.id).is(':visible')) { $('.dashboardNav #openRibbon').click(); }
if ($('.subnav').not(e.id).is(':visible')) { $('.subnav').hide(); }
}
but this doesn't work as i want either yet, it does somewhat, but i have multiple .subnav on the page and with this you can open all of them without the others closing.
any ideas on how to accomplish a goal like this would be greatly appreciated, also if i didnt explain well enough just let me know.
Would something like this work?
$(document).bind('click', function(e) {
if($(e.target).hasClass('dontTriggerThisFunction')) { return; }
doTheStuffWeWantToDo();
});
So this is how i managed to accomplish most of what I wanted. I think with a few tweaks it will be good.
$(document).click(function (e) {
var closables = ["#TrackRibbon", '#toppanel', '.subnav', '#Mailbox'];
var toggles = ['#openRibbon', '.addWidget', '.topnav > li', '#MailboxToggle'];
var skip = -1;
e = !e ? window.event.srcElement : e.target;
for (var j = 0; j < toggles.length; j++) {
if ($(e).parent(toggles[j]).length > 0 || $(e).is(toggles[j])) {
skip = j; continue;
}
}
for (var k = 0; k < closables.length; k++) {
$(closables[k]).each(function (i) {
if (skip !== k) {
if ($(this).has($(e)).length === 0 && $(this).is(':visible')) {
$(this).hide();
}
}
});
}
});
The only part that doesn't work quite right is the '.subnav' which there can potentially be a lot of. So if anyone has any suggestions to improve let me know.