We Keep Coding

Displaying an image from summary block on text hover using javascript

I am working in Squarespace and quite new to Javascript and HTML.
In the screenshot below you could see that I am trying to create an effect that when you hover on one of the titles on the left, the image on the right in summary block changes. Since I am learning as I go I have created a code block for the titles and included a javascript in there as well. I assigned a id number to each title corresponding to the photo. However I just can not figure out how to make it work. All the info came from expecting other websites and seeing what code they are using. Could someone help me where I am going wrong - probably all sorts of things :-(
enter image description here
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script>
$( window ).ready(function() {
var screenRes = $(window).width();
$(window).resize(function () {
screenRes = $(window).width();
});
setTimeout(function(){
if (screenRes >= 768) {
jQuery('.summary-item-list .summary-item').each(function(){
var ids = jQuery(this).attr('id');
console.log(ids);
$(this).find('.summary-title').attr('data-id', ids);
var link = $(this).find('.summary-title-link').attr('href');
if (typeof link !== 'undefined') {
$(this).find('.summary-title a').wrapInner('<span></span>');
}
else {
$(this).find('.summary-title').wrapInner('<span></span>');
}
$(this).find('.summary-title').appendTo('.gallery-titles');
});
jQuery('.gallery-titles .summary-title:first-of-type').addClass('active');
var dataid = $('.gallery-titles .summary-title:first-of-type').data('id');
var link = $('#' + dataid + ' .summary-title-link').attr('href');
$('#' + dataid).addClass('active');
jQuery('.gallery-titles .summary-title').on("mouseover", (function(){
jQuery('.gallery-titles .summary-title').removeClass("active");
jQuery('.summary-item').removeClass("active");
$(this).addClass('active');
var dataid = $(this).data('id');
console.log(dataid);
$('#' + dataid).addClass('active');
}))
}
}, 200);
if (screenRes < 768) {
$('.summary-item-list').slick({
slide: '.summary-item',
infinite: true,
centerMode: false,
slidesToShow: 1,
autoplay: false,
dots: false,
fade: true,
cssEase: 'linear',
lazyLoad: 'ondemand',
});
}
});
</script>
<div class="gallery-titles">
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11534">
<a href="/blog/tempus-blandit" class="summary-title-link">
<span>Tempus blandit</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11536">
<a href="/blog/Tempus-porttitor" class="summary-title-link">
<span>Tempus porttitor</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11538">
<a href="/blog/Curabitur-blandit" class="summary-title-link">
<span>Curabitur blandit</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11540">
<a href="/blog/Curabitur-blandit-tempus-porttitor" class="summary-title-link">
<span>Curabitur blandit tempus porttitor</span>
</a>
</div>
</div>

Here is a nice pure CSS solution:
p {
font-family: sans-serif;
}
p:hover {
color:red;
}
#image {
position: absolute;
right:1vw;
top:0;
width: 70vw;
height:40vh;
}
#a:hover ~ #image {
background: url("x") red;
}
#b:hover ~ #image {
background: url("y") green;
}
#c:hover ~ #image {
background: url("z") blue;
}
<p id="a">Image Description 1</p>
<p id="b">Image Description 2</p>
<p id="c">Image Description 3</p>
<img id="image" />
Of course you should replace
background: url("y") green;
with
background: url("/path/to/image/");

Onclick text change then display image jQUERY

I spent few hours in this particular code but seems not working for me . Basically i was trying to onclick the button then change text from 签到 to 签到成功 with the condition of if 签到成功 then display image else set the image to display:none .
Can you try to help me with this code , Thanks you .
HTML :
<div class="checkLevel" id="damonkEYkEY">
<span data-bind="css: safeLevelClass"> </span>
签到
<img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>
jQUERY :
$(document).ready(function() {
$("#damonkEYkEY").click(function(e) {
e.preventDefault();
$(".checkLevel a").text(function(i, t) {
return t == '签到' ? '签到成功' : '签到';
});
if($(".checkLevel a").text('签到成功')){
$(".calendarshow").css("display", "block");}
else{
$(".calendarshow").css("display", "none");}
}
});
});
CSS :
.calendarshow {
display: inline-block;
bottom: -180px;
position: absolute;
left: 118px;
}

