I have a domain www.example.com . I have created a subdirectory discount and it has a index.php file. What I want is that when a user mouses over www.example.com, along with the website this discount page also open up in lightbox. I know how to do this via prettyphoto(Lighbox open up when you click on discount link), but the problem is how to trigger this action on page load.
PrettyPhoto gives us the .open call, wich I believe can be used to directly open a modal box, with no need to click, like this:
$(document).ready(function()
{
$.prettyPhoto.open('images/image.jpg','Title','Description');
});
Just trigger the click event in the ready handler. I've assumed the id of your link is #link.
$(document).ready(function() {
$('#link').click();
});
this triggers on document ready
$(document).ready(function()
{
//todo
});
You can use the onload event of the window object:
window.onload = function()
{
// Show your lightbox!
}
You are already using jQuery, so you could write this, too:
$(document).ready(function()
{
// Show your lightbox!
});
Related
I have written a trigger for a custom button click open chat window; I want this trigger to be executed when clicked on a custom button in a Case object.
I am using Apexchat. My code is,
Live Chat
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
jQuery('#apexchat_prechat_chat_icon').trigger("click");
});
});
Can anyone help me out with this?
As per my understanding, you're using apexchat js plugin, which gets loaded once the UI rendered properly. Hence you'll have to first get the iframe button instance then bind the that within your click scope. Hope the following code may help:
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
//find iframe
let iframe = jQuery('iframe#apexchat_chat_frame');
//find button inside iframe
let button = iframe.contents().find('#apexchat_chat_icon');
//trigger button click
button.trigger("click", function() {
console.log("chat button/link clicked");
});
});
});
Note: I'm considering here the id of iframe is "apexchat_chat_frame" and "apexchat_chat_icon" is the id of the button or link upon click on which, the chat window gets loaded.
Is it possible to make javascript click on a div when the div exists in the browser?
For example, the script could refresh a webpage until a div shows up (with content), and than if the div is clickable, let javascript click it (or just follow the link, if there is one).
using jquery . use $(window).load(); function which attach all event after body load all content in web page . see below code : here you can read document of load();
working example on fiddle
<div id="yourDivId"></div>
$(window).load(function () {
$(document).on('click',"#yourDivId",function () {
// Some code here
});
});
Yes, it’s possible.
You can add a click event handler function using jQuery as mentioned above.
To fire the click event of that div, do
$("#mydiv").click()
this is the correct one
<div id="mydiv></div>
$(window).load(function () {
$(document).on('click',"#mydiv",function () {
// Some code here
});
});
I am building a mobile app, using JQuery mobile, and in the front page let's call it page-1 contains navigation buttons to different pages let's call one of them page-2
Below are page-1
$(document).ready(function () {
$("body").pagecontainer({
defaults: true
});
$("#page-2").click(function () {
$("body").pagecontainer("change", "page-2.html", {
reload: true
});
$(document).ready(function () {
function_in_page - 2.init();
});
});
page-2 has the following
var function_in_page = {
init: function () {
alert('first-1');
$("#button-1").click(function () {
alert('second-1');
});
});
So what is happening that I get the alert of "First-1" but when I click the button with ID (button-1) nothing happens , any advise?
First of all, .pagecontainer() is auto-initialized with default settings, so you don't need to initialize it.
Secondly, refrain from using .ready() to add listeners in jQuery Mobile and stick to pagecontainer events instead. The latter events are fired whenever jQM framework loads a page and/or navigates to it via Ajax, especially in Single Page Model. Unlike .ready() which fires one time only when framework is initialized.
There are many methods to control your webapp using jQuery Mobile in a Single Page Model using pagecontainer events. The safest way is to give each page a unique ID in order to determine which event is omitted on which page. Another note, you need to know that no matter how many external pages you have, only two pages will remain in DOM; homepage and another external page you have navigated to from homepage.
To add listeners, use pagecreate event, it is equivalent to .ready() and can be delegated to specific pages.
<div data-role="page" id="home">
$(document).on("pagecreate", "#home", function () {
$(".selector").on("click", function () {
/* run code */
});
});
That event will fire once per page, but note that it will fire again on any external page loaded via Ajax. Therefore, you should remove previous bindings before adding new ones, by using .off(). Otherwise, attached listeners will multiple whenever you load an external page via Ajax.
<div data-role="page" id="second">
$(document).on("pagecreate", "#second", function () {
$(".selector").off("click").on("click", function () {
/* run code */
});
});
Keep all your custom JS code in head of all pages, although the code will be loaded once in first run. jQuery Mobile loads first page div of each external page, anything outside that div is entirely neglected.
Back to your code above, here is how it should look like. Give each page an ID, and use them to add click listeners. Let's assume home is homepage and second is page-2.html.
$(document).on("pagecreate", "#home", function () {
$("#btn").on("click", function () {
$.mobile.pageContainer.pagecontainer("change", "page-2.html");
});
});
Now, page-2.html is visible. Add a click listener to button-1.
$(document).on("pagecreate", "#second", function () {
$("#button-1").off("click").on("click", function () {
alert("page 2");
});
});
Demo
Read more about pagecontainer events.
If the script in page-2 is executed to early the button might not exist yet. Try wrapping it in a document.ready
$(document).ready(function(){
var function_in_page={init:function(){
alert('first-1');
$("#button-1").click(function(){
alert('second-1');
});});
});
Here I use a pop-up jQuery box for pop up window but when I use it on same page for multiple pop-up boxes then it only one not for all because my id is same on all button I use for pop-up.
<script src="js/jquery-1.9.1.js"></script>
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
});
})(jQuery);
and here is pop-up
<div id="full-detail-box">this is pop up</div>
Try This
JS
for(var i=0;i<3;i++){
$('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}
$('.btn-pro').bind('click', function(e) {
e.preventDefault();
var id=$(this).data('id');
// Triggering bPopup when click event is fired
$('#'+id).bPopup();
});
Instead Of this
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
UPDATED DEMO HERE
If I understand correctly you are passing the same id repeatedly, which just opens the same popup over and over again. If you want multiple popups you need multiple DOM nodes to trigger a popup on.
If you are using user detail, why not just append a unique ID!? You can easily add, in PHP, or w/e the ID of the user at the end of the class name id="full-detail-box-xx" where XX is the ID of the user.
Then you simply use the button with the SAME id in the function to call the user, like $('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });
If you are using PHP you can write the ID to a JS array, or something. I'm not sure how you system is set up.
I am trying to do my own stuff when I click on a event in my embedded Google Calendar (iframe).
My code so far:
<script type="text/javascript">
$(document).on('click', function (e) {
if ($(this).hasClass('te-s')) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
$(function () {
$('.te-s').bind("click", function () {
alert("test");
});
</script>
te-s is the class containing the event-text, and instead of showing this additional details bubble, I (later) want to redirect on my own site (alert is only there for test purposes).
Is this possible using jquery?
Im not sure this is possible. I guess your script would have to be within the child iframe to be able to listen to events within it.
Apart from that the class you are referencing 'te-s' will most likely not bear the same name again. These name will keep changing.
The best solution would be to use a call back from the API, if it exists.