How to make a loading.gif appear using jQuery? - javascript

I have a tabbed box that displays different information depending on which tab is active. How can I make to where when a user clicks on a tab a loading gif appears in the foreground of the .print-area and just dims the background until everything is loaded? I also have a filter option so the user can filter the contents in the .print-area so however we manage to do this cant be just on load of this area... it has to work anytime something needs to change in the area. The code below is my code, modified slightly to preserve privacy.
I am using ajax/jquery to load any information and alter any information in the .print-area.
Html
<div id="tabbed-box" class="tabbed-box">
<ul id="tabs" class="tabs">
<li>Access Log</li>
<li>Conduit Log</li>
<li id="space"> </li>
</ul>
<!--Main box area under tabs-->
<div id="content" class="content">
<table height="auto" width="auto">
<td align="left" valign="top" width="35%">
Keyword: <input type="text" id="highlight_box" class="text_box" value="--Text--" />
<input type="button" id="highlight" value="Highlight" /> //when clicked the loading gif appears and highlight action begins
</td>
<td align="right" valign="top">
<img id="play_pause_toggle" src="images/Pause.png" /> //there is a tail feature and this would toggle it with jQuery
</td>
</table>
<!--Print area for the Access log-->
<div id="access_content" class="tabbed-content">
<div id="access_log_print" class="print-area">
//When this tab is clicked a jQuery function will be called that will load the log into this section
</div>
</div>
<!--Print area for the Error log-->
<div id="error_content" class="tabbed-content">
<div id="error_log_print" class="print-area">
//When this tab is clicked a jQuery function will be called that will load the log into this section
</div>
</div>
</div>

showLoadingMsg();
$.ajax({
url : '<url>',
success : function (serverResponse) {
hideLoadingMsg();
}
});
function showLoadingMsg() {
$('body').append($('div').css({
position : 'absolute',
width : '100%',
height : '100%',
zIndex : 1000,
background : '#000',
opacity : 0.5
}).attr('id', 'loading-message'));
}
function hideLoadingMsg() {
$('#loading-message').remove();
}
This will display an opaque overlay over your site when the showLoadingMsg() function is called and that overlay will be removed from the DOM when the hideLoadingMsg() function is called.
To show this overlay when an AJAX request is being made, we call showLoadingMsg() just before the AJAX call and in the AJAX call's callback function we call hideLoadingMsg().
If you are using .load() then your code would look more like this:
showLoadingMsg();
$('.print-area').load('<url>', function () {
hideLoadingMsg();
});
UPDATE
function showLoadingMsg() {
$('#access_log_print').css('opacity', 0.5).append('<img />').attr('src', '/path/to/loading-spinner.gif').css({
position : 'absolute',
width : 100,
height : 20,
marginTop : -10,
marginLeft : -50,
left : '50%',
top : '50%',
zIndex : 1000
}).addClass('loading-spinner');
}
function hideLoadingMsg() {
$('#access_log_print').css('opacity', 1).children('.loading-spinner').remove();
}

Related

ListView doesn't have scrollbar

I have problem with scrollbar
Inside body I have div like this:
<div id="PageBody"></div>
There I load my listview with javascript
WinJS.UI.Pages.render("./pagebody.html",document.getElementById("PageBody"), null, true);
PageBody.html looks like this
<!-- Simple template-->
<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="smallListIconTextItem">
<img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
<div class="smallListIconTextItem-Detail">
<h4 class="win-h4" data-win-bind="textContent: title"></h4>
<h6 class="win-h6" data-win-bind="textContent: text"></h6>
</div>
</div>
</div>
<!-- listview-->
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: Sample.ListView.data.dataSource,
itemTemplate: select('.smallListIconTextTemplate'),
selectionMode: 'none',
tapBehavior: 'none',
layout: { type: WinJS.UI.ListLayout }
}">
</div>
Now, if my listview contains bigger number of items (all items cannot be displayed at once), then the scrollbar doesn't appear, and I can't access hidden elements.
If I make the listview normally (without loading it into div) scrolling works normally. However, I need to load different listviews or other controls into that div (depending on what data user wants)
How can I get around this problem?
UPDATE: I added to "PageBody" div this: style="overflow: scroll"
scrollbar shows, but doesn't work (u can't scroll)
UPDATE2: With grid layout scrolling works, but still with list layout doesn't
Put this CSS into your div in which data is populating:
overflow-y:auto;
JSFiddle for it.
The problem was
height: 100%
in .css file
I removed it, but then the only problem was how to fit listview to the page. I dealt with it within javascript.
window.addEventListener("resize", function () {
var listviewdiv = document.getElementById("listView");
var h = window.innerHeight;
listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
});
And then the only problem remains is how to do it initially, when application is created and loaded (code above works only after user resizes window)
For that case I've put this code:
WinJS.UI.Pages.render("./PageBody.html", PageBody).done(function () {
var listviewdiv = document.getElementById("listView");
var h = window.innerHeight;
listviewdiv.setAttribute("style", "height:" + h.toString() + "px");
});

