Javascript/CSS arrows that move with page anchors? - javascript

I tried inspecting the elements for this website, but I could not figure out how they got the CSS triangle to move to different nav elements when a different page anchor is clicked.
See website: www.simple.com

The arrow is a CSS sprite contained in http://simple.com/img/sprites.png. It's set up in the CSS with transitions as follows:
#main-nav #nav-arrow {
-webkit-transition: left opacity;
-moz-transition: left opacity;
-o-transition: left opacity;
transition: left opacity;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
width: 22px;
height: 14px;
position: absolute;
top: 60px;
text-indent: -10000px;
background: url("/img/sprites.png") no-repeat -577px -52px
}
That does the animation when the left property of the CSS changes. The left property is altered by Javascript hooked from the main navigation library that drives the site, NavSimple, in the (customised and minified) https://www.simple.com/js/brawndo.min2175719530.js. The more general NavSimple code to do the navigation also triggers custom Javascript that moves the arrow's left position to halfway along the active navigation element (it's subtracting eleven pixels because the arrow is 22 pixels wide):
this.nav_arrow.setStyle("left",d.getPosition(this.nav_wrapper).x+(d.getWidth()/2-11))}
And that's basically how it works. Nice site, very well-engineered, I'd say. (The navigation arrow is actually a div containing a letter "V", so it'll still look like an arrow even if the background images don't load, which I thought was a nice touch.)
Having said all that, I think this question might be a bit too specific to survive...

It doesn't seem like the triangle moves until the page has scrolled to the specified content. You could use the window.scrollY value to evaluate to which button the triangle should move to.
I'd guess the animation for the triangle is done by a function which gets called at both the window.onscroll event. And by a callback to the scrolling animation function triggered by the buttons.

Yeah there is some very cool stuff going on on that site. Its all CSS transitions, I would expect the use of Adobe Edge or LESS with something like that.
The brawdndo.js seems to be apart of moo-growing-input
demo here http://www.ohloh.net/p/moo-growing-input
source here https://github.com/3n/moo-growing-input

I'd bet it's JavaScript just animating the triangle, you couldn't possibly do this in pure CSS.

Related

will CSS transitions override each other?

