Develop Reference

Mouse Over Text To Display Image On A Fixed Location

I am new to HTML, CSS, and Javascript. For some time I have been looking to design my website the same as Harvard school of design but after a lot of search over the internet, I can only find this result change links with images
$('#thumbs img').hover(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href').replace('thumb','large'));
});
$('#thumbs3 a').hover(function(){
$('#largeImage3').attr('src',this.getAttribute('data-swap'));
});
#thumbs ,#thumbs2, #thumbs3 {overflow: hidden; }
#thumbs img, #largeImage, #largeImage2 ,#largeImage3
{ border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; }
#thumbs img ,#thumbs2 a ,#thumbs3 a{ float: left; margin-right: 6px; }
#panel { position: relative; }
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
//WITH IMAGE LINKS </br><hr></br>
<div id="gallery">
<div id="panel">
<img id="largeImage" src="http://placehold.it/100" />
<div id="description">main image with image links</div>
</div>
<div id="thumbs">
<img src="http://placehold.it/100/ee55ee" alt="1st image description" />
<img src="http://placehold.it/100/080" alt="2nd image description" />
<img src="http://placehold.it/100/ff6" alt="3rd image description" />
<img src="http://placehold.it/100/ff3322" alt="4th image description" />
</div>
</div>
</br><hr></br>
//WITH SIMPLE LIVE LINKS </br></br>
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
</br><hr></br>
//WITH SIMPLE [DISABLED] LINKS </br></br>
<div id="gallery3">
<div id="panel">
<img id="largeImage3" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs3">
<a href="#" data-swap="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
which is not much desired. The result which I got on this website is really I am looking forward to the time being. Being new to front-end technologies facing a hard time achieving this goal. I would really appreciate getting help.

Having looked at the code referenced in the question, I wonder whether something a bit simpler would suffice.
In particular, there doesn't really seem to be a need for jquery and it's probably useful to get a basic understanding of 'raw' Javascript before taking on a library.
This snippet has very minimal styling deliberately, just to show the basic JS.
UPDATE To make the transition to the hovered element smoother all images are loaded to begin with. They are stored in the bigImage element so it will be possible to show them offset and transition them in and out as desired using CSS. This code is just the basic stuff needed to show an image on a hover event.
<!-- begin snippet: js hide: false console: true babel: false -->
#container div.bigImage {
display: inline-block;
}
.bigImage img {
display: none;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
.bigImage img.show {
display: block;
}
<div id="container">
<ul id="ul">
<li>Pic 1</li>
<li>Pic 2</li>
<li>Pic 3</li>
<li>Pic 4</li>
</ul>
<div class="bigImage">
<img src="https://picsum.photos/id/1/300/300.jpg" class="show">
<img src="https://picsum.photos/id/2/300/300.jpg">
<img src="https://picsum.photos/id/3/300/300.jpg">
<img src="https://picsum.photos/id/4/300/300.jpg">
</div>
</div>
const bigImage = document.querySelector("#container div.bigImage"); //get the bigImage element
const img = bigImage.querySelector("img"); // get the img element within it
const textdiv = bigImage.querySelector("div.text"); //get the div which holds the text
const lis = document.querySelector("#container ul").getElementsByTagName("li"); //get a collection of the li elements inside the ul element
// listen for mouseover event on the li elements
for (var i=0; i<lis.length; i++) {
lis[i].addEventListener('mouseover', function() {
// on an event this will refer to the element that witnessed that event
img.src = this.getAttribute("data-src");
textdiv.innerHTML = this.getAttribute("data-text");
}
);
}
// initialise the bigImage with the image and text from the first list element
bigImage.querySelector("img").src = lis[0].getAttribute("data-src");
bigImage.querySelector("div").innerHTML = lis[0].getAttribute("data-text");
#container div.bigImage {
display: inline-block;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
<div id="container">
<ul>
<li data-src="https://picsum.photos/id/1/300/300.jpg" data-text="Picture 1">Pic 1</li>
<li data-src="https://picsum.photos/id/2/300/300.jpg" data-text="Picture 2">Pic 2</li>
<li data-src="https://picsum.photos/id/3/300/300.jpg" data-text="Picture 3">Pic 3</li>
<li data-src="https://picsum.photos/id/4/300/300.jpg" data-text="Picture 4">Pic 4</li>
</ul>
<div class="bigImage">
<img src="">
<div class="text">
</div>
</div>

Keep getting "cannot read property style of null" error

I am working on my own website and not good with codes yet. When I am scrolling down I want to appear another content of the navbar and when I am on the top, original navbar is appearing. I want this to be done in pure JavaScript with no libraries or framewokrs. Please see codes below and I know that codes are not organised. I will do that later on.
var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
window.onscroll = function(){
if(document.body.scrollTop > 70){
hide.style.display = "block";
appear.style.display = "none"
} else {
hide.style.display = "none";
appear.style.display = "block"
}
}
nav{
list-style-type: none;
text-align: center;
background-color: #3FA9A5;
position: sticky;
top: 0;
}
.hide{
font-size: 70px;
font-family: 'Long Cang', cursive;
display: block;
}
.appear{
height: 70px;
display: none;
}
.appear img{
width: 210px;
}
ul{
margin: 0 auto;
padding: 0;
}
body{
margin: 0;
}
.container{
max-width: 1080px;
width: 95%;
margin: 10px auto;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.text{
text-align: center;
}
.profile {
border: 1px solid black;
padding: 0 10px 20px 10px;
}
#main{
width: 100%;
}
.post{
margin-left: 4.165%;
}
#image{
width: 100%;
}
#post-divide{
margin-left: 10px;
margin-right: 10px;
}
.comments{
width: 100%;
margin-top: 68.5px;
padding-bottom: 293.5px;
border: 1px solid black;
}
h2{
text-align: center;
}
.center{
grid-column: 2;
}
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>
<body>
<nav>
<ul>
<li class="hide">Unknown</li>
<li class="appear"><img src="cat.png"></li>
</ul>
</nav>
<div class="container">
<div class="col-1">
<div class="profile text">
<img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
<hr>
<p>12 posts</p>
<p>instagram</p>
<button>Subscribe!</button>
</div>
</div>
<div class="col-1">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
<div class="col-1 center">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
</div>
I think I should add something to the JS code but don't know why
Would be thankful if you would advise me how could I write HTML/CSS code so I do not have to create 2 navbars if it is possible

