I'm developing an extension and I want to know how to hide an html element:
I tried this code, but it didn't work
$$('#myDiv').hide();
Where is my error?
In Jquery
$('#myDiv').hide(); //You have to include jquery library in your file
In Javascript
document.getElementById("myDiv").style.display = "none";
Possible typo? Extra "$".
Jquery:
$('#myDiv').hide();
And are you trying to do it on a click?
only one dollar sign needed
$('#myDiv').hide();
Initially this question was tagged magento.
So I assume the issue is inside a magento project.
Magento uses prototype by default.
In prototype you can hide an element like this.
$('element_id_here').hide();
$ means getElementById.
If you want to hide a set of elements, let's say with the class some_class do this:
$$('.some_class').each (function(elem){
$(elem).hide();
})
it also works for ids the same way but it's kind of useless since the id must be unique in the page.
$$('#myDiv').each (function(elem){
$(elem).hide();
})
as when I first see this post it contains a magento tag. And many of the beginners do have problem with jquery and prototype in magento.
the code to hide html with id selector in jquery is:
$('#myDiv').hide(); //# for id selector
but for prototype, its:
$('myDiv').hide(); //no # needed for id selector
but even if it do not work then open web developer tool (Ctrl + Shift + C) of your browser and look for console tab. there you might be getting error.
Related
My website using Wordpress. When i viewsourge my Homepage (static page), it have code in tag:
text
Code is not have class or id, so i do not know how to remove it by JS or Jquery
How can i remove it by using JS or Jquery.
I really thank for your help
$('a').remove(); //if you use this, it'll remove all a from page.
$('parentdiv a').remove(); //remove the a from that parent div
It is working fine with jquery remove(),
$('a[href="https://tienichaz.com/danh-muc/do-tien-ich-du-lich/balo-du-lich"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
text
google
You can depend on the [href] attribute of the (a) element to remove a specific (a) element
with this jquery code:
$("a[href='the-href-value-of-the-element-you-want-to-remove']").remove();
I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});
I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});
Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps
There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')
Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}
So from the home page, i have a link that goes to a products listing page.
The product page has expand/collapse divs.
I need the appropriate div to expand depending on what the url# is.
So the link on the homepage is
healthy snacks
when i click the link above, i am trying to activate this, on the product page:
Healthy Snacks
I've tried some of the other codes that i found that trigger click by checking for hash tag and none of them were working properly, i think it's because of the ReverseDisplay js.
Please any insight would help.
thanks
You can make the following changes in the document ready function of your product page:
Simple fix: Since the jQuery id-selector is #elementId, you can simply use the window.location.hash value as your id selector, and use it to target the desired element.
if ( window.location.hash ) {
$(window.location.hash).click(); //clicks on element specified by hash
}
Better: In addition to the above, take the js out of your markup.
$('#healthysnacks').click(function(e) {
e.preventDefault();
ReverseDisplay('products4');
});
Then, after doing this, use the $(window.location.hash).click() code from above.
Also, change your link to:
Healthy Snacks
You can use the hash property of the Location object, try the following:
$(document).ready(function(){
var id = window.location.hash;
$(id).trigger('click')
})
As you are using jQuery instead of using javascript: protocol, you can use the jQuery click method:
$('#healthysnacks').click(function() {
// do something here
})
The answers suggested here are valid, but...
Be extremely careful when using the window.location.hash as it is in a jQuery selector because this could lead to a XSS vulnerability. $() can also create an HTML element and with a carefully constructed hash value, someone could execute arbitrary JavaScript code.
For example
http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>
If my-websites.com/about page uses the window.location.hash inside a jQuery selector, that onerror code would end up getting executed.
I'm using an XML file that has a number for each section. The page loads a link for each section of the XML and puts the article number in the URL parameter (page.html?aid=###). When the link is clicked an overlay iframe pops up the with more information about that article. is calling the overlay iframe popup but I can't use more than one of the same ID for a page.
$(function(){
$('#b1').frameWarp();
});
Instead of using ID="b1", am I able to use each article number for the id? I cannot use class instead of ID.
Would there be another way to do this?
You could use $('a[id^="b"]'), but that's hugely inefficient and will probably match more than what you want it to. Alternatively, you could filter on a regex:
$('a').filter(function(){
var re = /^b[0-9]+$/;
return re.test($(this).attr('id'));
}).frameWarp();
It's not much more efficient, if at all, but at least it would rule out false positives.
Here is the answer courtesy of benalpert on reddit:
$('.b1').each(function() { $(this).frameWarp(); })
This allows the class to be used instead of ID without error.
Thanks to everyone for the help.
I have a javascript link that references another .js file. I've been trying to output an image (for testing purposes), but I'm not sure what is the correct way to go about this.
alert("beginning");
//var link = $("<a href='http://juixe.com'>Hello, <b>World</b>!</a>");
//$('body').append(link);
//document.write("hi");
//document.write("<div><img src='http://s3-media2.ak.yelpcdn.com/bphoto/xqC6Iy5mOLb_8mwMKGv8_w/l.jpg' /></div>");
alert("before function");
(function(){
alert("middle");
var links = $("<a href='http://juixe.com'>Hello, <b>World</b>!</a>");
$('body').append(links);
alert("after middle");
//alert($("img").attr("id"));
document.write("hi");
document.write("<div><img src='http://s3-media2.ak.yelpcdn.com/bphoto/xqC6Iy5mOLb_8mwMKGv8_w/l.jpg' /></div>");
alert("end");
}());
I was able to alert beginning, all the way to middle. It seems like var links doesn't work. I'm trying to use HTML inside this .js file. Essentially, I want to be able to do some modal window, but I'm trying to output images for testing purposes right now.
Also, is this the correct way for jquery?
Thanks in advance!
Your code is a strange mix. Jquery code almost always needs to run after the page has loaded whereas document.write can never be used after the page has loaded.
You are incorrectly wrapping your jQuery in an immediate executing function. The proper wrap for jQuery is within :
$(document).ready(function(){
/* html of page exists now, run jQuery here */
});// notice no extra "()" after close brace as you have
or the shorthand version that does same thing:
$(function(){
/*html of page exists now, run jQuery here */
});// notice no extra "()" after close brace as you have
If you change all of your document.write to $('body').append(/* your content*/) and place all your code inside the above wrappers you will have much better success.
There is a wealth of information within the jQuery documentation and API. A good start point with more detail about the wrapping I've shown can be found here: http://docs.jquery.com/How_jQuery_Works
Your biggest problem is addressed in the other answer. You are improperly wrapping JQUery so essentially JQuery is not ready to be executed when it reaches your append statement.
It is unnecessary to wrap your html in a JQuery object (in this case):
var links = "<a href='http://juixe.com'>Hello, <b>World</b>!</a>";
$('body').append(links);
or simply:
$('body').append("<a href='http://juixe.com'>Hello, <b>World</b>!</a>");
In terms of best practice, using append, appendTo or prepend are good options depending on the context. You could also use:
$("body").html("/*Your HTML here*/")
At the end of the day you have many options but avoid document.write at all cost. The non-JQuery approach would be to use .innerHTML with a DOM element. This is also a good approach in the absence of JQuery.