Develop Reference

Loading in Images via jQuery prepend But After Other images Load

I am prepending an image to a div that contains another image. This is allowing me to get a transition between the two images on hover.
Problem:
The problem is that the image that is supposed to be hidden underneath, the dynamically loaded ones, is loading first and displays. Is there a way to load the image via jQuery after everything has been loaded? If not that, can I hide the image until everything is loaded then display it?
Javascript:
(function($) {
if ($('#bottom-art-jason').length) return; // only add once
var jsonArt = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5fbc13ab28cdca2d92d13045/t/5fbd6f1fc40cee429f55218e/1606250271337/Jason_Art.jpg" class="thumb-image loaded" style="left: 0%; top: -1.76471%; width: 100%; height: 103.529%; position: absolute;"/>';
$('#block-2091ad01016e0c16fbf5 .image-block-wrapper').prepend(jsonArt);
})(jQuery);
HTML:
<div class="image-block-wrapper">
<img class="thumb-image top"
src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg">
</div>
CSS:
#block-2091ad01016e0c16fbf5 {
position:relative;
margin:0 auto;
}
#block-2091ad01016e0c16fbf5 img {
position:absolute;
left:0;
z-index: 2;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#block-2091ad01016e0c16fbf5 img.loaded:hover {
opacity:0;
}

You can use the jQuery load event.
For Example:
var loaded = false;
firstIMG.on("load", ()=>{
if(!loaded){
var secondIMG = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5fbc13ab28cdca2d92d13045/t/5fbd6f1fc40cee429f55218e/1606250271337/Jason_Art.jpg" class="thumb-image loaded" style="left: 0%; top: -1.76471%; width: 100%; height: 103.529%; position: absolute;"/>';
$('#block-2091ad01016e0c16fbf5 .image-block-wrapper').prepend(secondsIMG);
loaded = true;
};
});

Javascript-JQuery: sliding menu going left-to-right?

I have a piece of text put outside of the browser and I want it to appear when the cursor hovers over another piece of text. Here's my code:
HTML file
<div class="panel_help">
<div class="help_text">
<h4>Τι κάνω?</h4>
<p>This is the text that is hidden and needs to appear...</p>
</div>
<p class="slide_help"><strong>Show text</strong></p>
</div>
CSS file
.help_text {
color: aliceblue;
display:block;
position:fixed;
right: -9em;
top: 6em;
width:150px;
height:20px;
font-size: 18px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.slide_help {
color: aliceblue;
right: 10px;
top: 4.5em;
position: fixed;
font-size: 150%;
}
JS file
$(".panel_help").mouseenter(function() {
$(".help_text").animate({right: "1.5em"},'slow');
$(".slide_help").animate({right: "9em"}, 'slow');
});
$(".panel_help").mouseleave(function() {
$(".help_text").animate({right: "-9em"},'slow');
$(".slide_help").animate({right: "1em"}, 'slow');
});
The problem is that sometimes it takes two animations to stop, so it goes left-right-left-right, and then stops! Am I doing something wrong? I'm very new to JQuery... Thanks!

Drop the JavaScript / jQuery and use CSS.
.help_text {
right: -9em;
}
.slide_help {
right: 1em;
}
.help_text, .slide_help {
-webkit-transition: right 0.4s linear;
-moz-transition: right 0.4s linear;
-ms-transition: right 0.4s linear;
-o-transition: right 0.4s linear;
transition: right 0.4s linear;
}
.panel_help:hover .help_text {
right: 1.5em;
}
.panel_help:hover .slide_help {
right: 9em;
}
This way you don't use the jQuery Events, which sometimes don't work properly

Just add .stop() before animate(...) to stop your current animation:
$('.panel_help').mouseenter(function() {
$('.help_text').stop().animate({right: '1.5em'}, 'slow');
$('.slide_help').stop().animate({right: '9em'}, 'slow');
});
$('.panel_help').mouseleave(function() {
$('.help_text').stop().animate({right: '-9em'}, 'slow');
$('.slide_help').stop().animate({right: '1em'}, 'slow');
});
.stop() | jQuery API Documentation

The problem is that you need to finish the animation when the mouse leave the area. If not, the animation won't stop.
Try to put stop() before init every animation:
$(".help_text").stop().animate({right: "1.5em"},'slow');
$(".slide_help")stop().animate({right: "9em"}, 'slow');

ease toggle with jquery/html/css3 not working in ie properly

JSfiddle
Here is a fiddle for what I am trying to do. I am trying to use pure css with exception of jquery to toggle the appropriate class and let the css transitions handle the rest. I know this isn't supported by old IE's which is fine with me at this point.
What is happening is for when ever I click the link text the on/off the slider moves and eases just fine. However, when I hit the actual slider portion of the button it moves over suddenly with no easing. Here is the code:
HTML
<a href="#" class="on-off">
<span class="on">ON</span>
<span class="off">OFF</span>
<span class="slider right ease"></span>
</a>
CSS
.on-off {
display: inline-block;
position: relative;
padding: 5px;
background: #ff8600;
border-radius: 5px;
border: 1px solid #b8baba;
}
.on-off .on {
margin-right: 10px;
}
.slider {
position: absolute;
width: 50%;
height: 100%;
background: #fff;
z-index: 2;
border-radius: 5px;
border: 1px solid #b8baba;
}
.right {
top: 0;
right: 0;
}
.left {
top: 0;
right: 50%;
}
.ease {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Javascript
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').removeClass('right');
$('.slider').addClass('left');
} else {
$('.slider').removeClass('left');
$('.slider').addClass('right');
}
})
This does work in chrome/firefox just fine. Just not IE10/11. I am trying to use graceful degradation. Keep things lightweight so if css can handle it not to use javascript where also it has basic functionality it just might toggle rather than ease in unsupported browsers. I know IE10/11 supports ease as it is working. just not when I click that particular area of the button.
Thanks for the help.

