Change an image on click with Javascript, but still following the link - javascript

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>

Related

add class to a component in jsf template

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>

How do I call a LightBox on a click action?

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

Can't load HTML code into a div when an image button is clicked

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.
I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});
You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/
you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})
$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.

Make jquery ignore href

I am trying to append data into a div tag using jquery when there is a click event on a html tag,html and javascript code is below and live example for same is at JSFiddle
HTML
<a class="datafile" href="#">abc</a>
<div id="result2">
</div>
Javascript
$(".datafile").click(function() {
$('#result2').append('Clicked!');
}
When a user clicks on abc I dont want the browser to go to link in href rather it should insert Clicked! in div tag.
What I am doing wrong ? Please help.
Something like this:
$(".datafile").click(function(e) {
$('#result2').append('Loading Log File ...');
// For all modern browsers, prevent default behavior of the click
e.preventDefault();
// Just to be sure, older IE's needs this
return false;
});
You have to prevent the default action of the hyperlink.
$('.datafile').click(function(e) {
e.preventDefault();
//Your code
});
Change the href value from '#' to 'javascript:void(0);'?

Twitter Bootstrap manually close tabs

UPDATE WORKING NOW
Got it working now. Script snippet was wrong and was not even called somehow.
For future reference -> to close bootstrap tabs:
</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>
Close
And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.
Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:
<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>
and
Close
In IE when i click the close-button it sends me to the root of the directoy the site is in.
I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.
Try putting "closetab" in the href property like this:
Close
Since the above code doesn't work, try changing the script to:
<script>
$('#closetab').on('click',function(){
$("#flyout_tab").hide();
});
</script>

Categories