I can't get the scroll-bar to actually scroll on either axis
I've tried added the "overflow-y" property but that just makes the scroll bar appear, it doesn't actually let me scroll. I added the html file but removed all the content except what has to do with styling.
html
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div>...
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
css:
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
width: 100%
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
I want to be able to scroll if for example I make the browser small or if the browser is not big enough to show all of the content.
You need some content which is wider than the viewport in order to be able to scroll. I have added some in the code snippet below, without making any other changes to your code.
body{
position: relative;
font-family: sans-sherif;
background-color: #242424;
overflow-y: scroll;
}
.NavBar{
position: fixed;
top: 8%;
left: 26.5%;
}
#experience{
position: absolute;
color: #EBEDFA;
padding-right: 2%;
padding-left: 2%;
font-size: 35px;
left: 14.5%;
}
<html lang="en">
<head>
<title>Experience</title>
<script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
<script type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1">
<link rel = "stylesheet" href = "exp.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#visible").click(function() {
$('#invisible').toggleClass("show");
});
});
$(function() {
$("#visible1").click(function() {
$('#invisible2').toggleClass("show");
});
});
$(function() {
$("#visible2").click(function() {
$('#invisible3').toggleClass("show");
});
});
$(function() {
$("#visible3").click(function() {
$('#invisible4').toggleClass("show");
});
});
$(function() {
$("#visible4").click(function() {
$('#invisible5').toggleClass("show");
});
});
$(function() {
$("#visible6").click(function() {
$('#invisible6').toggleClass("show");
});
});
$(function() {
$("#visible7").click(function() {
$('#invisible7').toggleClass("show");
});
});
$(function() {
$("#visible8").click(function() {
$('#invisible8').toggleClass("show");
});
});
</script>
<style>
.hide{display:none;}
.show{display:block; color:#769EA8;}
.push{top:350%;}
</style>
</head>
<body class="body">
<div class="background">
</div>
<div class="fr">
fr
</div>
<div class="NavBar">
<h1 id="experience">.</a>
</div>
<div id="mySidenav" class="sidenav">
</div>
<div style="white-space: nowrap; color:white">This_is_a_reall_long_piece_of_text_which_will_be_wider_than_the_viewportttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">☰</span>
<script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function openNav(){
document.getElementById("mySidenav").style.width = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
.hide{display:none;}
.show{display:block;}
</style>
</body>
</html>
Basically, overflow will allow the page to scroll if the content larger than the screen.
Try this CSS: overflow: auto;.
Another way around if you still can't scroll is using this JavaScript:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
and call the function from the <body> tag or from a <button> tag, whatever the event you want to use.
Related
For the past week I have been trying to create a website which is 100vh & vw where the images swap when you move the cursor from left to right.
I have almost no prior coding skills but I managed to get it working using a script called swinger.js So far so good.
But now I want to add an image caption in the header that shows the right caption with the right image. But I can't seem to figure out how to do this...
Any help would be appreciated!
Thanks,
Here is the code so far
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
<link rel="stylesheet" href="Style.css">
<title>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
i have added an attribute title to your html (see string of image)
and I have lightly modified yout swinger code to select the right title and display in header
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$("header").text($(img).attr("title"));
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
<link rel="stylesheet" href="Style.css">
<title>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” title="image left"/>
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image center"/>
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image right"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
I made a page with Bootstrap 4, where I have an options-menu at the left and a container-div with a row and some cols.
To show the options-menu, the container-div is made smaller by changing the "left" value. The arrangement of the cols in the container
then should change - but it only changes, when the browser window changes its size.
Is there a way to make the cols rearrange when the size of the container changes (without changing the browser size)?
<!DOCTYPE html>
<html lang="de">
<head>
<title>Grid-Test</title>
<meta http-equiv="content-type" content="text/html; 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
$("#tree-toggle").click(function(e) {
e.preventDefault();
treeMenu.toggle(); // options
});
//
var treeMenu = {
visible: true, // options
// show options
show: function() {
$('#divCustom').animate({left: '0'}, 500); // divCustom verschieben
this.visible = true;
},
// hide options
hide: function() {
var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
$('#divCustom').animate({left: px}, 500);
this.visible = false;
},
// toggle options
toggle: function() {
if(this.visible) {
this.hide();
} else
this.show();
},
};
});
</script>
</head>
<body>
<nav role="navigation" class="navbar navbar-expand-lg navbar-light bg-light fixed-top" style="margin-bottom:5px; padding:0 0.5rem 0 0">
<a id="tree-toggle" title="Anlagenauswahl" class="btn btn-outline-secondary" style="display:flex; align-content:flex-start" href="">Show options</a>
<div id="divCustom" style="position: fixed; top: 50px; left: 0; right: 0; bottom: 0; padding-top: 5px;">
<div id="divTree" class="bg-light resizable ui-resizable" style="opacity: 0.8 !important; position: absolute; overflow-x: hidden; top: 10px; bottom: 10px; left: 0; padding: 5px; border-width: 1px 1px 1px 0; border-color: #e0e0e0; border-style: solid; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); border-top-right-radius: 4px; border-bottom-right-radius: 4px; z-index: 1010; width:300px"></div>
<div id="client" style="position: absolute; overflow-y: auto; top: 0; bottom: 0; right: 5px; padding-top: 5px; left:305px">
<div id="clientContent" class="container-fluid pl-0 pr-0" style="margin:0; background-color:#f0f0f0">
<div class="row">
<div class="col-lg-6 col-xl-4">Col 1</div>
<div class="col-lg-6 col-xl-4">Col 2</div>
<div class="col-lg-6 col-xl-4">Col 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
The breakpoints in Bootstrap use #media queries which are based on viewport width, not parent/container width.
The only way to do this would be to conditionally add the appropriate col- class in the jQuery logic. For example,
// show options
show: function() {
$('#divCustom').find('.col-lg').removeClass('col');
$('#divCustom').animate({left: '0'}, 500); // divCustom verschieben
this.visible = true;
},
// hide options
hide: function() {
$('#divCustom').find('.col-lg').addClass('col');
var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
$('#divCustom').animate({left: px}, 500);
this.visible = false;
}
Demo: https://www.codeply.com/go/sMfAWKuX1T
How can I set the label of a paper-badge with JavaScript?
I have tried this but is does not work:
Polymer.dom(document.getElementById("id_of_tag")).label = "5";
A more complete code snippet is here:
<script type="text/javascript">
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");
stompClient = Stomp.over(socket); stompClient.debug = null;
stompClient.connect({}, function(frame) {
stompClient.subscribe("/user/queue",
function(m, h) {
response = JSON.parse(m.body);
badge = Polymer.dom(document.getElementById("notificationsLabel"));
badge.label = "5";
} ,{ "id" : "${currentUserId}" }
);
}, function(e) {
console.log("openWebSocket error", e);
});
</script>
<!-- a lot more stuff -->
<paper-badge id="notificationsLabel" for="notifications" label="0"></paper-badge>
If you are trying to set it inside a Polymer element prefer
this.$.id.label
or if it's inside a dom-repeat or dom-if
this.$$('#id').label
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-badge/paper-badge.html">
<dom-module id="accessing-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="insideBadge" class="myDiv">badge inside element</div>
<paper-badge for="insideBadge" id="insideOwnDom" label="1"></paper-badge>
<div on-tap="_changeLabel">Click me to change all labels</div>
</template>
</dom-module>
<script>
Polymer({
is: 'accessing-element',
_changeLabel: function() {
this.$.insideOwnDom.label = 2;
var docLevel = document.getElementById('inSameDoc');
docLevel.label = 3;
var anotherElement = document.querySelector('another-element');
var ele = Polymer.dom(anotherElement.root);
var badge = ele.getEffectiveChildNodes()[3];
badge.label = 4;
// or
// anotherElement.label= 4;
}
})
</script>
<dom-module id="another-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="anotherELementsBadge" class="myDiv">badge inside another element</div>
<paper-badge id="anotherElementsDom" for="anotherELementsBadge" label="{{label}}"></paper-badge>
</template>
</dom-module>
<script>
Polymer({
is: 'another-element',
properties: {
label: {
type: Number,
value: 1
}
}
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title>Change labels</title>
</head>
<body>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div style="height:100px;"></div>
<div id="docBadge" class="myDiv">badge at same doc level</div>
<paper-badge for="docBadge" id="inSameDoc" label="1"></paper-badge>
<another-element></another-element>
<accessing-element></accessing-element>
</body>
</html>
I want to make a textarea where you can type inside of it, with a black background and green text and the ">_" blinks. How would i go about making this?
You can use this in your CSS:
textarea {
background-color: #000;
border: 1px solid #000;
color: #00ff00;
padding: 8px;
font-family: courier new;
}
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8" />
<title>Demo -TextArea</title>
<link rel="stylesheet" type="text/css" href="jqueryui.css">
<script src="jquery.js"></script>
<script src="jqueryui.js"></script>
<script>
$(document).ready(function() {
$("#myTextArea").html(">_");
setInterval(function(){
removeAndAppendBlickWraper();
},2000);
});
function removeAndAppendBlickWraper(){
removeAndAppendBlick(function(){
var text = $("#myTextArea").val(),
withCursortext =text+">_";
$("#myTextArea").val(withCursortext);
});
}
function removeAndAppendBlick(callback){
var text = $("#myTextArea").val();
var witoutCursor = text.substr(0,text.lastIndexOf(">_"));
$("#myTextArea").val(witoutCursor);
setTimeout(function(){
callback();
},1500);
}
</script>
</head>
<body>
<textarea id="myTextArea" style="background-color: black;color: green;" row="5"></textarea>
</body>
</html>
DEMO (thanks to amit kate)
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}