Error responsive design, not showing fine on a phone - javascript

I'm trying to make a mobile/tablet website. I don't know why on my phone this thing happen:
But then.. when I open the sidebar:
I don't know why the body resizes itself. The content <div> moves to the right when the menu opens on the mobile. I want it to stay underneath the menu, so that the menu is on top of it.
Here's the HTML and CSS:
#charset "utf-8";
/* CSS Document */
body {
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
overflow-y:hidden;
}
#sidebar {
width:250px;
height:100%;
position:absolute;
background-color:#2a2a2a;
border-right:1px solid #1d1d1d;
}
#sidebar ul {
list-style:none;
padding:0;
margin:0;
}
#sidebar a {
display:block;
color:#fff;
text-decoration:none;
padding:0px 10px;
border-bottom:1px solid #1d1d1d;
transition:all 0.3s;
height:55px;
line-height:55px;
}
#sidebar a:hover {
background-color:#444;
}
#content {
width:100%;
height:100%;
position:absolute;
background-color:#fff;
transition:all 0.3s;
}
#menu {
position:relative;
width:100%;
height:56px;
box-sizing:border-box;
border-bottom:1px solid #CCC;
line-height:56px;
}
#menu span {
cursor:pointer;
font-size:30px;
width:55px;
height:56px;
background-color:#445A87;
color:#fff;
display:block;
text-align:center;
line-height:56px;
}
.open {
margin-left:251px;
}
#logo {
position:absolute;
right:50%;
top:0px;
margin-right:-80px;
height:55px;
width:160px;
font-size:24px;
color:#282828;
background:url(../../img/Logo.png);
background-size:cover;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baby & Home · Servicio doméstico · Limpieza industrial<</title>
<link href="css/styles_min.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="css/icons.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="sidebar">
<ul>
<li>Inicio</li>
<li>Quiénes somos</li>
<li>Doméstico</li>
<li>Industrial</li>
<li>Promociones</li>
<li>Ofertas de empleo</li>
<li>Contacto</li>
</ul>
</div>
<div id="content">
<div id="menu">
<span id="open_sidebar" class="icon-list2"></span>
<div id="logo"></div>
</div>
</div>
<script type="text/javascript">
$("#open_sidebar").click(function(){
$("#content").toggleClass("open");
if($("#open_sidebar").hasClass("icon-list2")) {
$("#open_sidebar").removeClass("icon-list2");
$("#open_sidebar").addClass("icon-cross");
}
else {
$("#open_sidebar").addClass("icon-list2");
$("#open_sidebar").removeClass("icon-cross");
}
});
</script>
</body>
</html>
Thanks!
(I should say that in a web browser on a PC this works fine! Why not on a phone?)

<div id="content"> contains the images, and moves right, but you do not want it to. This is the cause of the layout problems. The code which controls this is applied to **all* screen sizes but only looks bad on tiny ones:
.open { margin-left:251px;}
You can delete this line to stop the <div id="content"> moving 251px to the right - but the images and text would still be too big for the screen - and the menu would take up too much of the screen.
A better idea would be to make your code more responsive. Add this to your CSS - this will make the menu text and menu size smaller for screens 600px or less
#media only screen and (max-width:600px)
{
#sidebar {
width: 150px;
margin:0; padding:0;
font-size: 12px;
}
}
This is called a media query and screens larger than 600px will stay the same. You can add to it, for example line-height:1.1em means each line is 1.1 characters wide

Related

Animated/ Slide Side-Menu doesn't slide left-ward?

How can I solve the problem of a Side-Menu that doesn't slide out-and-in from the left (Leftward)? I got it from YouTube Video. Backtrack to the YouTube presenter without feedback.
It consists of HTML, CSS and JavaScript.
Index File
The Index file is the file invokes or synchronize with CSS file and JavaScript files
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="toggleMenu.css" type="text/css" rel="stylesheet">
<script link="toggleMenu.js"></script>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS File:
The CSS file defines various class with defined attributes
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
JavaScript
JavaScript handling the sliding effect when user click on the Toggle Button (toggle-btn)
function toggleSidebar() {
document.getElementByID("sidebar").classlist.toggle("active");
}
You have a couple of typos in your toggle function, it should be:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
Here's a working version, click on run snippet below:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
There are 2 points you need to fix
script should be using src attributes instead of link, so it will be
<script src="toggleMenu.js"></script>
And the classList should be written with capital L, so instead of document.getElementById("sidebar").classlist.toggle("active"); it
should be
document.getElementById("sidebar").classList.toggle("active");
https://codepen.io/divided7/pen/PoPrwPe I made you a codepen, with the fixed result.
Also, change link to src in your code for the script tag, and the typo (classlist to classList)

