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)
Related
I'm trying to create a slideshow for my website, where it doesn't use any timer of a kind because that's what I have right now, but I want the user to be able to use the navigational buttons. I've been trying to google it but everything I come across seems really complex and I can't get a hold of it. So was wondering if anyone here would be willing to explain how I would do that.
Here a picture of the situation is and how I'm gonna use it. It's an overlay.
does you website support bootstrap if its is you can use bootstrap Carousel slider.
you can stop auto slide by setting the property
$('.carousel').carousel({
interval: false
});
USE THIS CODE FOR NAVIGATION PANEL WITH DROP DOWN FUNCTION
body
{
/*background: url (whatever you want to use) no-repeat; */
background-size: cover;
font-family: Arial;
color: white
}
ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li
{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a
{
color: white;
display: block;
}
ul li a:hover
{
background color:green;
}
ul li ul li
{
display: none;
}
ul li:hover ul li
{
display: block;
}
<html>
<link href ='style.css' rel= 'stylesheet' >
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Things to do</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Contact</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>News</a>
<ul>
<li><a>First</a></li>
</ul>
</li>
</html>
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>
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.
I am having some trouble using jQuery to hide my vertical menu. I just learned jQuery, so I am fairly new to using it. I can't get jQuery to modify anything (change color for example, using any action.. mouseenter(), click() etc)
Help is much appreciated.
EDIT: I am getting errors in JSLint.. trying to use jQuery in brackets editor. Not sure what to do :/ First error is on line 1 using $ before defined.. any help would be awesome
This code is simply trying to change the green "link1, link2, link3" text from green to purple when mousing over "Program"
***also, is there a way to easily reduce the size of my ul li items? The area that I can currently click is larger than the text. I tried modifying my display: property, but that messes up the layout of my list.. *******
jQuery
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
('#headerMenu ul li a').Color('purple');
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type='text/javascript' src='script.js'></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
DROP
<ul>
<li><a href='#'>LINK 1</a></li>
<li><a href='#'>LINK 2</a></li>
<li><a href='#'>LINK 3</a></li>
</ul>
</li>
<li>LOGIN</li>
<li>ABOUT</li>
</ul>
</div>
<div class="wrapper">
<div id="mainPhoto"> fffffff
<div> change color</div>
</div>
<div id="mainScrollUp"> </div>
</div>
</body>
</html>
css code
.header {
background-color: skyblue;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
}
#headerMenu > li {
display: inline-block;
text-align: center;
}
#headerMenu li a {
text-decoration: none;
color: black;
padding: 2rem;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#headerMenu ul {
text-decoration: none;
list-style: none;
display: block;
color: red;
padding-left: 0;
position:absolute;
}
#headerMenu ul li a{
color:green;
}
#mainPhoto {
height: 650px;
width: 100%;
background-color: bisque;
color:palevioletred;
}
#mainScrollUp {
z-index: 1;
height: 1000px;
width: 100%;
background-color: aqua;
clear: both;
}
.fixed {
position: fixed;
top: 0;
}
error is on line 1 using $ before defined
You forgot to define jQuery. Try and add the following line to your header tag in your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Put it before your own script.js please, that way jQuery is defined before calling it in your script.
Understanding your vertical submenu goal, I came up with this:
https://jsfiddle.net/wsj59p20/
Hope it helps!
I don't think this is what you want but it fixes some of your syntax
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
$(this).find('ul>li>a').css('color', 'purple');
});
});
Also, your "using $ before defined" error seems to because you aren't loading jQuery at all in your sample code.
In the following drop down menu there are java script functions calling by onmouseover="openelement('menu2')" , onmouseover="openelement('menu3')" etc.I can't understand what this 'menu2' , 'menu3' is.Can someone please explain me this. The whole program as following.
Drop down Menu CSS & JS
<!--The CSS code.-->
<style type="text/css" media="screen">
#nav {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 80px;
background: lavender;
color: black;
text-align: center;
text-decoration:none;
}
#nav li a:hover {
background: grey;
}
#nav ul {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
border: 1px solid #ffffff
}
#nav ul li a{
position: relative;
margin: 0;
padding: 5px 10px;
width: 80px;
text-align: left;
background: lavender;
color: #000000;
}
#nav li ul li {
clear: both;
}
</style>
<!--The end of the CSS code.-->
<!--The Javascript menu code.-->
<script type="text/javascript">
//variables' declaration
var timeout = 500;
var timer = 0;
var item = 0;
//function for opening of submenu elements
function openelement(num)
{
keepsubmenu()
//checks whether there is an open submenu and makes it invisible
if(item){ item.style.visibility = 'hidden';}
//shows the chosen submenu element
item = document.getElementById(num);
item.style.visibility = 'visible';
}
// function for closing of submenu elements
function closeelement()
{
//closes the open submenu elements and loads the timer with 500ms
timer = window.setTimeout("if(item) item.style.visibility = 'hidden';",500);
}
//function for keeping the submenu loaded after the end of the 500 ms timer
function keepsubmenu()
{
if(timer){
window.clearTimeout(timer);
timer = null;
}
}
//hides the visualized menu after clicking outside of its area and expiring of the loaded timer
document.onclick = closeelement;
</script>
<!--END of CSS code-->
</head>
<body>
<!--HTML code for the menu -->
<ul id="nav">
<li>Home
</li>
<li>Tutorials
<ul id="menu2" onmouseover="keepsubmenu()" onmouseout="closeelement()" style="visibility: hidden; ">
<li>CSS</li>
<li>Flash</li>
</ul>
</li>
<li>More
<ul id="menu3" onmouseover="keepsubmenu()" onmouseout="closeelement()">
<li>About Us</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
<div style="clear:both"></div>
<!--the end of the HTML code for the menu -->
39 is the ASCII code for apostrophe and ' is the syntax for inserting ASCII characters into HTML
this syntax is mostly used to insert characters that has meaning in HTML / JavaScript as is (and to prevent Cross Site Scripting attacks) - such as < and > characters
in your case you should replace the ' occurrences inside the event handlers with apostrophes (') so it acts as it should in Javascript
That's just an apostrophe, probably from a bad copy/paste. It can happen if you write your code in Word for example or you copy from a textarea that applies special formatting. What it should be is single quotes since the function expects a string.
"openelement('menu3')"