I have button within iframe that needs to clicked after the page is loaded. How to do it? I have tried using Jquery but trigger event but something is missing.
jQuery(document).find('iframe').each(function() {
var sel = jQuery(this).attr('__idm_frm__');
find('cbe_searchcontainer a').click();
});
$('iframe').contents().find('#cbe_searchcontainer a').each(function() {
$(this).trigger("click");
})
Is this what you're looking for?
If cbe_searchcontainer is ID, may be you should change it to #cbe_searchcontainer to make a correct jQuery selection.
Related
In my project , there is one anchor element as follows.
TRY NOW
I just want to disable the above anchor element when page completely loads. Actully I have used removeattr property of jquery. But I only want to disable the anchor element without removing onClick() event. So please help me in this question.
You say you'd like to keep your existing attribute handler. I suppose you're talking about handler definition, but not its processing, because that's what you're trying to prevent.
Solution 1: remove attribute completely
$(function(){
$(window).load(function(){
$("a").removeAttr("onclick");
});
});
Solution 2: change attribute code
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("onclick", "return;" + existing);
});
});
Solution 3: change attribute but store definition
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("data-onclick", existing)
.removeAttr("onclick");
});
});
This JSFiddle shows all three solutions. I've written it so that it doesn't change links on page load but rather simulates page load by clicking a link. Click any of the first three links first then simulate page load and click any link again and you'll see that all of them work.
You can try this
Using CSS
a{
pointer-events: none;
}
Dynamically using jquery
$(document).ready(function(){
$('a').css('pointer-events','none');
});
write script like below
$(window).load(function(){
$("a").removeAttr("onclick");
});
I have a page that has a lot of JS created elements. So i wish to focus a textarea after it appear. I try to make it with help of addEventListener like so:
mytextarea.addEventListener('someEvent', function(e)
{
this.focus();
});
My problem is, that i can not found the right Event, that would be fired at the moment, when textarea get appended in the document, like here
document.getElementsByTagName('body')[0].appendChild(mytextarea);
Native JS Only please. Thank you
Have you tried this:
document.getElementsByTagName('body')[0].appendChild(mytextarea);
mytextarea.focus();
FIDDLE
this should work:
<textarea autofocus></textarea>
Put your focus in
$(document).ready(function(){
//Here
});
This mean your textarea is appended to the document.
And without jQuery :
window.addEventListener('load', function () {
//here
});
I'm a jQuery newbie and I've spent hours trying to find the answer to this and the documentations didn't help me much.
I simply want to change the style of:
#footer_menu{bottom:0;}
to
#footer_menu{bottom:-48px;}
once ANY link on the page is clicked. No IDs whatsoever, I just want to be able to trigger that function whenever ANY link is clicked.
I'm starting to wonder this is not at all possible and it should be done by adding IDs to the A tags. is this true and what's the best way to achieve this?
Try like this, Demo on JsFiddle
$('a').click(function() {
$('#footer_menu').css('bottom', '-48px');
});
$('a').on('click', function(e) {
$('#footer_menu').css('bottom', '-48px');
e.preventDefault();
}
$('a').on('click', function(event) {
$('#footer_menu').css('bottom', '-48px');
event.preventDefault(); // only if links should not navigate afterwards
});
You just basically select all anchors with $('a').
Excuse my ignorance but I've been searching for this for a while and I can't figure out how to change the href of the following:
<a id="p2749244"class="nohover"onfocus="this.blur()"name="index"rel="history"onmouseout="this.className='nohover';"onmouseover="this.className='hover';"href="address">
What kind of selectors do I need to use to do this? Thanks in advance.
onmouseover="this.href = 'urlHere';"
Or using jQuery, you can use the class selector.
$('.nohover').hover(function(){
this.href = "urlHere";
});
Instead of having inline event handling use jQuery to manage it better, try this.
$('.nohover').hover(function(){
$(this)
.addClass('hover')
.removeClass('nohover')
.attr('href', 'urlHere');
}, function(){
$(this)
.addClass('nohover')
.removeClass('hover');
}).focus(function(){
$(this).blur();
});
Why dont you do this with jquery instead? I think it might be more reliable than the old fashioned DOM method.
$(document).ready(function() { $('#p2749244').attr('href', 'new address'); });
onmouseover="this.href = 'blahblah'"
$('a[name="index"]').hover(
function(){$(this).attr(href,'new_href_here')},
function(){//code for mouse out here}
)
I've got a page with some questions and answers, the answers are collapsed by default. When they click the question I expand the hidden answer-div. The problem is that when I click these questions, the window jump to the top of the screen. This is not a huge problem, but I find it annoying, because I have to scroll down to the question again.
The links simply looks like this:
Myquestion
And I've used jQuery and .click as event-listener.
Are there any simple ways to avoid this, or do I have to use .scroll and finding the coordinates of the question? I'd rather avoid this.
EDIT: I know that I can use anchors to do this, but I'd like to avoid any jumping of the screen at all.
You need to add preventDefault() to your click handler. This will stop the browser executing it's own link handler, and will only run the code you specify.
Example:
$("#myID").click(function(e) {
e.preventDefault();
// Do your stuff
});
Don't use A tags for tasks that are not navigation-related. It is not semantic markup, and doesn't degrade gracefully. Use buttons instead.
You can do it very simple:
Just add ! in the end of your href:
Myquestion
The alternative jQuery ways are:
$("#myID").click(function(e) {
e.preventDefault(); // one way
return false; // second way prevent default click action from happening
});
$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
e.preventDefault()alone did not work in older versions of IE.
Actually, the easiest way to do this is to remove the href attribute from your anchor tag. As of HTML5, anchor tags don't need to include href attributes to be semantic.
So
<a id="myID">Myquestion</a>
instead of
Myquestion
This works in IE8+, Chrome, and Firefox. Note that :link css styles won't apply to anchor tags that don't include href attributes.
If you need the href attribute and/or IE7 compatibility, then
$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
is probably the best way to go.
$('a').click( function() {
if ($(this).attr("href") == window.location.hash) {
event.preventDefault()
}
});
You are looking for event.preventDefault (see jQuery API).
$(...).click(function(e) {
e.preventDefault();
// your code
});
Example with nice scrolling to answer content:
$("#question_title").click(function(){
var $answer=$("#answer");
$answer.slideDown();
$.scrollTo( $answer, 800 );
return false;
});
I'm used jQuery scrollTo plugin.
Inside your function of:
And I've used jQuery and .click as event-listener.
Will look something like:
$("#myID").click(function(){});
Change this to (don't forget the param e inside function(e):
$("#myID").click(function(e){
e.preventDefault();
});
$('body').on('click', '[href^=#]', function (e) {
e.preventDefault()
});
if the selector ex.."body" is there during the initial render then use the any selector .. id ... to target the general to have jQuery (as of 1.8.2) iterate over. the "On handler invoke a method called "bind" which is used for newly added content to the DOM",. Using the "[href^=#] will select any href that are in the section tag but you can replace section with anything or nothing and it applies a cancellation to the click event. This technique is great for dynamically created content to the DOM
If you add a "\" to the "#" it will prevent from going to the top.
Myquestion
HTML:
<a id="like-post" href="#\">like</a>
JavaScript:
$('body').delegate('#like-post','click',function(e) {
e.preventDefault();
.....
});