Stuck on adding/toggling a css class to an html element in jquery

Hey guys I'm new to jQuery and having a ton of trouble making things on my own. I'm trying to change the styling of to the css class .change, but it isn't working. Really need some help. Thanks in advance.
$(document).ready(function() {
$('#button').click(function() {
$(this).addClass('change');
})
})
html body {
margin:0;
padding:0;
background-color:#3366CC;
}
.main .container {
margin-top:0;
text-align:center;
padding:5%;
}
.main h1 {
color:white;
font-size:100px;
text-transform:uppercase;
}
.main h3 {
color:white;
font-size:50px;
}
.main #button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.change {
background-color:black;
}
<DOCTYPE!html>
<html>
<head>
<title>Community-Help yours today</title>
<link rel='stylesheet' type='text/css' href='community.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='community.js'></script>
</head>
<body>
<div class="main">
<div class="container">
<h1>Community</h1>
<h3>Start an initiative, gain support, build your project</h3>
<div id="button">Get Started</div>
</div>
</div>
</body>
</html>
You'd be best off doing this:
.button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.button--changed {
background-color:black;
}
Add a class for the css directly to the button.
Then toggling the .button-changed class. This keeps your specificity down and you won't encounter similar problems further down the line.
By adding more specificity, such as by doing .main #button.changed you just defer the same problem further down line. Imagine if you then need to add a second changed state for some reason?
Also, you don't now have to contain your .button within main in order to use it's styles and by using a class you can validly re-use the button on the page, but these are bonus point.
Here are some references to further explain ...
http://www.impressivewebs.com/css-specificity-irrelevant/
http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/
.change style is being overridden by .main #button style that's why the black background color is not being applied. You will see that it is being overridden from the developer tools. I suggest you read more about Specificity on CSS: https://css-tricks.com/specifics-on-css-specificity/
try to this css
.main #button.change {
background-color:black;
}
because you used to this
.main #button {color:white;}
than click to button add class .change but class .change does not apply becuase you button id is more than power full you .change class
so that you can power full you class than used to this .main #button.change
Demo
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass('change');
})
})
html body {
margin:0;
padding:0;
background-color:#3366CC;
}
.main .container {
margin-top:0;
text-align:center;
padding:5%;
}
.main h1 {
color:white;
font-size:100px;
text-transform:uppercase;
}
.main h3 {
color:white;
font-size:50px;
}
.main #button {
color:white;
background-color:red;
padding:.5%;
text-align:center;
width:10%;
font-size:25px;
margin:auto;
}
.main #button.change {
background-color:black;
}
<DOCTYPE!html>
<html>
<head>
<title>Community-Help yours today</title>
<link rel='stylesheet' type='text/css' href='community.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='community.js'></script>
</head>
<body>
<div class="main">
<div class="container">
<h1>Community</h1>
<h3>Start an initiative, gain support, build your project</h3>
<div id="button">Get Started</div>
</div>
</div>
</body>
</html>
and used to toggleclass
Change .change to #button.change to make this as high priority than #button
Like this :
#button.change {
background-color:black;
}
And use toggleClass instead of addClass to have toggle effect.
Demo URL

blank space occurs after footer in my html page

i have a html page,it's displaying well if i put my css code in the html.for example
<html>
<head>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">My header</div>
<div id="content">
Content
</div>
<div id="footer">My Footer</div>
</div>
</body>
</html>
when i put this css into external stylesheet it displaying well in first time but after i reloading the same page the empty space occurs at bottom of the page.For example
style.css
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
my.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div><!-- #header -->
<div id="content">
content
</div><!-- #content -->
<div id="footer">
footer
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
how to correct this error?
Any help will be greately appreciated.
try after removing height from footer (in css).footer will take height automatically as per data.

Include iframe on click of jquery tab?

