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/");

Adding image over image after upload

I'm trying to make a website where you can upload an image, then select another one and add it over the uploaded one. I'm using jquery to make the image draggable and resizable and everything works fine, except that I can't add it over the uploaded image.
Here's my code:
code:
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.blocks {
width: 10%;
z-index: 9999;
}
.block {
width: 100%;
height: 100%;
border: 1px solid #C8C8C8;
margin: 0px;
background-color: #F0F0F0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
<div class="background">
<img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
</div>
</div>
<br/>
<div id="existingImges">
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>
So here's the result in this case:
and here's what I'd like to be after adding a wheel:

As #Troy Bailey and I mentioned, the way to success is the css attribute z-index.
Here the changes:
First step:
Add this above z-index attribute to class .block: z-index: 1;.
Second step:
For your javascript you have to add some lines which increases the z-index attribute s of your created divs, with class .container.
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var src = $(this).find('img:first').attr('src');
//New line
//First, find out how many images has being added and dragged
var foundAddedDivs = $('.block').find('.container').size();
//New line
//Second, get the current value from recently added 'z-index' from fist step.
var backGroundDivIndex = $('.block').css("z-index");
//New line
//Third: Calulate a new value for 'z-index' for each draggable elements
var zIndex = backGroundDivIndex + foundAddedDivs;
//Modified line
//Forth: Creates a new div and add calculated z-index to draggable element
var elem = $('<div class="container" style="z-index: '+ zIndex +'">
<img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});

.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */

Creating a sticky navbar in Materialize

I'm trying to make a sticky navbar that becomes fixed after scrolling past the hero section. I'm trying to use materialize to do this, but I'm not very good at javascript so I can't figure it out. I'm trying to use Materialize Pushpin to do it (http://materializecss.com/pushpin.html)
Here's my code so far: https://jsfiddle.net/2kc0fgj5/
The part I'm trying to make sticky is the .menu div. What would be the method I would use javascript I would use to make the navbar behave this way?
<head>
<title>Voice</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<section id="hero" class="segment">
<div id="hero-content" class="valign-wrapper">
<div id="hero-child" class="center-align">
<img src="resources/images/voice-circle.png" id="voice-circle" /><br/>
Learn More<br/>
Order Now
</div>
</div>
</section>
<div class="menu">
<nav>
<div class="nav-wrapper white">
Voice
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
</div>
</nav>
</div>
<section id="features" class="segment">
</section>
</body>
The accompanying CSS:
.segment {
height: 100vh;
width: 100%;
background-color:aquamarine;
}
.divide {
height: 50vh;
width: 100%;
}
#hero {
background-image: url('resources/images/hero%20header.png');
background-size: auto 100vh;
background-position: center;
}
.bpblue-text {
color: #21A1EC;
}
#nav-mobile>li>a {
color: #21A1EC;
}
#voice-circle {
width: 30%;
height: auto;
}
.hero-btn {
margin: 10px;
width: 300px;
}
#hero-content {
width: 100%;
height: 100vh;
}
#hero-child {
width: 100%;
}
And the current javascript, so far only having smooth scrolling and a side navigation bar
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function () {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
$(".button-collapse").sideNav();
EDIT: fixed link and added code.

You Need some Fixes in HTML and JS
HTML
change this section line 20 and 21
<div class="menu">
<nav>
to
<div id="menu">
<nav class="menu" data-target="menu">
JS
$(document).ready(function () {
var menu = $('.menu');
var target = $('#' +menu.attr("data-target"));
menu.pushpin({
top: target.offset().top,
});
});
Working Fiddle
Hope this Helps..

you can add this to your js file
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150){
$('nav').addClass('sticky-nav');
}
});
)};
and this to CSS file
.sticky-nav{
position: fixed;
top:0;
}

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 }

How to display picture

I have some images which dynamically gets displayed on a web page.These images are clickable. When i click on one of the image I want to display another picture over the image that is clicked.If clicked again that picture needs to be removed.
Intially when the page loads the images will be displayed as shown below and when i click on these images another picture over the image which i have click should be displayed. As of now i am able to display the image on the side of the selected image. which is shown in the 2nd image

What you can do is just simply add two data attributes to your tr, so you can have data-image1 and data-image2 then simply change the img src when a mouse click happens.
Here is my jsFiddle : https://jsfiddle.net/wLvn8yzx/
Html
<img src="http://dreamatico.com/data_images/cat/cat-8.jpg"
id="imageSwap"
data-image1="http://dreamatico.com/data_images/cat/cat-8.jpg"
data-image2="http://dressacat.com/chat.png">
Javascript
document.getElementById("imageSwap").onclick = function (e) {
if (this.src == this.getAttribute("data-image1")) {
this.src = this.getAttribute("data-image2");
} else {
this.src = this.getAttribute("data-image1");
}
}
Or you could use classes and style them and set the background to the image. Here is another jsFiddle : https://jsfiddle.net/wLvn8yzx/1/
Html
<div id="imageSwap" class="image1"></div>
Css
div{
height:400px;
width:400px;
}
.image1{
background-image: url("http://dreamatico.com/data_images/cat/cat-8.jpg");
}
.image2{
background-image: url("http://dressacat.com/chat.png");
}
Javacript
document.getElementById("imageSwap").onclick = function (e) {
if (this.className == "image1") {
this.className = "image2";
} else {
this.className = "image1";
}
}
Update
I have created a new jsfiddle which uses a javascript function to hide and show the cross image.
jsFiddle : https://jsfiddle.net/wLvn8yzx/2/
Html
<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png" class="imageSwap image1">
<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/archive/f/ff/20150316142725!Solid_blue.svg/120px-Solid_blue.svg.png" class="imageSwap image2">
<img onclick="javascript:imageSwapper()" src="https://s2.graphiq.com/sites/default/files/2307/media/images/t/Green-Yellow_429842_i0.png" class="imageSwap image3">
<img id="crossImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Red_Cross.svg/120px-Red_Cross.svg.png" class="hidden">
CSS
.hidden{
display: none;
}
.show{
display: inline;
}
Javascirpt
function imageSwapper() {
var crossImage = document.getElementById("crossImage");
if (crossImage.className == "hidden") {
crossImage.className = "show";
} else {
crossImage.className = "hidden"
}
}

You can try using jQuery, and you'll want all <td> to share the same class. In my example, I used "dynamic-image".
HTML:
<table>
<tr>
<td class="dynamic-image"></td>
</tr>
<tr>
<td class="dynamic-image"></td>
</tr>
<tr>
<td class="dynamic-image"></td>
</tr>
</table>
CSS:
.dynamic-image {
background-image: url('http://www.clker.com/cliparts/3/h/N/y/5/p/empty-check-box-hi.png');
background-size: contain;
position: relative;
height: 200px;
width: 200px;
content:" ";
}
.dynamic-image:before { content:" "; }
.dynamic-image.active:before {
background-image: url('http://www.clipartbest.com/cliparts/niX/yoA/niXyoAbiB.png');
background-size:contain;
height: 200px;
width: 200px;
position: absolute;
top: 0;
}
jQuery:
$('.dynamic-image').click(function()
{
$(this).toggleClass('active');
});
Check out my jsFiddle here: http://jsfiddle.net/mdeang2/eyts25nh/1/