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
Related
I am trying to create some time line effect. It will have couple of points for each time with designated picture inside a circle.
I want them to be clickable. When I click, I want another picture(plane) to move from its current location to where it is clicked within 1 second and shrink and disappear. Something similar to following GIF.
I have found couple of examples but I couldn't put them together to achieve what I want. I really searched a lot but couldn't solve it on my own. I am an iOS developer and no background on web development.
I will appreciate if you can help me on this.
Give a relative position to the timeline. Then you can get the position of a clicked circle, and assign it to the movable one. Add CSS transitions to have a better visual result.
Example using jQuery:
$(document).on("click", ".point", function () {
var $this = $(this);
var $abs = $(".is-absolute");
$abs.css("top", $this.position().top);
$abs.css("left", $this.position().left);
});
http://jsfiddle.net/dsr4esn3/
I have several graphs, and when I hover over dots I make use of "trackformatter" function to display data. Problem is that the z-index of the tooltip is to low, so it appears behind other graphs. And I can't seem to find the css class of it so that I can set its z-index to a high number. Does anyone of you guys know what class this tooltip is making use of in the graph library flotr2?
trackFormatter: function(obj) {
var test = ResultPresenter.getTooltip(data, result, "test");
return test;//What css class is used here?
},
http://humblesoftware.com/flotr2/index#!mouse-drag
I found the answer. It user the class
class="flotr-mouse-value" in file flotr2.js
S_MOUSETRACK = 'z-index:1000;opacity:0.7;background-color:#000;color:#fff;position:absolute;padding:2px 8px;-moz-border-radius:4px;border-radius:4px;white-space:nowrap;'
I still can't fix the z-index issue though, only change the other values.
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 am trying to emulate how twitter highlights users when they are #mentioned when composing a tweet.
I am using the mentionsInput jQuery plugin. I want to change the color of the #screen_name instead of changing the background color as the plugin does by default.
Is there a way to color the #screen_name and still show the blinking cursor at the end?
I was able to do it but I need to hide the textarea text so it doesn't darken the CSS styled text over it... but then it hides the blinking cursor which I don't want to do.
See my jsFiddle showing the problem: http://jsfiddle.net/thhbe/1/
OR see it...
Required: jQuery, Underscore.js and the plugin.
HTML:
<div><textarea id="tweet_textarea" class="mention textarea compose_text"></textarea></div>
JS:
/*
* Add handlers to HTML elements and set options....
*/
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://goo.gl/SUCm1', 'type':'contact' }
];
data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, data);
}
});
I'm a couple of years late, but hopefully I can provide an actual answer to your problem.
You (or the plug-in) have got the idea right... utilizing another element (the "facsimile element") which contains a styled version of the text in the textarea. There are just a couple of changes that need to be made:
The fascimile element is supposed to have the same dimensions (the element as a whole as well as its content area), shape, and position as the textarea
The fascimile element is supposed to be placed underneath the textarea rather than on top of it.
The background of the textarea is supposed to be made transparent.
The text and border of the fascimilie element is supposed to be made transparent.
I'm not sure how much of this is able to be done without modifying the plug-in, but once these changes are made, you shouldn't have to worry about the cursor disappearing since there will no longer be a need for you to hide the textarea.
You're not out of the woods just yet though, there is a lot more that needs to be done to make the solution robust.
So I'd recommend checking out Mentionator, which is a jQuery plug-in that robustly implements the functionality you desire. Its source code is a well-structured, easy to follow, and copiously commented, so should you want to look at the code to understand how the plug-in, and Twitter's tagging utility by extension (most likely), work, you should have little trouble doing so.
One more thing, given i'm such a big proponent of transparency, I'd like to let you know that Mentionator is maintained by yours truly :) .
The answer for me is to use contenteditable http://html5demos.com/contenteditable. It does not appear that this is how twitter has done it for their tweet input (which has mentions highlighted) but I have given up on figuring out how they did it.
I've had a similar problem and found it difficult to find a nice solution. I was implementing my own caret/cursor into the styled element with a span tag, this has some issues with splitting up words onto new lines however. But I found a solution that's pretty simple and seeing as this is the first thing on Google for this problem I'll share it, as this would have been ideal for me weeks ago if it was here! :)
As said, the solution is to have your styled element underneath the text input. You need to make the text input have a alpha=0 background and color. The color also hides the caret. But there's a CSS property specifically for the caret that you can use the unhide it:
background: rgba( 0, 0, 0, 0.0 );
color: rgba( 0, 0, 0, 0.0 );
caret-color: rgba( 0, 0, 0, 1.0 );
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.