I have issue with scrollLeft for Safari when page in RTL direction.
In Safari when i do click on button (that has a handler scrollLeft(-200)) i will scroll to 0 position of page. And this is big issue.
Safari: 7.0.1
OS: OS X 10.9.1
Following code has structure like as my page but more easier:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<style>
.main {
}
.content {
direction: rtl;
width: 2000px;
}
.button-scroll {
width: 50px;
height: 50px;
background: red;
color: white;
text-align: center;
position: fixed;
left: 10px;
top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sapiente illo dignissimos odit nisi. Voluptatibus, temporibus, recusandae totam libero architecto veniam unde quod nisi facere perspiciatis fugiat harum odit tenetur.
</p>
</div>
<div class="button-scroll"></div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.button-scroll').bind('click', function(){
console.log('scrolling... ' + document.body.scrollLeft);
// $(document.body).scrollLeft(100);
document.body.scrollLeft -= 100;
console.log(document.body.scrollLeft);
})
});
</script>
</body>
</html>
Related
so i tried building a collapsible sidebar , the sidebar collapses when clicked on button but the contents of it do not get collapsed. When i click on the open menu button it opens the side bar but when i click that button to close it again the content of sidebar that is "hi" written in h1 tag does not disappear. please help.
'''
<!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.0">
<title>Sidebar practice</title>
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="sidenav" id="sidenav">
<h1>hi</h1>
</div>
<div class="topnav" id="topnav">
<button onclick="openNav()">
open menu
</button>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptates aliquam, nihil ab fugiat temporibus maxime nulla
pariatur, sapiente porro blanditiis ipsam eos, labore magnam
dolore et incidunt voluptatem inventore. Possimus?
</p>
</div>
<script>
var checked = 0;
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("topnav").style.marginLeft = "250px";
checked = 1;
}
else{
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("topnav").style.marginLeft = "0";
checked = 0;
}
}
</script>
</body>
</html>
'''
body {
margin: 0;
}
#topnav {
background-color: #333;
overflow: hidden;
padding: 40px 16px;
transition: 0.5s;
}
#image1 {
height: 25px;
width: 25px;
}
#image2 {
height: 25px;
width: 25px;
}
#sidenav {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: #333;
padding-top: 20px;
transition: 0.5s;
}
button {
background-color: #333;
}
#main {
transition: margin-left .5s;
}
<!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.0">
<title>Sidebar practice</title>
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="sidenav" id="sidenav">
<h1>hi</h1>
</div>
<div class="topnav" id="topnav">
<button onclick="openNav()">
open menu
</button>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptates aliquam, nihil ab fugiat temporibus maxime nulla
pariatur, sapiente porro blanditiis ipsam eos, labore magnam
dolore et incidunt voluptatem inventore. Possimus?
</p>
</div>
<script>
var checked = 0;
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("topnav").style.marginLeft = "250px";
checked = 1;
}
else{
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("topnav").style.marginLeft = "0";
checked = 0;
}
}
</script>
</body>
</html>
Add overflow:hidden to your css in #sidenav
#sidenav {
overflow:hidden;
}
just add this function
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.display = "block";
checked = 1;
}
else{
document.getElementById("sidenav").style.display = "none";
checked = 0;
}
}
I am making a note making website using pure JavaScript
This is a HTML Layout
<!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.0">
<title>Note taking website</title>
<style>
#container {
text-align: center;
}
#container1 {
text-align: center;
}
#flex {
display: flex;
flex-direction: row;
margin: 20px 377px;
}
#show-notes {
width: 278px;
background-color: #70e0d3;
height: 204px;
border: 2px solid purple;
margin: 3px 8px;
}
h3 {
margin-bottom: 0px;
margin-top: 6px;
}
</style>
</head>
<body>
<section id="container" class="contain">
<div id="top">
<h1 class="head">Note Taking Website</h1>
</div>
<div class="second">
<textarea name="area" id="text" cols="110" rows="10" placeholder="Enter here something"></textarea>
</div>
<div class="second" id="class-btn">
<button id="btn" type="submit">Submit</button>
</div>
</section>
<section id="container1">
<h1 id="notes">Your Notes</h1>
<div id="flex">
<!-- <div id="show-notes">
<h3>Notes</h3>
<p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam natus unde reiciendis
maiores sint
suscipit explicabo quisquam et, odit consequatur fugiat, repellat fugit nihil placeat aspernatur
accusamus praesentium facere tempore modi eos? Eum, nisi laudantium dolorum hic mollitia corrupti
sequi incidunt cum culpa enim.</p>
</div> -->
</div>
</section>
<script src="javatut/app.js"></script>
<!-- <script src="team.js"></script> -->
</body>
</html>
After building layout, In the JavaScript I want to save the strings in the localStorage. I have to show that notes when a user clicks on submit button whatever in the textarea input under the section of Your Notes but when I am checking the length in console after adding multiple strings in localStorage it shows the length only 1. Please help me to increase the length of localStorage,
you can run this code below
let button = document.getElementById("btn")
button.addEventListener("click",function(e){
let txtara =document.getElementById("text")
let notes = localStorage.getItem("note");
let textobj;
if (notes==null)
{
textobj = [];
}
else
{
textobj =JSON.parse(notes);
}
textobj.push(txtara.value);
localStorage.setItem("note",JSON.stringify(textobj))
// console.log(typeof notes)
})
I am trying to figure out how I can use Laxxx.js with my html section with two boxes.Here is my code.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>Sidebar Navigation</title>
</head>
<body>
<section id="about">
<div class="page-num">
<h1>01</h1>
</div>
<div class="left">
<div class="box1"></div>
<div class="box2" data-lax-preset="spin-180"></div>
</div>
<div class="right">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam alias recusandae tenetur impedit similique dolore, rem molestias illo incidunt ipsum ipsa omnis odit, placeat tempore sapiente aliquid unde. Quaerat, architecto ex sit possimus commodi distinctio enim. Maxime, odit iste animi ut et iure, eius error.</p>
</div>
</section>
<script src="node_modules/lax.js/lib/lax.min.js"></script>
<script>
window.onload = function() {
lax.setup() // init
document.addEventListener('scroll', function(e){
lax.update(window.scrollY)
},false)
console.log('hey');
}
</script>
</body>
</html>
scss
#about {
background: black;
height: 100vh;
display: flex;
align-items: center;
color: white;
position:relative;
overflow:hidden;
.left {
width: 40%;
position:relative;
.box1{
position:absolute;
top: 20% ;
left:20%;
z-index:0;
width:400px;
height:400px;
border:30px solid yellow;
overflow:hidden;
transform: rotateZ(65deg);
}
.box2{
position:absolute;
top: 30%;
left:10%;
z-index:0;
width:300px;
height:300px;
border:30px solid red;
overflow:hidden;
}
}
.right {
width: 50%;
padding: 10vh 20vh;
// position:relative;
h1 {
font-size: 3vw;
margin: 0;
}
p {
font-size: 1.2rem;
line-height: 28px;
}
}
}
I guess I have followed al the steps on documentation however I get no amination on scroll and no error on console as well.
And here is the github documentation for laxxx.js https://github.com/alexfoxy/laxxx
I think you just need to add the lax class
<div class="lax box2" data-lax-preset="spin-180"></div>
I am basically transferring existing slider from existing site to a new one, and I didn't want to waste additional time by figuring out how to create a text slider from scratch, since the client wants the same thing on his new site.
I found the code and modified it a bit to work on the new site. Except it doesn't really works as it should. The slider looks like this:
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).width(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.width();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
Now I think I know what the issue is, but I don't know how to fix it. For some reason, my .items wrapper, if it doesn't have set width, won't have all the links in one line, so after a while I won't have any links inside to scroll.
Strangely this isn't set on the client side and I couldn't figure out what css rule they used that will allow this (move to left infinitely without width being set). So to circumvent this I'm calculating total width, and then setting it each time the slider clones the element that passed.
But what this does (at least that's my guess) is that after a while the gap between the .items wrapper start on the left (where the icon is), and the link that slides in, becomes progressively bigger. After a minute or so the gap becomes really big.
So is there a way to prevent this? What am I doing wrong here? :\
Hi try this sample i hope it help you
<html>
<head>
<title>Demo Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item " >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can try outerwidth() instead of width() as I think the solution is to add +2px to the width which is actually the padding-left of each anchor item.
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).outerWidth(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.outerWidth();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
I have a variable named contract that has some HTML content received from the server. What is the simplest way to get this variable to get printed? By printing I mean hitting my button would: pop up the print window in Chrome with the document showing contents of my variable (since it is already a HTML formatted with CSS paged media, it looks a ready to be printed/saved pdf )
var contract = <HTML content>
$('#print').click(function () {
<Pops up the print window of chrome with 'contract' opened>
})
I have browsed through answers that suggest using iframes (here, here ) and answers which suggest window pop-ups (here) but to be honest, it is a little confusing as it shouldn't really be very difficult.
Could you please suggest a straightforward way to get this done?
Let's say that the content of the HTML has the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contract</title>
</head>
<body>
<h1>Contract</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum soluta ullam, in, qui iusto omnis rerum nisi alias, ducimus, dignissimos rem deserunt excepturi illo sint unde harum quas! Id.</p>
<p>Signed: <br> Dated:</p>
</body>
</html>
Get them stored in a value, say myHTML.
$("input").click(function () {
myHTML = '';
myWin = window.open("about:blank", "_blank");
myWin.document.write(myHTML);
myWin.print();
});
Update using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Print Preview</title>
<style>
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, strong, b, th {font-weight: 600;}
textarea, tt, pre, pre *, code, code * {font-family: 'Consolas';}
/* End Praveen's Reset for Fiddle ;) */
h1 {font-size: 1.2em;}
h1, p {margin: 0 0 10px; line-height: 1.5;}
.logo img {display: block; max-width: 75%; margin: 0 auto;}
#dont-print {padding: 10px;}
#dont-print h1 {background-color: #eef; padding: 5px 10px; margin: -10px -10px 10px;}
#print-this {display: none;}
#media print {
#dont-print {display: none;}
#print-this {margin: 10px; display: block;}
}
</style>
</head>
<body>
<div id="dont-print">
<div class="logo">
<img src="https://www.microsoft.com/about/corporatecitizenship/en-us/downloadhandler.ashx?Id=07-03-02" alt="" />
</div>
<h1>Contract</h1>
<p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
<p>Signed: <br>Dated:</p>
</div>
<div id="print-this">
<h1>Contract</h1>
<p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
<p>Signed: <br>Dated:</p>
</div>
</body>
</html>
Live Demo: http://output.jsbin.com/vuzixonajo