how to auto click in javascript or html - javascript

Can somebody tell me how to auto click the button in a page when it loads?
I've tried this code in javascript but it doesn't `work.
<a href="javascript:Clickheretoprint()" id="print">
<script type="text/javascript">
$(document).ready(function(){
$("#print").click();
});
</script>
is there any way to do this??

Please try following :
$("#print")[0].click();
The answer is from the following link :
Using jQuery to programmatically click an <a> link

Related

Reload iframe content (local HTML) when clicking buttons

I´m loading HTML file into a DIV (iframe) when user click on a button.
My problem is when click another button and need to reload the iframe with another HTML file.
This is my code:
<script type="text/javascript">
$(function(){
$('#2015').click(function(){
if(!$('#iframe').length) {
$('#content').html('<iframe id="iframe" src="2015.html" width="700" height="450"></iframe>');
}
});
});
</script>
And here is the button code:
2015
How can I remove the iframe content before to load the next HTML into it?
You made a mistake here. An ID must not start with a number. So use btn2015 instead of 2015 as ID on the button.
The link should do the rest:
Reload an iframe with jQuery
Thanks Jonathan.
Changing the ID and minor changes is working fine.
I´m testing another way and is working too:
Assign a "name" to the iframe with the default HTML:
<iframe name="year" src="2015.html"></iframe>
Direct <a> link with the URL and iframe "name" as target:
Change Link

How to open different link in new tab with different popup buttons

I'm using a button to open a ajax html popup and a link onclick at the same time.
But the problem is I have several buttons placed on the page and with each button I want to open different links any help appreciated
Heres the html code
<a href="test.html" class="ajax-popup-link">
<button type="button" style="background:green;float:right;">
Activate
</button>
</a>
Heres the javascript function
<script src="../assets/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
overflowY: 'scroll',
closeOnContentClick: false
});
$('.ajax-popup-link').click(function(){
window.open("/some-link.html");
});
});</script>
I have got the workaround anyway
here it is
<p onclick="window.open('http://google.com', '_new')"><a class="ajax-popup-link" href="test.html" style="top:-10px;left:650px;background:green;text-align:center;height:50px;">ACTIVATE DEAL</a></p>
In your click function, just reference the href attribute instead of hard coding the link. Also a good idea to prevent the browser's default behaviour on link click:
$('.ajax-popup-link').click(function(e){
e.preventDefault();
window.open($(this).attr("href"));
});

My Jquery click button is not working

Hope you well,
I'm trying to make something like this,
firstly, it'll show this
and after, clicking this "menu" image, It'll show something like this
So, I've made some container using <div> here:
<body>
//this is my menu container..
<div class="menu_pos_jquery">
<a class="btn1" href="#"><img src="logo/menu_logo.png" style="height: 70px; margin-left: 850px; margin-top: 15px;" onmousedown="return false;" alt="Menu" /></a>
</div>
//here is my another container which i would like to open using Jquery after click menu container..
<div class="menu_pos_jquery2">
</div>
</body>
So i did tried using this code:
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeIn();
});
});
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeOut;
});
});
</script>
But it's not working, When i run this program, but it shows full page like what i provide you a second pic .. And i want to show only first menu and after click menu it must suppose to show my another container, how to do it? pls, help.. and sorry for my bad English!! .. hope you understand my question.
You should change your code into this:
$(document).ready(function(){
$(".menu_pos_jquery2").fadeOut();
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeToggle("slow");
});
});
Maybe you want this
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery").fadeOut("normal",function(){
$(".menu_pos_jquery2").fadeIn();
});
});
});
You have registered two click event handlers to the same element, so when ever you click the button, both will be called. But only one should be called at a time.
Adding and removing a class to the .btn element would be a good option, as you can also specify CSS w.r.t the state. Please consider the following
$(document).ready(function(){
$(".btn1").click(function(){
var isMenuOpen = $(this).hasClass("open");
if(isMenuOpen){
//if already open, close it
$(this).removeClass("open");
$(".menu_pos_jquery2").fadeOut();
}else {
//if not open, open it now
$(this).addClass("open");
$(".menu_pos_jquery2").fadeIn();
}
});
});

Display href link into div

I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});

Fancybox 2.0 not working, very simple first test

My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});

Categories

Resources