I am new to JQuery and am trying to create a product slider for my website. I was having some troubles so I made a basic version of it in this question. For some reason I am having no luck in getting it to work and have no idea why.
The three product boxes will animate as a section rather than individually, similar to this one https://smartslider3.com/product-carousel/. The animation will go from right to left when clicking the previous button and left to right when clicking the next button but I have just left it as slide up and slide down at the moment because I don't know the correct code for the animation. Touch swipe support would also be nice to have.
$( document ).ready(function() {
$("#slider-next-button").click(function(){
var currentSlider = $(".active");
var nextSlide = currentSlider.next();
currentSlider.slideDown(2000);
currentSlider.removeClass(active);
nextSlide.slideUp(2000);
nextSlide.slideUp(2000);
})
});
;
.content{
width: 80%;
margin: auto;
}
.slider-section{
background-color: lightgrey;
height: 600px;
padding: 50px 0px 0px 0px;
}
.slider-container{
display: grid;
grid-template-columns: 1fr 12fr 1fr;
grid-column-gap: 20px;
}
.slider-previous-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-next-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-items{
display: none;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
}
.slider-items.active{
display: grid;
}
.slider-item{
background-color: blue;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="css/slidertest.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/slidertest.js"></script>
</head>
<body>
<div class="slider-section">
<div class="content">
<div class="slider-container">
<div class="slider-previous-button"><p></p></div>
<div class="slider-items active">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="slider-next-button"><p></p></div>
<div class="slider-items">
<div class="slider-item">4</div>
<div class="slider-item">5</div>
<div class="slider-item">6</div>
</div>
<div class="slider-items">
<div class="slider-item">7</div>
<div class="slider-item">8</div>
<div class="slider-item">9</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am creating a sidebar menu composed by 3 divs, these 3 divs should expand in "width" 100% of the menu width but they don't. I have checked to make sure that all tags/divs are closed and make sure that are all displayed as grid and put on each width 100% but still they don't expand to 100% width of their container. Why is that and how to fix it?
Here is my code:
*,
html {
margin: 0;
border: 0;
box-sizing: border-box;
color: #fff;
font-family: pc_seniorregular;
font-weight: 400;
}
.mobile,
.tablet,
.laptop {
display: none;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #16202a;
/* border: 5px solid blue; */
}
div,
menu,
header,
footer {
border: dotted 2px yellow;
display: grid;
height: 100%;
width: 100%;
}
.desktop {
height: 100%;
width: 100%;
/* border: 5px solid greenyellow; */
}
.dash-desk-wrap {
grid-template-columns: 1fr 4fr;
height: 100%;
width: 100%;
/* border: 5px solid red; */
}
/* SIDEBAR */
/* SIDEBAR */
/* SIDEBAR */
.dash-desk-sidebar {
display: grid;
grid-template-rows: 0.7fr 7fr 1fr;
height: 100%;
width: 100%;
border: 5px dotted blue;
}
.dash-desk-side-logo {
border: 3px dotted beige;
}
.dash-desk-side-list {
border: 3px dotted red;
}
.dash-desk-side-social {
border: 3px dotted green;
}
/* MAIN */
/* MAIN */
/* MAIN */
.dash-desk-main-wrap {
grid-template-rows: 0.5fr 1fr 4fr 0.5fr;
}
<!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">
<link rel="stylesheet" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<title>Base Template</title>
</head>
<body>
<div class="mobile">
<h1>mobile</h1>
</div>
<div class="tablet">
<h1>tablet</h1>
</div>
<div class="laptop">
<h1>laptop</h1>
</div>
<div class="desktop">
<div class="dash-desk-wrap">
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<menu class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</menu>
<!-- MAIN -->
<!-- MAIN -->
<!-- MAIN -->
<div class="dash-desk-main-wrap">
<header></header>
<div></div>
<div></div>
<footer></footer>
</div>
</div>
</div>
</body>
</html>
Either make the menu class as div
<div class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</div>
or make a div below menu uwing the same.
Looking at your layout in code inspector it looks like browsers add default padding to menus.
For example, Google Chrome adds a padding-inline-start: 40px to <menu> elements.
Therefore, you can remove it by either declaring
.dash-desk-sidebar {
padding-inline-start: 0;
}
or
.dash-desk-sidebar {
padding: 0;
}
Alternatively, you can use a div instead of a menu.
If I understand you correctly you just have to add padding: 0 to .dash-desk-sidebar, because it has a "left padding" at the moment.
.dash-desk-sidebar {
padding: 0;
}
I'm trying to style a basic chat app, nothing too fancy or over the top, but I'm running into a few issues. There are three goals that I have with styling:
Have the blue messages (you) align to the right, and the gray messages align (other user) to the left.
Have messages pop up on the bottom of the div, with each subsequent message moving an older one up.
Have the div scroll once the messages exceeded the height in pixels.
This is the code I have thus far:
const API_URL = "http://localhost:3000"
const form = document.querySelector("form")
const chatbox = document.querySelector(".chatbox")
const chatInput = document.querySelector(".message-input")
const socket = io.connect(API_URL)
socket.on("chat-message", (data) => {
console.log(data)
appendMessage("other-message", data)
})
socket.on("disconnect", (reason) => {
socket.emit("disconnect", reason)
});
form.addEventListener("submit", e => {
e.preventDefault()
console.log("message: ", chatInput.value)
const message = chatInput.value
appendMessage("message", message)
socket.emit("send-chat-message", message)
form.reset()
})
function appendMessage(className, message){
const div = document.createElement('div')
div.append(message)
div.className = className
chatbox.append(div)
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
height: 100vh;
width: 100vw;
}
.side-bar{
background-color: blue;
color: gray;
text-align: left;
padding: 20px;
font-size: 50px;
}
.chat-room:hover{
cursor: pointer;
color: white;
}
.messages-container{
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 40px;
}
.chatbox{
background-color: black;
border: 1px solid white;
overflow: scroll;
}
.chatbox > div{
border-radius: 15px;
padding: 10px;
margin: 20px;
color: white;
width: fit-content;
max-width: 50%;
}
.message{
background-color: blue;
}
.other-message{
background-color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>chat</title>
</head>
<body>
<div class = "wrapper">
<div class="side-bar">
<div class="name">
</div>
<div class="chat-room">
<h3>#chat room 1</h3>
</div>
<div class="chat-room">
<h3>#chat room 2</h3>
</div>
<div class="chat-room">
<h3>#chat room 3</h3>
</div>
<div class="chat-room">
<h3>#lifetime chat</h3>
</div>
</div>
<div class="messages-container">
<!-- Chat messages will be appended here! -->
<div class="chatbox">
</div>
<form>
<input type="text" class="message-input form-control" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<script src="sendMessage.js"></script>
</body>
</html>
The issues I'm having currently is that whenever I the amount of messages exceeds the height of the "chat" div in the HTML file, the div does not overflow, and instead grows indefinitely. I'm not sure what's causing this, even though I added the code for overflow: scroll; in the css for that particular div. Also, I'm not sure how to push the messages to the bottom of the div as opposed to the top, and have each new one push the previous one up.
Are there any css tricks I can use to accomplish those three goals?
For overflow: scroll to work, you need to explicitly set the divs height. In this case, I used calc to make it 100vh and subtracted the height of the form.
For it to scroll from the bottom up, you can use element.scrollTo and set it to the height of the .chatbox div each time:
const API_URL = "http://localhost:3000"
const form = document.querySelector("form")
const chatbox = document.querySelector(".chatbox")
const chatInput = document.querySelector(".message-input")
const socket = io.connect(API_URL)
socket.on("chat-message", (data) => {
console.log(data)
appendMessage("other-message", data)
})
socket.on("disconnect", (reason) => {
socket.emit("disconnect", reason)
});
form.addEventListener("submit", e => {
e.preventDefault()
console.log("message: ", chatInput.value)
const message = chatInput.value
appendMessage("message", message)
socket.emit("send-chat-message", message)
form.reset()
chatbox.scrollTo(0, chatbox.scrollHeight)
})
function appendMessage(className, message) {
const div = document.createElement('div')
div.append(message)
div.className = className
chatbox.append(div)
}
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
height: 100vh;
width: 100vw;
}
.side-bar {
background-color: blue;
color: gray;
text-align: left;
padding: 20px;
font-size: 50px;
}
.chat-room:hover {
cursor: pointer;
color: white;
}
.messages-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 40px;
}
.chatbox {
height: calc(100vh - 40px);
background-color: black;
border: 1px solid white;
overflow: scroll;
}
.chatbox>div {
border-radius: 15px;
padding: 10px;
margin: 20px;
color: white;
width: fit-content;
max-width: 50%;
}
.message {
background-color: blue;
}
.other-message {
background-color: gray;
}
input {
height: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="wrapper">
<div class="side-bar">
<div class="name">
</div>
<div class="chat-room">
<h3>#chat room 1</h3>
</div>
<div class="chat-room">
<h3>#chat room 2</h3>
</div>
<div class="chat-room">
<h3>#chat room 3</h3>
</div>
<div class="chat-room">
<h3>#lifetime chat</h3>
</div>
</div>
<div class="messages-container">
<!-- Chat messages will be appended here! -->
<div class="chatbox">
</div>
<form>
<input type="text" class="message-input form-control" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
CSS Grid has this little quirk that grid children have a min-height and min-width set to auto. This will cause the grid to stretch whenever the content exceeds the container. Setting min-height: 0; will prevent this behavior and allow the overflow to happen.
Read this SO answer for more details.
I've added an inner container to your chatbox element. The chatbox element now functions as an overflow wrapper. The inner element will be the wrapper of the chat messages. Since you want the messages to appear at the bottom you'll need to push this inner element down so that it will keep the messages at the bottom of the screen. The pushing down can be accomplished with display: grid; and align-items: end;. Flexbox seemed like a better candidate, but it disabled the ability to scroll. Grid does not.
Within the inner element use Flexbox to position a chat message either left or right and in a column formation.
Finally after appending each message use chatbox.scrollTo(0, chatbox.scrollHeight) to force the chatbox element to scroll down after each message that is appended to the document.
const API_URL = "http://localhost:3000"
const form = document.querySelector("form")
const chatbox = document.querySelector(".chatbox")
const chatboxInner = document.querySelector(".chatbox-inner")
const chatInput = document.querySelector(".message-input")
const socket = io.connect(API_URL)
socket.on("chat-message", (data) => {
console.log(data)
appendMessage("other-message", data)
})
socket.on("disconnect", (reason) => {
socket.emit("disconnect", reason)
});
form.addEventListener("submit", e => {
e.preventDefault()
console.log("message: ", chatInput.value)
const message = chatInput.value
appendMessage("message", message)
socket.emit("send-chat-message", message)
form.reset()
})
function appendMessage(className, message) {
const div = document.createElement('div')
div.append(message)
div.className = className
chatboxInner.append(div)
chatbox.scrollTo(0, chatbox.scrollHeight)
}
// Dummy messages for demo.
setInterval(() => {
appendMessage('other-message', 'Testing')
}, 4000)
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
height: 100vh;
width: 100vw;
}
.side-bar {
grid-area: 1 / 1 / 2 / 2;
background-color: blue;
color: gray;
text-align: left;
padding: 20px;
font-size: 50px;
}
.chat-room:hover {
cursor: pointer;
color: white;
}
.messages-container {
grid-area: 1 / 2 / 2 / 3;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 40px;
min-height: 0;
}
.chatbox {
display: grid;
align-items: end;
background-color: black;
border: 1px solid white;
overflow: scroll;
}
.chatbox-inner {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
padding: 10px 0;
}
.chatbox-inner > div {
border-radius: 15px;
padding: 10px;
color: white;
width: fit-content;
max-width: 50%;
}
.chatbox-inner > .message {
background-color: blue;
margin: 10px 20px 10px auto;
}
.chatbox-inner > .other-message {
background-color: gray;
margin: 10px auto 10px 20px;
}
.as-console-wrapper {
display: none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>chat</title>
</head>
<body>
<div class="wrapper">
<div class="side-bar">
<div class="name">
</div>
<div class="chat-room">
<h3>#chat room 1</h3>
</div>
<div class="chat-room">
<h3>#chat room 2</h3>
</div>
<div class="chat-room">
<h3>#chat room 3</h3>
</div>
<div class="chat-room">
<h3>#lifetime chat</h3>
</div>
</div>
<div class="messages-container">
<!-- Chat messages will be appended here! -->
<div class="chatbox">
<div class="chatbox-inner">
</div>
</div>
<form>
<input type="text" class="message-input form-control" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<script src="sendMessage.js"></script>
</body>
</html>
I'm working with handlebars.js and trying to create a responsive grid structure - however I can't seam to figure out how to create the structure with the handlebars!
I cant work out how to organise the divs and script so the results show in the separate 'panels'! Currently they just show in one long Column on top of each other.
I can get it to work with normal divs but not when I add the handlebars and script in.
I think there is a simple change - but I cant work out what it is!
How do I get the JSON data retired to show in each separate panel?
Thanks in advance - I've spent hours trying to figure this out!
This is the closest I have got:
CSS:
.wrapper {
margin: 0 auto;
width: 100%
}
.wrapper > * {
background-color: #fafafa;
}
.content {
padding: 8px;
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) ;
grid-auto-rows: minmax(264px, auto);
grid-gap: 16px;
}
.panel {
margin-left: 5px;
margin-right: 5px;
height: 50px;
}
#media (max-width: 1100px) {
.wrapper {
grid-template-columns: 1fr;
}
.content {
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
grid-auto-rows: minmax(300px, auto);
}
}
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
HTML
<div id="expand-box">
<div class="wrapper">
<article class="content">
<div class="panel">
<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
<div class="column">
<div id="est_title">{{name}} <b>{{rating}}/5</b></div>
<div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
<div id="price_subtitle">{{price_range}}</div>
</div>
{{/each}}
</script>
</div>
</div>
</article>
</div>
JS AJAX
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$('.panel').html(html);
Figured it out after many more hours... Surprised there isn't more detail on this on SO. Maybe it will save someone else a few hours!
CSS
.wrapper {
margin: 0 auto;
width: 100%
}
#handlebars-sandbox {
padding: 8px;
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ;
grid-auto-rows: minmax(264px, auto);
grid-gap: 20px;
margin-top: 20px
}
.panel {
margin-left: 5px;
margin-right: 5px;
}
#media (max-width: 1100px) {
.wrapper {
grid-template-columns: 1fr;
}
#handlebars-sandbox {
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
grid-auto-rows: minmax(300px, auto);
}
}
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
JQUERY
var source = $('.entry-template').html();
var template = Handlebars.compile(source);
var html = template(data);
$('#handlebars-sandbox').html(html);
HTML
<div id="expand-box">
<div class="wrapper">
<div id="handlebars-sandbox"></div>
<div class="content">
<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
<div class="panel">
<div class="column">
<div id="est_title">{{name}} <b>{{rating}}/5</b></div>
<div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
<div id="price_subtitle">{{price_range}}</div>
</div>
</div>
{{/each}}
</script>
</div>
</div>
</div>
I am trying to create a similar design/approach to this:
https://help.sap.com/viewer/8092b085a68941f6aaa6708685a62b0d/4.2.8/en-US/acc57dbca1ab4a5bac2a352ce8cc52d8.html?q=Amazon
Notice that, when the sidebar << and >> icons are clicked, those sidebars slide out and the topic/content in the center expands to take the freed up space.
They're using AngularJS but I have to do this using html. I can use jquery, vanilla js, and if it makes sense I can try bootstrap (though I'm obviously not very experienced and want to stick to just html and jquery if possible).
Here is what I've come up with so far. Please excuse the awful color scheme - it's just to delineate the divs:
$("#right-sidebar-slider").click(function() {
$('#right-sidebar-content').hide('slide', {
direction: 'right'
}, 300);
$("#topic-container").animate({
width: "75%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
$("#left-sidebar-slider").click(function() {
$('#left-sidebar-content').hide('slide', {
direction: 'left'
}, 300);
$("#topic-container").animate({
width: "77%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
#left-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#left-sidebar-content {
float: left;
width: 19%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
#topic-container {
float: left;
min-width: 58%;
min-height: 600px;
padding-top: 20px;
background-color: red;
}
#right-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#right-sidebar-content {
float: left;
width: 17%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
.header {
display: flex;
align-items: center;
}
.header .logo {
background: url("logo-onlinehelp.png") no-repeat;
width: 60%;
height: 25px;
border: 1px solid green;
margin-left: 15px;
}
.header .search-input {
border: 2px solid blue;
width: 40%;
margin-left: 25px;
}
footer {
clear: left;
border-top: 1px solid #cccccc;
width: 100%;
height: 40px;
bottom: 0;
position: relative;
background-color: gray;
}
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="vertex.js"></script>
<script src="dhtml_toc.js"></script>
<script src="dhtml_search.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_vertex.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- need for slider effect -->
</head>
<body>
<div class="header" style="height: 70px; background-color: gray">
<div class="logo">
</div>
<div class="search-input">
<form action="#">
<input type="text" name="search-input" value="Search available topics..." size="70">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="left-sidebar-content">
Table of Contents...
</div>
<div id="left-sidebar-slider">
<<
</div>
<div id="topic-container">
Topic here...
</div>
<div id="right-sidebar-slider">
>>
</div>
<div id="right-sidebar-content">
Feedback form here...
</div>
<footer>
This is our footer text.
</footer>
</body>
</html>
So I have two questions:
1. In terms of overall page structure/approach - wHat is the best approach to building something like this?
What is the best approach to replicating the sliding divs? I don't need them to animate, though that would be nice. I just need the user to be able to fill the viewport with the center topic div content.
All of the actual content will come from a CMS. This single page I'm creating is just a template that the CMS (a proprietary one) will use to then insert the content, table of contents, etc. into the html.
Your approach is not far off, but I have a couple of suggestions:
CSS flexbox instead of floats to setup the three column layout. (A Complete Guide to Flexbox)
Use CSS transitions instead of javascript to add the sliding effect. (Using CSS transitions)
Let the click of a button add/remove a class to the sidebar elements, so you do not need to have presentational informasjon in your javascript
Codepen: https://codepen.io/anon/pen/XqaGEg
HTML:
<button class="sidebar-left-toggle">
<<
</button>
<button class="sidebar-right-toggle">
>>
</button>
<div class="container">
<div class="sidebar-left">sidebar-left</div>
<div class="content">content</div>
<div class="sidebar-right">sidebar-right</div>
</div>
CSS:
.container {
display: flex;
height: 200px;
transition: width 0.3s;
}
.sidebar-left,
.sidebar-right {
background: #ccc;
width: 200px;
transition: width 0.3s;
}
.sidebar-collapsed {
width: 0;
overflow: hidden;
}
.content {
background: #eee;
flex-grow: 1;
}
Javascript:
const leftToggle = document.querySelector('.sidebar-left-toggle');
const rightToggle = document.querySelector('.sidebar-right-toggle');
const leftSidebar = document.querySelector('.sidebar-left');
const rightSidebar = document.querySelector('.sidebar-right');
leftToggle.addEventListener('click', e => {
leftSidebar.classList.toggle('sidebar-collapsed');
});
rightToggle.addEventListener('click', e => {
rightSidebar.classList.toggle('sidebar-collapsed');
});
Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser its right where then width ends at approximately 1000px is there a way to extend the length of my page or a simple way to hide the scroll bar that is showing vertically? I still want the default browser vertical scroll bar to show. All tips are appreciated thank you!
If you need to seen any of my code just ask thanks again!
HTML:
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href="mfcc.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#fadein {
position: relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
}
-->
</style>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li>Home</li>
<li>Application</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</nav> </center>
<div class="fadein">
<img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
</div>
<div class="bg1">
<img src="images/bg1.jpg" width=1500 height=308 style="position: absolute; left: -125px; top: 477px;">
</div>
<img src="Images/images/newcar.png" width=150 height=150 style="position: relative; top: 320px; left: 100px">
<img src="Images/images/usedcar.png" width=150 height=150 style="position: relative; top: 320px; left: 500px">
<section id="new_car">
<center> <h3>New Car Loan Requirements</h3> </center>
<p> If you're ready to apply for a new car loan, fill out our quick an easy application here at
Iamdrivingtoday.com But obviously, you don't want to waste your time when you don't
know the requirements to get approved for a new car loan. Here's what you'll need to qualify:
</p>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>
<section id="main_section" style="position: relative; right: 0px;">
<article>
<header>
<hgroup>
<center><h1>What is Iamdrivingtoday.com?</h1></center>
</hgroup>
</header>
<p>Iamdrivingtoday.com is where we specialize in providing auto loans for people with bad credit.
We know that new and used car customers in certain times need help
finding the right auto loan provider. If you think you
have a really bad, or low credit rating, or you have been
turned down in the past, chances are we can help!
Our specialty is getting you financed and we guarantee an
approval!</p>
</article>
<article>
<header>
<hgroup>
<center><h1>Having a hard time getting approved?</h1></center>
</hgroup>
</header>
<p>No matter what your prior credit which may be due to bankruptcy, divorce,
foreclosure, repossession, late payments, or unpaid balances we get
you driving the same day no matter your circumstances.
Just fill out the application and drive away today.</p>
</article>
</section>
<div id="new_div">
<aside id="side_news">
<h4>What your Dealer needs!</h4>
<center>Paystubs!</center>
<center>$1000 Down!</center>
<center>Proof of Insurance!</center>
</aside>
</body>
</html>
CSS:
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 998px;
text-align: center;
box-sizing: border-box;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#new_car{
Position: relative;
Top: 20px
}
#bg1{
border: 3px solid black;
}
#main_section{
Position: relative;
border:1px solid black;
color: white;
text-shadow:
2px 2px 0 #000,
1px 1px 0 #000;
background-image:url('tb.png');
background-size: 365px 325px;
background-color:#cccccc;
-webkit-box-flex: 1;
float: right;
margin: 15px;
margin-top: 300px;
margin-right: 625px;
padding: 20px 20px;
}
#side_news{
border: 1px solid black;
width: 250px;
margin: 20px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
Best guess without seeing code: You have a set height on that container element with overflow:auto
Edit: After looking at your code, I think the best thing to do in this situation is to encourage you to spend some more time reading up about HTML and CSS. You have a lot of inline styles and you're positioning things that really mess up the natural flow of the document. This isn't a small error that's happening but just fundamentally poor code.
I'm not saying this to be mean, but this scroll bar is the least of your problems.
By default when your contents height or width exceeds the height or width of the container explicitly set by you, the css properties overflow-y and overflow-x are enabled.
Disabling the overflow-y value on that particular element will remove the scrollbar.
overflow-y:hidden
To avoid the content from being clipped, increase the height of the container or reduce the content or vice-versa. Not setting the height explicitly or setting it to auto will ensure the container expands enough to prevent its contents from overflowing.
DEMO
You should use,
overflow-y:hidden; - Use this for hiding the Vertical scroll
overflow-x:auto; - Use this to show Horizontal scroll
For IE8: -ms-overflow-y: hidden;
http://www.w3schools.com/cssref/pr_pos_overflow.asp