There was a redundant closing curly bracket in your code. So removed it and replace if($(".checkLevel a").text('签到成功')){ with if($(".checkLevel a").text()=='签到成功'){.
Please check below snippet.
$(document).ready(function() {
$("#damonkEYkEY").click(function(e) {
e.preventDefault();
$(".checkLevel a").text(function(i, t) {
return t == '签到' ? '签到成功' : '签到';
});
if($(".checkLevel a").text()=='签到成功'){
$(".calendarshow").css("display", "block");}
else{
$(".calendarshow").css("display", "none");}
});
});
.calendarshow {
display: inline-block;
bottom: -180px;
position: absolute;
left: 118px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkLevel" id="damonkEYkEY">
<span data-bind="css: safeLevelClass"> </span>
签到
<img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>

$(document).ready(function() {
$("#damonkEYkEY").click(function(e) {
e.preventDefault();
$(".checkLevel a").text(function(i, t) {
return t == '签到' ? '签到成功' : '签到';
});
if ($(".checkLevel a").text() == '签到成功') {
$(".calendarshow").css("display", "block");
} else {
$(".calendarshow").css("display", "none");
}
});
});
.calendarshow {
display: inline-block;
bottom: -180px;
position: absolute;
left: 118px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkLevel" id="damonkEYkEY">
<span data-bind="css: safeLevelClass"> </span>
签到
<img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>
You have extra }

Jquery Animate six image horizontally in line path

i have created image animation with 3 image in which , initially only 1 image displayed then after animation of 1st image complete then same with second at a time only two image i have to display and if 3rd image come then i have to hide first image , i want this type of animation for all 6 images but i am stuck after 4th image , help me to resolve this or suggest me any other js that can make my work done.many thanks.
here is my fiddle : js fiddle
Following is code :
HTML
<div style="float:left;position: relative;left: 300px" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div style="float:left;position: relative;display: none;" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div style="float:left;position: relative;display: none;" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>
JS
$(document).ready(function() {
$("#b").animate({left: "-=300"},2000);
$("#b").animate({left: "+=80"}, 1000);
var counter = 1;
setInterval(function()
{
++counter;
console.log(counter);
if(counter=='2')
{
}
else if(counter=='7')
{
$("#b").animate({left: "-=80"},1000);
}
else if(counter=='4')
{
$("#b1").fadeIn('slow');
$("#b1").animate({left: "+=300"},2000);
$("#b1").animate({left: "-=280"}, 1000);
}
else if(counter=='8')
{
console.log('enter');
$("#b2").fadeIn('slow');
$("#b2").animate({left: "+=300"},2000);
$("#b2").animate({left: "-=500"}, 1000);
}
else if(counter=='11')
{
console.log('enter');
$("#b").animate({left: "-=300"}, 1000);
$("#b1").animate({left: "-=260"}, 1000);
$("#b2").animate({left: "-=0"}, 1000);
//$("#b").hide('1000');
}
}, 1000); });

Seems like a pain to add all that animation code for each element, especially if you decide to add more in the future. How about having a recursive function like this:
$(document).ready(function () {
var $first = $('.number').first();
slider($first, true);
function slider($first, firstPass) {
var $second = $first.next();
var $third = $second.next();
if (firstPass) {
$first.fadeIn('slow');
$first.animate({ left: "0" }, 2000, function () {
$first.animate({ left: "80px" }, 1000, function () {
loop();
});
});
} else {
loop();
}
function loop() {
$second.css('left', '120px').fadeIn('slow');
$second.animate({ left: "400px" }, 2000, function () {
$first.delay(500).animate({ left: "0" }, 1000);
$second.animate({ left: "150px" }, 1000, function () {
// If there is no third element, we can stop here.
if ($third.length > 0) {
$third.css('left', '250px').fadeIn('slow');
$first.delay(2500).animate({ left: "-600px" }, 1000, function () {
$first.fadeOut();
});
$second.delay(3000).animate({ left: "-300px" }, 1000, function () {
$second.fadeOut();
});
$third.animate({ left: "550px" }, 2000, function () {
$third.animate({ left: "80px" }, 1000, function () {
// Start again and set the third element as the new first.
slider($third, false);
});
});
}
});
});
}
}
});
.number {
position: absolute;
display: none;
}
#b {
left: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="number" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div class="number" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div class="number" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div class="number" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div class="number" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div class="number" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>

I see that the code only handles first three circles (seconds 1-11).
Further animation is provided by adding cases for later seconds.
Here is the fiddle that adds one case to show you that circle "4" is indeed displayed. But I believe it is upto you to make the final solution of it.
relevant code section is:
else if (counter == '14') {
console.log('enter 14');
$("#b3").fadeIn('slow');
$("#b").animate({
left: "0"
}, 1000);
$("#b1").animate({
left: "30"
}, 1000);
$("#b2").animate({
left: "60"
}, 1000);
$("#b3").animate({
left: "200"
}, 1000);
//$("#b").hide('1000');
}

Add scroll animation to list in jQuery

I have a list where if you click prev next it goes left and right as shown in this fiddle
HTML
<div>
<span id="prev">prev</span>
<ul id="scrolllist">
<li><img src="http://dummyimage.com/100x100/000000/fff"></li>
<li><img src="http://dummyimage.com/100x100/f33636/fff"></li>
<li><img src="http://dummyimage.com/100x100/0c5b9e/fff"></li>
<li><img src="http://dummyimage.com/100x100/0c9e0c/fff"></li>
</ul>
<span id="next">next</span>
</div>
CSS
div {
float: left;
width: 550px;
}
li {
float: left;
list-style-type: none;
margin: 0 5px;
}
#prev {
cursor: pointer;
float: left;
}
#next {
cursor: pointer;
float: right;
}
JS
$(function () {
$('#prev').click(function () {
var first = $('#scrolllist li:first-child');
$('#scrolllist li').parent().append(first).animate({ "left": "-=50px" }, "slow" );
});
$('#next').click(function () {
var last = $('#scrolllist li:last');
$('#scrolllist li').parent().prepend(last).animate({ "left": "+=50px" }, "slow" );
});
});
This works moves them across as expected however I want to scroll the list items across to get the affect of them going in the clicked direction similar to what can be seen in http://coolcarousels.frebsite.nl/c/58/
What do I need to do to get this working?

The trick to doing it right is to place the images in a hidden container div and then animate that container to the left or right as needed, cloning the first or last img in the list and then appending or prepending depending on the direction.
The img container div must be placed inside another div with an explicit height and width with overflow set to hidden. This prevents the wide img container from being visible to the user.
Here is the HTML:
<div>
<span id="prev">prev</span>
<div class="scroll-container">
<div class="img-container">
<img src="http://dummyimage.com/100x100/000000/fff">
<img src="http://dummyimage.com/100x100/f33636/fff">
<img src="http://dummyimage.com/100x100/0c5b9e/fff">
<img src="http://dummyimage.com/100x100/0c9e0c/fff">
</div>
</div>
<span id="next">next</span>
And the JavaScript:
$(function () {
$('#prev').click(function () {
if(!$('.img-container').is(':animated')) {
var first = $('.img-container img:first-child');
var firstClone = first.clone();
$('.img-container').append(firstClone);
$('.img-container').animate({ "left": "-=110px" }, "slow", function() {
first.remove();
$('.img-container').css("left", "0");
});
}
});
$('#next').click(function () {
if(!$('.img-container').is(':animated')) {
var last = $('.img-container img:last-child');
var lastClone = last.clone();
$('.img-container').css("left", "-110px");
$('.img-container').prepend(lastClone);
$('.img-container').animate({ "left": "0" }, "slow", function() {
last.remove();
});
}
});
});
Note the 'if not animated' check at the beginning of each function. This prevents the user from running the functions again before the animation has completed (which would cause weird errors).
Here is a modified version of your fiddle: http://jsfiddle.net/fJqKV/17/

How to slide out and slide in two divs alternately in single line?

I'm trying to do function to sliding new added content, using jQuery slide effect but I can't apply any solutions to put two divs in a single line. How to fix code below to slide from left to the right side by side? Maybe this code is completely to rebuild?
jsFiddle:
jsfiddle
JS:
$(function() {
$("#hello").html("Hello");
$('#edit').toggle(function() {
var newhtml = '<input type="text" id="hello_input" value="" />';
slideNewContent(newhtml);
}, function() {
var newhtml = $("#hello_input").val();
slideNewContent(newhtml);
});
});
function slideNewContent(c) {
$("#slideOut").empty();
$("#slideIn").children().clone().appendTo("#slideOut");
$("#slideIn").find("#hello").html(c);
var slideOut = $("#slideOut");
var slideIn = $("#slideIn");
slideOutIn(slideOut, slideIn);
}
function slideOutIn(outElement, inElement) {
var hideoptions = { "direction": "right", "mode": "hide" };
var showoptions = { "direction": "left", "mode": "show" };
$(outElement).effect("slide", hideoptions, 1000);
$(inElement).effect("slide", showoptions, 1000);
}
​HTML:
<div class="span3">
<div id="slider">
<div id="slideIn" class="content">
<span>
<span id="hello"></span>
<button class="btn btn-mini" id="edit">Edit</button>
</span>
</div>
<div id="slideOut" class="content"></div>
</div>
</div>​
CSS:
#slider {
/*float:left;*/
display: inline-block;
}
#slideIn {
width: 270px;
/*display: inline;*/
}
#slideOut {
width: 270px;
/*display: inline;*/
}
#hello_input {
width:160px;
}

Edit to this
$(outElement).effect("slide", hideoptions, 0);
$(inElement).effect("slide", showoptions, 0);