Show AJAX div when image hovered and follow the mouse

I need help. I'm working on a website that's give user a download link to movies.
But I can't get the preview_block div(id) showed up when the mouse is hovered on the movie_block div(id) element. I can't even make the div(preview_block) follow my mouse when I hovered it.
Also, I'm planning to make an AJAX request on the preview_block div(id) to get information about the movie hovered.
Here's my code.
A simpler fiddle example: https://jsfiddle.net/o4xcb9m0/1/
<!DOCTYPE html>
<html>
<head>
<link href="includes/styles.css" />
</head>
<body>
<div class="">
<div id="preview_block" style="display:none"><p>test</p></div>
<table>
<!-- -->
<tr>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
</tr>
<!-- -->
<tr>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
</tr>
</table>
</div>
<script src="includes/scripts.js"></script>
</body>
</html>
So, you'd be better off using mouse(enter/leave) events as the hover event bubbles up from within the inner most child (img in your case) to the element (span in your case) the event is registered to. Mouse(enter/leave) events are almost the same as hover except that they don’t react to event bubbling. Therefore they see the entire HTML element they’re registered to as one solid block and don’t react to mouseovers and –outs taking place inside the block.
There is a good interactive demo on the jQuery mouseover docs at the bottom of the page that explains this.
Make sure you change all occurrences of id="movie_block" to class="movie_block" as IDs are supposed to be unique in any given HTML document. They'd make your HTML invalid otherwise.
$(".movie_block").on({
mouseenter: function(event) {
$("#preview_block").css({top: event.clientY, left: event.clientX}).show();
},
mouseleave: function() {
$("#preview_block").hide();
}
});
Here is a demo that has the working code.
And if you wanted the preview block to follow the mouse pointer, then you may use the following.
$(".movie_block").on({
mousemove: function(event) {
$("#preview_block").css({top: event.clientY, left: event.clientX}).show();
},
mouseleave: function() {
$("#preview_block").hide();
}
});
A demo for the above.
So Id's aside here, It seems to me that you are using the hover event when you should be using the mousemove event http://api.jquery.com/mousemove/
Here is a link How to get the coordinates in html using .hover event in jquery?
Hover does not fire continuously. So it won't move with the mouse. How to get the coordinates in html using .hover event in jquery?
In reference to keeping your code clean and easy to get answered, try posting it on jsFiddle like this:
https://jsfiddle.net/o4xcb9m0/1/
<html>
<body>
<div class="">
<a href="foo.com" >Foo
<span class="movie_block">
Bar
<img src="foo" />
</span>
</a>
<div class="preview_block" style="display:none"><p>test</p></div>
</div>
<script>
$(".movie_block").hover(function(event) {
$(".preview_block").css({color: 'red', top: event.clientY + 'px', left: event.clientX + 'px'}).show();
}, function() {
$(".preview_block").hide();
});
</script>
</body>
</html>

slideToggle not working for multiple divs

