I have a form which is a simple CRUD.
I am trying to display a cool looking success message when user enters or deletes a record. I've seen this a lot around the web.
I am very new to jquery. does anyone know any examples that would show how to do this?
Basically a div that would slowly dim out.
Your question is a little vague as a "cool looking success message" is not much to go with.
If you are interested, however, through answering questions here I have replicated the functionality of two of Stackoverflow's "notification" features that people seem to enjoy: the banner at the top of the page that comes up when you get a new badge, etc. and the red boxes around the site whenever something goes wrong with an action. I've used techniques similar to these to show success messages in my applications and my clients have loved them.
To show the top banners - demo
To show the red boxes - demo
The examples are very simple, as all it is doing is showing a DIV somewhere in the document and fading it in and out depending on the situation. That's all you really need to get started.
In addition to this, if you are a Mac fan (and even if you're not) there is the jQuery Growl plugin which is based on the OS X notification system. I am also a big fan of using the BeautyTips plugin to show messages near an element, as the bubbles are very nice and easy to style.
I really like jGrowl. It's very unobtrusive as the messages appear in the left corner and the user can continue to do whatever he's doing, but he does get feedback from the system. And it also looks very fancy :).
Just throw in a new absolutely positioned div and use the fadeOut-function to animate it's opacity with a slow animation.
Something like this:
var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body'));
newDiv.fadeOut(5000);
This should work:
function showSnazzySuccessMessage(text)
{
if($("#successMessage").length < 1)
{
//If the message div doesn't exist, create it
$("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>");
}
else
{
//Else, update the text
$("#successMessage").html(text);
}
//Fade message in
$("#successMessage").show('slow');
//Fade message out in 5 seconds
setTimeout('$("#successMessage").hide("slow")',5000);
}
You'll have to play with the style to get it to look the way you want, but you get the idea.
Perhaps you're looking for something like this or a straight fade like this. There are a few effects to choose from.
Related
I am new to Material Angular, and just started using it around a month ago, so this might be a simple question. Anyway, I have a toolbar set to a white frame of 0. When I scroll down in my md-content I would like to have the white frame value change to 2 or 4 or just another number, hence giving it a shadow. I also would like to have it animate, not having the shadow just blink/appear. An example of that would be the Google Fonts website. If you look at the picture bellow you will see a line under the toolbar. Then the Picture under that shows that when you scroll it turns into a shadow. Outline above.
Shadow above.
I would try to invest time in inspecting their css, js, and html, but I am actually working on a project for school, which is due next Friday, and I have to type up a bunch of content, and gather information.
I was able to make a shadow appear at the bottom of the md-content, but that was by adding a css selector with a box-shadow when I scrolled down, I just can't figure out how to change the md-whiteframe value on scroll.
I have tried to use a variable. Like md-whiteframe="{{ctrl.elevation}}"
Then say something like
if(item.scrolltop > 0) {
this.elevation = 0;} else {
this.elevation = 4;}
I tried something like that in my js, but it just ended up as a mess. This isn't a really big deal I am just trying to give my project some nice touches. I would really appreciate any help though. Thank you in advance. Also I looked for questions similar to this, and didn't find any that were what I wanted, but if you find a question that answers this then please tell me.
Try to act on the class property of the md-whiteframe directive.
For instance:
<md-whiteframe class="{{ctrl.elevationClass}}">
<span>My content</span>
</md-whiteframe>
On your controller:
if(item.scrolltop > 0) {
this.elevationClass = 'md-whiteframe-1dp';
} else {
this.elevationClass = 'md-whiteframe-4dp';
}
https://material.angularjs.org/latest/demo/whiteframe
I want contents to be hidden, and when the user is at appropriate position of the page, I want it to show up. I am thinking of something like Apple - iPhone 6 page. I googled for a while but I couldn't seem to find anything appropriate. How would I do this? Is it even possible for amateur people like me to recreate? Sorry for having no code, but everything I tried hasn't been working.
This can be achieved through the use of jQuery. There is a method, $(window).scroll(), which is called when the user scrolls the window. An example use is below
$(window).scroll(function() {
if($(this).scrollTop() > 600 {
// do something (called after the user has scrolled more than 600 pixels down)
}
});
I have made a JavaScript translation of some text that occurs live rather than on server side, but it blinks when it replaces and thus is not user friendly. Is there anything I could do about it? I made
this jsfiddle
and here is the summary of the code:
// bind the animation so I can catch a node inserted and then
if(event.animationName == "nodeInserted")
{
if ($(event.target).hasClass('translate'))
{
$(event.target).text(Translate($(event.target).attr('translate')));
}
}
// where function Translate() replaces the text
However it blinks when it replaces and I am out of ideas how this can be more eye friendly. I hope the example is simplistic enough to picture my problem.
Based on your fiddle, I can give few remarks. First, your animation is way to short (0.001s) which probably could be a reason why it blinks (animation happens too fast).
Also, your fade starts at 50%, instead of 0%.
Maybe I am wrong about all this, and I did not understand your question, but I have provided and edited fiddle so you can see for yourself what am I referring to. It is nice fading in this way:
http://jsfiddle.net/TMGLX/9/
I'm working on Android right now in Phonegap/Cordova and no matter what I do, I can't get a certain div to resize properly. It gets populated with a bunch of child-nodes in my Javascript and unless I hardcode the div to some ridiculous height, some of those get hidden. The weird thing is, when I set an "alert();" either before or after this...
var newheight=entlist.length*200;
newheight+=200;
document.getElementById('container').style.height=newheight+'px';
...it will show up properly. Also, "entlist" is a list of all the entries that get turned into child-nodes of 'container.' The idea is to make 'container' as tall as it needs to be to fit all those, plus a bit of a buffer, just in case, at least until I get it working and see what it looks like.
The fact that it appears properly with the alert made me think that the div simply needed to be redrawn. As such, I've tried...
var div=document.createElement("div");
document.getElementById('container').appendChild(div);
document.getElementById('container').removeChild(div);
...and this, adding to the height every time a child is added...
var cH = document.getElementById("container").offsetHeight;
document.getElementById("container").style.height = (cH+150)+"px";
...setting 'container's height to "auto", and finally...
document.getElementById('container').innerHTML = '<p>test</p>';
So, I've tried everything I could find on the subject. If someone could help me figure this out, I'd really appreciate it! Thanks.
Found the answer! The div was inside of an iScroll wrapper and I didn't realize that there was even an option to refresh it. I just added one line to make it into...
var newheight=entlist.length*200;
newheight+=200;
document.getElementById('container').style.height=newheight+'px';
myScroll.refresh();
...and it worked like a charm. :)
I have a website that I am developing and I have multiple Divs on the main page. I have a div on the right side of the page labeled right_bar2 and I want it to change every 5-10 seconds. The entire div will just be an image that is a link. Basically I assumed the easiest way to do this would be to have a div with a bunch of hidden div's in it and then maybe some javascript that unhides one div at a time and then hides it again and unhides another. However I am unsure the best way to do it. I have looked at a bunch of example and can't get it to work 100% correctly.
Thanks for any advice ;)
JsFiddle examples would be great!
I tried something like this http://jsfiddle.net/VENLh/4/ but in my rails environment/setup, it breaks multiple things, so I'd like something cleaner and easier.
I cleaned it up a bit in this fiddle, but if you said the original breaks multiple things in your original environment, this might not fix them. What specifically did it break?
What I cleaned up was to avoid the need to keep a manual count of the DIVs for the JS or to worry about their IDs. The code is pretty simple:
$(function() {
var $divs = $('div', '#container'),
total = $divs.length,
counter = 0,
showDiv = function() {
$divs.stop().hide();
$($divs[counter]).show('fast');
counter = (conter + 1) % total;
setTimeout(showDiv, 3000);
};
$divs.hide();
showDiv();
});
I didn't perform one optimization that should probably be done. You probably should cache the results of the jQuery selectors on each DIV. It would be easy to do with a jQuery map statement, but I didn't want to muddy the waters here.
The only problem I can see in this case is if you are going to use heavy image, it may take some time to load. As the image will start getting loaded when you show it first time. So for this I would say you should keep the opacity 0 and load the image at the time of pageload.
And also to remove the delay you are having where one div is getting hidden and other is getting visible can be removed by using opacity. reduce opacity of one from 100 to 0% and for other increase from 0 to 100%.