I have this javascript function. I would like to show image loading while the div is loading. And set the loadking image to null if the div is loaded or there was a an error:
As is, the loading image keeps showing on the page, any ideas what am missing here?
$(document).ready(function(){
$("#submitbutton").on("click", function(){
//disable the button to prevent multiple clicks
$("#submitbutton").attr("disabled", "disabled");
$('#loading').html('<img src="img/loading.gif"> loading...');
var vcenter = $("#v_name").val();
vcenter = "'"+vcenter+"'";
var req = ocpu.rpc("output1", {
vcenter : vcenter
}, function(output){
var data=output;
});
req.fail(function(){
alert("Server error: " + req.responseText);
$('#loading').html();
});
//after request complete, re-enable the button
req.always(function(){
$("#submitbutton").removeAttr("disabled");
$('#loading').html();
});
});
});
html code:
<button id="submitbutton" type="button">Submit</button>
<div id="loading"></div>
<div id="output"> </div>
You need to empty it.
$('#loading').html('');
That is the fix to your current question. However what I would recommend is something like this:
$(document).ajaxStart(function () {
$('#loading').css('display', 'block');
}).ajaxStop(function () {
$('#loading').css('display', 'none');
});
And the #loading div to contain the image from HTML already.
Related
I'm trying to make it so when a user clicks on a image in the content of my website, it will then load that image into google image search and display the results.
This is the code I am using
<script>
var gurl = "http://www.google.com/searchbyimage?sbisrc=cr_1_3_2&image_url=";
$(document).ready(function() {
$('.thefeed').delegate('p img', 'click', function(e) {
e.preventDefault();
window.open(gurl + this.src, '_blank');
});
});
</script>
and a html snippet
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</p>
The idea is for when you click on the image, it would open up this page.
var gurl = "http://www.google.com/searchbyimage?sbisrc=cr_1_3_2&image_url=";
$(document).ready(function () {
$('.thefeed').delegate('p img', 'click', function (e) {
e.preventDefault();
// Check if click is on image
if (e.currentTarget.tagName === 'IMG') {
window.open(gurl + e.currentTarget.src, '_blank');
}
});
});
One thing is that google is rewriting the url and we cannot stop that from this code. This would correctly generate the url for you now.
this was pointing to .thefeed in this case which should be now resolved
Pen: https://codepen.io/anon/pen/eRExWW
The problem I am facing is that because of a tag in my html layout, I am being redirected to the main landing page when clicking a "skip to main content" link.
I am using the following JQuery to prevent this behavior, but it also prevents the direction to main content.
$(document).ready(function () {
$('#skip-link').click(function () {
$("#" + $(this).attr("href").slice(1) + "").focus()
alert("link Skipped")
event.preventDefault()
});
});
My question is, how can I prevent the redirection to the relative address, without using prevent Default.
Perhaps something like this:
$(document).ready(function () {
$('#skip-link').click(function (e) {
e.stopPropagation();
$("#" + $(this).attr("href").slice(1) + "").focus();
alert("link Skipped");
});
});
UPDATE:
Ok if I understood you correctly, this is what you want, simply:
Jump to main
<a name="skip-link"></a><div class="row" id="anchor">blabla</div>
or jQuery:
<a id="skip-link" href="#anchor">Jump to main</a>
<div class="row" id="anchor">blabla</div>
$(document).ready(function () {
$('#skip-link').click(function (e) {
e.stopPropagation();
var hash = $(this).attr("href").slice(1);
alert(hash);
$("#" + hash).focus();
$("#" + hash).css('background-color', 'red');
});
});
https://jsfiddle.net/75k7u4w3/
I'm trying to assign two actions to a button in jQuery. The button is supposed to:
open a hidden div, and...
scroll down to get said div into view.
While both actions are working on the button, they currently require 2 clicks. On the first click the div appears, but to scroll it into view I need to click the button a second time.
Any suggestions how I am going wrong?
jQuery
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
});
});
HTML
<div id="impressum-footer">
<div class="footer">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap"> ...
You need to put the scrollTo in the fadeIn completion callback handler. That way callTo is performed on completion of the fadeIn rather than, essentially, at the same time. Currently you seem to also be placing a callback function where another parameter is to go (either duration or options object depending on which method signature you are using). Not sure why you have the css change there at all.
Try something like this:
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn({
duration: 100, // or whatever duration you want to use
complete: function() {
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
}
});
});
});
if you want to assign 2 different actions on one button, set it 2 different classes (or IDs), lets say
<div class="action1 action2">
After, in jQuery you will be able to do:
$('.action1').on('click', function (e) { console.log('#1'); ... });
$('.action2').on('click', function (e) { console.log('#2'); ... });
JsFiddle: http://jsfiddle.net/g2wdd2cb/
I have now managed to get it going. The approach as explained by #euvl was the one...
I changed my code (the scrolling part) after I realized it wasn't working. The final (working) code now looks like this:
jQuery:
$(document).ready(function () {
"use strict";
$('.footer-action-1 a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
});
});
$(document).on('click','.footer-action-2 a', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
HTML:
<div id="impressum-footer">
<div class="footer footer-action-1 footer-action-2">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap">
The only problem now is that it scrolls a little too far. The moment I add an offset it stops working.
I am trying to make a simple profile linked to our company database, in which clients can log in and check their details. Basically, I need a function that will display a Save button when the edit button is clicked. As soon as I press cancel, the save button should disappear again.
I am a bit of a noob, so maybe I am missing something very simple, for which I apologise. The code and JSFiddle follow:
http://jsfiddle.net/65D9C/26/
<HTML>
<button src="#" id="littleButton">Edit Profile</button>
<div id="button-sm">
<input type="submit" class="ButtonSm" value="Save" id="save_button" name="save_button"></input>
</div>
</HTML>
<script>
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').onclick(function (e) {
$(SaveButton).animate({
'opacity': 'toggle'
});
});
});
</script>
Working Demo : JSFiddle
It should be click event not onclick also you have to include jQuery library you can download from here jQuery 1.11.1
Try this :
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
For more info about click event see jQuery click event
there is click event not onclcik
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').on('click',function (e) {
SaveButton.show();
});
});
and you didn't include js in your fiddle.
DEMO
Try this : use click instead of onclick and you can use show("slow") to display show button
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').click(function (e) {
var buttonLbl = "Edit Profile";
if($(this).text()!="Cancel")
buttonLbl="Cancel";
$(this).text(buttonLbl);
$(SaveButton).toggle('slow');
});
});
Demo
You did not include any jquery and also there is no onclick in jquery .so you have to use click event
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
Updated Demo
You have several problems in your code. First of all should be click instead of onclick.
See the code:
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.show();
});
});
Updated jsFiddle
Try this (and sorry for my awful english)
JS - section
$(document).ready(function () {
$('#littleButton').on("click", function (e) {
e.preventDefault();
$("#button-sm").fadeIn(300);
});
$('#cancelButton').on("click", function(e){
$("#button-sm").fadeOut(300);
});
});
This jQuery show your SAVE button when you click on "EDIT" button and hide you button if you click on a "CANCEL" button (with id "cancelButton")
But you have to set this in your css first of all
CSS section
#button-sm {
display:none;
}
I have an image (question mark image) inside a div like so
HTML
<div id="other">
<img id="clickQues" class="quesMark" src="ques" />
</div>
I want this ques mark image to be replaced by two new clickable images (a tick, and a cross) when I click on it. I am using jQuery to achieve this. I am able to replace the images successfully. However, I am unable to click on the new tick, cross icons.
My jQuery
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img src='tick.png' id='tickIcon'>");
$('#other').append("<img src='cross.png' id='crossIcon'>");
});
$('#tickIcon').click(function(){
//hide the other cross icon
//do something
});
$('#crossIcon').click(function(){
//hide the other tick icon
//do something
});
Heres the fiddle
What am I doing wrong?
Since the elements are added dynamically, you need to use event delegation
$('#other').on('click', '#tickIcon', function(){
//hide the other cross icon
//do something
});
$('#other').on('click', '#crossIcon', function(){
//hide the other tick icon
//do something
});
Demo: Fiddle
Try this : Event Delegation
$('body').on('click','#tickIcon',function(){
//hide the other cross icon
//do something
});
$('body').on('click','#crossIcon',function(){
//hide the other tick icon
//do something
});
$('#clickQues').click(function () {
$('.quesMark').hide();
$('#other').append("<img id='tickIcon' src='http://www.pcdr.gr/moodle/theme/themza_moo_05/pix/i/tick_green_big.gif'>");
$('#other').append("<img id='crossIcon' src='http://www.iconshock.com/img_jpg/VECTORNIGHT/general/jpg/16/cross_icon.jpg'>");
});
$('#other').on("click",'#tickIcon',function () {
$('#crossIcon').hide();
});
$('#other').on("click",'#crossIcon',function () {
//hide the other tick icon
//do something
$('#tickIcon').hide();
});
see demo
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img class='right' src='tick.png' id='tickIcon'>");
$('#other').append("<img class='close' src='cross.png' id='crossIcon'>");
});
$('.right').click(function () {
$('.close').hide();
});
$('.close').click(function () {
$('.right').hide();
});
Not tested but i think this will help you certainly regards....:)