I'm making a small webpage, my problem is that the text inside the image isn't responsive for all devices, so can anyone help me make that text responsive, here are my codes:
<html>
<head>
<title>resturant</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="main.css">
<script src="script.js"></script>
</head>
<body>
<div id="w3-display-container w3-mobile" id="main">
<img src="headerimg.jpg" class="w3-image w3-mobile">
<div class="w3-display-topleft w3-mobile" id="title"><br /><p>Welcome to <strong>JS</strong> resturant</p></div>
<p class="w3-display-left w3-mobile" id="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque at enim voluptatibus, veniam omnis quaerat cumque deleniti repellat tempore rem sapiente temporibus consectetur illum praesentium eius, expedita totam? Earum, quos?</p>
</div>
</body>
</html>
and here's my CSS styles
#title {
color: rgb(255, 237, 75);
font-size: 40px;
font-weight: bold;
padding-left: 30px;
}
#title strong {
color: brown;
}
#description {
max-width: 40%;
padding-left: 40px;
font-size: 20px;
font-weight: bold;
}
You should include the following viewport element in all your web pages:
A viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Share a screenshot of the issue
Anyway, you can use
font-size: CSS;
CSS can be:
100%, 100vw, x% or xvw (x is a number) to make it responsive
Also don't forget about
<meta name="viewport" content="width=device-width, initial-scale=1" /> in HTML
Add this below line inside head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I'm very new to jQuery and JavaScript and want to create a function where I can click on ANY object on my page and that selected object then needs to fade or change styling, etc. (the point is the click needs to be randomly specific).
Nothing I've tried is working, even when using the :selected selector it still needs to be specific for what I want to achieve. At the moment I managed to make EVERYTHING fade and not just the selected object.
Here is my code:
$('*').click(function() {
$(this).children().fadeOut( "slow" );
});
Here is the rest of the code, but I don't think is is needed.
$(document).ready(function () {
alert("Welcome to my jQuery page. The page has finished loading");
document.getElementById('mainBd').style.backgroundImage = "url('/images/SoupyBlissfulHeron-max-1mb.gif')";
});
$("#lorem").hover(function () {
$(this).css({
"background-color": "rgba(218, 243, 247, 0.5)",
"color": "rgb(240, 119, 0)",
"border-left": "5px solid #ccc",
"font-size": "2em"
});
});
$('*').click(function() {
$(this).children().fadeOut( "slow" );
});
<!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">
<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>
<title>Document</title>
</head>
<body id="mainBd">
<div class="container">
<h1 class="h1 display-3">
Welcome To My jQuery Page.
</h1>
<p>Hover over the paragraph below to change its styling.</p>
<p id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sapiente iure, quod vitae veritatis reprehenderit expedita officia accusantium commodi delectus nihil, amet in. Fugiat aliquam veritatis eos sit esse autem!
</p>
<p>
Click on any element to let it fade out.
</p>
</div>
<script type="text/javascript" src="jQuery_Task.js"></script>
</body>
</html>
jQuery events "bubble" to top of DOM, if not prevented. So you can just put listener on body.
Click event has target that show what exactly was clicked, so use that:
$(document).ready(function () {
//alert("Welcome to my jQuery page. The page has finished loading");
$('#mainBd').css('backgroundImage', "url('/images/SoupyBlissfulHeron-max-1mb.gif')");
$("#lorem").hover(function () {
$(this).css({
"background-color": "rgba(218, 243, 247, 0.5)",
"color": "rgb(240, 119, 0)",
"border-left": "5px solid #ccc",
"font-size": "2em"
});
});
$('body').click(function(event) {
$(event.target).fadeOut( "slow" );
});
});
<!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">
<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>
<title>Document</title>
</head>
<body id="mainBd">
<div class="container">
<h1 class="h1 display-3">
Welcome To My jQuery Page.
</h1>
<p>Hover over the paragraph below to change its styling.</p>
<p id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sapiente iure, quod vitae veritatis reprehenderit expedita officia accusantium commodi delectus nihil, amet in. Fugiat aliquam veritatis eos sit esse autem!
</p>
<p>
Click on any element to let it fade out.
</p>
</div>
<script type="text/javascript" src="jQuery_Task.js"></script>
</body>
</html>
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 have this Jquery-Code that copies the URL when clicked on its button (.clipboard). Now I want it to show another HTML/CSS Class after clicking on it.
I tried to declare it as a variable const success = $('.success-message').html(); and then with $('.success-message').html(success); to run it (as you can see in the code). Unfortunately, that does not work. Is there a other way to do it? I looked it up and found the toggle method. That did not work either, or I just implemented it wrong. Appreciate any help!
Jquery:
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
const originalText = $('.clipboard').html();
const success = $('.success-message').html();
// CSS function:
const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML=s;
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$('.clipboard').html(originalText);
$('.success-message').html(success);
// CSS Usage:
addCSS(".clipboard{ font-size: 20px; padding: 4.8px 21.3px 4.8px 21.3px; }")
// Run something in 1 seconds to revert back to the button's text
setTimeout(function() {
addCSS(".clipboard{ font-size: 15px; padding: 9px 21.3px 9px 21.3px}")
$('.clipboard').html(originalText);
}, 1000); // 1 seconds
})
The HTML/CSS Class I want to show:
<div class="success-message">
KOPIERT!
</div>
<style>
.success-message{
color: white;
background-color: #2FAC66;
padding: 1px 50px 1px 50px;
text-align: center;
font-size: 12px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
Here is a complete index.html as minimal working example.
Suppose, you want to show the div.success-message after the button has been clicked.
<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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<style>
.success-message {
visibility: hidden;
color: white;
background-color: #2fac66;
padding: 1px 50px 1px 50px;
text-align: center;
font-size: 12px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>Kopieren</div>
<div class="success-message">KOPIERT!</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam debitis
accusamus quam nisi. Suscipit rerum nisi placeat tempore accusantium ut
dolorum? Sit assumenda, incidunt voluptate unde optio quo enim voluptas.
</p>
<button class="clipboard">Kopieren!</button>
<script type="text/javascript">
$.when($.ready).then(function () {
// Document is ready.
$(".clipboard").on("click", () => {
$(".success-message").css("visibility", "visible");
});
});
</script>
</body>
</html>
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 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>