We Keep Coding

Horizontal scroll loop in Cargo Collective

I'm trying to add an horizontal loop to my page but when I try to add the javascript cargo tells me that the script has been disabled. Why does that happen? Is there a way to implement that java without having problems? Is it right to add the javascript in the tag script at the end? This is where I've took the code from: https://codepen.io/lemmin/pen/bqNBpK
HTML:
<div id="page">
<div class="pane"><div>Looping Horizontal Scroll</div></div>
<div class="pane"><div>2</div></div>
<div class="pane"><div>3</div></div>
<div class="pane"><div>4</div></div>
<div class="pane"><div>5</div></div>
<div class="pane"><div>Last</div></div>
<div class="pane"><div>Looping Horizontal Scroll</div></div>
</div>
CSS:
body{
overflow-x:hidden;
color:#FFF;
font-family:Helvetica;
font-size:200%;
}
#page {
overflow:hidden;
white-space:nowrap;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#CCC;
display:flex;
flex-wrap:no-wrap;
}
.pane {
flex:0 0 100vw;
height:100vh;
display:flex;
position:relative;
align-items:center;
justify-content:center;
background-color: #45CCFF;
}
.pane:nth-child(4n+2) {
background-color: #49E83E;
}
.pane:nth-child(4n+3) {
background-color: #EDDE05;
}
.pane:nth-child(4n+4) {
background-color: #E84B30;
}
.pane:last-child {
background-color: #45CCFF;
}
JS:
<script>
var page = document.getElementById('page');
var last_pane = page.getElementsByClassName('pane');
last_pane = last_pane[last_pane.length-1];
var dummy_x = null;
window.onscroll = function () {
var y = document.body.getBoundingClientRect().top;
page.scrollLeft = -y;
var diff = window.scrollY - dummy_x;
if (diff > 0) {
window.scrollTo(0, diff);
}
else if (window.scrollY == 0) {
window.scrollTo(0, dummy_x);
}
}
// Adjust the body height if the window resizes.
window.onresize = resize;
// Initial resize.
resize();
// Reset window-based vars
function resize() {
var w = page.scrollWidth-window.innerWidth+window.innerHeight;
document.body.style.height = w + 'px';
dummy_x = last_pane.getBoundingClientRect().left+window.scrollY;
}
</script>

Javascript scroll event simple animation

I want the square to be yellow with each scroll down, and the square to be green with each scroll up.
This snippet works almost the way I want it to, because what I want happens only when the square is no longer fully visible on the viewport.
I would like the scroll down to be yellow and the scroll up to be green.
const square = document.querySelector('.square');
const squarePos = square.getBoundingClientRect().top;
console.log(squarePos);
window.addEventListener('scroll',mouse=>{
const scrollTop = window.scrollY;
if (scrollTop >squarePos) {
square.style.background = "yellow";
}
else{
square.style.background = "green";
}
});
.square{
width:100px;
height:100px;
position:relative;
margin:0 auto;
background:red;
top:200px;
}
.content{
width:100vw;
height:150vh;
}
<div class = 'square'></div>
<div class = 'content'></div>

You need to compare your squarePos with the previous square pos, not the client y. Set the position with let, and update the value after each event listener callback.
const square = document.querySelector('.square');
let squarePos = square.getBoundingClientRect().top;
window.addEventListener('scroll', mouse => {
if (square.getBoundingClientRect().top > squarePos) {
square.style.background = "yellow";
}
else{
square.style.background = "green";
}
squarePos = square.getBoundingClientRect().top;
});
.square{
width:100px;
height:100px;
position:relative;
margin:0 auto;
background:red;
top:200px;
transition: background 200ms ease;
}
.content{
width:100vw;
height:150vh;
}
<div class = 'square'></div>
<div class = 'content'></div>

Maybe something like this?
The idea is get the previous scroll location (y) and compare to the current scroll location.
If the previous is bigger, then, it scroll up, otherwise scroll down
const square = document.querySelector('.square');
const squarePos = square.getBoundingClientRect().top;
let oldpos = 0;
window.addEventListener('scroll', mouse => {
const scrollTop = window.pageYOffset;
if (scrollTop > oldpos) {
square.style.background = "yellow";
} else {
square.style.background = "green";
}
oldpos = scrollTop
});
.square {
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
background: red;
top: 200px;
}
.content {
width: 100vw;
height: 150vh;
}
<div class='square'></div>
<div class='content'></div>

Responsive and Sticky Nav Bar

I have a nav bar that is fixed to the top of the page when the width is under 768px.
When it is over 768px it starts at the bottom and when the user scroll past it it become stuck to the top.
Both of these instance work fine on their own, but when the browser is resized there are some issues when going from under 768px to above. (Going from 768 to below works fine.)
When I load the page in a browser size under 768px and then resize the window above that is where I run in to problems.
I would like for the nav bar to smoothly transition between states. (It works beautifuly when loading above 768px then reszing to under and reszing above - Ideally this is how I would like it to work when loaded below 768px.) Or as an alternative just have the nav bar be fixed to the top when moving from under 768px to above.
This is the link to the site.
This is my CSS
.header{
width: 100%;
min-width: 300px;
height: 100px;
padding: 0px;
background: black;
position: absolute;
bottom: 0px;
z-index: 99999;
-webkit-font-smoothing: subpixel-antialiased;
}
.header.fixed{
width: 100%;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}
#media only screen and (max-width: 768px){
.header{
width: 100%;
background: black;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}
}
and this is the Javascript
<script>
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
</script>
I have also tried below to no luck.
<script>
if ( jQuery(window).width() > 768) {
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
}</script>
<script>
jQuery(window).resize(function(){
if ( jQuery(window).width() > 768) {
jQuery(document).ready(function() {
var s = jQuery(".header");
var pos = s.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixed");
} else {
s.removeClass("fixed");
}
});
});
}})</script>

