Please bear with me but I was giving some code to launch a lighbox. I need to display a lightbox when a user clicks on my link. The lightbox coded is in place already and is launched using a unique id. My example below uses (1111)
<script src="bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
lightbox = new fusepump.lightbox.buynow(1111);
var callToActionElement = document.getElementById( "unique-btn");
callToActionElement.addEventListener("click", function()
{ lightbox.show(); //Show the lightbox } );
</script>
My link code is:
Buy
For some reason it's not working. I think that the syntax is wrong.
EDIT: you commented out the last part of your code //Show the lightbox } );
The brackets never get closed and the semicolon won't be at the end of your code but in the comment. Make the comment like this /*Show the lightbox*/
You can also set an onClick attribute in which you can call the function name of your javascript function. It will look like this:
Buy
Related
I have links which change content on click. I want one of the links to be cliked on page load and stay as active. Looks like it works in the below fiddle but when I add it on website this one is loaded :
http://jsfiddle.net/0e91svrr/
I think I have some mistake in JS:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
document.getElementById("modal").click();
});//end of ready
</script>
The code you have written is perfectly fine. I would just suggest try JQuery's trigger click.
$('#modal').trigger('click');
First of all don't used Pure JS with JQuery mixed up, it look so messy :D also I sugest you think about your tags class and ids :)
Try first add event to links and then call click in document ready like this.
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
$(document).ready(function() {
$("#modal").click();
});
I'm using a template for my website but I want to add a class to <li> element when clicking it , I can do it already as i saw the result in the debug mood but when i moved to this page the class="active" which i added is removed again.
Here is my img in debug mood and the script which i use.
So how can I save the added class to this element?
<script>
$(document).ready(function () {
$("#liEmpCreate").click(function () {
console.log("rerererererer ay2 ay2 ay2 ");
$("#liEmpCreate").addClass("active");
});
});
</script>
result in debug mood before redirect to this page
Finally I found the answer :) .
As I mentioned above in the question , i wanted to add this class to an element of sidebar which refers to the pages i opened. So i have all these elements in all pages, then i put an id foreach tag and tried to use the same script in each page separately , but unfortunately it doesn't work either.
So i tried to put my script everywhere in my page but when i put it after my form and before </ui:define> i found the console.log appears in the browser console, but it doesn't work as i wished because of this code is called and then the page is rendered again. finally i used the below code and it worked correctly.
<script>
$(window).on('load', function() {
$("#liEmpCreate").addClass("active");
});
</script>
<h:outputStylesheet library="js2" name="jquery-3.2.1.min.js"/>
</ui:define>
I have the following html
<a href="email.html" target="_blank" ><img src="../img/mailto.gif" alt="Send email" id='email'/></a>
Clicking the image should open a new window and you should now if that image has been clicked on before, simply because it would change when you click on it.
This is also included in a table created with PHP from a MySQL table (basically, this means I will get a new image in every row and I can only change their ID's globally, not one by one..)
After adding this jquery code the link stopped working. Which means that, when I click on the image it changes to a different one (.../img/mailto_onclick.gif) and that's fine, but the email.html page doesnt open in a new tab like it used to...
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
return false;
});
});
</script>
Any thought's on how to get this working?
Sorry if it's some basic or obvious stuff
Remove return false as it will prevent the default behavior for click() because <img> is wrapped inside <a></a>.
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
// return false; // remove
});
Try this:
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
//return false;
});
});
</script>
I'm currently trying to add social networks's buttons to my website but I've encountered an issue with the Pin It button from Pintesrest. I'd like to dynamically change the URL of the pin but unfortunately, it seems to not working. Did I do something wrong?
<script type="text/javascript">
var urlpin = document.location.href;
function buildPinUrl(urlpin, urlmedia, description) {
return '//pinterest.com/pin/create/button/?'+
'url='+encodeURIComponent(urlpin)+
'&media='+encodeURIComponent(urlmedia)+
'&description='+encodeURIComponent(description);
}
$(document).ready(function(){
var urlmedia = $("#stamp1").attr("src");
var description = $("#title").text();
var goodurl = buildPinUrl(urlpin, urlmedia, description);
$('#pinbtn').attr('href', goodurl);
});
</script>
And here the button:
<!-- Pin It Button --><a id="pinbtn" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fcollectionnies.com&media=http%3A%2F%2Fcollectionnies.com&description=Next%20stop%3A%20Collectionnies" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a><!-- Pin It Button -->
Thanks for your help.
With jQuery 1.6+ (up to edge), this works fine:
http://jsfiddle.net/mmKcR/
Check to make sure that jQuery is loaded before this code appears in the html. Also make sure you are not loading jQuery in noConflict mode, as this will break the use of the $.
If this still fails for you, use the Chrome/Firefox inspector to view any console errors.
If you see an error like:
Uncaught ReferenceError: $ is not defined
One of the two above issues is at fault.
http://www.alphenweer.nl/index.php#page:alphen-afgelopenuur.php
The first thing you will see is the first bug.
I use the function getdata() located in my index.js file to call the page, and put it in the main DIV. That could be a problem, if anyone wants to link to a certain page people still have to click on another link. So i came up with this solution (that is also located in my index.js file:
function getdataonload(){
var page = window.location.hash;
if(window.location.hash != ""){
page = page.replace('#page:', '');
getdata('nosub/content/'.page);
}
}
// and for the links:
..
But that doesn't seem to work properly. The div now gets filled with my main index.php file again. Why is this happening, what am i doing wrong?
And i also seem to have another bug wwith jQuery Fancybox.
For example, go to the same link, click on "Ontladingen" and then select one of the links popping up. The source of those pages are almoast identical, but its like this:
<a href="link/to/image.png" class="fancybox">
<img src="link/to/image.png" alt="example">
</a>
And then on the bottom of my page i have this piece of code:
<script type="text/javascript">
$("a.fancybox").fancybox();
</script>
Now it should work. But it isn't working. Why is that, and how can i solve that problem?
Could you please all help me with both my problems?
For first problem-
you have to build full URL at getdata('nosub/content/'.page); . It should be like 'http:// ... nosub/content/'
For the 2nd problem -
You can try to write the code as follows -
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>