Collapsible Box Script Interfering with CSS - javascript

This is the script needed for the collapsible box to work
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
But the 4th line of code is interfering with my CSS, in terms of backgrounds and font. This community told how to fix the background color with:
body.ui-overlay-a {
background-color: #dc143c;
}
div.ui-page-theme-a {
background-color: transparent;
text-shadow: none;
}
Where text-shadow: none; being the line of code to remove the blue-ish outlines in my navigation bar (code below), but doesn't remove it anywhere else. I applied this to the p and h4 tags in my CSS but it doesn't apply.
Through trial and error I have found out that line 4 was the reason why it was interfering. Line 4 code (as mentioned above):
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
If I remove this, my collapsible box disappears. But if I leave it, I lose my background color and font. Help please and thanks in advance.
Navigation bar, collapsible box code will be provided below. For more reference I have uploaded my file into a free web hoster here.
As you can see, the part where it says "Restaurante etc", it has this really weird shadow to it, the font of the navigation bar is not "Roboto", as mentioned in the CSS code, and when I hover over the "About Us" page it does not use Roboto nor Lato, which were the only two fonts mentioned in my file.
Navigation Bar Content:
<div class="nav">
<ul>
<li> Contacts </li>
<li> Map </li>
<li> Reservations </li>
<li> Online Order </li>
<li> Menu </li>
<li> About </li>
<li> Home </li>
</ul>
</div>
Navigation Bar CSS:
/* Navigation bar */
.nav {
font-family: 'Roboto', sans-serif !important;
margin-top: 20px;
height: 40px;
background: #000000;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a {
text-decoration: none;
float: right;
display: block;
padding: 10px 50px;
color: white;
outline: none;
}
.nav ul li a:hover {
color: #D3D3D3;
}
.headerBreak {
width: 100%;
height: 0;
border-bottom: 2px solid #000000;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: right;
text-decoration: none;
text-shadow: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 30px;
text-shadow: none;
}
Collapsible Box Script:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Collapsible Box Content:
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h2> MENU // SOUPS </h2>
<p> Blank </p>
</div>
<div data-role="collapsible">
<h2> MENU // BEEF </h2>
<p> Blank </p>
</div>
</div>

Related

How to change tab content according to the selected tab

I have extracted following code from an already developed script. I need to change this text according to clicked item.
As an example if someone clicked Home button I need to change this div to some other text like you have clicked "Home" likewise. Simply I need the navigation in same page to different text portions.
This is providing what I need exactly without one function. I could see that following text portion is static for every time.
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
I hope this could be done using jQuery/JavaScript.
Thanks in advance!!
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
// This is classes that you need to add for it to work
<p class="paragraph">Hover over the "about", "services" or
"partners" link to see the sub navigation menu.</p>
<a class="home" href="#home">Home</a>
// And this is your javascript code
const home= document.querySelector('.home')
const paragraph=document.querySelector('.paragraph')
home.onclick=function(){
paragraph.innerHTML="You are now in a home page"
}
// Hope it helps!

Underlining links

