I'm wondering if could anyone help me. I'm stuck with this code where my script toggles the button when I click it and when I click outside the toggled window, it'll disappear, after 2 hours of searching and testing out. I still can't figure it out.
currently the script doesn't even work where the toggled menu doesn't even come out.
When running external JSscript like the TopMenuScript.js
it says referance error, function not defined
ReferenceError: DropdownFunction is not defined
HTML5
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#form1 {
width: 1021px;
}
.TopPanel {}
body,html{
height:100%;
width:100%;
overflow:auto;
margin:0;
padding:0;
}
.TopBannerImage {
background:url(../Images/topPanel_3croped.png) center;
height:315px;
min-width:100%;
background-repeat:no-repeat;
}
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
<ul id="ul_Top">
<li><a class ="active" href="#home">Home</a></li>
<li style="float:right !important">News</li>
<li class ="dropdown">
Dropdown
<div class="dropdown-content" id="MenuDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div class="TopBannerImage">
</div>
<!--All Site Scripts -->
<!-- <script>
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
</body>
Javascript
<script>
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
External Script link with the same script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
css
.TopPanel
{
border-style:ridge;
border-width:2px;
border-color:black;
margin:auto;
padding: 0px;
text-align: center;
background-size:cover;
background-image url(../Images/background.jpg);
background-repeat: no-repeat;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
height: 49px;
}
li{
float:left;
}
li a, .dropbin {
display:inline-block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a, .dropdown:hover .dropbtn {
background-color:black;
}
li.dropdown {
display:inline-block;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f9f9f9;
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;
}
.dropdown-content .dropdown-content {
display:block;
}
body{margin:0;padding:0;}
.show {display:block;}
i've cleaned up and fixed everything for you. Ran it in visual studio 2015 and it works just fine, fixed your UI as well. Main cause of problem, Syntax errors and Spelling errors.
you wanna make sure no syntax errors occurs in the javascript. one wrong synxtax and it'll cause it. i believe we're seeing errors that we're not seeing on your page.
in coding it's case sensitive
-continue coding regardless how much you fail as there's no end in learning
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>
Your HTML5 code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#form1 {
width: 1021px;
}
.TopPanel {}
body,html{
height:100%;
width:100%;
overflow:auto;
margin:0;
padding:0;
}
.TopBannerImage {
background:url(../Images/topPanel_3croped.png) center;
height:315px;
min-width:100%;
background-repeat:no-repeat;
}
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
<ul id="ul_Top">
<li><a class ="active" href="#home">Home</a></li>
<li style="float:right !important">News</li>
<li class ="dropdown">
Dropdown
<div class="dropdown-content" id="MenuDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div class="TopBannerImage">
</div>
<!--All Site Scripts -->
<!-- <script>
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script> -->
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="JavaScript/TopMenuScript.js" ></script>
</body>
</html>
Your JavaScript Code
function DropdownFunction() {
document.getElementById("MenuDropdown").classList.toggle("show");
}
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Your css code
.TopPanel
{
border-style:ridge;
border-width:2px;
border-color:black;
margin:auto;
padding: 0px;
text-align: center;
background-size:cover;
background-image url(../Images/background.jpg);
background-repeat: no-repeat;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 49px;
}
li{
float:left;
}
li a, .dropbin {
display:inline-block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a, .dropdown:hover .dropbtn {
background-color:black;
}
li.dropdown {
display:inline-block;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f9f9f9;
min-width:160px;
box-shadow : 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-content a {
color:white;
padding:12px 16px;
text-decoration: none;
display:block;
text-align:left;
}
.dropdown-content .dropdown-content {
display:block;
}
body{margin:0;padding:0;}
.dropdown-content a:hover {background-color:#f1f1f1}
.show {display:block;}
#BannerImage {
background-image: url('/Images/topPanel_3croped.png');
width:100%;
height:100%;
background-repeat:no-repeat;
}
#my-div{
margin-left:auto;
margin-right:auto;
}
Related
I have been struggling for the past few hours with a positioning problem. I have been following a basic tutorial on how to compose an image gallery from w3c: How to Create a Tabbed Image Gallery I am using bootstrap's grid system for layout, and I have been very careful not to use bootstraps class names where it might interfere with those provided in the tutorial. The reason is that I see myself using bootstrap for layout, but I want to be able to customize things, as well. Basically, there is a div tag with the class title "mycontainer" with display set to none, which is then set to display: block in the javascript section. That part works just fine.
The problem is that the tutorial includes this little X, using the html code × I will include the full code below. The × is supposed to be an X-out for the image, which is enlarged when a user selects one of several top images (here is a picture of it). I circled the xelement The problem is that no matter what I do, I cannot seem to control the positioning of that X. I have tried inline style, to no avail. I tried doing it exactly as the tutorial recommended, which was to use a css class to position, but with that I wasn't even able to control the coloring. At least with inline styles, I was able to color the element. But padding-left, margin-left, text-align:center. I tried separately and all at once. None of these work, and I just simply cannot figure this out. Here is the javascript, which is included in the section. Thanks a million times for your time.
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
Here is the CSS:
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
**.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}**
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
And here is the entire page with HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Dream of Bonsai</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>
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<!--The grid of four equal columsn-->
<div class="container">
<h1 style="text-align:center">Image Gallery</h1>
<hr>
<br>
<div class="row">
<div class="col-lg-3">
<img src="images/cherrySquare.jpg" id="column1" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/beachSquare.jpg" id="column4" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/bonsai4.jpg" id="column3" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/awesomebonsaiSquare.jpg" id="column2" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
</div>
<!--End of the row-->
<div class="mycontainer">
<!--close the image-->
<span class="closebtn" onClick="this.parentElement.style.display='none'" style="color:hotpink;padding-left:50%;padding-top:35%;margin-top:25%;padding-bottom:45%;">×</span>
<!--Expanded image-->
<img id="expandedImg" style="width:55%;height:55%;margin-left:25%;" >
<!--Image text-->
<div id="imgtext"></div>
</div>
</div>
</body>
</html>
I took a look at your CSS. I copied your code and I noticed you wrote your CSS comments with HTML syntax and it's messing with your code change those and and it should work.
I am a beginner, so appreciate the patience on this one. I am trying to embed a really simple tab structure on my website. I'm not sure why it is not working. Here is the code below.
My guess it is something to do with the JS, but again, I am only really new to this.
Any help would be greatly appreciated! Thanks!
(I have used code found on CodePen for this)
<html lang="en" >
<head>
<script>$(function () {
var activeIndex = $('.active-tab').index(),
$contentlis = $('.tabs-content li'),
$tabslis = $('.tabs li');
// Show content of active tab on loads
$contentlis.eq(activeIndex).show();
$('.tabs').on('click', 'li', function (e) {
var $current = $(e.currentTarget),
index = $current.index();
$tabslis.removeClass('active-tab');
$current.addClass('active-tab');
$contentlis.hide().eq(index).show();
});
});</script>
<meta charset="UTF-8">
<title>CodePen - Simple tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>.tabs {
margin: 20px;
padding: 0;
list-style: none;
position: relative;
border-bottom: 1px solid #ccc;
}
.tabs .active-tab {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: none;
position: relative;
color: black;
}
.tabs .active-tab:after {
width: 100%;
height: 2px;
position: absolute;
content: "";
bottom: -0.1em;
left: 0;
background: white;
}
.tabs li {
display: inline-block;
cursor: pointer;
color: #3a5ea7;
padding: 5px 10px;
}
.tabs li:first-child {
margin-left: 10px;
}
.tabs-content {
margin: 20px;
padding: 0;
list-style: none;
}
.tabs-content li {
display: none;
}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="tabs">
<li class="active-tab">First tab</li>
<li>Second tab</li>
<li>Third tab</li>
</ul>
<ul class="tabs-content">
<li>Content of first tab</li>
<li>Content of second tab</li>
<li>Content of third tab</li>
</ul>
<!-- partial -->
</body>
</html>
There are lots of stuff happening there.
At first sight, you are not using JavaScript, you are using a library called JQuery, so you need to "import" it, otherwise that code won't work.
It must be placed before your JQuery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I would recommend placing the code you've written at the bottom of the page, before the closing body tag
---> HERE
</body>
Improvements:
Separating your code into "modules" or smaller chunks.
Everything inside style tag, cut it and paste it in a new file, for example, style.css.
Everything inside script tag, cut it and paste it in a new file, for example, app.js.
After that import them, the JavaScript file, before the closing body tag, like mentioned before, and the css next to the others styles imports.
So, you'll end up with something like this:
Top of the page, inside head tag
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Bottom of the page, before closing body tag
...
<script src="./app.js"></script>
</body>
You can check which external sources are being used (like JQuery or Bootstrap) by clicking on the settings inside a Codepen environment. This particular script use JQuery, this can be imported in your <head> with a <script> tag using the online hosted version (CDN) or manually downloading it.
You can use this for now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
you can use this code for creating your simple tabs
(function() {
'use strict';
var tabMenus,
tabContents;
tabMenus = document.querySelectorAll('.tab_menu_item_link');
tabContents = document.querySelectorAll('.tab_content');
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].className = 'tab_menu_item_link';
}
this.className = 'tab_menu_item_link is-active';
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className = 'tab_content';
}
document.getElementById(this.dataset.id).className = 'tab_content is-active';
});
}
}());
body {
font-size: 14px;
line-height: 1.5;
color: #333;
}
ul , li {
padding : 0;
margin: 0;
list-style: none
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: bottom;
}
.clearfix {
display: table;
clear: both;
}
.container {
width: 400px;
margin: 0 auto;
padding: 50px 0;
background: #fff;
}
.tab_menu {
width: 100%;
}
.tab_menu_item {
float: left;
margin-right: 2px;
text-align: center;
}
.tab_menu_item:last-child {
margin-right: 0;
}
.tab_menu_item_link {
display: block;
width: 100px;
padding: 10px;
background: #fff;
border-radius: 5px 5px 0 0;
border: 1px solid #888;
border-bottom: none;
box-sizing: border-box;
color: #888;
transition: 0.3s;
}
.tab_menu_item_link:hover, .tab_menu_item_link.is-active {
background: #888;
color: #fff;
}
.tab_container {
border: 1px solid #888;
}
.tab_content {
padding: 20px;
display: none;
}
.tab_content.is-active {
display: block;
-webkit-animation: fade 0.5s ease;
animation: fade 0.5s ease;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">
<div class="tab">
<ul class="tab_menu clearfix">
<li class="tab_menu_item">About</li>
<li class="tab_menu_item">Works</li>
<li class="tab_menu_item">Contact</li>
</ul>
<div class="tab_container">
<div class="tab_content is-active" id="about">
<p>some content about ...</p>
</div>
<div class="tab_content" id="works">
<p>some content works ...</p>
</div>
<div class="tab_content" id="contact">
<p>some content contact ...</p>
</div>
</div>
</div>
</div>
you can see this sample in my codepen:
codepen.io
My code shows and hides divs depending on which button the user clicks, implemented by simple myElement.style.display = 'none'; statements.
Can transitions be used when these divs are shown/hidden? I.e. when button-1 is clicked, text relating to button-1 fades into view; when button-2 is clicked, text relating to button-2 fades into view as the previous button-1 text fades out?
As is, the divs snap in and out of view. I am looking for a smoother transition.
I have attempted it with the code which is shown commented out. It just doesn't work. Any tips are much appreciated, thank you.
JS
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
respoding_div = document.getElementById(divId);
if(visibleDivId == divId) {
respoding_div.style.display = 'block';
// respoding_div.style.transition = 'display 0.3s ease-in block'
}
else {
respoding_div.style.display = 'none';
// respoding_div.style.transition = 'display 0.3s ease-in none'
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
<div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
<div class='accordion' onclick="divVisibility('Core1');">
<img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
</div>
<div class='accordion' onclick="divVisibility('Core2');">
<img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
</div>
<div class='accordion' onclick="divVisibility('Core3');">
<img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
</div>
</div>
<div class="all_divs">
<div id="Core1" class="subdiv" style="display:none;">TEXT #1</div>
<div id="Core2" class="subdiv" style="display:none;">TEXT #2</div>
<div id="Core3" class="subdiv" style="display:none;">TEXT #3</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding-left:100px;
padding-right:100px;
padding-top: 20px;
width: 80px;
}
.accordion:hover {
opacity: 0.7;
}
.accordion img {
width: 50px;
margin: 0 auto;
}
.all_divs > div {
color: #232f3e;
width: 95%;
text-align: center;
background-color:#fafafa;
position: absolute;
padding:2%;
border-top: 2px solid #e6e7e8;
}
h1{
font-weight: lighter;
color: #232f3e;
}
td{
padding: 2%;
}
it will not work not because of the syntax or something wrong in JS but because of the display property can't be transitioned from state to another. u can use opacity for that.
I am trying to place a responsive sticky footer over a full screen slideshow. For the sticky footer I am using this solution ( a Javascript and CSS solution ) Sticky footer link. Slideshow is a Javascript slideshow. But I am not able to get the sticky footer to work with the slideshow. Once I remove the slideshow, the sticky footer works!. I am not sure what is going on here but I do think that it has to do something with the absolute positioning of the footer. Here is a live link to the problem link with the problem Is there a way I can make the sticky footer work ?
Here is my CSS and HTML...
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<meta content="by RT." name="author">
<meta content="Copyright © 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Home Page title</title>
<meta content="Photographer Website" name="keywords">
<meta content="Home Page Description" name="description">
<link href="/styles.css" rel="stylesheet" type=
"text/css">
<script src="/jquery-2.1.4.min.js" type=
"text/javascript">
</script>
<script src="jquery-bgstretcher-3.3.1.min.js" type=
"text/javascript">
</script>
<style>
.bgstretcher-area {
text-align: left;
height:100%;
}
.bgstretcher-page {height:100%;}
.bgstretcher-container{height:100%;}
.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
height:100%;
}
.bgstretcher,
.bgstretcher ul,
.bgstretcher li {
left: 0;
top: 0;
height:100%;
}
.bgstretcher ul,
.bgstretcher li {
position: absolute;
}
.bgstretcher ul,
.bgstretcher li {
margin: 0;
padding: 0;
list-style: none;
}
/* Compatibility with old browsers */
.bgstretcher {
_position: absolute;
}
.bgs-description-pane {
display: block;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 10000;
padding: 15px;
color: #ffffff;
font-size: 14px;
}
.footer{
margin: 0 auto;
text-align:center;
clear:both;
position: absolute;
width: 100%;
bottom:0;
height:10%;
color:#FFF;
}
/* NAV */
header {
background-color: rgba(29, 11, 9, 0.6);
border-radius:0px;
padding-top:.5rem;
padding-bottom:.25rem;
box-shadow: 0 0 26px rgba(0, 0, 0, 0);
}
.nav {
width:100%;
text-align:center;
list-style:none;
position:relative;
z-index:10;
margin-top:0.35rem;
}
.nav li {
padding:0px 0px;
text-decoration:none;
font-size:.85rem;
text-align:left;
position:relative;
display:inline-block;
margin-left:2rem;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.submenu > li:hover > a{
background-color : #5c331a;
}
.nav li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#a86b4b!important;
}
p{color:#FFF;}
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<ul class="nav">
<li>
HOME
</li>
<li> MY GALLERIES
</li>
<li> SEARCH
</li>
<li> ABOUT ME
</li>
</ul>
</nav>
</header>
<article>
<section>
<div class="intro">
<p>Welcome to my gallery!</p>
<div class="underline"></div>
</div>
</section>
</article>
<script type="text/javascript">
jQuery(function($){
$("body").bgStretcher({
images: ["1-1.jpg", "2-1.jpg"],
imageWidth: 1024,
imageHeight: 768
});
});
</script>
<div class="push"></div>
<div class="footer">
<div id="seeker">
<form accept-charset="utf-8" action="/root/photos/search" id=
"PhotoCmspageForm" method="get" name="PhotoCmspageForm">
<input id="search" name="search" type="text" value=
""><input id="find" type="submit" value="Search">
</form>
</div>
<p class="footnote">Copyright © 2015 rajeevthomas.com</p>
</div>
</div>
<script>
$('a').each(function() {
if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
$(this).attr('href', $(this).attr('href') + '/');
}
});
</script>
<script>
var bumpIt = function() {
$('body').css('margin-bottom', $('.footer').height());
},
didResize = false;
bumpIt();
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if(didResize) {
didResize = false;
bumpIt();
}
}, 250);
</script>
</body>
</html>
I am not able to get the checkbox in this page to be checked.
<html>
<body>
<form name="f">
<input type="checkbox" name="vehicle" value="Bike" /> 1<br /></li>
</form>
</body>
</html>
My popup.js is below:
function click(e) {
chrome.tabs.executeScript(null,
{code:"document.body.f.vehicle.checked='true'"});
window.close();
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});
In the console log I keep getting the error: Uncaught TypeError: Cannot read property 'vehicle' of undefined.
My popup.html is below:
<!doctype html>
<html>
<head>
<title>Set Page Color Popup</title>
<style>
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: white;
}
div:first-child {
margin-top: 0px;
}
div {
cursor: pointer;
text-align: center;
padding: 1px 3px;
font-family: sans-serif;
font-size: 0.8em;
width: 100px;
margin-top: 1px;
background: #cccccc;
}
div:hover {
background: #aaaaaa;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="1">1</div>
</body>
</html>
Any help would be appreciated.
It should be like this,
document.f.vehicle.checked='true';
http://jsfiddle.net/PnXsE/