The following instruction:
document.querySelector("hide");
Will query for elements like:
<hide></hide>
Since plain selectors without prefix (div, header, span) will query for the whole element tags, not for classes or attrbitues.
Maybe you meant to query for the class, using the .:
document.querySelector(".hide");

var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
So you should use class selector

You are using "hide" and "appear" as selectors but they do not exist in your HTML.
Use ".hide" and ".appear" in your querySelector instead.
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear");

Since both navbars have a static data, I would suggest to keep both of them and follow with answers of guys, that suggested to update querySelector param. Or you can hide/show the data inside of navbar (in your case it's only ul element) and leave the whole navbar always visible. So you can put classes appear/hide on ul element instea of navbar and then in JS get them with document.querySelector('.navbar .hide') and document.querySelector('.navbar .appear').
Using framework/library will definitely simplify it.
However, if you still want to have only one navbar in pure js/html/css (or it's data just dynamic) I would probably do like this:
HTML:
<nav class="navbar">
<ul>
<li><img src="cat.png"></li>
</ul>
</nav>
somewhere in JS:
var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
if (document.body.scrollTop > 70) {
navbarUl.innerHtml = '';
navbarUl.appendChild(getTopNavbarHTML);
} else {
navbarUl.innerHtml = '';
navbarUl.appendChild(getNavbarHTML);
}
}
getNavbarHTML and getTopNavbarHTML - will return documentFragment with li elements, see for details https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp
But changing DOM during a scroll event can drastically decrease performance of a web app

Using Jquery to only animate one element whilst selected

so I'm trying to get better at using javascript and jquery, so I tried to implement a little animation. I have 2 divs in a list under each other, and my aim is, when a mouse hovers over one of the divs, it animates it's width to stretch it out, and when the mouse leaves, the div is still stretched out, only until the mouse enters another div, in which the new div will expand, and the other will return back to it's original size. I've managed to get the divs to expand and resize when entering and leaving them with the mouse, but when trying to implement a way so that only ONE div can be expanded at any time, I can never seem to get it to work.
Here's my code so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}
</style>
<script>
$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});
$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});
</script>
</head>
<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>
</ul>
</div>
</div>
</body>
</html>

