Hello I'm trying to do a notification system on my website so that one can scroll to the right on a div to dismiss it. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.container1 {width: 300px; height: 300px; overflow: auto; }
.container2{width: 2000px; }
</style>
<div class="container1">
<div class="container2">
<div>
<div class="fade">
Scroll down i will become invisible
</div>
</div>
</div>
</div>
<script>
$(window).scroll(function() {
if ($('div.container1').scrollLeft()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
</script>
The only problem is that it doesn't work. Please feel free to ask for clarification in the comments.
Related
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');
});
function hoverimgon(elem){
$(elem).find('.credentials-popup').slideDown(800);
}
function hoverimgoff(elem){
$(elem).find('.credentials-popup').slideUp(800);
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
SlideUp goes up although selected class has not been left. Although several elements have the same class, the second div should only appear with the mouseover element and not with all. If the second is selected with the mouse, this should not disappear, just as it is the case, you should have the possibility to select something in the credentials-popup. What is the mistake?
Use jQuery :visible Selector and have it hide when the mouse leaves the hidden message area.
function hoverimgon(elem) {
var $slide = $(elem).find('.credentials-popup');
if (!$slide.is(":visible")) { // only slide down if hidden
$slide.slideDown(800)
}
}
function hoverimgoff(elem) {
if ($(elem).is(":visible")) { // only slide up if visible
$(elem).slideUp(800);
}
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup {
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>
you are should use a proper jQuery call, and since you are using jQuery, there is no need to write JavaScript functions for such a simple job. I have made the solution for you in a JSFiddle: https://jsfiddle.net/c8dh5qbk/2/
HTML:
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something</div>
</div>
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something else</div>
</div>
JavaScript:
$(document).ready(function(){
$('.credentials-element').mouseover(function() {
if (!$(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideDown(800);
}
}).mouseout(function() {
if ($(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideUp(800);
}
});
});
CSS:
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 50px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 50px;
padding:10px 0;
text-align: center;
}
I know how to use position: fixed; to get it to scroll with the page but my navbar is not at the top of the page it is under my header. I would like the navbar to remain directly under the header until the top of the page hits it then I want it to scroll down with the page. I have tried using JS to do this and using JSfiddle I am able to get it working http://jsfiddle.net/uaqh018d/78/
However, when I apply this to my site it does not work and I can't figure out why.
site code to follow:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--begin header & navbar-->
<div class="header">
<div class="container">
<div class="banner">
<h1><img src="media/CSG%20header%20final.svg" width="961" height="250" alt="crit strike gaming header"></h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Reviews</li>
<li>Previews</li>
<li>Lets Plays</li>
<li>Forums</li>
</ul>
</div>
</div>
</div>
<!--end header & navbar-->
<!-- begin content-->
<div class="container">
<div class="content">
</div>
</div>
<!--end content-->
<script type="text/javascript" src="navfunction.js"></script>
</body>
</html>
CSS
body{
background: #ffda0a;
width: 100%;
margin: auto;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 100%;
height: 250px;
margin: 0 auto;
top: 0;
}
.content{
background-color: rgba(255,255,255,.5);
width: 100%;
margin: 0 auto;
margin-left: 1px;
clear: both;
}
a{
text-decoration: none;
color: #ffda0a;
}
li{
list-style: none;
margin-left: 75px;
float: left;
font-size: 25px;
}
.nav{
background: #a71e1f;
width: 960px;
height: 30px;
margin-left: 1px;
}
.nav.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
.banner{
height: 230px;
}
JS
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#nav').addClass('fixed');
}
else
{
$('#nav').removeClass('fixed');
}
});
});
If anyone can figure out the issue I would really appreciate it.
See the corrected fiddle - http://jsfiddle.net/drecodeam/8Lubmkvw/
You were using classes in the HTML but accessing them as ID in jQuery.
Corrected JS should be
$(document).ready(function () {
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.header').height()) {
$('.nav').addClass('fixed');
} else {
$('.nav').removeClass('fixed');
}
});
});
Objective
To have the page the page on my website to expand in height according to the dynamic data pushed into the container.
Background
The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.
I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.
So now I am experimenting with jQuery to see if I could find a solution to this problem.
I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();
And that it needs to have push out the height with something like
$(".case").height(newHeight);
This is my current HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.
Here is my CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.
I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?
Not a complete fix but maybe helpful.
I've used this function but Internet Explore increases the heights on resize.
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}