Develop Reference

Javascript code for focusing on a certain div after loading the page

I'm trying to make a page horizontally and my problem is, and it starts from the end(DIVs are defined in right-to-left order, and it shows the one which is on the left)
I need a function to tell the browser to focus on the right div onload,so the user won't get confused.
thank you.
s.rb

By focus I assume you mean you want to scroll to the correct div on load.
if the div was defined like:
<div id="main"></div>
you can scroll to it in javascript with:
window.location.hash = '#main';
I hope this helps

You can do something like this
Set tabIndex to the element which you want to focus.
HTML
<div id = "iWillBFocused">
I will be focused on referesh
</div>
JS
document.getElementById('iWillBFocused').focus()
JSFIDDLE

Vanilla JS
There is a focus function that can be called on an html element:
document.querySelector('#myElement').focus();
You can read more about it on the Mozilla Documentation site.
jQuery
If you're using jQuery, you can also use the built-in jQuery focus() method:
$('#myElement').focus();

How do I simulate a click on a div with javascript

I am looking for a way to be able to rig a shortcut to a youtube controll button. I want to be able to click on the left and right arrow to activate "Previous video" and "Next video" on a playlist. I used to be easily able to do it myself, but they made some changes and since those I can't quite replicate what i used to have working.
I use the Google Chrome Shortkey Plug-in to manage my short cut keys. I make the right key execute a javascript code only on "https://www.youtube.com*"
The problem reside in the script to execute. I used to simply do a document.getElementById but now they use class instead of id and I cant get it to work. Their buttons are divs and they go like this:
<div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: inline-block;">
</div>
<div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: inline-block;">
My code actualy comes from another Stackoverflow Question
Still, if I put all of that together to make the folowing code it doesn't work.
simulate(document.getElementsByClassName("ytp-button ytp-button-prev"), "click");

getElementsByClassName returns an array, since you can have multiple elements with the same class name. You can pick them by document.getElementsByClassName("ytp-button ytp-button-prev")[index]

jQuery is not the best solution for all our projects, but for simulate events it's not bad option
(function($){
$('.element').click();
// same for others ex: $('.element').keyup();
})(jQuery);
example: http://jsfiddle.net/h0po3q3w/

If you are using jQuery, you can target the element then trigger a click event like this:
$( ".ytp-button-prev" ).trigger( "click" );

Jason has your answer, but an alternative is to use document.querySelector. If there is only one button with those classes, or you want the first one, then:
var button = document.querySelector('.ytp-button.ytp-button-prev');

Click event not working on a div appended dynamically in IE

I am using jquery geocomplete plugin to show address suggestion when user type any address. It appends one div dynamically having class "pac-container". It looks like this :
<div class="pac-container">
<div class="pac-item"><b>SDG</b>, Vaishali, Bihar, India</div>
<div class="pac-item"><b>SDG</b>M, Kuber Nagar, Ahmedabad, Gujarat, India</div>
<div class="pac-item"><b>sdg</b>sdf, Isselburg, Germany</div>
<div class="pac-item">Lorong <b>Sdg</b> Kasim B Hamid Malacca Melaka Malaysia</div>
</div>
Now my problem is when I click on any of the pac-item I have to stop event bubbling. How can I attach the event handler on dynamically added pac-item for IE.
JS Fiddle : http://jsfiddle.net/EcPdP/2/
It is working fine for all browser except IE. In IE, clicking on pac-item is propagating that click event to body. Please help me to solve this.

try this:
$("#input-geo").geocomplete().bind("click",function(e){
e.stopPropagation();
e.preventDefault();
});
Which version of IE are you checking in?

I had similar problem for IE and later on narrowed down to IE10 only.
To solve try adding
background-image:url(/none)
to the div elements that are not displaying. For some reason it works even if a non-existing image is inserted, so I used that.
It turns out that due to the fact that the dynamically created div was made transparent using progid:DXImageTransform, IE didn't capture events for said div.
I don't remember where I got this solution from. If I fond original link, I'll update the answer.

How to disable URL tooltip (status bar)?

When I click on a link (or hover with a mouse), the URL shows up at the bottom of the screen. That's the default behaviour in Firefox.
How can I prevent this ?
I'm making a website for tactile interfaces.
Thanks !

It would be better if you are using any other tag other than <a> if suppose you are using a
<div id='idofdiv'> tag
the query will be
$('#idofdiv').click(function(){
window.open('www.google.com');
});
hope this helps!!

Browsers don`t show what object will do onClick, so try this:
<div onclick="location.href ='http://www.google.com';"> click me </div>
Or you can use span which is inline element:
<span onclick="location.href ='http://www.google.com';"> click me </span>

you can achieve this using jquery,
first inlcude the jquery library in your page then
write the script in the page
$(function(){
$('[data-url]') //select all elements having data-url
.click(function(e){ e.preventDefault();
window.location.href= $(this).attr('data-url')})
})
and in the html
<span data-url="#/inbox" >Go to inbox</span>
<a data-url="mydraft.html">Drafts</a>

This is not possible and CSS is nowhere here, you just cannot do it with CSS, well you can use something like this to spoof the <a> link but I suggest you don't use all this, without any specific reason, anyways they'll find the URL from the source page
Spoofing
Demo
Note: Actually just checked, the demo is not working on the fiddle page but just make a local .html page and it will work

Click a button made from div with JavaScript?

In Google+, the button that is used to post a comment is made from a div:
<div role="button" id=":1vq.post" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
I think I can click it with:
document.getElementById(":1vq.post").click();
But it says that the element have no attribute click, and I found that onclick is null. So how could I click the button with JavaScript?

EDIT: After a chat with wong2 who started this question and a lot of failed guesses for what this question is really about (the question is quite poorly written), what they are trying to do is to write a Greasemonkey userscript to make the enter key press the Post Comment button in Google+ streams. Since I don't have an invite into Google+ yet, I can't even see the relevant code so not much I can do. This question is not about putting anything related to Google+ in your own site - it's about trying to use Greasemonkey to modify the behavior of Google's site in your own browser.
Earlier attempts to help:
id=":1vq.post" is not a legal CSS id name. You can't use the ":" character in a selector name. This causes multiple issues because not only is it not a legal character, but it's also a meaningful character in the CSS selector syntax. So, I see that you have two issues.
First, your selector logic is not working. Second, as others have said, you can't just assign to click in this way with plain javascript (e.g. no framework).
If you change your selector logic to work correctly, you can get it to work properly (using jQuery) like this:
<div role="button" id="aPost" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
$("#aPost").click(function() {
alert("I was clicked.");
});
And, you can see it in action in this jsFiddle: http://jsfiddle.net/jfriend00/Yfnc7/. Click Run and then click on the Post Comment.

click() applies only to elements like input and button.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
onclick would appear in 1990 and not at Google. They should be using addEventListener.
Try to set a breakpoint and see what function is called on click. Then call the function directly.
To trigger a click event handler one can use createEvent plus dispatchEvent.
See example: http://jsfiddle.net/DzVg9/
Note, that Google Plus may actually be using mousedown or mouseup events.

Are you sure you are acurately selecting the button with $(":1vq.post")? Perhaps you need to change it to $("#:1vq.post") or something like that (I'm not sure how JQuery handles the : and . characters).