In my project there is a mail sending scenario and it takes too much time to process. so i have added a ajax loading image. Code is given below:
$("#loadingmessage").hide();
$("#submit").click(function () {
$("#loadingmessage").show();
});
And HTML code is:
<div id="abc" >
<div id="loadingmessage" style="z-index: 9999; width: 100px; margin-left: auto; margin-right: auto; margin-top: 28%;">
<img src="~/Images/Bank/ajax-loader.gif"/>
</div>
This code works perfectly when using Mozilla Firfox(version:38.0.5) but not works well when using Google chrome(version 49.0.2623.87 m)
while using chrome, the image only shows just before the process ends, but i need to show the image when user click the 'send' button.
How can i fix this issue?
Related
I am attempting to add parallax scrolling to a page of mine and I am unsure of what I am doing wrong. This is how to set it up:
http://pixelcog.github.io/parallax.js/
I downloaded the library and put it in my file. I then called for it on the page, along with the jquery library. I then did this for my code:
<div class="home-img">
<img src="/images/try.jpg" alt="">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
</div>
.home-img {
/*position: absolute;
max-width: 100%;*/
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.home-img img {
width: 100%;
position: absolute;
}
.parallax-window {
min-height: 400px;
background: transparent;
}
That is what the instructions are saying to my understanding. However, I tried removing my base img line <img src="/images/try.jpg" alt=""> and when I did that the img went away.
Does anyone have any idea what I am doing wrong?
This can be seen on my site, here:
Click here
You forgot to load the Parallax.js library,
change to line:
<script src="/path/to/parallax.js"></script>
to
<script src="/parallax.js-1.3.1/parallax.js"></script>
now the script will work.
But the "home-img" div will need to look like this:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
This way you will be able to see the effect.
If you will keep the image it will be above the effect.
EDIT
I would recommend you use the browser inspect tools.
This way you can see if all of the javascript loaded currectly.
In your case the console tab in the inspect tool showed the error:
http://optimumwebdesigns.com/path/to/parallax.js Failed to load resource: the server responded with a status of 404 (Not Found)
For chrome use this tutorial:
https://developer.chrome.com/devtools
For firefox use this tutorial:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
By the way I am new in JQuery!. There are three images in html page, and only one image display based one status value from SQL. I want to display one image only, for example if status = 1 show green image and if status = 2 show red image. How to do that using JQuery?
HTML Code:
<div id="divGraphic" style="text-align: center; margin: auto; width: 960px; height: 540px; overflow: hidden; position: relative;">
<img src="img/overview2.png" style="width: 960px; height: auto; margin-top: -129px;" />
<img class="crest green" src="img/green/crest-gate.png" />
<img class="crest red" src="img/red/crest-gate.png" />
<img class="crest yellow" src="img/yellow/crest-gate.png" />
You would want to make use of Jquery attr()
As an example
$("#img").attr("src","http://example.com/image.jpg");
This will allow you dynamically change the an images src location and accomplish what you've requested.
You can find more information about attr() at the following documentation link
http://api.jquery.com/attr/
As for pulling the data from a SQL database.
You would want to setup some server side code to pull any specific data. And use an AJAX request to dynamically grab this information.
Jquery makes AJAX requests fairly simple and straight forward.
The server side code is really up to your choosing. Keep in mind security though, this type of work can(If not properly handled) open up some larger security holes.
Im working on a wordpress site and I cant figure out the issue with a huge div that will occasionally get inserted into the header.
It seems to be caused by a chat widget called Zopium.
Attached is a screenshot example of what happens.
Link to the site: http://fitness.pixelworklab.com/
This is the code that gets injected:
<div class="fluid-width-video-wrapper" style="padding-top: 100%;">
<embed id="__zopnetworkswf" src="http://cdn.zopim.com/swf/ZClientController2.swf" allowscriptaccess="always" type="application/x-shockwave-flash" style="position: absolute; top: -50px; left: 0px; width: 1px; height: 1px; overflow: hidden;" wmode="opaque"></div>
This is what is seen in the console:
I've experienced some "weird" stuff from times when I called wp_head(); in the template header but forgot to call wp_footer(); at the end of the page.
As the issue didn't happened to #shennan (as he said on comments) and neither to me as we both were not logged into wp-admin, I believe there is a great chance this could be the issue.
So, check your template footer for wp_footer();. If it isn't there, implement it and test the result.
Hope it helps.
I like to show an image or any elements of html and initialize a height to it. When i used a file type of input in html behind of an image like this :
<img src="image.png">
<input type="file" name="image" id="booksimage" style="opacity: 0">
So input element disappeared and when I clicked on image File Open Dialog opened but it works in a height of a normal input element. when I set a height of 100px to input element it dose not work more than.
When I see that problem of html, I decided to Use Javascript or Jquery to solve problem, I searched an find some similar issues like :
How to open a file / browse dialog using javascript?
but solution is for special browsers and firefox doesn't support it.
Is there any other way for open File Browser Dialog by clicking on an image?!
$('img').click(function() {
$('input[type="file"]').click();
});
Unluckily browser don't allow to open the browse file dialog without the specific event triggered by the click on an input tag with type="file" There are some ways to work aorund this, but it won't surely work on every browser you've got.
<style type="text/css">
#file-image {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
}
#file-image input {
height: 100%;
position: absolute;
top: 0;
right: 0;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
}
</style>
<div id="file-image">
<input type="file">
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" width="40" height="40" />
</div>
This might be a couple of years late, but here's is a way of doing it without any Javascript and it's also compatible with any browser.
<label>
Open file dialog
<input type="file" style="display: none">
</label>
In case you find problems, you may need to use the for attribute in the label pointing to the id of the input.
I have an ASP.Net MVC site that is using CEEBOX to display youtube videos in a popup window.
When the video window pops up I get the following exception in IE9:
Line: 1
Error: Unable to get value of the property 'SetReturnValue': object is null or undefined
If I attempt use the debugger I can see the exception has occurred in a section that looks like this {Formatting is mine}:
try {
document.getElementById("")
.SetReturnValue(__flash__toXML(document.location.href.toString()));
}
catch (e) {
document.getElementById("").SetReturnValue("<undefined/>");
}
The markup for the anchor that triggers the popup is:
<a class="thickbox" rel="width:640 height:385"
href="http://www.youtube.com/watch?v=xxxxxxxxx" >
<span style="background-color: White; position: relative; outline-style: none; ">
<span class="cliplarge" >
<img src="http://zzz.zzz.com/xxxx.jpg"
style="height: 275px; width: 418px; margin-bottom: 0px; margin-top: -35px; "
alt="Test" title="" />
</span>
<div style="z-index:40;position:relative;height:100px;width:100px;top:-140px;left:140px;">
<img src="<%: Url.Content("~/Content/VideoPlay.png") %>" />
</div>
</span>
</a>
The problem turned out to be related to the form of the URL:
URLs in the form: http://www.youtube.com/watch?v=xxxxxx
are intended to display on the youtube site directly.
Whereas URLs in the form: http://www.youtube.com/v/xxxxxx
causes a full screen player to be used which will show in what-ever frame is there…If you put it in the browser URL it takes over full screen of the browser window.
The second form seems to be a better fit for a pop-up window and doesn't exhibit the exception.