I have DOM like below:
<body>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
<input type="text" class="pi" value=""><br>
<input type="text" class="vi" value="">
<button>users</button>
</body>
When user clicks on button it appends new 'td' to 'tr'. It works good.
Problem:
On 'a' click I want to open two links. The best would be when first redirects current page to another and second opens seperated window. I tried to change 'a' on another tags, but did not help.
$('button').click(function () {
var pic = $('input[type="text"].pi').val();
var vid = $('input[type="text"].vi').val();
var cont = '<td><a data-big-image="' + vid + '" href="#"><img src="' + pic + '"></a></td>'
$('table').children('tbody').children('tr').last().append(cont);
});
$('a').click(function(e) {
e.preventDefault();
var bigImage = $(this).data('big-image');
window.open(bigImage);
window.open('xyz');
});
Make a link like it's normally done
Next place an inline element (ex. <b>, <span>, etc) inside the link
Then add an inline attribute event handler to the new element.
<a href="https://google.com" target="_blank">
<b onclick="location.href='1st_location.html">GO</b>
</a>
Demo
(does not work due to SO's security measures, see PLUNKER)
<a href="https://google.com" target="_blank">
<b onclick="location.href='https://example.com';">GO</b></a>
Related
How to keep click event(colour change event) if URL has changed after click.
this script below that for click a tag, the URL will changing it.
<script type="text/javascript">
function sigun(sigun) {
location.href = '/openSec.do?sigun=' + sigun + '&categoryCode1=select1' + '&categoryCode2=mon' + '&categoryCode3=00';
}
this JSP code is sample code. if section1 cliked, the URL will chaned /openSec.do?sigun=' + section1 ..... like that. I think this mean the page refresh it.
<div class="gnmap_txt_area">
<div class="cw map_box">
<div class="map_txt01">
<a href="javascript:sigun('section1');">
<c:forEach var="eventCnt" items="${eventCnt}">
<c:if test="${eventCnt.signgu == 'section1' && fn:length(eventCnt.signgu) > 0}">
<div class="jb-title"><img src="/images/ico_map_event.png" alt="eventit"> </div></c:if>
<div class="jb-text">
<c:forEach var="eventMain" items="${eventMain}">
<c:if test="${eventMain.signgu == 'section1'}">
<span style="font-size: 5px">* ${eventMain.evenNm} <br /></span>
</c:if>
</c:forEach>
</div>
</c:forEach>
<p>section1</p>
</a>
</div>
</div>
</div>
And JS blew is click event code.
$('.map_box').click(function () {
$('.map_box').removeClass('on');
$(this).addClass('on');
});
if clicked select1, the div (class="cw map_box") will change (class="cw map_box on")..
it works well but the problem is when i clicked select1 the page refresh it then click event also disappear.. is there anay way to keep click event? it just color change event
thank you
I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID. When clicked, I want to show a popup which shows information unique to that link.
For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id: less_preview_popup-UNIQUE_ID (the unique id for the link and popup both match).
Here is a sample of my html code:
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
Here is the jquery i'm currently using:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
$('.lesson_preview_popup').css('top', '25%');
$('body').addClass('no-scroll');
});
The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?
Use the data-attribute:
<a data-popup="lesson_preview_popup_801" ....
And
$("#"+$(this).data("popup")).show().css('top', '25%');
Using $(this).next() instead, assumes that the div to show is the next sibling of the link
Change this:
$('.lesson_preview_popup').css('top', '25%');
into this:
$(this).next().css('top', '25%');
Alternatively, save the ID (e.g. 801) in a new attribute, like this:
<a data-id="801" ...
Then, call the popup like this:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
var thisId = $(this).attr("data-id"); //get "801"
$('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
$('body').addClass('no-scroll');
});
Jquery .next() select next sibling of element. Use it like bottom example
$('.library_vid_link').click(function( event ) {
event.preventDefault();
$(this).next().show().css('top', '25%');
$('body').addClass('no-scroll');
});
$('.library_vid_link').click(function( event ) {
//event.preventDefault();
$(this).next().show().css('top', '25%');
//$('body').addClass('no-scroll');
});
.lesson_preview_popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
I have two embedded <span> elements inside an <a> element. I need to trigger a click event on the second <span>. The by.id method on the id classes I created didn't trigger a click. I also tried by.binding and that didn't work. help please?
The code:
<div class="add-player">
<a href class="btn" data-ng-if="!currentUser.isAuthenticated && !vm.hasPendingInvitation">
<span>Add Player</span>
</a>
<a href class="btn" id="invite" data-ng-if="currentUser.isAuthenticated && !vm.hasPendingInvitation">
<span id="invite-player">Add Player</span>
</a>
</div>
We can play around with locators:
$("div.add-player a span").click();
$("#invite-player").click();
element(by.xpath("//span[. = 'Add Player']")).click();
We can also wait for the element to be visible:
var addPlayer = $("div.add-player a span"),
EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(addPlayer), 5000);
addPlayer.click();
We can also try clicking via JavaScript:
browser.executeScript("arguments[0].click();", addPlayer.getWebElement());
Or via browser.actions():
browser.actions().mouseMove(addPlayer).click().perform();
Or, scroll into view before clicking:
browser.executeScript("arguments[0].scrollIntoView();", addPlayer.getWebElement());
addPlayer.click();
You can also filter the visible element matching a locator:
var addPlayer = $$("#invite-player").filter(function (elm) {
return elm.isDisplayed();
}).first();
addPlayer.click();
I'd like to make a link to a input. My current link example works (takes me to the area where the id is set) but what I really want is when a user clicks on the link to take him exactly to the input, being able to type right away.
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Is this even achievable without JQuery/JavaScript? Please post solutions in any method you can imagine. Been searching for this for a while and couldn't find an answer.
No need to use javascript: use a label instead of a link with the for attribute
<input type="text" id="search" name="search">
<label for="search">
<img src="http://www.example.com/images/something.jpg" alt="something">
</label>
if you also need a smooth page scroll animation, in order to reach the top offset of the input element, you can instead use a script, e.g.
Codepen Example: http://codepen.io/anon/pen/VLyOqg
$(function() {
$('label[for]').on('click', function(evt) {
evt.preventDefault();
var inputId = "#" + $(this).attr('for');
$('html:not(:animated), body:not(:animated)').animate({
scrollTop: $(inputId).offset().top
}, 600, function() {
$(inputId).focus();
});
});
});
<script>
function setFocus(){
elm = document.getElementById("search");
jump(elm);
elm.focus();
}
function jump(elm){
var top = elm.offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there.
}
</script>
...
<a href="javascript:setFocus('search')">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Use jQuery focus!
$('[href="#search"]').click(function(){$('#search').focus();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
I want to give user options to edit title of navigation bar. So, when user would click edit, I want to give them a text field and a submit button.
Here is the code(within PHP block)
$n1="<div id='nava' class='nav' >
<a href=#>$nava</a>
<input type='submit' id='nav1' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n2="<div id='navb' class='nav' >
<a href=#>$navb</a>
<input type='submit' id='nav2' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
$n3="<div id='navc' class='nav' >
<a href=#>$navc</a>
<input type='submit' id='nav3' class='b' onclick='edit(this.id,???)' value='Edit'>
</div>";
if I do edit(this.id,nava),it gives me object DivElement message,when I do alert.
But I need the id of div as string.Passing the id of submit button works perfectly, but I cannot figure out how to pass the id of corresponding div to edit function. How would I do that?
parentNode is definitely the right way to go about getting the parent Div's id (without using a framework like JQuery). You can read more about it here: https://developer.mozilla.org/en/docs/Web/API/Node.parentNode
Back to your example, you could simply write a JavaScript edit() function like so:
function edit(id) {
var divId = document.getElementById(id).parentNode.id;
console.log(divId);
}
Using your HTML, I have put together a quick fiddle for you to show how this can work
http://jsfiddle.net/wj7bch3m/
Hope that helps!
You could do something like this to change the different navs
html
<div id="nav">
Link
<input type="text" for="link1" id="newLink" class="changeNav"/>
</div>
jquery
$(".changeNav").on("change", function(){
var newLink = $(this).val();
var whichNav = $(this).attr("for");
$("#" + whichNav).empty().append(newLink);
});
here is a JSFIDDLE
Hope this helps