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>
Related
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
i really need help. i tried but it is still not working. i want to make a dropdown menu that will appear on hover and will disappear when leave that dropdown.
$(document).ready(function(){
$('.navigation-menu').mouseenter(function(){
$('.navigation-dropdown').addClass('visible');
});
$('.navigation-dropdown').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
});
ul{
margin: 0;
}
.container{
background-color: rgb(0,0,0);
height: 30px;
padding: 10px;
}
.container-dropdown{
background-color: rgb(125,125,125)
}
.dropdown-menu{
display: inline-block;
}
.navigation-dropdown{
display: none;
}
.navigation-menu{
display: inline-block;
height: 100%;
}
.visible{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div class="container">
<img src="" alt="">
<div class="navigation">
<ul>
<li class="navigation-menu">home</li>
<li class="navigation-menu">home</li>
<li class="navigation-menu">home</li>
</ul>
</div>
</div>
<div class="navigation-dropdown">
<div class="container-dropdown">
<ul>
<li class="dropdown-menu">
<img src="http://placehold.it/50x50" alt="">
</li>
<li class="dropdown-menu">
<img src="http://placehold.it/50x50" alt="">
</li>
<li class="dropdown-menu">
<img src="http://placehold.it/50x50" alt="">
</li>
</ul>
</div>
</div>
</header>
So, i just want to make that gray div disappear when i move my mouse leave the navigation-menu class
my problem: i have to move the mouse to the gray div first to make the gray div disappear. all i want is make the gray div can disappear without have to move the mouse to the gray div first
There are much better design options for you to look forward to, to get what you want. But if you just want to stick to the current layout and design, I would make a couple of changes to get what you are looking for.
.container{
background-color: rgb(0,0,0);
height: 20px;
padding: 10px;
padding-bottom: 0px; --to remove any space between menu title and the dropdown
}
and
$(document).ready(function(){
$('.navigation-menu').mouseenter(function(){
$('.navigation-dropdown').addClass('visible');
});
$('.navigation-dropdown').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
$('.navigation-dropdown').mouseenter(function(){
$('.navigation-dropdown').addClass('visible');
});
$('.navigation').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
$('.navigation-menu').mouseleave(function(){
$('.navigation-dropdown').removeClass('visible');
});
});
to hide dropdown menu if mouse leaves navigation div.
hope this helps.
This is my first post on Stack Overflow so sorry if I'm not clear in what I'm saying. But basically I'm working on a little school project and it's basically an All About Me site to refresh on what we've learned over the summer. I have tabs on the bottom of the screen for navigation and I have content in the center of the screen. Upon clicking a new tab or scrolling down, I want the corresponding div to slide into where the old content was. I don't have a huge knowledge of JavaScript so I have no idea how to go about doing this. I've been looking at image sliders but those aren't really what I'm looking for. I'm looking for something like this: http://coolcarousels.frebsite.nl/c/8/
This is how it looks right now:
http://i.imgur.com/BqZ78S3.jpg
This is basically all of my HTML so far:
<main class="content-container">
<section class="slider animated fadeInDown">
<div class="intro-content">
<h1>Hi, my name is Brian Hurtado.</h1>
<h3>I enjoy making beautiful and innovative websites.</h3>
</div>
<div class="summer-content">
<h1>This is my text about summer.</h1>
<h3>This is some more text about my summer.</h3>
</div>
<div class="design-content">
<h1>This is some text about web design.</h1>
<h3>This is some more text about web design.</h3>
</div>
<div class="schedule-content">
<h1>This is some text about my schedule.</h1>
<h3>Probably going to put a table in here.</h3>
</div>
<div class="site-content">
<h1>This is some text about what I want to do with the school site.</h1>
<h3>This is some more text about what I want to do with the school site.</h3>
</div>
<div class="goals-content">
<h1>These are my goals that I hope to achieve in the future.</h1>
<h3>I have to think of some goals.</h3>
</div>
</section>
</main>
<nav class="main-nav">
<ul>
<li class="active">
<a href="#">
<span>
<img src="img/home.png">
</span>
<b>Intro</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/summer.png">
</span>
<b>Summer</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/design.png">
</span>
<b>Web Design</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/schedule.png">
</span>
<b>Schedule</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/site.png">
</span>
<b>School Site</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/goals.png">
</span>
<b>Goals</b>
</a>
</li>
</ul>
</nav>
And this is my CSS:
body {
font-family: Lato, sans-serif;
}
.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}
.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}
.intro-content h3 {
margin-top: -30px;
}
.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}
.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.main-nav ul li a {
color:white;
text-decoration: none;
}
.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.main-nav ul li:not(.active) {
opacity: 0.5;
}
.main-nav ul li:hover {
opacity: 1;
}
.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}
html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}
What exactly do I need to do from here? I was thinking maybe doing an onclick function that switches the active class so that the non-active class is display:none, but I want it to have a sliding effect. I would really appreciate any help. If you need me to clarify anything please let me know.
You can use a variety of plugins as mentioned by Fabio above, or you might use this code as your starting point - FIDDLE.
Your link to coolcarousels showed it going horizontally, so that's how the fiddle works.
JS
$("#selector a").on("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
},
1200);
});
Attribution is noted in the JS section of the fiddle.
I used a very simple script from this website;
http://jquery.malsup.com/cycle2/
Simply download and include Cycle2 plugin on your page (Make sure you also have the latest version of Jquery) and then declare your slideshow markup. There are loads of demo's on the site which are extremely easy to follow.
Goodluck with your project!
i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.
First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]
you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>
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