I have the following path to a button within an iframe, i.e.:
div.iframe-container > iframe#builder-frame > html > body > div#header > ul.header-toolbar.hide > li > span.deploy-button-group.button-group > a#btn-deploy.deploy-button
Using the above path, I'm attempting to use jQuery to get to the a#btn-deploy.deploy-button in order to trigger a click event on this button within my iframe.
I'm unsure how to achieve this using jQuery, in order to get to this button from the parent window, within my javascript code.
I have tried the following but to no avail, i,e,:
$('#builder-frame').contents().find('#btn-deploy').trigger("click");
I understand that this maybe a duplicate but it's actually the path to get to my iframe button that I require assistance with.
To be sure your iframe is loaded you should use an on load event.
Then, to select the button you don't have to write the whole path. Especially when it has an id which should be unique.
Your code should look something like :
$("#builder-frame").on("load", function(){
$(this).contents().find('#btn-deploy').trigger("click");
});
I suggest using pure javascript.
If the id of your iframe is #builder-frame you can use:
document.querySelector('#builder-frame').contentWindow.document.querySelector('#btn-deploy').click()
Related
I'm looking at old code not written by me, so changing the code drastically is not really an option.
I want to change the html for a document to vietnamese.
<li id="menu-item-151" class="liLink"><a onclick="$('#register').click();">Enroll Now</a></li>
in another file I have
var language = getCookie('language');
if (language == 'Vietnamese'){
$("#menu-item-151").html("Dăng kí ngay") }
This works but causes the onclick functionality to disappear. How can I change change the text but keep on the onclick.
I have tried the following but that causes the onclick to always activate when the website appears.
document.getElementById("menu-item-151").setAttribute('onclick', $('#register').click())
The issue is because you're overwriting the HTML for the entire li element - which removes the a within it.
To fix the problem, change the content of the child a only, and I'd suggest using text() instead of html() in this case:
if (language == 'Vietnamese'){
$("#menu-item-151 a").text("Dăng kí ngay")
}
I would need to add a javascript code within a specific page of my wordpress site.
I would like to find a solution via plugin, otherwise maybe I could modify the code I already use specifying the page, but I don't know how to do it
This is my code:
( function( $ ) {
$(document).ready( function() {
$('.title_subtitle_holder_inner > h1:nth-child(1) > span:nth-child(1)').text('EVENTI');
});
})( jQuery );
I would need that text to be edited on a specific page, in my case the page id would be 217
Thank you
Probably no harm in injecting that minimal code into all pages, just make it so that it selects elements only when on your specific target page.
WordPress creates a class page-id-XY on the body element automatically, so just prepend your selector accordingly, so that it will only select elements on that specific page:
$('body.page-id-217 .title_subtitle_holder_inner > h1:nth-child(1) > span:nth-child(1)')
You can try to use this:
https://wordpress.org/plugins/page-specific-scripts/
Or any other method for custom scripts on specific page. From what I recall I think WordPress has this functionality built in.
I have two Divs with skip hrefs upon clicking the first href skip it should automatically scroll down to the next div.
I have tried like this
<div class="skip">skip</div>
function move_down() {
window.scrollBy(0, 50);
}
What's wrong with using an anchor link, or in HTML5 terms, a fragment. No JS required (although JS could insert the correct link/fragment if that's needed dynamically).
See
HTML Anchors with 'name' or 'id'?
I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});
I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?
I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,
Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.