This is my link
Generate Report
It can be executed as
$('a#myreport').click(function () {/* codes */});
or
document.getElementById("myreport")
But how can I execute this from 'href' (element as 'report') instead of ID?
Using jQuery, you can use the attribute contains selector to achieve it easily, look:
$("a[href*='report']").click(function () {
/* codes */
});
Look at my jsFiddle live example: http://jsfiddle.net/ynevet/K4zZH/
From jQuery docs:
Selects elements that have the specified attribute with a value
containing the a given substring.
This is easy:
$('a[href=#report]').click(function() {
/* your code */
});
You can access attributes with [attrname=attrvalue]. Of course, you can omit the attribute-value and just select elements with any attribute set.
Related
I need to add styling to a DIV element using JavaScript. I have the following DIV in my document:
<div class="RnEpo Yx5HN " role="presentation">
The script that I have tried is:
WebElement = document.querySelectorAll("div[class='RnEpo Yx5HN ']");
WebElement.style='height: 10000px;'
WebElement.setAttribute("height = 1000px;");
I want to achieve the same styling as this CSS:
.RnEpo Yx5HN
{
height: 100000px;
}
To achieve what you require, first replace querySelectorAll() with querySelector() seeing that your only need to select the first matching element.
Consider also revising your selector from div[class='RnEpo Yx5HN '] to a more robust selector in the form of div.RnEpo.Yx5HN which is to say:
Select div elements that have classes any ordering of class RnEpo and Yx5HN
Lastly, revise the way that you're applying the inline style so that the height attribute is directly specified on the WebElement style object.
These changes make the call to setAttribute() redundant. Note also that; setAttribute() takes two arguments, and the DIV element does not have a native height attribute.
Here's a working snippet showing this in action:
/* Use querySelector() to select first matching element and use dot notation syntax to select div with both classes */
const WebElement = document.querySelector("div.RnEpo.Yx5HN");
/* Apply inline style, avoid invalid setAttribute call */
WebElement.style.height = `10000px;'
<div class="RnEpo Yx5HN" role="presentation">
How to disable Anchor(a ) tag on pageload or (by default disable) and enable it using jquery or Javascript??
You can change href attribute to data-href and add href attribute using:
$(function() {
$('[data-href]').each(function() {
var self = $(this);
self.attr('href', self.data('href'));
});
});
this will iterate over all elements that have data-href and add href attribute.
Since you need to disable the anchor tags by default, you can add a class to each tag and remove the calss using javascript.
.not-active {
pointer-events: none; // disables all the clicks
cursor: default; // shows the default cursor when you hover it instead of hand
}
Also you can change the font color and others so that the text does not appear like a link.
[EDIT]
<script>
var anchorElements=document.getElementsByTagName("a"); //Gives the list of all anchor tag elements in the page as an array.
for(i=0;i<anchorElements.length;i++) // Iterate over the array
anchorElements[i].classList.remove("not-active"); // for each element .classList returns the list of classes specified. remove() is an array function to remove an element in the array
</script>
If you are using jQuery you can use removeClass() jQuery function
$("a").removeClass("not-active");
To answer your comment ("How can I Remove calss using javascript ?? plz help") on removing class, there is a property called classList that contains its class attributes. This property provides methods that make it easy to add or remove a class. Something like:
var myItemClasses= document.getElementById("item").classList;
myItemClasses.remove("my-classname"); // to remove
myItemClasses.add("my-classname"); // to add
Hope this helps.
I want to compleately wipe the title attribute from all elements inside a html doc. From table, p, img, div etc..
Currently I do this:
$(document).ready(function(){
$("a").removeAttr("title");
$("img").removeAttr("title");
$("div").removeAttr("title");
// and so on
// and so on
// and so on
});
Is there a more elegant way to do this? Without selecting individual elements?
Use the attribute selector and select just the elements with the title attribute and not all elements.
$("[title]").removeAttr("title");
The all selector, *, selector should do the trick
$('*').removeAttr('title');
You can simply do this using All Selector (“*”):
$("*").removeAttr("title");
Without jQuery this would be:
Array.from(document.getElementsByTagName('*')).forEach(elem => elem.removeAttribute('title'));
or e.g. to remove the attribute only from specific tags, e.g. img:
Array.from(document.getElementsByTagName('img')).forEach(elem => elem.removeAttribute('title'));
I would like to find all elements inside a container that have a certain data attribute set to 1 as well as all elements that don't have this attribute set at all.
The data attribute is as follows:
$("#element").data("activate")
It can have a value of 1 or 0. If an element doesn't have an "activate" data property set I want to treat it as a 0.
I have the following code at present:
$("#content").find("[data-activate='0']").off();
However I would also like to do something like this:
$("#content").find("all where data-activate NOT exists").off();
ie if an element doesn't have the attribute even set.
You can use :not:
$('#content :not([data-activate])').off();
Or filter():
$('#content div').filter(function() {
return !$(this).attr('data-activate');
}).off();
$("#content").find(":not([data-activate])").off();
TRY
$("#content div").map(function {
$(this).data("activate","1")
}
This will simply add data-activate = 1 to all div inside #content whether it is 0 or that attribute does not exist
You can use the two selector at once to select the element, separting them (selectors) by comma
:not() Selector.
Attribute Equals Selector.
$("#content [data-activate='0'], #content :not([data-activate])").off();
trying to add a CSS class to a a parent item when the URL contains a directory path.
For instance if my url is
example.com/directory/about.html
I want to add a CSS class an item in my top navigation if it contains /directory/ in it.
so in this case, example.com/directory/overview.html would get a CSS class "active-parent"
which would be .main-nav li a.active-parent
(mind you I am already using jquery to check for teh URL and make that page active, but its when its a sub page of a section, the parent is not highlighted)
I thought I could usde the :contains() Selector but I dont know how to apply it to a URL
jQuery selectors can't be used on an url. You must parse the url and check the content be yourself.
if (window.location.href.indexOf('/directory/') != -1) {
// Add a css class to a html element
}
You may want to do a more generic way be using the split function :
window.location.pathname.split('/').forEach(function(directory) {
if (directory == 'directory') {
// Add a css class to a html element
}
});
Based on limited information, I'd suggest:
$('a').filter(
function(){
return this.href.match(/(\/\w+\/)/);
}).parent().addClass('parent');
This assumes the class is added if the href contains any directory, not simply a specific directory named 'directory'.
References:
match().
Regular expressions in JavaScript.
I f I understand you correctly, you want to filter through a group of urls and then, based on text within the href, you want to manipulate data. In that case, use the .filter() function like so:
$("a").filter(function(i) { return $(this).attr("href").indexOf("document") > -1; })
This Grabs ALL A tag elements, filters them using the function inside to determine if the href has "document" in it or not. Then simply use the .each() function to do whatever, like so:
$("a")
.filter(function(i) { return this.href.indexOf("document") > -1; })
.each(function(i) {
$(this).parent().addClass("some-class-name");
});
See jsFiddle Example
If you need more understanding, just comment.