Develop Reference

TweenLite animation suddenly changing elements' position?

First of all, you can find a simplified demo of my code in this JSFiddle and also below the question. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project.
I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations.
This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters:
nextOrPrev, that runs one animation or another based on the value
provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev" animation, not yet used, just emits an alert("prev").
bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap.
In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu.
This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it?
Thanks for any help.
mainMenuBody();
function mainMenuBody() {
$("body").append(
//BUTTONS
"<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
);
//WRAP
$("body").wrapInner("<div id='bodyWrap'></div>");
//BINDS
$("#playButton").bind("click", function() {
bodyChange("next", playSettingsBody);
});
}
function bodyChange(nextOrPrev, bodyFunction) {
switch (nextOrPrev) {
case "next":
//ANIMATION AND BODY CHANGE
TweenLite.to($("#bodyWrap"), .4, {
ease: Power2.easeIn,
transform: "rotateY(90deg)",
onComplete: function(){
$("body").empty();
//NEW STUFF
bodyFunction();
TweenLite.from($("#bodyWrap"), .4, {
ease: Power2.easeOut,
transform: "rotateY(90deg)"
});
}
});
//END OF ANIMATION AND BODY CHANGE
break;
case "prev":
alert("prev");
}
}
function playSettingsBody() {
$("body").append(
"<p class='text' id='CYTText'>This is the second menu!</p>"
);
}
body{
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow:hidden;
margin: 0;
}
.text {
color: #FFFFFF;
font-family:Bebas Neue;
-webkit-user-select: none;
cursor: default;
text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}
.mainButton {
-webkit-transform:scale(1);
width: 200px;
height: 200px;
border: 10px solid #F1F2F0;
text-align:center;
background-color: #F37C2B;
/*background:#5F4A21;*/
display: table;
position: absolute;
margin: auto;
top: 150px;
bottom: 0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
}
.mainButtonText {
position: relative;
display:table-cell;
vertical-align:middle;
-webkit-transform:scale(1);
font-size: 90px;
text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

This problem is caused in your .mainButton class. Your code looks a little like this.
.mainButton {
position: absolute;
top: 150px;
bottom: 0;
//rest
}
By removing the line bottom: 0; your JSFiddle now works as expected. However, if you remove the line top: 150px; instead and leave in the bottom: 0 the problem still occurs. Unfortunately, I cannot provide an explanation for this. It might be worth posting a question on the GSAP forums inquiring about why this occurs works when positioning using bottom but not when using top
Edit
Since you need bottom: 0 and I wasn't able to fix your code I wrote an example which works using Timeline, a GSAP plugin. You can see this JSFiddle or the code example below.
var tl = new TimelineMax();
tl.pause();
tl.fromTo($("#click"), 1, {rotationY: 0, ease: Power2.easeOut}, {rotationY: 90, transformOrigin:"right", ease: Power2.easeOut})
.set($("#click2"), {css:{display: "table"}}, "-=0.6")
.fromTo($("#click2"), 1, {rotationY: -90, ease: Power2.easeOut}, {rotationY: 0, transformOrigin:"left", ease: Power2.easeOut}, "-=0.6");
$("#click").click(function() {
tl.play();
});
$("#click2").click(function() {
tl.reverse();
});
* {
margin: 0;
padding: 0;
}
body {
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow: hidden;
}
div.one, div.two {
position: absolute;
bottom: 0;
height: 200px;
width: 200px;
background: #F37C2B;
text-align: center;
display: table;
cursor: pointer;
border: 10px solid #F1F2F0;
}
div.one .text, div.two .text {
position: relative;
display: table-cell;
vertical-align: middle;
color: #FFFFFF;
font-family: Bebas Neue;
font-size: 90px;
}
div.two {
display: none;
border-color: transparent;
background: none;
}
div.two .text {
font-size: 40px;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="click" class="one">
<div class="text">
Play
</div>
</div>
<div id="click2" class="two">
<div class="text">
Second Menu
</div>
</div>

JS newsticker issues

I have a site that wanted a TV credits-style ticker & I just went back to revisit & check up on them & noticed that the display was starting to break down. I'm hoping that those of you more experienced JS veterans can help me figure out where I've gone wrong, here.
My JS is as follows:
$('.sidescroll').totemticker({
row_height : '120px',
next : '#ticker-next',
previous : '#ticker-previous',
stop : '#stop',
start : '#start',
mousestop : true
});
jQuery(".sidescroll li").append("<hr />");
and the my CSS for it is as follows:
.sidescroll {
height: 100% !important;
display: block;
}
.sidescroll li {
margin: 10px;
text-align: left;
height: 120px;
}
.sidescroll hr {
height: 3px;
border: 0;
box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}
.sidescroll li a {
font-family: 'lulo' !important;
}
.sidescroll li a:hover {
text-decoration: none;
color: #5c4770;
}
The ticker is for their blog posts, sort of a running list of posts, which is being pulled by the list category plugin & is limited to 20 characters for the excerpt. The issue that I noticed was that the horizontal row is starting to interact with a couple of the posts, which was not the case when the site was set up.

Turns out it's fairly simple. There is sometimes too much content in the boxes and they overflow into the one below. Either too much text or the word wrapping is splitting over too many lines.
Bonus (completely optional)
We can elegantly suppress this behavior (assuming the use of CSS3 to generate a gradient).
First we modify the javascript to insert the horizontal line as first child, then we insert a div with a class as a last child:
jQuery(".sidescroll li").prepend('<hr />');
jQuery(".sidescroll li").append('<div class="fadeToWhite"></div>');
Then we modify the css:
.sidescroll {
height: 100% !important;
display: block;
}
.sidescroll li {
margin: 10px;
text-align: left;
height: 120px;
/* additions: */
position: relative;
overflow: hidden;
}
.sidescroll hr {
height: 3px;
border: 0;
box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}
.sidescroll li a {
font-family: 'lulo' !important;
}
.sidescroll li a:hover {
text-decoration: none;
color: #5c4770;
}
/* additions */
.sidescroll li div.fadeToWhite {
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
background: linear-gradient(transparent, white);
}
This will hide any overflowing text while turning the additional div into a fade-to-white bar at the bottom of each list element to avoid a hard text-cut.

How to change the color of Track for RANGE Input using Jquery/Javascript?

Here`s the HTML Input Range
<input id="golden_range" type="range">
I can change the Background Color of the Range Track to "#DDD" using this CSS
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
but i'm not able to change the background color using Jquery/Javascript. Please help me with this. Here's the code i'm trying to.
$('#golden_range::-webkit-slider-runnable-track').css('background', '#000');
$('#golden_range::-moz-range-track').css('background', '#000');

According to the code in your question, I see a mistake in your syntax. In css the background color property is written as "background-color: color_hex_value". This is how your css code should look like:
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
And this is the code for jquery:
$("#golden_range::-webkit-slider-runnable-track").css("background-color", "#000");
In case you are still having doubts, give a look at these two sources for css background-color properties and Jquery css() method.

You can do this now (2020) by making use of CSS variables.
CSS
#golden_range::-webkit-slider-runnable-track {
background: var(--track-background, #ddd);
}
#golden_range::-moz-range-track {
background: var(--track-background, #ddd);
}
Javascript
document.querySelector('#golden_range').style.setProperty('--track-background', '#f00');
(should change the track background to red)
I'm doing this in Player Chrome to style the media player progress bar, using a background gradient on the track to show progress.

Bad news. I have not found a proper way to do... but I found a dirty way;
Insert a style tag in the body of the page. Of course, the content of this tag is generated with javascript:
var estilo = $("<style>").attr("id", "some_id");
//for Chrome, e.g.
var mod= "::-webkit-slider-runnable-track";
var txt= "#id_range" + mod + " {\n";
txt+= " background-color: rgb(100,100,100)\n";
txt+= "}\n";
estilo.text(txt);
$("#some_id").remove();
$("div#other_id").append(estilo);
it's ugly, slow and bad, but it works.

Add below code into your files
CSS:
#golden_range.change::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
#golden_range.change::-moz-range-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
jQuery:
$(document).on('input', '#golden_range', function() {
var rangeValue = $(this).val();
var changeRange = 20;
if(currrentRange > changeRange){
$("#golden_range").addClass("change");
}
});
Note: Please check changeRange value and change as you want.

How do I display the text contents of a div tag in a tool tip without using jQuery?

I would like to be able to display the context of HTML element to show inside a tool tip. I am not sure what I am doing wrong. Ideally I would like to see test show up in my tooltip. But that does not happen.
We don't use jQuery in our code base so I can't use any jQuery plugins. But we do write JavaScript code as and when required. My set up is given below
My div is as follows:
<div class="tooltip message">test</div>
My CSS set up:
.tooltip {
display: inline;
position: relative;
}
.tooltip.message:before {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
box-sizing: border-box;
}
.tooltip.message:after {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content:"";
left: 50%;
position: absolute;
z-index: 99;
}
My fiddle is here:
http://jsfiddle.net/7LNJc/3/

Give your class='tooltip message' an id, like:
<div class='tooltip message' id='test'>test</div>
Review the following:
var doc = document;
function E(e){
return doc.getElementById(e);
}
Now E('test') is the same as document.getElementById('id'), so you never need it again;
var test = E('test').innerHTML; // holds the html
If the Element has a value attribute, like an input then you would do:
var test = E('test').value; // holds the html value attribute
To assign new innerHTML or a value, it's like:
var test = E('test');
test.innerHTML = 'some text';
or
test.value = 'some value';
You could even do this:
E('test').innerHTML = 'some text';

Try the CSS :hover selector on div element instead tooltip specified by attribute title. it provides kind of toolkip visually.
div.tooltip {
color: #ffffff;
}
div.tooltip:hover {
border: 1px solid #000000;
background-color: yellow;
color: #000000;
}

It's not clear whether it's important to you that a custom tooltip behavior be used, rather than the default tooltip functionality already in HTML. If the custom tooltip isn't necessary, then you could use the title attribute to generate a tooltip withour resorting to JavaScript:
<div class="tooltip message" title="test">test</div>

Javascript menu that hovers over initial element

I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is:
EDIT: using the prototype refactor from remi bourgarel:
function socialMenuInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden.
EDIT: This is the html and css I am using:
<div id="share_words">share</div>
<div id="sociable_menu"></div>
#share_words{
display: none;
border: 1px solid white;
position: absolute;
right: 320px;
top:0px;
padding: 4px;
background-image: url('/images/icons/group.png');
background-repeat: no-repeat;
background-position:7px 6px;
text-indent:26px;
color: white;
z-index: 15;
}
#sociable_menu{
border: 1px solid black;
padding: 5px;
position: absolute;
right: 275px;
top: -10px;
z-index: 20;
}
Thanks for any help.

You're not using prorotype...try this
function socialLinkInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
But i'll need your html code to be more helpful