You could also simplify a bit and just add/remove an active class to the hovered div.
$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});
li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}
li.active {
width: 500px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>

Here's a solution that answers your question: https://jsfiddle.net/d8kjLgph/
I use the data-* attribute to keep track of which element that is the "big one".
Edit: I changed your original code a little bit, hope that's ok!
$(document).ready(function() {
$(".animate").mouseenter(function(){
/*
Checking that the .animate-element the mouse enters is a "small" one
*/
if($(this).attr("data-active") != "true"){
$(".animate").attr("data-active", "false"); // Reseting all divs to "small"
$(this).attr("data-active", "true"); // Keep track of which one that's active (the big one)
$(".animate:not([data-active='true']").animate({ // Animate all that's not active to "small"
width: '210px'
}, 500);
$(this).animate({ // Animate the active one to "big"
width: '400px'
}, 500);
}
});
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.animate{
background-color: lightgreen;
width: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<ul>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
</ul>
</div>
</div>

You can use .data() to store state of element animation; if selected is 0, animate to 400px at mouseenter, set element having className beginning with "d" that is child of parent sibling to 210px
$(document).ready(function() {
$(".d1, .d2").data("selected", 0)
.mouseenter(function() {
if ($(this).data().selected === 0) {
$(this).animate({
width: '400px'
}).data("selected", 1)
.parent().siblings().find("[class^=d]")
.data("selected", 0)
.animate({
width: '210px'
})
}
})
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1,
.d2,
.d3,
.d4 {
background-color: yellow;
width: 210px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>
<div class="d1">This is some text</div>
</li>
<li>
<div class="d2">This is some text</div>
</li>
</ul>
</div>
</div>

HTML JQuery slide show

Hi i have been trying to do a slide show using HTML and jquery. I tried to figure out why it it not working but could not find out why? That is the reason ia m writing here. I am also trying to get navigation left and right arrows.
thank you for any help.
<!DOCTYPE html>
<html>
<head>
<title>Roohi Health Screnning</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="roohiSTYLE.css">
<!--------- SCRIPT FOR SLIDER--------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
</header>
<section>
<!-- Content Starts Here -->
<header>
<h1> Welcome to Roohi</h1>
</header>
<!-- Navigation bar-->
<nav id="navigation">
<ul>
<li>Home</li>
<li>Products
<ul>
<li>Waterless Shampoo</li>
<li>Alcohol-Free Soap</li>
<li>Needle</li>
</ul>
</li>
<li>About Us</li>
<li>Service
<ul>
<li>BloodPresure</li>
<li>Test2</li>
<li>test3</li>
</ul>
</li>
<li>FindUs</li>
</ul>
</nav>
<div class="logo">
</div>
<div id="slides">
<ul>
<li><img src="images/green-stripes.jpg"/></li>
<li><img src="images/blue-stripes.jpg"/></li>
<li><img src="images/pink-stripes.jpg"/></li>
</ul>
</div>
<!-- Content Ends Here -->
</section>
<footer>
</footer>
</div>
</body>
</html>
css
#navigation{
font-family: crusoe;
color:#99;
margin: -0px auto;
position: realtive;}
#navigation ul{
list-style-type: none; /*removes bullet points*/
min-width:200px;}
#navigation ul li {
display:inline-block;}
#navigation ul li :hover{
background-color: #333}
#navigation ul li a, visited {
padding:20px;
display:inline-block;
text-decoration:none;
color:#999;}
#navigation ul li:hover ul{
display:block;
}
#navigation ul ul {
display: none;
position:absolute;}
#navigation ul ul li{
display: block;}
#navigation ul ul li a:hover {
display:block;
position: relative;
}
#navigation li:nth-child(3) {
padding-right: 80px;}
#navigation li:nth-child(4) {
padding-left: 80px;}
.logo {
background: url(images/Roohi-logo1.png) 50% 0 no-repeat;
background-size: 100px 90px;
width: 100px;
height: 90px;
position: absolute;
top: 30px;
left: 360px;
}
footer
{
display: table-row;
height: 1px;
background-color: blue;
}

Have a close look at their example on http://www.slidesjs.com/ . Pay close attention to their sample markup for the images. They are images inside a div, not images inside li's inside a ul inside a div as you have.
Also, you pasted a bunch of CSS in your question, assuming they are in a proper style block in your real site?
As for the arrow links, they provide you previous and next links which you can style to look like arrows.

How to display text over image

I want to display text over image. Whenever someone hover mouse over the image.
My Div block is:
<div class="MainDIV">
<br><br><br>
<div class="popular_stores" align="center">
<span style="font-size: 12pt;">Browse our list of stores that we have coupons, coupon codes, and promo codes for.
</span>
<br>
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
</li>
</ul>
</div></div>
And rest of the CSS and JavaScript Function is:
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.drama').mouseover(function(){
alert("dss");
var tt = $(this).parent().find('.toolTip');
tt.html($(this).attr('title'));
tt.show();
});
$('.drama').mouseout(function(){
var tt = $(this).parent().find('.toolTip');
tt.hide();
});
</script>
<style type="text/css">
body {
text-align: center;
}
.MainDIV{
padding:0;
width:700px;
display: inline-block;
background-color:white;
}
.MainDIV ul
{
list-style-type: none;
}
.MainDIV ul li {
display: inline-block;
padding : 1em;
}
.MainDIV ul li img
{
padding: .2em ;
border-radius: 10px;
-moz-border-radius: 10px;
background-color: #F5F5E3;
}
ul li div{display:none; background:white; opacity:.5; position:absolute;}
What i am trying to do is shown here.please take a look :click here
Similar to this page i want to display text over the image whenever someone hover mouse on the image. Can someone please help me out...

I build up a fiddle with the simpliest way I could think of.
$('#hover1').mouseover(function(){
$('#hoverDiv1').css('opacity', 1)
});
$('#hover1').mouseout(function(){
$('#hoverDiv1').css('opacity', 0)
});
Please see this Fiddle
Hover effect is not correctly positioned, because "li" needs to be defined.
It is just to show an easy jQuery way.
Best