http://jsbin.com/dodiha/1/edit?html,css,js,output
So basically I have a "log" element that shows recent messages. By default, it is collapsed and only 1 line-height high. You can hover over it to make it taller. The key is that it's anchored to the bottom of the page. When I append text, I want to see it, not the first line.
So this is what it looks like:
---------------
| first line | visible
---------------
| second line | hidden
| third line | hidden
And this is what I want it to look like:
| first line | hidden
| second line | hidden
---------------
| third line | visible
---------------
I've tried every variant of "vertical-align" hoping that it would orient the text properly. Obviously I can do prepend instead of append and it works for the collapsed view, but then when I expand the log window the messages are in reverse chronological order. Think of it like a command prompt where the most recent messages are on the bottom and the top ones disappear but you can scroll up to see the history.
function log(m) {
$('#log').append('<div>' + m + '</div>')
}
$("#add").on('click',function() {
log("New Entry Added...")
})
$('#log').hover(
function() {
$('#log').animate({"height":"200px"})
},
function() {
$('#log').animate({"height":"30px"})
}
)
$(document).ready(function() {
log('Document Ready.')
})
#log {
position: absolute;
bottom: 100px;
left: 5px; right: 5px;
background-color: lightgray;
height: 30px;
line-height: 30px;
font-size: 20px;
padding-left: 10px;
overflow: hidden;
float: bottom;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="log"></div>
<button id="add">Add Entry</button>
Here's a simple way with minimal code change
Demo http://jsfiddle.net/zwvgfkjo/
HTML:
<div id="log">
<div class="wrapper">
</div>
</div>
<button id="add">Add Entry</button>
CSS:
.wrapper {
position: absolute;
left: 0;
bottom: 0;
}
#log {
position: absolute;
bottom: 100px;
left: 5px; right: 5px;
background-color: lightgray;
height: 30px;
line-height: 30px;
font-size: 20px;
padding-left: 10px;
overflow: hidden;
float: bottom;
}
JS:
function log(m) {
$('#log .wrapper').append('<div>' + m + '</div>');
}
$("#add").on('click',function() {
log("New Entry Added...")
})
$('#log').hover(
function() {
$('#log').animate({"height":"200px"})
},
function() {
$('#log').animate({"height":"30px"})
}
)
$(document).ready(function() {
log('Document Ready.')
})
Try this:
<div id="log-wrapper">
<div id="log"></div>
</div>
#log {
position: absolute;
bottom: 0;
}
function log(m) {
$('#log').append('<div>' + m + '</div>')
}
$("#add").on('click',function() {
log("New Entry Added...")
})
$('#log-wrapper').hover(
function() {
$('#log-wrapper').animate({"height":"200px"})
},
function() {
$('#log-wrapper').animate({"height":"30px"})
}
)
$(document).ready(function() {
log('Document Ready.')
})
#log-wrapper {
position: absolute;
bottom: 100px;
left: 5px; right: 5px;
background-color: lightgray;
height: 30px;
line-height: 30px;
font-size: 20px;
padding-left: 10px;
overflow: hidden;
float: bottom;
}
#log {
position: absolute;
bottom: 0;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="log-wrapper">
<div id="log"></div>
</div>
<button id="add" type="button">Add Entry</button>
Related
I'm having a hard time figuring out why the code below doesn't work as expected.
What I'm trying to achieve is same functionality with position:sticky whereas when the scrolled reaches the top of the #second-header then fixes its position below the #header which is also fixed, however, the height of the #header is unknown which is I believe can be calculated using the function outerHeight(true) on JQuery.
Then after reaching out to the bottom of the #second-header-container, remove the fixed position of #second-header turning it back to normal position.
Due to browser compatibility issues and other customization, I cannot simply use the position:sticky of css.
It looks like my logic is wrong, and I need help.
jQuery(document).ready(function(){
var $document = jQuery(document);
var header = jQuery('#header');
var second_header = jQuery('#second-header-container').find('#second-header');
var second_header_container = jQuery('#second-header-container');
var second_header_offset = second_header.offset().top;
var second_header_container_offset = second_header_container.offset().top;
jQuery(window).scroll(function(){
var top_margin = header.outerHeight(true);
var second_header_height = second_header.outerHeight(true);
var second_header_container_height = second_header_container.outerHeight(true);
if( jQuery(window).scrollTop() > (second_header_offset - second_header_height) && jQuery(window).scrollTop() < second_header_container_height) {
second_header.addClass('fixer');
second_header.css({position:'fixed', top:top_margin, 'z-index':'999999'});
} else {
second_header.removeClass('fixer');
second_header.css({position:'relative', top:'0px', 'z-index':'0'});
}
});
});
*{
color: #FFFFFF;
padding: 0;
margin: 0;
}
.fixer{
position: fixed;
width: 100%;
}
#header, .banner, #second-header, .contents{
padding: 5px;
}
#header{
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner{
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container{
min-height: 300px;
background-color: #775F5E;
}
#second-header{
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents{
min-height: 200px;
background-color: #97A36D;
}
.footer{
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
To achieve this you need first check if the scroll height is near the second div header and within the height of the second div. Then add a class that make it stick below the main header. I have created a sticky class and added it while scrolling conditions are met.
Please check below code
jQuery(document).ready(function() {
var headerHeight = $('#header').outerHeight(true);
var secondHeaderContainer = $('#second-header-container');
const secondHeaderTopPos = secondHeaderContainer.offset().top;
const secondHeaderContainerHeight = $(secondHeaderContainer).height();
$(window).scroll(function() {
const scrollTop = $(this).scrollTop();
const secondContainerHeightEnd = secondHeaderContainerHeight + secondHeaderTopPos - $('#second-header').height() - headerHeight;
if (((secondHeaderTopPos - headerHeight) <= scrollTop) && (secondContainerHeightEnd >= scrollTop)) {
$('#second-header').addClass('sticky').css('top', headerHeight);
} else {
$('#second-header').removeClass('sticky');
}
});
});
* {
color: #FFFFFF;
padding: 0;
margin: 0;
}
.sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.fixer {
position: fixed;
width: 100%;
}
#header,
.banner,
#second-header,
.contents {
padding: 5px;
}
#header {
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner {
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container {
min-height: 300px;
background-color: #775F5E;
}
#second-header {
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents {
min-height: 200px;
background-color: #97A36D;
}
.footer {
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
I have this small code which changes div after every 20 seconds. it works if I saved that in a small HTML file. it works if I save the live HTML code and run but it does not fire in the live site.
you can see that every 20 seconds the bar is getting changed but in my live site, it is not changing. live site is here.
https://pushdaddy2.myshopify.com/products/uhjkjhkhk
but if I save the live site code in desktop and launch that code in chrome it works.
https://jsfiddle.net/anamika99/vhmo7ex4/
jQuery(document).ready(function($) {
var allBoxes = $("div#qab_container").children("div");
transitionBox(null, allBoxes.first());
// console.log(allBoxes);
$("#qab_background1, #qab_background2, #qab_background3, #qab_background4, #qab_background5, #qab_background6").css({
"height": $("#qab_background").innerHeight()
});
});
function transitionBox(from, to) {
function next() {
var nextTo;
if (to.is(":last-child")) {
nextTo = to.closest("#qab_container").children("div").first();
} else {
nextTo = to.next();
}
to.fadeIn(500, function() {
setTimeout(function() {
transitionBox(to, nextTo);
var karreff = 787786766;
console.log(karreff);
}, 3000); // 20000 on site
});
}
if (from) {
from.fadeOut(500, next);
} else {
next();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="shopify-section-header" class="shopify-section">
<div id="qab_container" style="display: block; color: inherit; height: 44px;">
<div id="qab_background" onclick="qab_button_on_click(event)" style="opacity: 1; margin: 0px; padding: 0px; left: 0px; height: auto; width: 100%; z-index: 99998; position: fixed; cursor: pointer; background-image: url("https://way2enjoy.com/shopify/1/announcementbar/js/img/bar_background/20170926_cart.png"); top: 0px;">
<div id="qab_bar" style="text-align: center; margin: 0px; padding: 12px 10px; left: 0px; height: auto; width: 100%; box-sizing: border-box; border: none; background-color: rgba(5, 175, 242, 0); color: rgb(242, 242, 242); font-size: 16px; line-height: 20px; font-family: Helvetica;">
<div id="qab_content" style="text-align:center; display: inline-block;"><span id="qab_message" style="color:inherit;">All t-shirts are 15% off </span> </div>
</div>
</div>
<div id="qab_background1" onclick="qab_button_on_click1(event)" style="opacity: 0; margin: 0; padding: 0; left: 0; height: auto; width: 100%; z-index: 1000000; position: relative; cursor: pointer;">
<div id="qab_bar1" style="text-align: center; margin: 0; padding: 10px; left: 0; height: auto; width: 100%; box-sizing: border-box; border: none;">
<div id="qab_content1" style="text-align:center; display: inline-block;">
<span id="qab_message1" style="color:inherit;">fghghghh hghghhfhhf fhfgf</span>
</div>
</div>
</div>
</div>
</div>
solved this by triggering the function only when all data are loaded.
we have set the settimeout for allBoxes
earlier what was happening that our javascript code was taking some time to insert in html and before that full code was executing and that time in real there was no data we needed so we set the settimeout of 10 second and then everything was working because in this 10 second everything was in loaded in DOM and we were ready with full data.
here is full code which is working flawlessly
jQuery(document).ready(function($) {
setTimeout(function () {
var allBoxes = $("div#qab_container").children("div");
transitionBox(null, allBoxes.first());
console.log(allBoxes);
}, 10000);
$("#qab_background1, #qab_background2, #qab_background3, #qab_background4, #qab_background5, #qab_background6").css({"height": $("#qab_background").innerHeight()});
});
function transitionBox(from, to) {
function next() {
var nextTo;
if (to.is(":last-child")) {
nextTo = to.closest("#qab_container").children("div").first();
} else {
nextTo = to.next();
}
to.fadeIn(500, function () {
setTimeout(function () {
transitionBox(to, nextTo);
var karreff=787786766;
console.log(karreff);
}, 20000);
});
}
if (from) {
from.fadeOut(500, next);
} else {
next();
}
}
My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.
Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>
Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.
my name is Daniel and i'm making a drinking game for school, I want to let a div to become visible when the bar is full (so you know when the bar is full and you win the game), but i have no idea how to do this...
Could you help me out?
HTML:
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
</div>
</div>
CCS:
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
JS:
var jumpsize = 2.77, // %
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
set(topcnt(bar.width()) + jumpsize);
});
set(0);
The reason its not working is because u forgot to put the if statement in the function u run on click. So the if statement only runs once. and on first load it will result in false. To fix your code move the if statement in your Body.onclick.
Next time it would be smart to include the full javascript that is relative to the function.
By looking at the online code i was able to find the issue.
Hope this resolves your issues.
~Yannick
When you hit your target you need to remove the CSS styling of Display = none.
W3 schools page here for some helpful info to help you learn some more.
https://www.w3schools.com/jsref/prop_style_display.asp
The line below inserted when you reach your goal to display should make the bar appear.
document.getElementById("hiddenText").style.display = "block";
I'm not sure you want this, but try this:
var jumpsize = 2.77, // %
width = 0,
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
if(pcnt >= 100) {$('#hiddenText').show();}
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
width += jumpsize;
set(topcnt(width));
});
set(0);
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button class="card1">click me</button>
You are using jQuery so quicker will be:
$('#hiddenText').show();
Edit:
sooo
if($('#bar').children('div').width() >= 334){
$('#hiddenText').show();
}
As You can see the div with progress bar can have max od 334 px. Check if it has it and if yes then show the text. Put this in that click event
Seems to me like you're overcomplicating things a little bit with the percentage calculations. I would just add a variable for the width of the bar that starts at 0 and increase this with the jumpsize on every click. Once this new variable goes over or equals 100 you show the hidden div.
HTML
<div class="col-xs-12" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button id="button">Click me</button>
<div id="showOnComplete">Show me when the bar is full!</div>
CSS
#bar {
width: 340px;
height: 24px;
padding: 4px 3px;
margin: 30px auto 0;
background-color: #f8f8f8;
}
#bar > div {
position: relative;
float: left;
height: 100%;
width: 0;
max-width: 100%;
background: #9d3349;
transition: width 500ms;
}
#button {
margin: 20px auto;
display: block;
}
#showOnComplete {
width: 400px;
padding: 20px;
margin: 20px auto;
background: blue;
color: #fff;
text-align: center;
display: none;
}
JS
(function($) {
var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
barWidth = 0,
$bar,
$showOnComplete;
$(function() {
$bar = $("#bar").children("div");
$showOnComplete = $("#showOnComplete");
$(document).on("click", "#button", function() {
barWidth += jumpSize;
$bar.width(barWidth + "%");
if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
});
});
})(jQuery);
I've made a fiddle for it here.
I'm new to using JQuery and Javascript. I can't figure out what is wrong here.
I want to h1 element to be displayed as block and to add the class as active as is parent div is showing in the window.
I'm hoping the consequent effect will be somewhat like the 'Y logo' on this site http://www.collectif-yay.com/en
HTML
<div class= "section" id="Title">
<h1 style="position: fixed; top: 10px; display: none">Title</h1>
</div>
<div id="Publications">
<h1 style="position: fixed; top: 10px; display: none">Publications</h1>
</div>
<div class= "section" id="Articles">
<h1 style="position: fixed; top: 10px; display: none">Articles</h1>
</div>
<div class= "section" id="Contributors">
<h1 style="position: fixed; top: 10px; display: none">Contributors</h1>
</div>
<div class= "section" id="Process">
<h1 style="position: fixed; top: 10px; display: none">Process</h1>
</div>
CSS
div{
height: 400px;
display: block;
width: 100%;
padding: 10px;
border: 0;
overflow: hidden;
}
h1 {
top: 10px;
padding-left: 20px;
width: 100%;
color: #0000aa;
}
.section {
padding-top: 100px;
padding-bottom: 0px;
}
.active {
color: #0000aa;
JQuery
$(document).ready(function () {
setup_section_titles();
display_section_titles();
});
$(window).scroll(function () {
display_section_titles();
});
function setup_section_titles() {
$("h1").css("position", "fixed").css("top", "10px");
}
// ----------------------------------------
function display_section_titles() {
var sectionArray = $.makeArray($(".section"));
var window_scroll_top = $(window).scrollTop();
var window_center = $(window).height()/2;
window_center = 100;
// sort sections by their relative distance to the center of the window
sectionArray.sort( function(a, b) {
return getDiff(a, window_scroll_top, window_center) > getDiff(b, window_scroll_top, window_center) ? 1 : -1;
});
$(".section h1:visible").hide();
$(sectionArray[0]).children("h1").show();
$(".active").removeClass("active");
$(sectionArray[0]).addClass("active");
}
// ----------------------------------------
function getDiff(item, window_scroll_top, window_center) {
var item_viewportoffset_top = $(item).offset().top - window_scroll_top;
var dist_of_top = Math.abs(item_viewportoffset_top - window_center);
var dist_of_bottom = Math.abs(item_viewportoffset_top + $(item).height() - window_center);
// return minimum of distances of top and bottom of an element
// to center of the window
return Math.min( dist_of_top, dist_of_bottom );
}