I am making an ajax call to get more results and get them appended to the existing ones in the same page. While the contents are fetched, i need to show a scrolling spinner every time requests are send. In order to achieve this i go on adding a div at bottom of results fetched like this:
<div class="loader" style="display:block"></div>
And i am trying to show the spinner using the below code:
beforeSend: function()
{
$('#loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
$('#loader:last-child').html('');
}
But i am not able to get the spinner effect, it is not at all shown on the page(results are though fetched).
Please help me in getting it corrected. Any other thoughts to have the spinner effect are also appreciated.
EDIT: I have removed quotes as they wre in my perl code. sorry for that.
Put a space in <imgsrc so that its <img src
Your selector should be $('.loader:last-child') since loader is a class not an id. (Use . instead of #)
Instead of adding any new elements or images, you could just add a class to the container of your results while it's loading, and use the class to add padding and the spinner graphic as the background image of the container. When the loading completes, remove the class:
beforeSend: function(){
$('#resultsContainer').addClass('loading');
}
complete: function(){
$('#resultsContainer').removeClass('loading');
}
Then your CSS could look like:
#resultsContainer.loading {
background: url(graphics/loading.gif) no-repeat center bottom;
padding-bottom: 2em;
}
For extra style, add transitions to padding-bottom on resultContainer, so that the loading graphic slides smoothly in and out.
Try this
beforeSend: function()
{
$("#loader").last().html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
$("#loader").last().html('');
}
why are you using \ slashes
try this
beforeSend: function()
{
$('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
$('.loader:last-child').html('');
}
you have to use . for selecting class not # its for id and also , is missing between beforeComplete and complete.
You do not need to escape the quotes, also put a space between imgsrc like img src
As well mentioned by rob in his answer that
Your selector should be $('.loader:last-child') since loader is a class not an id. Use pereiod (.) instead of (#)
Also add a comma , after beforeSend: function(){}, and try;
Use the following code:
beforeSend: function() {
$('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
},
complete: function() {
$('.loader:last-child').html('');
}
Try appending the loader image to the HTML of e #loader and then remove it.
(note that I added an id to the image)
beforeSend: function()
{
$('.loader').append('<img src="/graphics/loading.gif" id="waitSpinner" alt="Wait" />');
}
complete: function()
{
$('#waitSpinner').remove();
}
Edit: changed #loader to .loader, as that was the class.
Related
Here is fiddle example of something I would like to do. I want to mouse over element that is inside iframe (same domain) and then change color of the font. Like in example.
But in my version first the iframe is created after I push the button - my fiddle example. In my example mouseover wont work and I do not know why. I am not that experienced with JavaScript and can not figure it out on my own. Maybe what I want to do cannot be done or maybe I'm just missing something out.
function load_iframe(callback) {
$('#iframe').append('<iframe class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b>This is a test</b><br><b>Click here</b>');
})
return iframe
})
iframe.on('mouseover', 'b', function() {
$(this).css('color','red');
});
What I have done so far: Fiddle
this is simple code i hope to help you .... i am edit your code
var iframe
var a
function load_iframe(callback) {
$('#iframe').append('<iframe id="1a" class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b id="bb">This is a test</b><br><b>Click here</b>');
a=document.getElementById('1a').contentWindow.document.getElementById('bb')
alert('pass')
a.onmouseover=function(){
a.style.color="red"
}
a.onmouseleave=function(){
a.style.color="black"
}
})
return iframe
})
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I have a blog and while loading it doesn't show the top. but when finished loading it shows from the top.
while loading: http://prntscr.com/1dv2x9
after: http://prntscr.com/1dv2zm
Somebody please help me... I tried to change margin-top and add some load scripts..but I can't figure out what I should change from the template source.
I tried to edit this:
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body class='loading'>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val;
});
}
Converting previous comment as an answer:
check for negative margins in the body or header structure, that could spot something useful, because answering that question this way is somewhat hard.
Then:
If you are seeing a space on the top then probably you are not setting a margin:0 in the contained item, or padding:0 in your containing item.
I am essentially brand new to coding (html5 forms, CSS3 and now jQuery).
What I am trying to do is have an imageswap (which I have done) attached to a radio button. So what I'm doing is replacing the buttons with images, each with a "pressed" version. However, before even attaching it to a form function/radio button input, I want to find a way so that when I click one button, it switches the other images back to "un-pressed". Essentially so that only one image can be "pressed" at a time.
Right now the code for me pressed images are
$(function() {
$(".img-swap1").live('click', function() {
if ($(this).attr("class") == "img-swap1") {
this.src = this.src.replace("_U", "_C");
} else {
this.src = this.src.replace("_C","_U");
}
$(this).toggleClass("on");
});
});
I thought about using an if statement to revert all the "_C" (clicked) back to "_U" (unclicked).
Hopefully I've included enough information.
A good pattern for solving this problem is to apply the unclicked state to ALL your elements, then immediately afterward apply the clicked state to the targeted element.
Also, your if statement ($(this).attr("class") == "img-swap1") is redundant -- it will always be true because it's the same as the original selector $(".img-swap1").live('click'...
Try
$(function() {
$(".img-swap1").live('click', function() {
$(".img-swap1").removeClass('on').each(function(){
this.src = this.src.replace("_U", "_C");
});
this.src = this.src.replace("_C","_U");
$(this).addClass("on");
});
});
If I understand the question correctly the following may work for you:
$(function(){
$('.img-swap1').live('click', function() {
$('.img-swap1').removeClass('on').each(function(){
$(this).attr('src', $(this).attr('src').replace("_C", "_U")); // reset all radios
});
$(this).attr('src', $(this).attr('scr').replace("_U", "_C")); // display pressed version for clicked radio
$(this).toggleClass("on");
});
});
I hope this helps.
I'm trying to create an effect where when you hover over a list item it changes the opacity of an image (in a completely different div) from 0 to 1. I have no trouble doing it in CSS when hovering over the img itself or its parent elements. But this is stumping me. Here's what I have (I'm really new to jquery, so it may be all wrong).
<style>
#img-nav img {opacity:0.0;}
#img-nav:hover img {opacity:1.0;}
</style>
<div id=header>
<ul id="nav">
<li id="one">item1</li>
<li id="two">item2</li>
<li id="three">item3</li>
</ul></div>
<ul id="img-nav">
<li><img src="one.jpg" id="img-one"/></li>
<li><img src="two.jpg" id="img-two"/></li>
<li><img src="three.jpg" id="img-three"/></li>
</ul>
And my questionable jquery:
$("#one, #two, #three").hover(function(){
$("#img-one, #img-two, #img-three").css({ opacity:1.0 });
});
I guess one thing that's wrong is that I need three different hover declarations for each of the three li/img combinations. Like I said, I'm very new to jquery, so sorry if the answer is simple. I did search the boards and couldn't find a solution. Of course, I'd rather find a css solution but I don't think there is one.
Update/Solution:
#Jason. Here's your jquery changed a little to do exactly what I wanted. I got rid of the first declaration since I already had opacity set to 0 in the CSS and didn't need jquery to do it. Then hovering over the li changes the images opacity with .css. The issue was using .css to change the opacity back to 0. It was keeping the inline style declaration, which was screwing with the rules in my stylesheet. So now when hover ends, I just remove the inline style attribute altogether with .removeAttr ('style').
Thanks for the help!
$("#one").hover(function () {
$('#img-one').css({opacity : 1.0});
},
function () {
$('#img-one').removeAttr("style");
}
);
$("#two").hover(function () {
$('#img-two').css({opacity : 1.0});
},
function () {
$('#img-two').removeAttr("style");
}
);
$("#three").hover(function () {
$('#img-three').css({opacity : 1.0});
},
function () {
$('#img-three').removeAttr("style");
}
);
There is probably a more elegant way to do this... but the quick and dirty:
$("#img-one, #img-two, #img-three").css('opacity','0');
$("#one").hover(function () {
$('#img-one').css({opacity : 1.0});
},
function () {
$('#img-one').css({opacity : 0.0});
}
);
$("#two").hover(function () {
$('#img-two').css({opacity : 1.0});
},
function () {
$('#img-two').css({opacity : 0.0});
}
);
$("#three").hover(function () {
$('#img-three').css({opacity : 1.0});
},
function () {
$('#img-three').css({opacity : 0.0});
}
);
http://jsfiddle.net/jasongennaro/KdhPG/
Your code looks like :
$(".one, .two, .three").hover(function(){
$(".img-one, .img-two, .img-three").css({ opacity:1.0 });
});
it should be:
$("div#header li").hover(function() {
$("#img-one, #img-two, #img-three").css({ opacity:1.0 });
},function () {
$("#img-one, #img-two, #img-three").css({ opacity:0.0 });
});
In Jquery you can call item by its id by denoting with #sign and class with .(dot) sign
NEW UPDATE:
See the final demo as you want: http://jsfiddle.net/rathoreahsan/7NCQu/20/