I am very new to this so apologise in advance for offending/upsetting anyone.
I have built my first website (http://www.goodgollyexeter.co.uk). There is a shopping cart on my website (I'm using Plum shop which is working great). I want the user to be able to click the "View Cart" button (in the top right hand corner on the website which has id="viewcart") and then for the contents of their cart to be displayed in a lightbox style window. The contents of their cart is contained within a <div> which has id="cart_holder".
To try and achieve the above I am using lightbox_me but I can't get it to work off of the "View Cart" button click event. If I remove the button click event coding then lightbox_me works and displays the contents of the cart but, as there is no event to trigger it, it opens as soon as the page loads. For now I have removed the button click event coding so if you were to visit the website you should see lightbox_me working (but on page load rather then a button click event).
I have tried to pick out the relevant code and show it below. This is the code that I have tried in order to get lightbox_me to work off of the "View Cart" button click event (adapted from lightbox_me website example) but this does not work:
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox_me.js"></script>
</head>
<body>
<button id="viewcart" class="viewcart">View Cart</button>
<div id="cart_holder">
<h1> Your Cart </h1>
<p>Currently your cart contains the following items:</p>
<div id="cart"></div>
<label>Items:</label> <span class="cart-quantity">0</span><br>
<label>Sub-Total:</label> <span class="cart-subtotal">£0.00</span><br>
<label>Shipping:</label> <span class="cart-shipping">£0.00</span><br>
<label>Total:</label> <span class="cart-total">£0.00</span><br>
<br>
Please click below to pay using a credit or debit card or via Paypal:
<br>
<br>
<button class="paypal">Checkout</input>
</div>
<script>
$("#viewcart").click(function() {
$("#cart_holder").lightbox_me();
});
</script>
</body>
When I add the above code lightbox_me stops working which is really annoying as if I remove the View Cart button click event coding so it reads like this:
<script>
$("#cart_holder").lightbox_me();
</script>
then lightbox_me works (but only on page load and not on button click event).
I don't know if it is of any use but when I inspected the <div id="cart_holder"> element in Chrome I did notice the following error message:
Uncaught TypeError: Object [object Object] has no method 'lightbox_me'
Due to my ignorance I'm afraid this means very little to me. If anyone could tell me what I am doing wrong and how to get lightbox_me to work from the "View Cart" button click event I would be very grateful indeed. Please let me know if I can explain anything better or post more code or anything else to better assist. Thanks Alex
Check your last closing button tag for checkout:
<button class="paypal">Checkout</input> <!-- should this close with button and not input? -->
Can you wrap your jquery like this?
;(function($){ // add
$(document).ready(function(){
$("#viewcart").button().click(function() {
$("#cart_holder").lightbox_me();
});
});
})(jQuery); // add
Related
Hello Folks both my buttons work when used individually, but when I use button A to click button B using Java script it does not work. I know button A works becuase the alert I added to the script pops up. But it won't invoke button B. I have tried it using classes and ID. Help Appriciated.
//Button A
<a class="send-btn"> <?php echo $buttontext?> </a>
//Button B
<a id="open-modal" class="openmodal-btn" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modal">
// I have tried adding these in the js Script during testing.
$("#openmodal-btn").click();
$('.openmodal-btn').click();
<script>
$(document).ready(function(){
$('.send-btn').click(function(event){
$('.openmodal-btn').trigger('click');
});
});
</script>
Removing this link below which stood above all my Scripts at the bottom of the page resolved this issue as I had the same link duplicated in the page header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
And thanks to Swati for helping with troubleshooting!
I am using this jquery plugin (Jquery Popup Overlay)
I have finally managed to have it working as expected, apart from the last step.
Once the pop up opens, there are 2 buttons. One is to close the window and one to progress with selected action(delete something in DB in this case).
I have this link to activate the window:
<a class="initialism basic_open btn btn-xs btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">delete suite</a></td>
This is the script to show the window:
$(document).ready(function () { $('#basic').popup({
escape: false,
blur: false, });});
What I need is , when pop up opens and i click on delete button this will progress with whatever is in .
I do not know much about Java, but i do really like this feature on my project.
Any help will be appreciated.
Thank you
Edit:
Forgot the actual pop up:
<div id="basic" class="well" style="display: none;">
<h4>Basic</h4>
<p>The dialog can be closed by pressing the <kbd>Esc</kbd> key, or by clicking on the background
<br> outside the content area, or by clicking on the Close button.</p>
<button class="basic_close btn btn-default">Close</button>
<button class="basic_close btn btn-danger">Delete Suite</button>
I think two possible answers (there are certainly more) to your problem can be found in this stackoverflow question: [How to create an HTML button that acts like a link?
To sum it up: One way would be to just use an <a> tag instead of <button>. That means you write:
<a class="basic_close btn btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">Delete Suite</a>
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
This is the code for a simple pinterest button.
<div class="myPinterestButton">
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
None of the content is iframed. The pinterest button ends up being the <a> tag with some additional data attributes (thanks to the pinit.js which adds it at runtime).
Here's the thing I don't undrestand. If I click the button it works fine. But if I want to trigger a click on it (for example click a different element on the page and use jQuery to do $(".myPinterestButton a").trigger("click") it doesn't work.
Here's a jsfiddle: http://jsfiddle.net/h42vK/2/
What's going on here please?
You can use click event for wrapper div .myPinterestButton instead .myPinterestButton a
$(".myPinterestButton").trigger("click")
I'm wondering if people can help me or if my way of thinking wont work. I am not a coder so I don't get to involved in writing, just learn as I go.
I have web page one that refreshes every 5 mins. This page launches a popup.
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body önload="MM_openBrWindow('call_notice.html','CallWaiting','width=200,height=200')">"
Now if this page is currently in the background the popup also appears in the background. I need this page to come to the foreground to notify the user that the pages has refreshed. Popup has the following code:
<i>
<body onblur="self.focus()" önload="self.focus()">
<p align="center" class="style1">You have a call. </p>
<p align="center" class="style1">Please close this window to continue.</p>
<p align="center" class="style1"> </p>
<form method="post">
<div align="center">
<input type="button" value="Continue"
ö'nclick="window.close()">
</div>
</form>
</i>
I have tried set.focus seen some setforegroundwindow, but can't get it to work. Seen z-order but that doesn't make sens to me.
Has any one got any ideas on how I can do it, or has something that monitors windows titles and executes something?
Any help would be great. I don't write from scratch but take bits here and there just to let you now what type of person you are dealing with.
Basically I want the popup to popup in front of all windows when the web pages at the back (which could 4 programs back) refreshes. Not sure how to paste the code.
yourpopupwindow.focus() should work. That's in javascript, have no idea about vbsript.
Like so:
function win_open(oid) {
yourpopupwindow = window.open('yoururl', 'popupwin', 'menubar=no,history=no,resizable=yes,scrollbars=yes,toolbar=no,width=600,height=300');
{yourpopupwindow.focus()}
}
Then on refresh you can either close popup if it's open and open new one and focus on it, or just focus on existing one.