I am trying to open an image from the sidebar to the right panel. it needs to stay in the same page.
For example something like this. https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar
Let's say Link 1 and Link 2 and Link 3 are images, by clicking on one of them i want to have the image be displayed on the right side where you see "my page".
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
<h3 class="w3-bar-item">Menu</h3>
Link 1
Link 2
Link 3
</div>
<!-- Page Content -->
<div style="margin-left:25%">
<div class="w3-container w3-teal">
<h1>My Page</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div class="w3-container">
<h2>Sidebar Navigation Example</h2>
<p>The sidebar with is set with "style="width:25%".</p>
<p>The left margin of the page content is set to the same value.</p>
</div>
</div>
</body>
</html>
Related
I use this library https://getmdl.io/components/index.html#layout-section/tabs to show "scrollables tabs".
My problem is when I select a tab which is under an arrow (right or left), the tab is well selected but we can't read all the word. On a native application, i saw that the tab bar scroll automatically to show the full selected tab.
Do you know a way to do this with that library ?
You can see a sample here : http://jsfiddle.net/fzngbjcw/2/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
My tab label 1
My tabulation label 2
My tabulation label 3
My tabulation label 4
My tabulation label 5
My tabulation label 6
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>
Thank you
I don't think Material Design Lite has an auto-scrolling function for tabs that are outside the viewport (you may have seen that feature in a tabs demo for Material Components for the web which is where the developers are now focused, having put MDL into "limited support").
That said, you can implement some simple auto-scrolling in MDL when a tab that is partially outside the viewport is clicked with some js to check whether the clicked tab is partially outside the viewport and then just triggering a click on the appropriate MDL scroll button (so you don't have to reinvent the scroll behavior). Just remember that MDL dynamically creates some of the html elements so you have to listen for the mdl-componentupgraded event before selecting those elements. Following is a working example:
const tabs = document.querySelectorAll('.mdl-layout__tab')
let left, right;
document.addEventListener('mdl-componentupgraded', function(event) {
left = document.querySelector('.mdl-layout__tab-bar-left-button');
right = document.querySelector('.mdl-layout__tab-bar-right-button');
});
for (let tab of tabs) {
tab.addEventListener('click', function(event) {
let bounding = event.target.getBoundingClientRect();
if (bounding.left < 0) {
left.click();
} else if (bounding.right > window.innerWidth) {
right.click()
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
My tab label 1
My tabulation label 2
My tabulation label 3
My tabulation label 4
My tabulation label 5
My tabulation label 6
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>
I am attempting to create an image gallery using w3.css. I am constructing it with w3-cell-row and w3-cell elements. When I place images of varying size in these w3-cell elements the images will display with unequal heights, contrary to how you would believe they would from reading this:
https://www.w3schools.com/w3css/w3css_layout.asp
I will put some code here that shows the problem:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
</html>
As you can see the images are displayed with varying heights. My expectation would be that the widths of the images would change to create a uniform cell height across the row.
Andrew, you are missing another concept of 'Layout cells Adjust to equal heights', please refer to that section.
In your example I added cell colors to be red green and blue and you can see whats happening. width wont impact height but height impacts other cells height.
Also you can refer to Images URL for responsive images.
Hope this helps!!
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell w3-red">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell w3-green">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell w3-blue">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.
I wrote a very simple HTML app. The app opens a little loading animation and redirects to a website. Im tested this on my windows phone. The background color should be black. It is black at the start, but when I click on something and the IE loads the page the background is white...
How I can set the background color of the IE loading?
My Html app code :
<!DOCTYPE HTML>
<html>
<head>
<title>Die Witze App</title>
<meta http-equiv="refresh" content="1; url=http://witze.reddoit.de/" />
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body style="background-color:black">
<!--<p id="ladetext">Die Witze App<p>-->
<div class=ladeanimation>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>
</div>
</body>
</html>
Take a look at the CSS file, make sure you don't have any background properties in any class or ID selector.
If you dont have any then try adding background-color: #000000; to the ladeanimation class.
In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...