I'm working with Framework7.
Is it possible to combine the material tab's with the swiper slider?
I want to make tabs accessible over tabbing the tab-bar. And also want to swipe to the next “tab” by swiping left/right. Is that possible? I tried this, but it doesn't work for me:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Soziale Medien durchsuchen</title>
<link rel="stylesheet" href="css/framework7.material.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body>
<div class=“views”>
<div class=“view view-main”>
<div class=“pages”>
<div data-page=“home” class=“page toolbar-fixed navbar-fixed”>
<!— navi —>
<div class=“navbar”>
<div class=“navbar-inner”>
<div class=“center”>
<div class=“list-block”>
<div class=“item-inner”>
<div class=“item-input”>
<input type=“text” placeholder=“ Suchbegriff” style=“width: 100%; border-radius:5px; font-size: 13px;”>
</div>
</div>
</div>
</div>
</div><!— navbar inner —>
</div><!— navbar —>
<div class=“toolbar tabbar tabbar-scrollable”>
<div class=“toolbar-inner”>
<a href=“#tab-1” class=“tab-link active” style=“color: black;”>Link 1</a>
<a href=“#tab-2” class=“tab-link” style=“color: black;”>Link 2</a>
<a href=“#tab-3” class=“tab-link” style=“color: black;”>Link 3</a>
</div>
</div>
<div class=“page-content”>
<div class=“swiper-container”>
<div class=“swiper-wrapper”>
<!— Tabs —>
<div class=“tabs”>
<div id=“tab-1” class=“tab active swiper-slide”>
<div class=“content-block”>
content1
</div>
</div>
<div id=“tab-2” class=“tab swiper-slide”>
<div class=“content-block”>
content2
</div>
</div>
<div id=“tab-3” class=“tab swiper-slide”>
<div class=“content-block”>
content3
</div>
</div>
</div><!— Tabs ende —>
</div>
</div><!— swipe —>
</div><!— page content —>
</div><!— div class home —>
</div>
</div>
</div>
<script type=“text/javascript” src=“js/framework7.js”></script>
<script>
var myApp = new Framework7({
material: true,
statusbarOverlay: false
});
var mySwiper = new Framework7();
var mySwiper = mySwiper.swiper('.swiper-container', {
pagination:'.swiper-pagination'
});
</script>
<script type=“text/javascript” src=“cordova.js”></script>
</body>
Here is my custom CSS:
/* framework7.material.css custom */
.navbar, .toolbar {
background-color: #fff;
color: #000;
}
.tab-link {
color: #000;
font-size: 8px;
}
.tabbar a.tab-link,
.tabbar a.link {
font-size: 12px;
}
.item-input {
color: #000;
}
.center {
width: 100%;
}
/* eigene stylesheets */
.contactscontainer {
width: 100%;
}
.contactstext {
float: left;
width: 70%;
font-size: 13px;
vertical-align: top;
}
.contactsbutton {
float:right;
width: 15%;
vertical-align: top;
margin-top: -15px;
}
.mynetcontainer {
width: 100%;
vertical-align: top;
}
.myneticon {
width: 10%;
float: left;
vertical-align: top;}
.mynettext {
width: 90%;
float: right;
vertical-align: top;
}
.mediathekcontainer {
width: 100%;
}
.mediathekpic {
float: left;
width: 35%;
margin-top: 3px;
}
.mediathektext {
float: left;
width: 65%;
}
/* Swiper */
.swiper-container {
height: 100%;
}
.swiper-slide {
background:#fff;
}
.swiper-slide span {
text-align:center;
display:block;
margin:20px;
font-size:21px;
}
Related
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
I have 2 pop-up menus that basicaly open and close when clicked on. I wrote a little code that close any showing menu when the user click anywhere but 1 of the 2 menus. The code work perfecly fine in Chrome and Firefox but in IE, the menus only close when clicked on. I'm pretty new to Javascript so i am pretty sure that there is a better way to do it .
Here is my code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Main Header -->
<header id="header">
<nav class="container">
<img onclick="navFunction(this)" id="navMenuImg" src="img/menu.png">
<img onclick="settingFunction(this)" id="navSettingImg" src="img/setting.png">
<div id="navMenuSetting">
<ul id="navMenu" class="navMenu">
<li><a class="navMenuLink" href="#">Videos</a></li>
<li><a class="navMenuLink" href="#">Pictures</a></li>
<li><a class="navMenuLink" href="#">Profiles</a></li>
</ul>
<ul id="navSetting" class="navSetting">
<li><a class="navMenuLink" href="">Account</a></li>
<li><a class="navMenuLink" href="deconnection.php">Log out</a></li>
</ul>
</div>
</nav>
</header>
<!-- Scripts -->
<script type="text/javascript">
function navFunction() {
document.getElementById("navMenu").classList.toggle("navMenuShow");
}
function settingFunction(){
document.getElementById("navSetting").classList.toggle("navMenuShow");
}
document.onclick = function(e) {
if (!e.target.matches('#navMenuImg') && !e.target.matches('#navSettingImg')) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.classList.remove('navMenuShow');
navSetting.classList.remove('navMenuShow');
}
}
</script>
<!-- CSS -->
<style type="text/css">
#navMenuImg{
width: 55px;
height: 35px;
margin-top: 10px;
cursor: pointer;
}
.navMenu{
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
margin-right: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navSettingImg{
float: right;
width: 30px;
height: 30px;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
}
.navSetting{
position: relative;
right: 0;
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navMenuSetting{
position: relative;
width: 100%;
background-color: red;
}
.navMenuShow{
display: block;
position: absolute;
float: right;
}
</style>
</body>
Thank you in advance !
The js classList and target.matches is not supported in IE. I have listed the code that you can use instead:
function navFunction() {
document.getElementById("navMenu").className+=" navMenuShow";
}
function settingFunction(){
document.getElementById("navSetting").className+=" navMenuShow";
}
document.onclick = function(event) {
var matchesOne = event.target.matches ? event.target.matches('#navMenuImg') : event.target.msMatchesSelector('#navMenuImg');
var matchesTwo = event.target.matches ? event.target.matches('#navSettingImg') : event.target.msMatchesSelector('#navSettingImg');
if (!matchesOne&&!matchesTwo) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.className=navMenu.className.replace(/navMenuShow/g,"");
navSetting.className=navSetting.className.replace(/navMenuShow/g,"");
}
}
The code is tested and is working 100% in IE and Chrome.
edit/update
I have updated my code and fixed some errors. Now I am trying to fix my footer to stay at the bottom, my menu will not center, and I am trying to have the gallery between header and footer without being clipped by the header. Everything was working until I added the horizontal scroll gallery.
I am trying to achieve the layout:
header top
menu in a line
content/horizontal scroll gallery middle
footer/social icons bottom
Please help
codepen link
/**********************************
General
**********************************/
body {
font-family: 'Roboto', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
/**********************************
Heading
**********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
height: 150px;
position:fixed;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Passion One', cursive;
margin: 15px 0;
font-size: 5em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Comfortaa', cursive;
font-size: em;
margin: -5px 0 0;
font-weight: normal;
}
/**********************************
Navigatoin
**********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
position: fixed;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**********************************
Body
**********************************/
#content {
height: 100%;
margin: 0 0 0 0;
top: 0;
}
/**********************************
Footer
**********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
position: fixed;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
.fttext {
text-align: center;
}
/**********************************
Colors
**********************************/
/* site body */
body {
background-color: #C9BD7C;
color: #5B0123;
}
/* green header */
header{
background: #5B0123;
border-color: #5B0123;
}
/* nav background on mobile devices */
nav {
background: #B41C42;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #C86347;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #F8D295;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Passion+One|Roboto:400,500" rel="stylesheet">
</head>
<!-- content goes here-->
<body>
<header>
<a href="index.html" id="logo">
<h1>Natalie Davis</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="content">
<div id="img-container">
<div class="picture_holder" style="width: 573px;">
<div class="picture" style="width: 543px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="543" height="600" alt="">
<div class="captioning">
<div class="title">link - Test caption and link</div>
<div class="caption">stuff </div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1124px;">
<div class="picture" style="width: 1094px;">
<img src="https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg" width="1094" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 382px;">
<div class="picture" style="width: 352px;">
<img src="http://www.tonyandsonsnurseries.com.au/images/Plants/Frangipani/FruitSaladLarge.jpg" width="352" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 439px;">
<div class="picture" style="width: 409px;">
<img src="http://www.beautifulflowerpictures.com/blog/wp-content/uploads/2008/10/beauty_berry_issai_31.jpg" width="409" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 752px;">
<div class="picture" style="width: 722px;">
<img src="https://freedfromtime.files.wordpress.com/2016/08/farmopolis-flowers-dsc_6487.jpg?w=722&h=600" width="722" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 1094px;">
<div class="picture" style="width: 1064px;">
<img src="https://www.openfootage.net/Openfootage/Vorschau/00299_GelbeBluete/00299_GelbeBluete_Preview_v01.jpg" width="1064" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1525px;">
<div class="picture" style="width: 1495px;">
<img src="https://static.wixstatic.com/media/09a7b6_b09cf68226774f6d8af396d240573130.jpg/v1/fill/w_1495,h_600,al_c,q_85,usm_0.66_1.00_0.01/09a7b6_b09cf68226774f6d8af396d240573130.webp" width="1495" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 560px;">
<div class="picture" style="width: 530px;">
<img src="http://www.besgroup.org/wp-content/uploads/SunbirdBrTh-Costus-JWee-1.jpg" width="530" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<!-- mousewheel java script -->
<script type="text/javascript">
function handle(delta) {
if (delta < 0)
ScrollSmoothly(10, 10, 'right');
else if (delta > 0)
ScrollSmoothly(10, 10, 'left');
else
;
}
function wheel(event) {
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera)
delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var repeatCount = 0;
function ScrollSmoothly(scrollPos, repeatTimes, direction) {
if (repeatCount < repeatTimes)
if (direction == 'right')
window.scrollBy(20, 0);
else
window.scrollBy(-20, 0);
else {
repeatCount = 0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "','" + direction + "')", 10);
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
#img-container {
width: 6450px;
}
#img-container #text {
float: left;
width: 675px;
}
#img-container #text p {
width: 600px;
}
#img-container .picture_holder {
float: left;
}
#img-container .picture {
/* padding-top: 100px; */
}
#img-container .captioning .title {
margin-top: 12px;
font-weight: bold;
}
#img-container .captioning .caption {}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</section>
</div>
<footer class="fttext">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
<p>© 2018 Natalie Davis.</p>
</footer>
</body>
</html>
Looking at the code you've posted, in your CSS, your menu styles were targeting an ID, whereas, in your HTML, your menu code had a class instead. Changing the CSS for menu to a class instead of an ID, the styles are then applied, and if the position is changed from absolute to fixed, it then behaves as desired.
.menu {
width: 960px;
margin: 0 auto;
position: fixed;
text-align: center;
background-color: darkred;
}
I'm working on palette board project and struggling when changing to different theme.
Initial page will have Warm color palette, but I want to change this after clicking All theme.
Users will have options to choose different theme if you tap the dropdown menu just like the image I posted.
Below you will find images that I imagine.
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
/* The Modal (background) */
.modal-inside {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content-theme {
background-color: #fff;
margin: 10% auto; /* 15% from the top and centered */
padding: 20px;
border-radius:4px 4px 4px 4px;
width: 70%;
height: 430px;
}
/* The Close Button */
.close-theme {
color: #000000;
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
font-size: 28px;
font-weight: bold;
}
.close-theme:hover,
.close-theme:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.theme-list-dropdown {
color: #BDBEC1;
text-transform: uppercase;
font-family: "mr-eaves-modern";
font-size: 0.9rem;
text-align: center;
}
.theme-list-name {
padding: 20.5px;
}
#all-theme-list-name {
margin-top: -5px;
}
#warm-theme-list-name {
color: #262931;
/* background-color: #EEEEEF;*/
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu"><div id="themeBtn" class="theme-warm">Warm</div><i class="material-icons">keyboard_arrow_down</i></div>
<!-- The Modal -->
<div id="myModal" class="modal-inside">
<span class="close-theme">×</span>
<div class="modal-content-theme">
<div class="theme-list-dropdown">
<div class="theme-list-name" id="all-theme-list-name">All</div>
<div class="theme-list-name" id="">Bright</div>
<div class="theme-list-name">Dark</div>
<div class="theme-list-name" id="warm-theme-list-name">Warm</div>
<div class="theme-list-name">Cool</div>
<div class="theme-list-name">Pastel</div>
<div class="theme-list-name">Neon</div>
</div>
</div>
</div>
<!-- End: The Modal -->
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<!-- <i class="material-icons more-icon">more_horiz</i> -->
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
</script>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// var btn = document.getElementById("themeBtn");
var btn = document.getElementById("themeBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-theme")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
it can be implemented by using Jquery click and addClass.
https://api.jquery.com/click/
https://api.jquery.com/addclass/
http://api.jquery.com/toggleclass/
after clicking modal item, the written jquery should add or change top div's class.
like
<div class'board-pages [theme]'>
... content
</div>
[theme] and its children's css should be defined as well.
or this solution could be another option
Replacing css file on the fly (and apply the new style to the page)
find bellow code (HTML/CSS) that I´m trying to move a specific DIV but not able to - note that I used Bootstrap
HTML - The issue is with the div id "PlayerMain" that is unable to move to the page center
body {
background-image: url('../images/dis_bg.png');
background-repeat: no-repeat;
text-align: center;
align-content: center;
}
.whiteBorder {
display: inline;
background-color: white;
}
.allPage {
text-align: center;
}
.blueFont {
color: blue;
}
#efi {
max-width: 100%;
height: auto;
display: block;
position: absolute;
bottom: 20%;
top: 20%;
right: 10%;
z-index: 30;
}
.h1Border {
width: 1500px;
background-color: white;
border: none;
}
.loginButtonImg {
margin-top: 10px;
}
.loginButtonImg:hover {
cursor: pointer;
}
#media (max-width: 768px) {
.mobile-only {
display: none !important;
}
}
<script src="SCRIPT/JS/site.js"></script>
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/site.css" rel="stylesheet" />
<script src="SCRIPT/Jquery/jquery-3.1.1.js"></script>
<script src="SCRIPT/JS/site.js"></script>
<script src="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<div class="container-fluid">
<div class="row whiteBorder">
<section class="col-xs-12">
<div>
<h1 class="blueFont">דודי,<br /> text, <br /><b>text</b>text</h1>
</div>
</section>
<section class="col-xs-12">
<div>
<img src="images/efi.png" id="efi" class="mobile-only center-block" />
<div id="treepodiaPlayerMain" class="center-block"></div>
</div>
<img src="images/login.png" class="img-responsive center-block loginButtonImg" />
</section>
</div>
<section class="row">
<div class="col-xs-12">
<img src="images/bottom_icons.png" class="img-responsive center-block" />
</div>
</section>
</div>
<script type="text/javascript" src="//someScript.js"></script>
Many thanks in advance!
I show you snippet just remove position: absolute; from css where you write id #efi. and check it again