I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through
a: hover {text-decoration: none}
as well as on another.
From below I will provide HTML code as well as CSS code
I ask to help to correct such unexpected error
body{background: #efefef
url("images/geometry2.png");
margin: 0; padding: 0;
font: 16px/24px Arial, Tahoma, Sans-serif;
}
div.mid{
width: 1000px; margin: 0 auto;
}
a:hover {
text-decoration: none;
}
div.header{
background: #101417;
}
/*Шапка сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой сайт</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div class="header">
<div class="mid" >
<header>
<div class="topmenu" style='float:right;height: 70px; line-height: 70px'
</div>
<aside>
Главная
Тренинг
Шаблоны
Контакты
</aside>
</div>
<img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
<div class="afisha"</div>
<img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
<h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
<p>Смотрите здесь<p>
<div class="clear"></div>
</header>
</div>
</div>
<div class="menu">
<div class="mid" >Привет мир</div>
</div>
<div class="conten">
<div class="mid" ></div>
</div>
<div class="footer">
<div class="mid" ></div>
</div>
</body>
</html>
try with
div.mid{
width: 1000px; margin: 0 auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
also clear caches before checking results..
With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).
It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:
a{text-decoration: none}

Why is the CSS Javascript dropdown menu not showing in any browser?

This is the code snippet of the navigational bar I have been trying to make using HTML5, CSS and JavaScript. The Dropdown menu I am attempting to make using CSS and Javascript is similar to the one given as an example in the W3Schools website. This is the code snippet I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="styles/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/>
<div class="container">
<ul class="left">
<li><span class="material-icons icon-design" aria-hidden="true"></span>Home</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Featured</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</li>
</ul>
<ul class="right">
<li><span class="material-icons icon-design"></span>Events & Offers</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="scripts/materialize.min.js"></script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
This is the result I am getting out of this code:
Navigational Bar
But the Dropdown menu does not seem to work whatever I try to do. I am using Materialize CSS here along with Google Icons.
Can anyone tell me where I am going wrong or is there something wrong with my approach?
Your code should work - as evidence in this fiddle - https://jsfiddle.net/67j1sLkt/
Looks like you need to do some more debugging on your end, because this can be a number of issues. The first 2 that would come to mind are:
Absolute positioning off of the screen. You have your .dropdown-content set to position: absolute, but you have to ask yourself relative to what? I would suggest adding position: relative; to your .dropdown class
z-index. This determines the layers of elements. So it could be that the element is being shown below the background or something.
Some debugging help - if you are in Chrome, I would suggest right clicking on the Dropdown button and select Inspect. Now use your developer tools to highlight your #myDropdown and it should tell you where that element is positioned on the page (if it is shown at that point). You should also check your console for errors to see if that is what the issue is.
works for me
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="http://materializecss.com/dist/css/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/>
<div class="container">
<ul class="left">
<li><span class="material-icons icon-design" aria-hidden="true"></span>Home</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Featured</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</li>
</ul>
<ul class="right">
<li><span class="material-icons icon-design"></span>Events & Offers</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" data-activates='myDropdown'>Dropdown</a>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://materializecss.com/bin/materialize.js"></script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
/* function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}*/
$('.dropbtn').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
</script>
</body>
</html>
$(document).ready(function() {
function myFunction(){
$(".dropbtn").click(function() {
$("#myDropdown").toggle();
});
}
this much is fulfill your requirement

Having multiple x3d files on a website

I'm making a website that displays multiple x3d files, the code that I have only shows one file immediately (shown below)
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Heritage Together</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Heritage Together</h1>
<p>
This page will show any two models and display them side by side
</p>
<script>
function redNose()
{
if(document.getElementById('Deer__MA_Nose').getAttribute('diffuseColor')!= '1 0 0')
document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '1 0 0');
else
document.getElementById('Deer__MA_Nose').setAttribute('diffuseColor', '0 0 0');
}
</script>
<ul id="menu">
<li>Areas
<ul>
<li>area1</li>
<li>area2</li>
<li>area3</li>
</ul>
</li>
<li>Types of models
<ul>
<li>model1</li>
<li>model2</li>
<li>model3</li>
<li>model4</li>
<li>model5</li>
</ul>
</li>
</ul>
<x3d width='500px' height='500px'>
<scene>
<viewpoint position="-1.94639 1.79771 -2.89271" orientation="0.03886 0.99185 0.12133 3.75685"></viewpoint>
<Inline nameSpaceName="Deer" mapDEFToID="true"
onclick='redNose();' url="Deer.x3d" />
</scene>
</x3d>
</body>
</html>
And the css file that I have is as follows
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
body{
background-color: black;
}
h1{
color: white;
text-indent: 600px;
}
p{
color: white;
}
What I'm trying to achieve with this website is to have the x3d models that I have located in the 'areas' drop down menu or the 'types of models' menu. And I want to have the two models that the user chooses to be displayed side by side. The question is, is how do I get the models in the drop down menus and how do I display them
Well I'm not sure how you are populating the list of Areas and Models, so lets just use the HTML you have.
We will use the DOM element to populate a list. For this we need to add a unuiqe identifier.
<ul id="menu">
<li>Areas
<ul id="area_list">
<li>area1</li>
<li>area2</li>
<li>area3</li>
</ul>
</li>
<li>Types of models
<ul id="model_list">
<li>model1</li>
<li>model2</li>
<li>model3</li>
<li>model4</li>
<li>model5</li>
</ul>
</li>
</ul>
As you can see the ul elements have ids added to them. This will be the identifyier to see what it's children are.
JS:
var areaList = [],
modelList = [];
function populateLists(){
alert("running");
var areaUL = document.getElementById('area_list').children;
var modelUL = document.getElementById('model_list').children;
for(var i = 0; i < areaUL.length; i++){
areaList.push(areaUL[i].children[0].text);
}
alert("Area Items : " + areaList.length);
};
This will add to the areaList all the area items.. You can see then how to do the same for the models.
I think this is what you're looking for but your question is hard to follow.
JSFiddle
Few things to note :
This can be made easier, convenient with jQuery though not compulsory at all.
If you are using the filesystems listings to populate the list, this will require server side logic to send the data (file listings) to the javascript. There is no native way in Javascript alone to achieve this. (Excluding nodeJS server)

How To Give Entire Area Behind List Item Inside A DIV A Background Color

I'm trying to create a side bar with 4 different options, when the selected option is active (Meaning you are on that specific page), I want the entire area behind the li, but inside the DIV, a background color slightly darker than what is already there but don't know how to achieve this. I have tried making the li itself 100% width of the div but it doesn't affect it at all.
Here is the issue:
As you can see the li does not reach the start and end width of the sidebar div.
Code Here -
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
padding: 0;
text-align: center;
max-width: 100%;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
#searchbar{
padding-bottom: 0.5em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
Your problem is in your #nav. You need to remove the x-margins:
#nav{
margin: 2em 0;
}
You can then do something like this:
#nav li:hover
{
background:#333;
}
But you'll also want to fix this:
#searchbar{
text-align: center;
}
http://jsfiddle.net/5amL4tx5/
Your problem is the #nav rule. If you remove the margins it will fill the entire containing div.
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
As for changing the background to make it darker for the active element. I suggest creating an .active class and assigning that on the fly to the active page based off of the url.
Example active class:
.active {
background: c2c2c2;
}
I think the problem is here (specifically the 1em for left/right margin):
#nav{
margin: 2em 1em;
}
That's going to limit the size of anything within #nav.

Categories