I am following this tutorial: https://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/
I made the loader as a gif but when I click on a link the loader is not working. I used the second part of loader where it can be added to a link.
Here is a link to the jsfiddle containing a part of my code: http://jsfiddle.net/rohitbegani/DcV8C/
$(document).ready(function(){
$('#button-upload').click(function() {
$('#spinner').show();
});
});
Main javascript used for getting on-click animation.
Can't actually load the gif file on fiddle as I don't know how to add external images/gif to a jsfiddle code(if it is at all possible)
You need to remove the # and replace with a period as it's a class for the button-upload.
$(document).ready(function(){
$('.button-upload').click(function() {
$('#spinner').show();
});
});
http://jsfiddle.net/DcV8C/2/
updated your fiddle, the 'button-upload' is a class not an ID so
$(document).ready(function(){
$('.button-upload').click(function() {
$('#spinner').show();
});
});
Related
I am trying to do this:
$(document).ready(function(){
$('body').on('load', function(){
alert('ok');
});
});
But it not works.
Any help?
First, you have to use $(window).load() instead of $('body').on('load'()).
Then, you need to separate the onload() function and the ready() function:
$(document).ready(function(){
alert("fires when webpage is loaded");
});
$(window).on('load', function(){
alert("fires once when window/body has been loaded");
});
Have a look at this to understand the difference.
Whay your code does not work?
When DOMContentLoaded event fires... That is the event that triggers the $(document).ready() callback. Obviouly, the body has already loaded too.
So if you wait for the whole DOM to be loaded to define an event handler about body loaded... It will never be executed because that event has fired before the event handler has been defined.
And after a close look: There is squarely no "load" event fired for the body... Whatever its content.
So as in pythan's answer, that should be $(window).on("load", function(){...})
See below:
console.log("before")
$("body").on("load", function () { // That NEVER fires.
console.log("Body loaded");
});
console.log("after")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<img src="https://via.placeholder.com/500" />
</body>
But anyway, you don't need both for sure.
In this demo http://jsfiddle.net/pHJgP/8/ an image gets replaced with a text
I'd like to do the same on a blogger post http://myblog.blogspot.com/2015/06/firstpost.html
This code goes into post body:
<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png"/></div>
<div id="text" style="display:none">Text here</div>
Where do I put this code?
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
Do I need to add an operator to invoke the function or action in this particular post http://myblog.blogspot.com/2015/06/firstpost.html when it opens? And where/how do I add that operator or trigger code?
What else is missing ?
Before asking I've read several posts on stackoverflow.com , on w3schools.com , etc. experimented but failed due to the lack of knowledge.
place this code just above or before </head>
<script src='http://code.jquery.com/jquery-1.7.2.js'/>
<script type='text/javascript'>
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
</script>
Note: 1.7.2 is taken from the top left corner of the demo http://jsfiddle.net/pHJgP/8/
if 1.7.2 did not work, try other versions.
I am not a PRO. And this is all I know from experimenting.
I could be wrong
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
First off, I am quite a noob.
Ok, so I have embedded a SoundCloud track into my webpage. My question is, how do you refresh a page (or do anything else) when the track ends?
Can you do it with getDuration(I found that on SoundCloud API page)?
I tried to code it. In the code I tried to get the duration of the track and then print it on the screen/webpage. What is wrong with this code?
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<span id="headerLeft-content">
<script type="text/javascript">
var duration = 0;
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.getDuration(function(val) {
duration = val;
});
});
}());
document.write(duration);
</script>
</span>
If that worked, I would just put something like wait(duration) and then refresh...
In other words, can soundcloud embedded track be "hacked" to loop(or to refresh page after track is over, that's what I want to do) even though the original widget doesn't support looping?
Please, take a look at the SoundCloud html5 widget page where I found getDuration command and see if you can help me... => http://developers.soundcloud.com/docs/api/html5-widget#getters
EDIT:
<script>
var html=<iframe blablabla...></iframe>
document.write(html);
</script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe),
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
}());
</script>
Page doesn't refresh after the track is over. Can you see what's wrong?
You can bind a function to the SC.Widget.FINISH event documented here. The following code snippet should work:
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
Of course if all you want is for the widget to loop, you could use the seekTo and play methods:
widget.bind(SC.Widget.FINISH, function() {
// again, again!
widget.seekTo(0);
widget.play();
});
That would be less intrusive than a page refresh.
widget.bind(SC.Widget.Event.FINISH, function() {
widget.seekTo(0);
widget.play();
});
In the other reply, the first parameter is missing ".Event".
Finally. A truly working version.
var widgetIframe = document.getElementById("soundcloud"),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.FINISH, function() {
widget.play();
});
Can anyone tell me in the simplest code possible, how to load and unload an html page into a div named "myDiv", with a simple click?
When i press another button on my navigation menu, i will then unload "myDiv" and replace with another page.
Whats the setup for this?
edit
I have 3 pages (page1.html, page2.html, page3.html)
My navigation is as follows:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
I am trying to load those pages into "myDiv", each page replacing the previous loaded page everytime i click a different page button. Thats all.
I hope i made what im trying to do clear as crystal and hopefully not leaving anything important out.
Assuming you can use javascript/jQuery (you don't give a lot of info on your environment)...
Have a look at the jQuery load() method.
http://api.jquery.com/load/
<div id="myDiv"></div>
<button id="myButton">Click Me</button>
<script type="text/javascript">
$( document ).ready( function() {
$( '#myButton' ).click( function() {
$( '#myDiv' ).load( 'test.html' );
});
});
</script>
That should do your load. I'll leave the rest to you :)
EDIT:
OK, something more along the lines of what you're looking for...
Assuming you can modify the markup and add a class attribute to your a elements...
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#myDiv' ).load( $( this ).attr( 'href' ) );
});
});
</script>
So any 'a' element with the class of dynamicLoad will trigger this when clicked. We don't want the browser to try and follow the link, so we use preventDefault() and stopPropagation(). The only other difference is that we're not statically loading "test.html". We're determining what html page to load by using jQuery's $( this ), which represents the element that triggered the function. Use the attr() method, which returns the value of a specific attribute of the element. In this case, the href attribute.
Questions?