Wanna simulate a click on href element, but without redirect the page on browser. Actually without the user's knowledge. How can I achieve this?
Example:
var books = new Array();
$('p.tree_item_leaf').each(function(){
books.push($(this).find('a').attr('href'));
})
// for each book I wanna get the link and 'simulates' a click such that I can get the loaded content returned from the link in a variable
Thanks in advance!
Your remote click needs to be triggered somehow. In this example its being done by the click-this button
HTML:
<div class="myDiv" style="color: red;">Clicking this should open google even though this doesn't have an href</div>
<a class= "click-this" href="https://www.google.com">click this</a>
JS:
$(".myDiv").on("click mousedown mouseup focus blur keydown change", function(e) {
$link = $(".click-this");
console.log($link);
$(".click-this")[0].click();
});
jsFiddle: https://jsfiddle.net/0oecovtj/1/
Related
On my page I have an alert. The desired behavior is that when a user clicks the close button, the element will disappear and a key in the browser's Session Storage will be activated to prevent it from reappearing.
What's happening, however, is that the Session Storage key is placed at all times - regardless if the user clicks the close button. How might I go about having it only placed when the user clicks the button?
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if (!dismissed) {
alertDiv.classList.remove("off");
}
dismissButton.addEventListener("click", function() {
alertDiv.classList.add("hide");
});
alertDiv.addEventListener("transitionend", function({
target
}) {
if (target.classList.contains("hide")) {
target.classList.add("off");
}
sessionStorage.setItem("dismissed", true);
});
});
</script>
<div class="ddAlert off" id="alert">
<span class="ddAlertBtn" id="dismiss">×</span>
<h5>Text</h5>
<p>Text</p>
<a class="ddBtn black" href="#" target="_blank">Button</a>
</div>
Per the transitioned event specifications the event will fire whenever a CSS transition completes on the event target. I can't tell from your code but you probably have a transition that's happening when the alert div is loaded.
Either way; you should probably set the sessionStorage key inside the click event handler rather than the transitioned handler. That way you can make sure it's only set on the click like you're wanting.
I have a HTML & javascript custom made attribute that will show a popup containing message when a button is clicked.
Button to click :
<a data-deploy-menu="menu-sheet-tutorial-1" href="#">Tap Here to open</a>
The sheet/popup that opens :
<div id="menu-sheet-tutorial-1" class="menu-wrapper">
<div class="content">
<h4>Hello, I'm action sheet!</h4>
Close
</div>
</div>
The data-deploy-menu="menu-sheet-tutorial-1" is what firing the event to open the sheet.
And, this is what happens when the button is clicked in javascript.
$('a[data-deploy-menu]').on( "click", function(){
var menu_ident = $(this).data('deploy-menu');
$('#'+menu_ident).addClass('active-menu');
$('.fade-bg').addClass('active-fade'));
});
And, this is what happens when the close button is clicked
$('.close-menu').on('click', function(){
$('.menu-wrapper').removeClass('active-menu'));
$('.fade-bg').removeClass('active-fade'));
});
The problem i'm facing is that I'm not able to fire this event without a button click.
So, using angularJS, I want to fire this sheet automatically when the form is submitted or when a particular condition is true.
AngularJS has a directive calls ngSubmit who could be provided with an expression like a function. Here is te documentation:
https://docs.angularjs.org/api/ng/directive/ngSubmit
I have two empty anchor links <a href="#"> that are used to create tabs. Please take a look at my jsFiddle:
https://jsfiddle.net/MrSnrub/cuuy5cbp/
The problem is that the user goes to the very top of the page when going from tab to tab. I would use jQuery-UI's tabs, but I have the same HTML element for each tab, and think jQuery-UI's tabs force you to have different HTML elements in each tab.
I want to use these tabs further down my page, and making the user scroll down after every tab switch is not user-friendly. How do I fix this?
UPDATE: If I click on "Tab 1" to activate it, I shouldn't be able to hit the Tab key on my keyboard and Tab 2 is now highlighted.
Use <a href="javascript:void(0)">.
https://jsfiddle.net/obybyvds/
Here's an explanation of why that works
You can use href="#/". It should prevent this behavior from happening.
You could set the href to javascript:;
Tab 1
Or keep the href="#" and simply event.preventDefault() on click using this JavaScript:
[].forEach.call(document.querySelectorAll("[href='#']"), function(el) {
el.addEventListener("click", function(e){
e.preventDefault();
}, false);
});
jsFiddle
or in jQuery:
$(document).on("click", "[href='#']", function(e) {
e.preventDefault();
});
I have a hidden link and a button.
I want when users click on the button they will go to the link.
Why I'm not just show the link so users can click through the link because I don't want users see the link that appear at the bottom of browser.
<a id="stack" href="http://stackoverflow.com/"></a>
<button id="goTo">Stackoverflow</button>
Is it possible?
Maybe like this :
$(document).ready(function(){
$("#goTo").on('click',function(e){
e.preventDefault();
window.location = $("#stack").attr('href');
});
});
Add simple jquery to relay the click on the button. You can leave the a link out.
$("#goTo").click(function(){
window.location = "http://stackoverflow.com/";
}
Here's what I want to achieve:
When an HTML link is clicked, I want to animate it before leaving the page
If the link is opened in a new window/tab, the animation should not take place
How on earth do I achieve this?
You could use javascript
$(function(){
$(".btn").bind("click",function(){
$(this).animate({'left': '100px'}, 100, function(){
window.location.href = index.html
})
})
})
But you'll have to stop the default action if your button is a link.
You'll need to capture the click event, prevent the default action, do the animation, then load the new page.
If using jquery (Available as a jsfiddle):
$('a').click(function (event) {
event.preventDefault();
$(this).animate({
//whatever
}, function() {
location.href = $(this).attr("href");
});
});
Update: Here's the new jsfiddle that accounts for the situation mentioned in the comments, go there for the updated code. The trick is to look for the keypress of ctrl or command, and abort the newly defined animated click handler if either key is pressed.
Note: The window needs focus before it can detect a keypress, in jsfiddle, that means the frame needs focus before it'll work.