I have an oracle apex page. I defined a tabscontainer region in it. There are two sub regions to this region. There is a hyper link inside each sub region, which is coded like
<a class="t-Tabs-link" href="#SR_R1" role="presentation" tabindex="-1">
<span>1</span>
</a>
in first region and
<a class="t-Tabs-link" href="#SR_R2" role="presentation" >
<span>2</span>
</a>
in second region.
I want to remove tabindex property of first region from this code using javascript and add property tabindex="-1" to second region.I can not add an id to this hyper link since oracle apex do not allow to edit default html attributes. How can I do this without assigning id ? or is there any way that I can assign id to this hyper link?
You can use document.querySelector and you don't need to know <a>'s ID.
You can remove tabindex by this.
document.querySelector('.t-Tabs-link:first-child').removeAttribute('tabindex');
You can set tabindex by this.
document.querySelector('.t-Tabs-link:last-child').setAttribute('tabindex', -1);
Use Jquery removeAttr to remove the attribute from any element.
Select the first index element and simply remove attribute from it
$(".t-Tabs-link").eq(0).removeAttr("tabindex");
You can also set attribute via Jquery attr() function
$(".t-Tabs-link").eq(1).attr("tabindex" , -1);
example
Related
I am using table and the element inside the table are added dynamically with the JSON data. The table data consists of Id and other things. I had put id inside the anchor tag so that it gets navigated to another page which shows all the data of that Id. I want to show the data of only selected Id. So I want to set the element inside the anchor tag to a variable ... is there any way to achieve this ?
<a href="other_page.html">link Label<a>
Now I want to store this "link Label" into a variable in JavaScript or AngularJS is there any way?
You can use data attribute for this. for example
<a href="other_page.html" data-id="3" id="click">link Label<a>
and in you javascript :
<scrtipt>
document.getElementById("click").addEventListener("click", function(event){
alert(this.getAttribute("data-id"));
});
</script>
Hope it can be helpful.
<a id="jsonObject.id" href="other_page.html" onClick="clickFunction">link label</a>
You can set anchor id with that particular id. Then on click function you can send event object and get that particular ID.
JS code
function clickFunction(event){
console.log(event.currentTarget.id);
}
Sure you can do!
You can get the text inside tags by calling .innerHTML of the element. In your case this would mean something like this:
<a href="other_page.html" id="tagid">link Label<a>
You need an id for the tag and then in JavaScript
var value = document.getElementById("tagid").innerHTML;
I am new to angularjs. I am using a textangular to show a html document. I want to highlight some words from that html and also want to focus that word.So, I am using tabindex and class = mark to highlight and focus. So, Here At first I am adding
<span class="mark">ABC</span>
so that It will get highlighted, after that I want to add a tabindex=1 attribute to this .So that It become like
<span class="mark" tabindex="1">ABC</span>
Here I want to add this tabindex dynamically. That means , I want to find that text and then add a tabindex to that text only.How can I achieve this ?At a time tabindex can be applied to only one word.
.focus() or keyboard navigating / tabindexing <span>'s is not reliable.
You need to use empty hyperlink tags, like so:
ABC
$("button").click(function() {
$("a.mark:contains('ABC')").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ABC
ABC1
<button>Next</button>
You can try with contains() like this.
Change span to a to get default href highlighter.
$("button").click(function() {
$("a.mark:contains('ABC')").attr("tabindex", 1);
$("a.mark1:contains('ABC')").attr("tabindex", 2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="mark" href="#">ABC</a>
<a class="mark1" href="#">ABC</a>
<button>Next</button>
In my web I have more than 5 links,some of them are in the same group. I want to make them hide or show together.So I give the same name to the common link.But How to operate them?
<a href='a.jsp' name='group1'>aa</a>
<a href='b.jsp' name='group2' >bb</a>
<a href='c.jsp' name='group1'>cc</a>
<a href='d.jsp' name='group2'>dd</a>
<a href='e.jsp' name='group1'>ee</a>
If use input,I can write like $("input[name='group1']").hide();.But now is link tag.How to operate them?
Classes are our friend - forget trying to use a name attribute - this is not the correct use for that. What you want to do is add a class and then alter the display based on the class:
//HTML
<a href='a.jsp' class='group1'>aa</a>
<a href='b.jsp' class='group2' >bb</a>
<a href='c.jsp' class='group1'>cc</a>
<a href='d.jsp' class='group2'>dd</a>
<a href='e.jsp' class='group1'>ee</a>
//js
$('.group1').hide();
you can also add css in the jquery
//js
$('.group1').css('display','none');
but the better way of altering the display state is to have a class that you then add or remove to the elements - that way you are not altering the actual css of the element:
//css
.hidden {display:none}
.shown{display:block}
//js
$('.group1').addClass('hidden');
you can also toggle the class - which allows you to show the elements simply by not hiding them
//js
$('.group1').toggleClass('hidden');
You can select all of the anchor tags with this the same code as you would use for input, but you just specify that you want to select the <a> tags, and then you can call the method hide().
$("a[name='group1']").hide()
The [name='name'] part of the code is called CSS attribute selector, and it can be used with most HTML tags.
See this:
https://css-tricks.com/almanac/selectors/a/attribute/
And this:
https://developer.mozilla.org/cs/docs/Web/CSS/Attribute_selectors
Although when doing something like this, it would be much better to use classes.
Working a page of buttons which populates a textarea with the value of the buttons.
This works fine for items that are buttons, but cannot get it working for list items.
I have to use a list item since some buttons have a drop down.
jsfiddle shows the list item alerting 0 even thought it does have a value.
http://jsfiddle.net/hsw32zv8/
<li class='item_value' value='value'>
<a href='#'>Click</a>
</li>
<br><br>
<button type='button' class='btn btn-success item_value' value='value2'>Click 2</button>
jQuery:
$(".item_value").on('click',function(){
alert(this.value);
});
value is not a valid attribute for the li element (unless it's in an ol, but that seems unlikely given your issues and the fact the value of the attribute you had was a string not a number), nor does the DOMElement for that tag type have a value property.
Adding non-standard attributes to your markup will render the page invalid and may lead to JS and UI problems. If you want to create a custom attribute, use data-*:
<li class="item_value" data-value="value">
Click
</li>
$('.item_value').on('click', function(){
alert($(this).data('value')); // = 'value'
});
li element doesn't have value attribute. However if you still want to get it use attr method:
$( this ).attr( 'value' );
jsFiddle
A list item <li> haves a value but it only takes numbers (note they should be in an <ol>). You gave a string (at interpreted that as 0) so for example:
<li class='item_value' value='1010'>
Click
</li>
Will show up as a value of 1010. You can get around this by adding a data- attribute instead: data-value="someStringHere"
just modified your this.value to $(this).attr('value').
so the complete code:
$(".item_value").on('click',function(){
alert($(this).attr('value'));
});
hopefully helping
Is there a way to select optgroup?
It seems to be disabled all the time. I have tried searching for javascript solutions but could not find any good ones.
A simple
document.getElementById
should suffice. See the JSFiddle I cooked up for you!
var optGroup = document.getElementById('myOptGroup')
optGroup.innerHTML = "<option value='saab'>Saab</option>"
Unfortunately, there is no way to do this inside the native HTML SELECT element. There's also no way to style options inside of a SELECT element, so you can't just use options and make some of them look like optgroups.
You'll have to come up with a work around using a combination of A and UL elements. Here's a basic one using the below HTML:
<div>
Select
<ul>
<li class = "group">
<a href = "#">
Foods
</a>
</li>
<li class = "choice">
<a href = "#">
Hamburer
</a>
</li>
<li class = "choice">
<a href = "#">
Hotdog
</a>
</li>
</ul>
</div>
Fiddle here
Well you can have an example here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
Its just more like a tag, to tell about the options below. Or just like a caption.
If you want to select multiple ones then you might use jQuery created select. I mean a custom one, or you can use checkboxes and merge them in a list as a select tag.
There is no other way to select two options from one select element. Each select must have one and only one value.
Other way is to add the value to each option, and then seperate them using ,. But there is no option to select optgroup Its just a way to group the options under it or more like a label to them.
I am getting a warning alert that I am missing a point, do you want to click on the optgroup and select a value under it? I think this might be the condition!