wipe div data and hide slider - javascript

I have been working on a jquery slider which slides out once a record is clicked and then when u click close it slides back off the screen.. the issue i orginally had was if i clicked on the record twice it would try load the same infomation on top of it self and created heaps of errors.. so i found some code which i could use to deelte all the data and then move the slider pane back accross the screen the issue im having is it wipes all the details like i wont but the slider pane doesnt move at all i have only put the javascript code here to see if anyone can tell me what im doing wrong with the code and how to fix it if possible...
function deleteParentElement(){
$(this).parent().animate({right:-1000}); // on its own as an onlcick event
attached to the button it works on its own the pane its moving class is called "details"
$('.student').remove() //the class defined in here is only the div containing the data
e.stopPropagation()
}
this is the button used to trigger the function
<button style="position: absolute; top:40px; right:25px;" href="#" id="bt-close" class="<? echo $Stu_id;?>" onClick="deleteParentElement()">Close</button>

You're missing two semicolons and a
$(document).ready(function(){
//the rest of the code
});
... That's probably your problem

Related

Close popup on content click in jsImageBox

I am using the [jsImageBox jquery plugin][1]. It allows one to make an image gallery. Anyone know how to close the image popup by clicking anywhere on the image instead of having to click the x on top right.
]: http://static.tumblr.com/qrevc1p/3FWlxvqbb/jsibox_basic.js
You can use the jquery on click behavior to close the image dialog.
If your images div is with id="images"
$("#images").click(function(){
$("#images").hide(); // or change the element attribute which ever closes the div
});
Please share your code to help you better.
Looking through the code reveals that you can set your own methods of closing the image. Simply call the jsiBoxClose() function included in jsibox_basic.js.

manually create spinning activity indicators

I apologize if this question is answered somewhere, but I couldn't find it.
I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.
I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?
Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.
Thank you very much for you time and help!
It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.
$("#saveButton").click(function(){
displayLoadingPage();
});
$("#deleteButton").click(function(){
displayLoadingPage();
});
function displayLoadingPage() {
//call your spin.js code here.
}
Let me know if this answers what you were getting at.
I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js
All you need is :
1) A div which is hidden on page load covering your table with spinner aligned center in it
2) On Save/Delete button click you can just make the div visible.
3) Hide the div again once you receive response from the rest api that saves or delete the data.
Below is the HTML:
<div class="container">
<div id="loading" class="loading" onClick="hideSpinner()">
Loading…
</div>
<input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>
JS Code:
var loadingDiv = document.getElementById('loading');
function showSpinner() {
loadingDiv.style.visibility = 'visible';
}
function hideSpinner() {
loadingDiv.style.visibility = 'hidden';
}
Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM
Click anywhere on the overlay to close it.
I have used the overlay that #MattIn4D has created here

Show a Fixed DIV when Form is changed and hide it when Form is Saved

I have a page with an HTML FORM to add/edit/delete Project Task rows. They are saved to a Database.
As this page can be very long/tall, right now there is a SAVE button at the top and bottom of page that uses AJAX to save all changes.
To make things easier, for the user to make a SAVE I am wanting to show a FIXED DIV across the top of the screen with a SAVE button.
This FIXED DIV should only show up when there are Un-Saved changes. So when the page load you do not see this right away until you make a change on the page. At that point it comes into view.
Clicking the AJAX Save button saves the Task records to Database and then the Fixed DIV/SAVE Button will go hidden again until another Change is detected.
Right now I have this like 90% working.
I have JavaScript which has EVENTS which call my showTaskUnSavedChangesHeaderBar() Function which is shown below when:
Text Input is changed
Textarea changed
Selection dropdown changed
Button Clicked to Add a New Task Row
Button Clicked to Delete Task Row/record
So as you see I have the code in place to Detect a CHANGE on the page. This then Triggers my Function which makes my Fixed DIV with Save button come into view.
Now once you click the Save button I saved the Data using AJAX and then call my hideTaskUnSavedChangesHeaderBar() Function which is also shown below.
This makes the Fixed DIV with Save button go back to being Hidden with it's CSS display: none property set.
Up until this point everything described above works as expected, except in my showTaskUnSavedChangesHeaderBar() Function I added some code to make the Fixed DIV only show when you are scrolled down the screen at least 100px so that it is not shown at the very top of screen right now.
This scroll trigger part also works fine.
The problem is, once you make a save and hideTaskUnSavedChangesHeaderBar() is called, it Hides the Fixed DIV but as soon as you scroll at all again, it keeps showing back up, even though no new CHANGES have been made to the Data on screen.
Just looking at the code below, can someone tell me what I am missing? When my hideTaskUnSavedChangesHeaderBar() Function is called and the DIV is hidden, it should Re-set the process until another Change on page is made but I must be missing something because as soon as it goes hidden a single px scroll up or down triggers it back into view again
UPDATE
It seems like when my hideTaskUnSavedChangesHeaderBar() Function is Called, I need to somehow kill this Event $(window).scroll(function() until the showTaskUnSavedChangesHeaderBar() Function is called again, is that even possible though?
I realize a JSFiddle page might be helpful, I will work on setting one up if there isn't a simple solution posted soon. I held off as my page is really complex and i'll have to dumb it down a lot to get a Fiddle working for the demo
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
var fixmeTop = 100;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
unSavedChangesHeaderBar.css({
display: 'block',
position: 'fixed',
top: '0',
left: '10'
});
}
});
}
}
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
unSavedChangesHeaderBar.css({
display: 'none'
});
}
}
You bound an event in your function
$(window).scroll(function() {
So after that this code will always fire on scroll. If you call showTaskUnSavedChangesHeaderBar it will even bind the handler multiple times, making it fire multiple times.
Solution
You have to unbind this event handler when not needed anymore. Even better would be to put it somewhere outside and just switch a flag variable in your functions so that your scroll handler knows what to do.
.hide-me { display: none !important; }
For hideTaskUnSavedChangesHeaderBar method call addClass('hide-me') and in showTaskUnSavedChangesHeaderBar call removeClass('hide-me')
Now the scroll event won't override display to 'block'.

Element is Statement Combined With If Statment Not Responding Properly on Hover

Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!
Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active

How To make the popup stay on the same area after close

I got this popup that when you scroll down to the bottom of the page and click the close button, it scrolls the user to the top of the page
here's what it looks like:
X
whole javascript code: http://palimashop.com/wp-content/plugins/social-traffic-pop/stp.js?ver=1.0
I would like the user to not get redirected to the top of the page after close. how do we do that?
I would appreciate any help. thanks
You can make to position fixed on the screen no matter where you are on the page.
Via CSS
#stp-close { /* Probably you need to use stp-main ! */
position: fixed;
}
You may need to set another selector if stp-close is not used for the popup. I might be #stp-main from what I can see in the JS.
it sounds like the JS function isn't stopping the postback of clicking the link, add a return false; to the end of stpFlush. It also may be worth putting action.stopPropagation() at the start of the function too.

Categories

Resources