Hey this is going to sound dumb, but here's the solution
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').addClass('left');
$('.slider').removeClass('right');
} else {
$('.slider').addClass('right');
$('.slider').removeClass('left');
}
});
Add before you remove, and add a semicolon to your function.

CSS Transition doesn't work with top, bottom, left, right

I have an element with style
position: relative;
transition: all 2s ease 0s;
Then I want to change its position smoothly after clicking on it, but when I add the style change the transition doesn't take place, instead, the element moves instantly.
$$('.omre')[0].on('click',function(){
$$(this).style({top:'200px'});
});
However, if I change the color property, for example, it changes smoothly.
$$('.omre')[0].on('click',function(){
$$(this).style({color:'red'});
});
What might be the cause of this? Are there properties that aren't 'transitional'?
EDIT: I guess I should have mentioned that this is not jQuery, it's another library. The code appears to work as intended, styles are being added, but transition only works in the second case?

Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:
CSS
position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */
The reason this is needed is because you can't transition from a keyword, and the default value for top is auto.
It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don't transition something else (like color) unintentionally.

Perhaps you need to specify a top value in your css rule set, so that it will know what value to animate from.

In my case div position was fixed , adding left position was not enough it started working only after adding display block
left:0;
display:block;

Something that is not relevant for the OP, but maybe for someone else in the future:
For pixels (px), if the value is "0", the unit can be omitted: right: 0 and right: 0px both work.
However I noticed that in Firefox and Chrome this is not the case for the seconds unit (s). While transition: right 1s ease 0s works, transition: right 1s ease 0 (missing unit s for last value transition-delay) does not (it does work in Edge however).
In the following example, you'll see that right works for both 0px and 0, but transition only works for 0s and it doesn't work with 0.
#box {
border: 1px solid black;
height: 240px;
width: 260px;
margin: 50px;
position: relative;
}
.jump {
position: absolute;
width: 200px;
height: 50px;
color: white;
padding: 5px;
}
#jump1 {
background-color: maroon;
top: 0px;
right: 0px;
transition: right 1s ease 0s;
}
#jump2 {
background-color: green;
top: 60px;
right: 0;
transition: right 1s ease 0s;
}
#jump3 {
background-color: blue;
top: 120px;
right: 0px;
transition: right 1s ease 0;
}
#jump4 {
background-color: gray;
top: 180px;
right: 0;
transition: right 1s ease 0;
}
#box:hover .jump {
right: 50px;
}
<div id="box">
<div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
<div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>

Are there properties that aren't 'transitional'?
Answer: Yes.
If the property is not listed here it is not 'transitional'.
Reference: Animatable CSS Properties

How to show wind direction on a compass

I am working on a web application where I have to show the temperature, humidity, wind speed, wind direction etc. I am using google.visualization.Gauge() to show other things but I want to show wind direction on a compass. Does anyone know about any (jQuery/javascript/etc) compass available that I can use for a website/webapp?
Thanks

Here's my approach using only CSS. Uses transforms to rotate the needle. DEMO You can also use the jQuery Rotate plugin.
HTML
<div id="compass">
<div id="arrow"></div>
</div>​
CSS
#compass {
width: 380px;
height: 380px;
background-image:url('http://i.imgur.com/44nyA.jpg');
position: relative;
}
#arrow {
width: 360px;
height: 20px;
background-color:#F00;
position: absolute;
top: 180px;
left: 10px;
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-o-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#compass:hover #arrow {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
}​

HTML5 and it's Canvas will make short work of this.
http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm
I'm just posting it here for completeness, personally I'd still stick to a javascript library.