I am struggling to understand how to implement a simple carousel. I've tried the append()/prepend() functions but can't seem to get it to operate how I would like.
The setup I am using:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>First Step Connections - Online Media Marketing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="testimonial-carousel-container">
<div id="btn-prev"> < </div>
<div id="testimonial-carousel">
<div id="testimonial-container">
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
How was lunch today?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Football is the best sport!
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Meeting at 12pm.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
The weather outside is gorgeous.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Susan can you call Jim?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris</br>
Houston, TX
</span>
</div>
</div>
</div>
<div id="btn-next"> > </div>
</div>
</body>
</html>
Basically I have a carousel container, and within the carousel container I have a testimonial container with x amount of testimonial divs.
The css seems okay in that I hid the overflow of carousel container, and removed white-space wrapping on the testimonial container. So everything appears fine.. I just need help with the logic of how I would endlessly be able to scroll through the x amount of divs.
So when I get to the last testimonial it continues fluidly to the first.
Here is my css incase you need it:
:root {
--main-red-color: #e11a2c;
--main-blue-color: #013e7b;
--main-green-color: #8dc63f;
}
* {
color:var(--main-blue-color);
box-sizing:border-box;
font-family:"Lato", sans-serif;
}
#testimonial-carousel-container {
width:70%;
margin: auto;
position:relative;
}
#testimonial-carousel {
margin: auto;
background-color:var(--main-blue-color);
position:relative;
overflow:hidden;
}
#testimonial-container {
white-space:nowrap;
width:100%;
position:relative;
}
.speech-bubble {
border-radius:5px;
background-color:var(--main-green-color);
width:auto;
display:inline-block;
padding:20px;
text-align:center;
position:relative;
}
.speech-bubble .arrow {
border-style: solid;
position:absolute;
}
.bottom {
border-color: var(--main-green-color) transparent transparent transparent;
border-width:8px 8px 0 8px;
bottom:-8px;
}
#testimonial {
padding:10px 5px 5px 5px;
height:200px;
background-color:var(--main-red-color);
position:relative;
display:inline-grid;
opacity:.4;
}
#testimonial img {
width:40px;
height:40px;
border-radius:50%;
margin-top:13px;
}
#testimonial span {
color:#fff;
font-weight:900;
}
#btn-prev, #btn-next {
position:absolute;
background-color:var(--main-red-color);
color:#fff;
height:40px;
width:40px;
z-index:5;
border:3px solid #fff;
text-align:center;
line-height:40px;
font-weight:900;
margin-top:-20px;
}
#btn-prev:hover, #btn-next:hover {
background-color:var(--main-blue-color);
}
#btn-prev {
top:50%;
left:-40px;
}
#btn-next {
top:50%;
right:-40px;
}
As for the Jquery scripting I am drawing blanks. If you could provide some help as to the logic for completing this I would greatly appreciate it. Is append() prepend() the only way to go?
You can view the demo at:
http://firststepconnections.com/carousel/
Related
Hi I created a Search Bar and wrapped it inside a div and have given it the max-width of 500px (100% with to the search Input) but don't know why max width is not working and I search the Stack Overflow and found a link Why would max-width not work on this? and tried this but it didn't worked for me
So can anyone please tell me why its not working and how to make it work :)
Any kind of help is highly Appreciated
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
font-family:arial;
}
header{
width: 100%;
padding:20px 20px;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-container{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.search-input-container{
width:100%;
max-width:500px;
}
input[type="search"]{
border-radius:500px;
padding:5px 10px;
width:100%;
}
ul li{
list-style:none;
}
ul{
margin:10px;
}
button{
outline:none;
border:none;
padding:8px 15px;
}
a{
text-decoration:none;
}
.submenu-items{
position:absolute;
top:100%;
border:2px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<!-- Logo Wrapper -->
<div class="logo">
<img src="" alt="Test Logo">
</div>
<!-- Search Wrapper || Issue Area-->
<div class="search-container">
<form action="get">
<div class="search-input-container">
<input type="search" class="search">
</div>
</form>
</div>
<!-- Search Wrapper Ends ↑ -->
<div class="menu-container">
<ul>
<li>
Help
</li>
</ul>
<ul>
<li>
Campagians
</li>
</ul>
</div>
<div class="buttons-container">
<button class="Login-btn">Log in</button>
<button class="signup-btn">Sign up</button>
</div>
</nav>
</header>
</body>
</html>
Instead of max-width, try using width: clamp() (MDN)
I think in your case it would be something like:
.search-input-container {
width: clamp(150px, 400px, 500px);
}
Here 150px is the minimal size,
400px - is the ideal size, that the element wants to be,
and 500px - is the maximum possible size. so it can't grow bigger then that.
That way the input will try to be 400px, but if there is no space - it will shrink down up to 150px.
I know this is pretty simple but I'm so tired already and I can't seem to find the right keywords to find the solution on a search engine... I'm building a simple front-end only ecommerce website, I've already got the modal up but I need for it to show the right information depending on which product I click... How do I do this?
EDIT: my bad for not putting in the code...
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="modal.css">
<title>Merlin's Potions</title>
</head>
<h3>Potions</h3>
<div class="items">
<div class="item" id="item1">
<img src="../img/aging-potion.png" alt="Potion">
<h6>Aging Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item2">
<img src="../img/bulgeye-potion.png" alt="Potion">
<h6>Bulgeye Potion -</h6> <span>$19.99</span>
</div>
<div class="item" id="item3">
<img src="../img/dragon-tonic.png" alt="Potion">
<h6>Dragon Tonic -</h6> <span>$64.99</span>
</div>
<div class="item" id="item4">
<img src="../img/love-potion.png" alt="Potion">
<h6>Love Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item5">
<img src="../img/polyjuice-potion.png" alt="Potion">
<h6>Polyjuice Potion -</h6> <span>$99.99</span>
</div>
<div class="item" id="item6">
<img src="../img/sleeping-draught.png" alt="Potion">
<h6>Sleeping Draught -</h6> <span>$14.99</span>
</div>
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="../img/bulgeye-potion.png" alt="" id="modalImg1">
<div class="modalTxt" id="modalTxt1">
<h4>Aging Potion</h4>
<h5>Use/Effect:</h5>
<p>It affects one's eyes, causing them to swell</p>
<h5>Ingredients:</h5>
<ul>
<li>Beetle eyes</li>
<li>Eel eyes</li>
</ul>
<h5>Price:</h5>
<span class="modalPrice">$29.99</span>
<br>
<span class="buyBtn">ADD TO CART</span>
</div>
</div>
</div>
</html>
<script type="text/javascript">
document.querySelector('.item').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = 'flex';
document.querySelector('#modalTxt1').style.display = 'inline-block';
document.querySelector('#modalImg1').style.display = 'inline-block';
});
document.querySelector('.close').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = "none";
modaltext.style.display = "none";
});
</script>
.item img{
width:50px;
}
.bg-modal{
display: none;
-ms-align-items: center;
align-items: center;
justify-content: center;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.7);
position: fixed;
top:0;
}
.modal-content {
text-align:left;
position: relative;
border-radius:4px;
width:80%;
height:80%;
background-color:white;
}
.close {
position: absolute;
right:14px;
top:0px;
font-size:42px;
transform:rotate(45deg);
cursor: pointer;
}
.modal-content img {
width:200px;
display:none;
}
.buyBtn {
background-color:red;
padding: 9px 18px;
border-radius:4px;
color:white;
}
.modalPrice{
color:red;
}
.modalTxt{
position: absolute;
}
.modal-content{
width:60%;
}
.modal-content img{
width:56%;
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
}
.modalTxt{
right:10%;
top:50px;
}
.modalTxt h4{
font-size:18pt;
}
.modalTxt h5{
font-size:18pt;
margin-top:24px;
}
.modalTxt p {
margin-top:24px;
}
.modalTxt ul {
margin-top:24px;
}
.modalPrice{
font-size:18pt;
line-height:1.5em;
}
.buyBtn{
position: absolute;
bottom:-50px;
}
For example this is your product
<div onCLick="showModal(this)">
<h3>Product Name</h3>
<p>product description</p>
</div>
Now you need the javascript function
function showModal(product) {
// get the product information
var productName = $(product).find("h3").text();
var productDescription = $(product).find("p").text();
var modal = $("#myModal");
// fill the modal with the information
$(modal).find(".modal-title").text(productName);
$(modal).find(".modal-body").text(productDescription);
// show the modal
$("#myModal").modal("show");
}
So I'm relatively new to coding and have been working on a project. At its current state I'm finding difficulty combining off-screen navigation with parallax scrolling. I have tried making a div inside the wrapper (ineffective), changing the location of where the parallax scrolling is in the HTML (makes one feature work, or the other), and changing the css positioning (generally just makes the page melt, with a few outliers)
The goal, ultimately, is to have the parallax scrolling run underneath the navigation square and the side menu move the background as well.
The code is below, with placeholder pictures and info some dashed out modifications of things I've tried and failed. Like I said, I'm quite new so if there is anything amiss I would deeply appreciate the help.
I'm guessing I'm overlooking something moronic, or am trying the wrong combination of solutions.
Thank you for any assistance.
HTML:
<head>
<meta charset="utf-8"/>
<title>What is Reality?</title>
<link rel="stylesheet" href="websitebasefinal.css"/>
<link rel="stylesheet" href="tennants.css"/>
<script language="javascript" src="websitefinal.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu">
<script src="jquery-3.3.1.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div id="side-menu" class="side-menu">
Home
hai
mark
!
<br>
<br>
Contact Us
</div>
<div id="search-menu" class="search-menu">
<p>What are you <br>looking for?<br>
<input type="text" placeholder="...?">
</div>
<div id="wrapper">
<div id="insidewrapper">
<div id="container-one">
<div id="container-menu" onclick="openmenuside()">
<i class="fas fa-align-left fa-lg" id="menubutton" style="color:#f1f1f1"></i>
<script>
$('#container-menu').click(function(){
$('#menubutton').toggleClass('fas fa-align-left fa-lg fas fa-times fa-lg')
});
</script>
</div>
<div id="container-search" onclick="opensearchside()">
<i class="fas fa-search fa-lg" id="searchbutton" style="color:#f1f1f1"></i>
<script>
$('#container-search').click(function(){
$('#searchbutton').toggleClass('fas fa-search fa-lg fas fa-times fa-lg')
});
</script>
</div>
</div>
<div id="tenantcontainer">
<div class="bgimage1">
<div class="caption">
<span class="border">Scroll down</span>
<div class="content"><p>Here's where we talk about what's what daddy-o</div>
</div>
</div>
<div class="bgimage2">
<div class="caption">
<span class="border">Scroll down</span>
<div class="content"><p>Here's where we talk about what's what daddy-o</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.bgimage1, .bgimage2, .bgimage3{
position:relative;
/*background-attachment:fixed;*/
background-position:center;
/*background-repeat:no-repeat;*/
background-size:cover;
z-index:0;
top:0;
left:0;
}
.bgimage1{
background-image:url("evelynnteaser-1920X1080.jpg");
height:100%;
}
.bgimage2{
background-image:url("2017-eclipse-photos-01.jpg");
height:100%;
}
.bgimage3{
background-image:url("evelynnteaser-1920X1080.jpg");
height:100%;
}
.caption {
position: absolute;
left: 0;
top: 25%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
.content, .content p{
position: absolute;
margin-top:70px;
color:white;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color:#f1f1f1;
}
JS:
function openmenuside(){
var side=document.getElementById("side-menu");
var container=document.getElementById("wrapper");
if (side.style.width=='320px'){
side.style.width="0px";
container.style.marginLeft="-620px";
}else{
side.style.width="320px";
container.style.marginLeft="-340px";
}
}
function opensearchside(){
var side=document.getElementById("search-menu");
var container=document.getElementById("wrapper");
if (side.style.width=='320px'){
side.style.width="0px";
container.style.marginLeft="-620px";
}else{
side.style.width="320px";
container.style.marginLeft="-900px";
}
}
I have a container which has a fixed width of 200px and the rest of the width is margin equally on both sides.
I have applied margin-bottom on this container but it will occupy only the 200px width since that is the width of the container box.
How can i make the border-bottom occupy the entire screen width.
code:
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
border-bottom:1px solid red
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
FIDDLE
Implementing as two class will be the best choice.
.sch-container{
border-bottom:1px solid red;
}
.content{
max-width:200px;
margin:0 auto;
text-align:center;
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
This is not a straight forward solution to your problem, more of an alternative.
You could use <hr /> tag instead of border-bottom on .sch-container.
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
}
hr{
height: 1px;
border: 0;
border-top: 1px solid;
}
.red{
border-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Some Title</title>
</head>
<body>
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
<hr class="red"/>
</body>
</html>
Right now my navigation tabs are only clickable. I did it by using "anchor() tag". But as soon as I click it, it doesn't show the corresponding paragraph (which I already stored in my HTML file). Basically I haven't added any functionality to happen something after clicking the tab. And I don't know how to do that and which one is better (comparing with jquery and javascript).
This is my code:
.PHP file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="design.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.14.custom.css">
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<header id="top_header" >
<h1>Welcome to my world!</h1>
</header>
<!--This div wrapps all the tabs and corresponding section/paragraphs-->
<div id="giant_wrapper">
<div id="top_menu">
<ul>
<li>HOME</li>
<li>WHO I'M</li>
<li>GALLERY</li>
<li>MY DIARY</li>
<li>FATAH'S BLOG</li>
<li>CONTACT ME</li>
</ul>
</div>
<div id="new_div">
<section id="main_section">
<!--This div section is for main contaents for my website. All the correcponding
text and paragraph will be added here-->
<div id="all_contents">
<div id="home_contents">
<p> It's home.</p>
</div>
<div id="who_im_contents">
<p> It's who I'm.</p>
</div>
<div id="gallery_contents">
<p> It's Gallery.</p>
</div>
<div id="diary_contents">
<p> It's diary.</p>
</div>
<div id="blog_contents">
<p> It's my blog.</p>
</div>
<div id="contact_contents">
<p> contact info.</p>
</div>
</div>
</section>
</div>
</div>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
</body>
</html>
.CSS file:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
-webkit-box-pack:center;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:green;
border:3px solid orange;
padding:20px;
text-align:center;
}
#top_menu{
background:white;
color:black;
border:3px solid red;
padding:4px;
text-align:center;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid red;
}
your values in href and id of divs are different ,that is the problem ,please match div id to navigations
ex:
Home
<div id="home_contents">
<p> It's home.</p>
</div>
What you are actually setting up is an in-page nav bar. If you change the links to match the actual ids then when you click the link the browser will scroll to the associated div.
In other words you need to either remove _contents from all your anchors or add _contents to all the links in top_menu, in order to have anything happen.
You can check below code it will work for you
$('ul > li > a').click(function () {
$('#all_contents >div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
Please see Demo