try this:
function sticky_navigation() {
var browserWidth = $(window).width();
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the page, change its position to fixed to stick to top,
// otherwise change it back to relative
if ((scroll_top > $('.header').height()) && (browserWidth > 720)) {
$('.header').css({ 'position': 'fixed', 'top':0, 'z-index':999999, 'opacity': 0.9, 'box-shadow': '0px 3px 5px #393939' });
} else {
$('.header').css({ 'position': 'relative', 'opacity': 1, 'box-shadow': 'none' });
}
};
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
// and run every time you resize to boot
$(window).resize(function() {
sticky_navigation();
});

Modal box height width fix according to iframe's height width

I want to fix model box height width according to i frame height and width. i frame URL is my local domain means modal box and i frame URL is on same domain. I have tried but not get any relevant result. Here is fiddle URL.
http://jsfiddle.net/shagun_jsfiddle/KY49P/1/
HTML
<a id="howdy" href="#">Howdy</a>
<div id="overlay" style="display: none;"></div>
<div id="modal" style="display: none;">
<a id="close" href="#">close</a>
<div>
<div id="content">
<iframe src="http://fiddle.jshell.net/shagun_jsfiddle/XxuLb/show/" frameborder="0" height="100%" width="100%"></iframe>
</div>
</div>
</div>
Css
* {
margin:0;
padding:0;
}
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
}
#content {
border-radius:8px;
background:#fff;
padding:20px;
width:550px;
}
#close {
position:absolute;
background:url(close.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
jQuery
var modal = (function(){
var method = {},
$overlay,
$modal,
$content,
$close;
$modal = $('#modal');
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
//$content.empty().append(settings.content);
$modal = $('#modal');
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
$contentWd = $('#content').width(); //main content div width
//$('#iframe-box').css({
//height : $("iframe[id='iframe-box']").contents().find("html").height()
//});
$content_inWidth = $('#content').width();
$content_inHeight = $('#content').height();
$iframeWidth = $('.iframe').width();
$iframeHeight = $('.iframe').height();
//alert($content_inHeight);
if($content_inWidth > $iframeWidth){
//alert($content_inWidth);
}else{
//alert($iframeWidth);
}
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$('#overlay').show();
};
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#howdy').click(function(e){
modal.open({});
e.preventDefault();
});
$('#close').click(function(e){
e.preventDefault();
$('#modal').hide();
$('#overlay').hide();
});
});

Maybe this will help. In the css for the modal window, set the top, left, bottom and right to 0. This will stretch the model to fill the box it is in (as long as it remains absolute, and its container set to something where it will remain relative to it - absolute, or relative.)
#modal {
position:absolute;
background:url(tint20.png) 0 0 repeat;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Flexible div layout

I'm trying to write a layout where I have a toolbar and a main div. When the window Y axis is smaller than window X axis, the toolbar is on the left side. And when the window X axis is smaller than the window Y axis the toolbar is on the top.
I've positioned the toolbar absolute at the top:0 and left: 0 and tried changing width and height properties on resize. But my code is not working.
Javascript:
window.onresize = function(event) {
winW = window.innerWidth;
winH = window.innerHeight;
console.debug("x axis:" + winW + "y axis:" + winH);
if(winW < winH){
var elem = document.getElementById('div1');
console.debug("test" + elem.style.width);
var a = elem.style.height;
elem.style.height = elem.style.width;
elem.style.width = a;
}
else{
var elem = document.getElementById('div1');
elem.style.height = elem.style.height;
elem.style.width = elem.style.width;
}
}
CSS:
#div1{
background: red;
position:absolute;
height:100%;
width:20px;
top:0;
left:0;
}
#div2{
width:100%;
height:500px;
background-color:green;
margin-left: 20px;
}
jsFiddle Example Here

You can do this using #media screen and (min-aspect-ratio: 1/1) { ... }. Any styles inside this query will only activate when the window is as wide, or wider than it is high.
DEMO
I added this code, and removed all the JavaScript:
#media screen and (min-aspect-ratio: 1/1) {
#div1 {
width: 100%;
height: 20px;
}
#div2 {
width: 100%;
margin: 0;
}
}
Information can be found here on the MDN
Support for Media Queries can be found here, but as you can use JavaScript I would recommend using Respond.js to make them work for all users.

Upvote for the media ratio ;)
More browser-compatible:
window.onresize = function(event) {
winW = window.innerWidth;
winH = window.innerHeight;
console.debug("x axis:" + winW + "y axis:" + winH);
document.getElementById("div1").className = ( winW < winH ? "verticalMenu" : "horizontalMenu" );
}
// optionally invoke window.resize() once manually for setting it default. Or set a defaultClass on the div itself in HTML
and
.horizontalMenu {
height:20px;
width:100%;
}
.verticalMenu {
height:100%;
width:20px;
}
See this CodePen.