I have a slight problem in the sequence of my tabindex route. Theoritically, I would need just on hit on tab key to jump from one element to another, but it doesn't
I have the following HTML code :
<div>
<input class="location_input_inrest_dish_pages" type="text" placeholder="Look up for a city" id="myAnchor1">
<a href="#" title="Search" id="myAnchor2">
<button class="search_icon_container" >
<p class="go_text_in_search">Go!</p>
<img class="search_icon_restpage" src="../../static/wm/images\searchicon_30x30_red.png">
</button>
</a>
<a href="#" title="Locate me!">
<div class="around_me_icon_container">
<img class="locateme_icon" src="../../static/wm/images\target_30x30_whitev1.png">
</div>
</a>
</div>
<div class="large_map_in_restaurants">
<div id="map">
</div>
and following JS at the end of the document:
<script>
function myFunction() {
document.getElementById("myAnchor1").tabIndex = "1";
document.getElementById("myAnchor2").tabIndex = "2";
}
</script>
I have used this bit of JS to try to control the "route" of tabs so that when i am on the Input element, when hitting the tab key, i will land directly on the "go!" button, and then I can press enter.
However, problem that i have is that somehow, from the input element, I need to hit the tab key twice before "landing" on the button element, instead or just one hit...as you would expect .
Related
When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?
You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.
This is my following code:
<div class="w3-container" id="menuTopics">
<button>
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
I want to set an onclick event for the button like this which will hold the value of the href attribute
<div class="w3-container" id="menuTopics">
<button onclick="window.location.href='//somesite.com/someparam'">
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
since href holds the value of the url, I want the same for onclick event. This is my requirement.
The following is the javascript I have written.
var getChilds = document.querySelectorAll("#menuTopics button");
getChilds.forEach(function (item) {
item.setAttribute('onclick', 'location.href=""');
})
However I donot know how to get the value of the href from a tag.
You need to grab the href value to assign it.
var getChilds = document.querySelectorAll("#menuTopics button");
var href = document.getElementsByTagName('a')[0].href;
getChilds.forEach(function(item) {
item.setAttribute('onclick', `location.href='${href}'`);
})
var buttons = document.getElementsByTagName('button');
console.log('these are your buttons with on click events', ...buttons)
<div class="w3-container" id="menuTopics">
<button>
<a href="//somesite.com/someparam">
<img src="/images/keywordicons/leadership.svg" class="keyicon" />Leadership
</a>
</button>
<button>.......</button>
</div>
i have a form with two fields such as phone, email like below image.
when i click on the plus button , i want to append one extra text field in form below the button. and i want to remove the text field when clicking the minus button.
dynamically add the fields and set name for unique for that. i need these data to insert into table.
my html code is showed in below..
<div class="RegSpLeft"><input type="text" value="Phone"></div>
<div class="RegSpRight"> <img src="images/plus.png"> <img src="images/minus.png"> </div>
This might help you.
<div class="RegSpLeft" id="phone">
<input type="text" value="Phone">
</div>
<div class="RegSpRight">
<a href="#" class="pl">+
</a>
<br/>
<a href="#" class="mi">-
</a>
</div>
<script type="text/javascript" src="dist/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('a.pl').click(function(e) {
e.preventDefault();
$('#phone').append('<input type="text" value="Phone">');
});
$('a.mi').click(function (e) {
e.preventDefault();
if ($('#phone input').length > 1) {
$('#phone').children().last().remove();
}
});
});
</script>
My code:
Jquery part:
$('#yesdownloadvideo').click(function(){
var expiryTime = parseInt($('#expirytime').val());
$('#fade, #popuprel').fadeOut()
setCookie("emailpopup","cookie already set",expiryTime);
});
Html part:
<div class="yes-btn"><a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank" style="text-decoration:none"><input type="submit" class="yesbtn-src" value="<%=yesText%>" /></a></div>
Use preventDefault() like,
$('#yesdownloadvideo').click(function(e){
e.preventDefault();
var expiryTime = parseInt($('#expirytime').val());
$('#fade, #popuprel').fadeOut()
setCookie("emailpopup","cookie already set",expiryTime);
});
Also change your html like
// Remove your submit button from link
<div class="yes-btn">
<a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank"
style="text-decoration:none"><%=yesText%></a>
</div>
Or add submit after link
<div class="yes-btn">
<a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank"
style="text-decoration:none"><%=yesText%></a>
<input type="submit" class="yesbtn-src" value="<%=yesText%>" />
</div>
Your HTML is invalid. You cannot have an input inside an a. Browser recovery from that error is inconstant. It looks like the input is trapping the click in IE.
You can have either a link or a submit button there, but not both.
I have three input fields for collecting telephone numbers from users. I display one field and hide the other two. I have placed a link(Add home number) below it and when you user clicks on the link it shows the hidden input field. And I have placed one more link below it when clicked displays the last input field.
<input type="text" />
<a href="#" class="show" >Add Home Number</a>
<div style="display: none">
<input type="text" />
<a href="#" class="show" >Add Office Number</a>
</div>
<div style="display: none">
<input type="text" />
</div>
And the jquery looks like this..
<script>
$(function(){
$(".show").click(function () {
$(this).next("div").show("slow");
});
});
</script>
The first link works fine, But the second one does not work.
I appreciate all help.
Thanks.
you have to use the each function:
like this:
$(".show").each($(this).click(function () {
$(this).next("div").show("slow");
})
);
.next() only selects the next sibling element. You links have no subsequent siblings, because you close the parent element (the div) immediately after. You need to select the next sibling of the div:
<script>
$(function(){
$(".show").click(function () {
$(this).parent().next("div").show("slow");
});
});
</script>