my php spits out all my cars in a loop so each car gets the same div id's and classes but different information
MY PROBLEM is that my plug in only works for the same div which is the first
thats because all of them are named the same
how can i make this function intelligent to know which div content is supposed to hide or show
check out my example http://jsfiddle.net/S2HEw/
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv:hidden').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
$(document).ready(function(){
$('.show_hide').showHide({
speed: 250, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
the html, there is many of this ones, all of them with the same name and thats why my toggle button fails,
<a class="show_hide" href="#" rel="#slidingDiv">View</a>
<div id="slidingDiv" class="toggleDiv" style="display: none;">
<div class="right">
</div>
</div>
note that i cant update my php loop so i really need to find a way for jquery to know which div it is working with even they all have the same div id? i can have php do a increasing number and append it to the class and then on the jquery side ?? see this is where im stuck
i have no idea how to make this work dynamically
You have duplicate ids for the slidingDiv elements. id of an element must be unique in a document
From doc for id-attribure
The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
<!-- DIV 1-->
<a class="show_hide" href="#" rel="#slidingDiv1">View</a>
<div id="slidingDiv1" class="toggleDiv" style="display: none;">
<div class="right">
DIV 1
</div>
</div>
<!-- DIV 2-->
<a class="show_hide" href="#" rel="#slidingDiv2">View</a>
<div id="slidingDiv2" class="toggleDiv" style="display: none;">
<div class="right">
DIV 2
</div>
</div>
<!-- DIV 3-->
<a class="show_hide" href="#" rel="#slidingDiv3">View</a>
<div id="slidingDiv3" class="toggleDiv" style="display: none;">
<div class="right">
DIV 3
</div>
</div>
Also, need to use :visible instead of :hidden
$('.toggleDiv:visible').slideUp(options.speed, options.easing);
Demo: Fiddle

jQuery hover - div does not show up

I have this jQuery code:
$("#people td, #list td").hover(function() {
$(this).stop().animate({
backgroundColor: "#444"
}, "fast");
$(this).find(".controls").stop().fadeIn("fast");
}, function() {
$(this).stop().animate({
backgroundColor: "#333"
}, "fast");
$(this).find(".controls").stop().fadeOut("fast");
});
$("#list .controls").hide();
.controls is a div, which contains some links to work with entry (there are for example 10 entries on the page). Everything worked until this moment and now it's not working anymore.
When I open the page, .controls hide - that's ok.
But when I hover over the td, css animation runs, but fadeIn does not. Same goes with the fadeOut in the second function (when mouseleave event is triggered).
HTML is as following:
<td>
<div class="icons">
</div>
<div class="profile">
<div class="info">
<div class="name">
</div>
</div>
<div class="controls">
Link
Link
</div>
<div class="clear"></div>
</div>
</td>
That's weird. I removed the .stop() after both .find(".controls") and now it's working.
Little problem is, when you hover in and out couple times the animation then runs a few more times.

Show this div and hide that div

Hello i want to know how can i modify my following js function to hide the content of one div and shows the content of the following div in the opened popup of fancybox the following div to show
<LI><A class="demo" id="example4" href="#demoView">Demo</A></LI> //linkfunctionality i want to show
<a id="various2" href="#divVideo" class="fl ml20"><img src="images/sites/img2.png" alt="" class="fl mr10" /></a> //Link functionality i want to hidde
<div style="display:none;">
<div id="demoView">
<div class="fl w900 pa20 bg2 tac">
<h3 class="ff2 fwb fs30 mb10 cf3">Please contact us for a quick demo.</h3>
<h4 class="ff2 fwb fs26 mb40 cf3">Email: <span class="cf2 pr25"><a style="text-decoration:none; color:#2a98e2;" href="mailto:info#caremerge.com">info#caremerge.com</a></span> Call: <span class="cf2">(888) 996 6993</span></h4>
<img src="images/sites/demo1.png" alt="" class="dpib mb20"/>
</div>
</div>
</div>
The function below is successfully hiding the video but its not displaying the div mentioned above in it...
function onPause() {
froogaloop.addEvent('pause', function(data) {
//$('a[href="#various2"]').fadeOut();
$('#divVideo').fadeOut(500);
// $('#various2').fadeOut(500);
//$(' #demoView').fadeIn(500);
$('#demoView').fadeIn();
alert('ST-UCK');
});
}
Some part of FANCY BOX JQUERY OF MY CODE
jQuery(document).ready(function() {
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("#various2").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'onClosed' : function() {
document.getElementById('iframe-video');
},
'onStart' : function() {
//alert("hi");
//$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
}
});
When you open inline content in fancybox (either #demoView or #divVideo as in your example) the content is literally moved from its place in the html flow into the fancybox and a temporary div is left instead.
So when you opened #divVideo in fancybox, only that content is actually inside fancybox so this is why you can fade it out. You cannot fade #demoView in because it doesn't exist inside fancybox.
Maybe you just need to trigger the second fancybox inside your (pause) event callback like
function onPause() {
froogaloop.addEvent('pause', function(data) {
$('#example4').trigger("click"); //linkfunctionality you want to show
});
}
... that will bring the second content (#demoView) inside fancybox and the current (#divVideo) will just fade out.
Is it now because the enclosing div for demoView is hidden? So something like...
$("#demoview").parent().css({'display','inherit'});
May work?
Why is the parent even there? Perhaps you should do away with it and put the style attribute on your demoView div.

Categories

Resources