I have two col-md-6 class and each contains a button in it, upon clicking, im using jQuery to toggleClass() of one between col-md-6 and col-md-12 and hide/show the other. I also use CSS transition to animate the toggling, but it would work for one class and if I click the other button, the transition is not working.
Does multiple class selector cause issue with transitions?
.hello, .bye{
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
Here's the problem in jsfiddle
Your question is a little vague, so I took it upon myself and made some necessary changes to your code, so that the end result will resemble a lot what you (most likely) have in your mind.
CSS Notes:
To avoid having #btn1 and #btn2 overflow .hello and .bye respectively, you need to use overflow: hidden.
To avoid having .hello and .bye wrapping during the transition if there's not enough room for both, you need to use: padding: 0.
If you want your buttons to remain at the exact position they were (15px indented), use: margin-left: 15px.
CSS Code:
.hello,
.bye {
padding: 0;
overflow: hidden;
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
#btn1,
#btn2 {
margin-left: 15px;
}
JS Notes:
Your code is kind of inefficient as you basically repeat the same code over and over, so I created a function for you that can be used for both buttons.
JS Code:
Check out the full JavaScript code in the following:
Codepen: → here;
jsFiddle: → here;

How to make a custom context menu in an Angular App?

I've been working on a custom context menu for a table on one of my views in an angular app. The idea is to display a hidden, absolutely-position div on right click of any particular row in this table.
I think the event is returning the correct clientX and clientY, but where I'm running into trouble is when I try to position this hidden div to the coordinates of the right-click event. What I'm using, right now, is this:
$('.toggled-options-status-change').css({
top: event.clientX,
left: event.clientY
}).show();
where .toggled-options-status-change is the class name of the hidden div.
What's basically happening is that the div is being position is seeming random spots, so it can't simply be fixed by decremented the top and left positions be constant values.
It's hard for me to tell what's going on, and I wish I could share a fiddle or something with you guys. What I'm hoping is that someone has come across an issue like this before and knows a direction to go and investigate further.
Edit - CSS
.toggled-options-status-change {
position: absolute;
display: none;
}
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
overflow: hidden;
.inner-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
Edit - HTML
relevant html outline:
<html>
<body>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div ng-view>
...
</div>
</div>
</div>
</body>
</html>
Almost always with these sorts of things, for me at least, the answer is exceedingly simple and makes me look like a fool for missing it the first time around. Oh well, it's nice to figure it out regardless.
top should be clientY, not clientX, and vice versa. omg

Don't dim slide content when not active

I am using impress.js for the first time and wanted to make a tweak. The original demo SEEN HERE has the slides become dim/transparent when they are not active. I have seen another impress.js presentation SEEN HERE where the image/slides remain opaque throughout the presentation except on the first slide (after that everything become opaque). How can I make a particular slide or image stay opaque through out the presentation?
in your css adding
.future : { opacity: 1.0 !important;}
.past : { opacity: 1.0 !important;}
or editing impress-demo.css
.impress-enabled .step {
margin: 0;
opacity: 0.3; <--- CHANGE THIS
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
will change the opacity for different steps
Anyway, you can find the elements ,and choose the one u want and make a .css with jquery, for example:
$("body").find(".future")[0].css("opacity","1.0"); <-- This will change just the first future step found
Anyway, please read about css rules and specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it helps
EDIT
I though u may also want to use :firs-child or :after (CSS selectors) will can also help you: http://quirksmode.org/css/selectors/firstchild.html
http://www.w3schools.com/cssref/sel_after.asp

AngularJS - Slide Divs Up And Down With Z-Index Changes Isn't Being Respected

Please see the JSFiddle here which shows my issue: http://jsfiddle.net/mlippy/zkH7S/
I'm attempting to shuffle divs up and down a list with those divs moving up hiding the divs moving down. If you look at the fiddle, there are 5 different colored boxes that you can click to tell them to move to the top. If you click various boxes in various positions, you'll start to see the z-index of the boxes moving up not be higher than that of the boxes moving down. If you click the 3rd positioned box repeatedly, that's been a quality reproducer for me.
The angular directive myWidget is applying the indexes through classes which are being added / removed in chained addClass and removeClass calls. See below and the opposite version in the fiddle.
element.removeClass('moveDown').addClass('moveUp').css('top', (newValue * 45) + 'px');
I had thought that this meant the browser was going to complete the first chained call before moving onto the second (and so on). However in this case it doesn't appear to be doing so.
Also in the directive / below, you'll find a working solution using $timeout to delay the change to the css top value which triggers the transition. It's been commented out, but there are comments showing how to toggle to the solution in the two spots code needs to be changed. This feels like cheating / not the correct way for it to be done however. Hence the question here.
element.removeClass('moveDown').addClass('moveUp');
$timeout(function() {
element.css('top', (newValue * 45) + 'px');
}, 350);
This is my first time using AngularJS, so feel free to let me know if I'm using things incorrectly or there's a better pattern which would fix my issue.
Thanks!
You're right, there is a better way to do it.
See, your code for transition affects all properties:
.widget.moveUp {
z-index: 100!important;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.widget.moveDown {
z-index: 1!important;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
So my guess is that your transition to z-index is also taking 1 second to happen.
Guessing that, I've took the liberty to change these lines of code to target a transition only on the top property, which is the only one that should be affect in your case.
.widget {
width: 100%;
height: 40px;
position: absolute;
clear: both;
z-index: 1;
-webkit-transition: top 1s ease-in-out 0s;
-moz-transition: top 1s ease-in-out 0s;
transition: top 1s ease-in-out 0s;
}
.widget.moveUp {
z-index: 100!important;
}
.widget.moveDown {
z-index: 1!important;
}
Here, I updated your FIDDLE

CSS3 Multiple Transitions of the Same Element

I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete.
The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.
Here's my code:
ul#nav li a {
/* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
background: url(images/drape2.png) 0px -149px no-repeat;
/* CSS3 transitions */
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}
ul#nav li a:hover {
/* Action to do when user hovers over links */
background-position: 0px 0px; /* make drape appear, POOF! */
background-position: 0px -10px; /* make drape appear, POOF! */
}
Any help would be much appreciated.
You'll want to chain them with commas instead of a new line
For instance:
background-color 500ms linear, color 500ms linear;
Using cubic-bezier like this:
cubic-bezier(0, 0.35, .5, 1.3)
You can make an animation go backwards—or bounce a little.
Demo (Only works in Firefox)
Source
Edit: I also made you a Webkit only option, I don't know how compatible these two techniques are. It may also work in Firefox with the -moz browser prefixes, but I haven't tested it. This one uses keyframe animation as opposed to transitions.

Categories

Resources