Develop Reference

Trigger a button click from the parent that exists within an Iframe

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()

HTML - Auto Jump to Named Anchors

I have a website that has a search box and some options. On the mobile page, this search box and options are visible first, which is really good on the start page. But when user searches something, the result is shown in a page having again the search box and options on top.
I would like to write a piece of code, that automatically jumps to content start. Simply, I have created an anchor using: <a name="contentstart"> just before the content. When the user opens this page, it should automatically jump to contentstart without having to press any link/button. How can I achieve that.

simply give an id to your a tag,
and use following javascript function :
function jump(id){
var top = document.getElementById(id).offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there.
}​
and in onload of body tag, call the function by passing the id of the anchor tag

You can simple use id and hash in url.
// some html
<div id="contentstart"></div>
// content
After that if you sufix your url with #contentstart you jump right to constentstart div.
http://webpage.com/something#contentstart

How to create image buttons that activate jQuery/js function

I'd need to have like buttons inside tr elements to do js/jQuery things when clicked.
Strangely I'm having a hard time finding good knowledge on how to execute jQuery/js from inline html/image button.
Here's what I had in mind:
first create a custom function for the like button
jQuery.fn.likebutn = function(theword, wordnumber) {
//check if button is lighted up and if it is break
//change button to lighted up
jQuery(this).attr("src", "http://i46.tinypic.com/n18g3q.png");
//add word to a div element
jQuery('#cntrldiv0').append("<p>theword<p>");
//ajax like.php file with the word and username/id
jQuery.post('like.php', {theword:theword, userid: userid});
};
then dynamically insert the function call and it's parameters (as the table is being created in PHP) in the image button element (so inline in html)
likebutn({theword: ${'row' . $wordnumber}, wordnumber:$wordnumber});
Which outputs
likebutn(theword:foraminated, wordnumber:1)
for example.
So how do I evoke the function like that from html?
And on a side note, why is there so much event listening in jQuery/js image buttons I'm seeing when surfing the web (instead of what I'm suggesting), isn't that slower than evoking inline in html?
Here's how the construct would look: http://jsfiddle.net/Bc64R/

Unless you have a variable called foraminated, this is incorrect:
likebutn(theword:foraminated, wordnumber:1)
should be:
likebutn(theword:"foraminated", wordnumber:1)
from html:
<... onclick="jQuery(this).likebutn(...)">

HTML buttons in javascript codes

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.

How to go to anchor tag in scrollable div without having the whole browser jump down?

I'm building a simple glossary widget as part of a larger project for a client. The content of the glossary is enclosed within a scrollable div (overflow:auto). Each letter has an anchor tag associated with it (#a, #b, #c, etc). Above the scrollable div is a div which contains every letter of the alphabet. Clicking on one of these letters takes the user down to that letter's definitions in the scrollable div. This works, but an unintended side effect is that the entire window jumps down to the anchor, which is confusing and annoying to the user.
Here is the widget, stripped down a bit and with a bunch of <br />'s to let you see what I mean.
http://www.nitrohandsome.com/clients/topics/glossary-widget/
I had tried a few different javascript ideas I cobbled together from some Googling, but nothing was working, so i just got rid of everything but the actual go to anchor code (I'm a pretty big JS newbie). So right now, clicking on any of the letters executes this javascript function, with the anchor tag passed to it:
function jumpToAnchor(myAnchor) {
window.location = String(window.location).replace(/\#.*$/, "") + myAnchor;
}
How can I pull this off so the overall window doesn't jump each time a link is clicked?
Thanks in advance!

If you're using jQuery, you can try the scrollTo plugin. Also, to edit just the hash portion or the URL, you can just do
function jumpToAnchor(myAnchor) {
window.location.hash = myAnchor;
}

Try to use IFrame instead of Div or create a specific function using ScrollBy.