I have below code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css"/>
ul.tabs {
float:left;
list-style:none;
height:22px;
width:100%;
border-radius:8px 0 -50px 0;
margin:0;
padding:0;
}
ul.tabs li {
float:left;
height:21px;
line-height:21px;
border:1px solid #999;
overflow:hidden;
position:relative;
background:#ADD8E6;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
margin:0 2px -1px 0;
padding:0;
}
ul.tabs li a {
text-decoration:none;
color:#000;
display:block;
font-size:1em;
border:1px solid #fff;
outline:none;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding:0 20px;
}
ul.tabs li a:hover {
background:#ADD8E6;
}
html ul.tabs li.active,html ul.tabs li.active a:hover {
background:#fff;
border-bottom:1px solid #fff;
}
.tabContainer {
border:1px solid #999;
overflow:hidden;
clear:both;
float:left;
width:100%;
background:#fff;
-webkit-border-radius:8px;
-webkit-border-top-left-radius:0;
-moz-border-radius:8px;
-moz-border-radius-topleft:0;
border-radius:8px;
border-top-left-radius:0;
}
.labelStyle{
font-weight:bold;
font-size:1.5em
}
.tabContent {
font-size: 12px;
padding:20px;
}
.chkAlign{
margin-left:143px
}
</style>
<script>
$(document).ready(function() {
//hiding tab content except first one
$(".tabContent").not(":first").hide();
// adding Active class to first selected tab and show
$("ul.tabs li:first").addClass("active").show();
// Click event on tab
$("ul.tabs li").click(function() {
// Removing class of Active tab
$("ul.tabs li.active").removeClass("active");
// Adding Active class to Clicked tab
$(this).addClass("active");
// hiding all the tab contents
$(".tabContent").hide();
// showing the clicked tab's content using fading effect
$($('a',this).attr("href")).fadeIn('slow');
return false;
});
});
</script>
</head>
<body>
<ul class="tabs">
<li>SEO</li>
<li>Attributes</li>
<li>Classification SIC</li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=sic&gid=138370"></iframe>
</div>
<div id="tab2" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=some&gid=235"></iframe>
</div>
<div id="tab3" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=uk&tab=sic&gid=789"></iframe>
</div>
</div>
</body>
</html>
On click of each tab, i need render some page in an iframe. But above code is not working. Am i doing anything wrong here?
How can i do this?
first thing first it may be that the header send by the iframe is X-Frame-Options so the website refuses to response in the iframe.
your url seems wrong, space avec the double quote of the src and the port of the website should be followed by a /
try to replace your adresses by a local file on your post. Your code should work.

Html file also opens a picture?

I'm on a mac, and when I double-click the html file, it opens a photo that I'm using in Preview. If I "open with" Google Chrome, then the picture opens in it's own tab. The html file itself loads and functions correctly, and the picture appears just as it should. I just have NO CLUE why it also opens the picture file in a new tab(Chrome) or Preview(safari).
html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src="jQuery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id=top>
<h1>Lamborghini</h1>
</div>
<div id=navbar>
<div id=navlink> Home </div>
<div id=navlink> Photos </div>
<div id=navlink> Videos </div>
<div id=navlink> About Us </div>
<div id=navlink> Contact </div>
</div>
<div>
<div id=leftpanel></div>
</div>
</body>
</html>
Javascript
if(typeof jQuery === "undefined")
{console.log("jQuery is not loaded.")}
else
{console.log("jQuery is loaded.")}
$(document).ready(
$(document).scroll(
function()
{$("div").fadeTo(1000,1)}
)
);
I'm doing everything locally (just a beginner learning), and I have a jQuery database linked. Not sure if any of that is important.
CSS
body
{opacity:0}
.fade2
{opacity:1;
position:fixed;
z-index:-1;
width:100%;
opacity:0}
div#navbar
{height:50px;
width:100%;
opacity:0;
border-radius:7px;
background-color:rgba(0,150,255,0.8);
margin:auto;
overflow:hidden}
div#navlink:hover
{background-color:rgba(0,105,180,0.6)}
div#navlink
{width:20%;
display:inline-block;
border:1px solid black;
height:100%;
margin:0;
float:left;
text-align:center;
box-sizing:border-box;}
a
{text-decoration:none;
color:white;
position:relative;}
#top
{text-align:center;
height:544px;
background:url("Lambo2.jpg") bottom no-repeat;
background-size:100%;
background-color:white;
margin:0px;
margin-top:-45px;
width:100%;
background-color:transparent;
opacity:0.9}
h1
{position:relative;
font-size:4em;
top:.38em;
color:black;
font-family:cursive;
text-align:left}
#leftpanel
{height:1000px;
width:45%;
margin-left:4%;
margin-top:1%;
float:left;
background-color:rgba(0,150,255,1);
opacity:0}
span
{position:relative;
top:1em}

Categories