Size of HTML Box in Google site - javascript

I am trying to insert a collapsible table with HTML Box in a Google site. The code of the collapsible table is from http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table. The code is
<html>
<head>
<style>
.container {
background-color:deepskyblue;
width: 600px;
height:50px;
position: relative;
}
.title {
font-size: 16pt;
font-weight: bold;
color: aliceblue;
position: absolute;
left: 20px;
top:25%;
}
#opened {
display: none;
}
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}
.arrow-up, .arrow-down {
position: absolute;
top: 40%;
right:15px;
}
.hidden-content {
margin:0 0 20px 0;
padding: 10px 20px 10px 20px;
border: 1px solid deepskyblue;
border-top: none;
background-color: aliceblue;
}
</style>
<script>
var collapse;
var uncollapse;
var turnOn = true;
// Chrome Sites Fix
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
function tempChromefix() {
// To turn off set true to false
if (turnOn == false && is_chrome) {
document.getElementById("opened").style.display = "block";
document.getElementById("closed").style.display = "none";
} else {
return false;
}
}
function uncollapse() {
document.getElementById("closed").style.display = "block";
document.getElementById("opened").style.display = "none";
}
function collapse() {
document.getElementById("opened").style.display = "block";
document.getElementById("closed").style.display = "none";
}
</script>
</head>
<body onLoad="tempChromefix()">
<table id="closed">
<tr>
<td>
<div class="container" onclick="collapse()">
<div class="title">Click to open drop-down</div>
<div class="arrow-down"></div>
</div>
</td>
</tr>
</table>
<table id="opened">
<tr>
<td>
<div class="container" onclick="uncollapse();">
<div class="title">Click to close drop-down</div>
<div class="arrow-up"></div>
</div>
<div class="hidden-content">
<h3>It works!</h3>
<p>This content is to be hidden from the user until clicked. </p>
</div>
</td>
</tr>
</table>
</body>
</html>
The problem I am facing is with width of the table. I would like it to have maximum possible width depending on the screen size. For example, I would like to have the table expand to the screen size in my MacBook as well as in iMac.
The logical way is to use the width: 100% so that the table inherits its parent's screen size. However it seems that inside an HTML Box the different categories does not inherit parent's attribute.
For example in the .container section, if I use width: 100%, it collapses to zero width instead of full size of the screen.
Would appreciate any help!
--- Madhur

I had this issue also, and eventually figured out (the very un-intuitive) way is to hover over the HTML box, and then click on the "Align center" icon. When you save, elements will be the full width (my div's were at least).

Related

jQuery contents() when used with 'iframe' , text disappears in firefox

I'm trying to make a website, somewhat similar to jsbin.com.
Here is a snap of how it looks in ...
Firefox -
ScreenShot
Chromium - ScreenShot
Take a look at code !
$(".toggleButton").hover(function() {
$(this).addClass("hightlightedButton");
}, function() {
$(this).removeClass("hightlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("hightlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 14);
$(".panel").width(($(window).width() / 2) - 5);
$("iframe").contents().find("html").html($("#htmlPanel").val());
body {
font-family: sans-serif;
padding: 0;
margin: 0;
}
#header {
width: 99.2%;
background: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo {
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width: 244px;
margin: 0 auto;
}
.toggleButton {
float: left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.hightlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float: left;
}
iframe {
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel" name="textarea">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
(Take a note that when you run the above code with build-in run function of Stack over, the 'iframe' doesn't appear.)
Check out exact code : 'Paste Bin'
Problem Description
As you can see in Screenshots of Firefox Browser the Hello World! is not visible in the second tab, but in Screenshots of Chromium Browser can see it (in the second half of screen).
Main Line of code (I think) which needs to edited is in <script type="text/javascript"></script> (Tag).
$("iframe").contents().find("html").html($("#htmlPanel").val());
How to get the output same in Firefox, like it's in other browsers (Chromium)?
Extra:
Solutions I tried, that are not working
iframe content disappears on Firefox (from stack-overflow)
Jquery contents() change html for iframe disappear in firefox (from stack-overflow)

How to prevent a click on a '#' link from jumping but still execute the rest of the code

I'm trying to make a clickable <td>, end up with below code :
HTML :
<table class="coolTable">
<tr>
<td>
<a id='parent1' href='#child1' class="parent">G</a>
<div id="child1" class="child child-dropdown"></div>
</td>
</tr>
<tr>
<td>
<a id='parent2' href='#child2' class="parent">C</a>
<div id="child2" class="child child-dropdown"></div>
</td>
</tr>
</table>
JQUERY :
$(document).ready(function(){
$(".parent").click(function() {
$(this).parent(".child").empty();
var data="<p>A</p><p>B</p>"
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".child");
// Display the returned data in browser
resultDropdown.html(data);
});
$(document).on("click", ".child p", function(){
$(this).parents(".parent").find('a').val("A");
$(this).parent(".child").empty();
});
});
CSS :
a {
color:white;
text-decoration:none;
}
.child p {
margin: 0;
padding: 5px 8px;
border: 1px solid #CCCCCC;
cursor: pointer;
background : white;
}
.child p:hover {
background: #f2f2f2;
}
.child-dropdown {
position: absolute;
display: none;
z-index: 9;
color: red;
}
.child-dropdown:target {
display: block;
}
table.coolTable td {
background-color: green;
color: green;
margin: 0;
padding: 5px 8px;
}
table.coolTable td:hover {
background-color: green;
color: green;
}
td a {
display: block;
width: 100%;
}
https://jsfiddle.net/kakatua/cnej7dfs/
If i clicked a <td> it will execute the rest of the code and show me an option for me to replace the innerHTML of an <a>.
but when i implemented this on the actual web page, when i clicked the <td> it will jump to the bottom of the page (and will show my dropdown list).
i dont want the page to jump after clicked the <td>
i've used preventDefault, a="#/", and yes it will not jump, but also, its not returning my dropdown list.
is there any way to prevent this jumping thing but still execute my dropdown list?
or anyone can suggest me to make clickable <td> without using <a>
Thanks!
Updated your code, removed the using of the method val that uses only for forms, removed showing dropdown by adding hash in the link, it was replaced just adding class active that makes dropdown visible.
PS Sorry for my bad English...
$(document).ready(function(){
$(".parent").click(function(e) {
e.preventDefault();
const $link = $(this);
const data="<p>A</p><p>B</p>"
const inputVal = $link.data('selected', '');
const resultDropdown = $link.siblings(".child");
resultDropdown.html(data).addClass('active');
});
$(document).on("click", ".child p", function(){
const $selected = $(this);
const $link = $selected.parents('td').find('.parent');
$link.text($selected.text());
$link.data('selected', $selected.text());
$selected.parent(".child").removeClass('active');
});
});
a {
color:white;
text-decoration:none;
}
.child p{
margin: 0;
padding: 5px 8px;
border: 1px solid #CCCCCC;
cursor: pointer;
background : white;
}
.child p:hover{
background: #f2f2f2;
}
.child-dropdown{
position:absolute;
display:none;
z-index:9;
color:red;
}
.child-dropdown.active{
display:block;
}
table.coolTable td {
background-color:green;
color:green;
margin: 0;
padding: 5px 8px;
}
table.coolTable td:hover {
background-color:green;
color:green;
}
td a {
display:block;
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="coolTable">
<tr>
<td>
<a id='parent1' href='#child1' class="parent">G</a>
<div id="child1" class="child child-dropdown"></div>
</td>
</tr>
<tr>
<td><a id='parent2' href='#child2' class="parent">C</a>
<div id="child2" class="child child-dropdown"></div></td>
</tr>
</table>
Please add This new 2 css
table.coolTable td {
position: relative;
}
.child-dropdown {
top: 0px;
left: 29px;
}
By Using Anchor Tag(): Use "javascript:void(0)" and id to write click function in JavaScript like following:
login
$('#toCallFunction').click(function(){
doSomething();
alert('something');
}

CSS Expand / Contract Animation to Show/Hide Content

I am trying to create a box that can expand and collapse with a simple slide out animation. If you run the example below, the idea is that it starts with one red line and when you click the button it separates into two read lines and gently expands to reveal the content like pulling a draw out of a table.
I've tried both transform, animation, relative: positioning with top, and i'm unable to get the desired effect.
The containing box should expand in size
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-contract {
border-bottom: 1px solid red;
}
.expand-contract {
transform: translateY(-100%)
overflow: hidden;
}
#keyframes slide-in {
100% {
transform: translateY(0%)
}
}
.expanded {
background-color: green;
animation-name: slide-in;
animation-duration: 1s;
}
.collapsed {
background-color: red;
transform: translateY(-100%)
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>
You can achieve this using the CSS transition along with toggled styles. Initially you may think to transition the height (from 0 to initial so that it expands dynamically based on height) but unfortunately CSS transition doesn't properly handle this.
Instead, you can wrap it in a container of its own with overflow: hidden and then use a margin-top: -100% to hide it, and 0 to show it.
Here is your code with this modification:
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-container {
overflow: hidden;
}
#expand-contract {
border-bottom: 1px solid red;
margin-top: -100%;
transition: all 1s;
}
#expand-contract.expanded {
background-color: green;
margin-top: 0;
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>
hope to help you
HTML
<div class="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div class="expanded" id="expand-contract">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
</div>
<button class="header" onclick="expandContract()">Expand/Contract</button>
css
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .expanded {
display: none;
padding : 5px;
}
js
function expandContract() {
$header = $(".header");
$content = $("#expand-contract")
$content.slideToggle(500, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
};
see here enter code here

Undefined JavaScript

Why do I get undefined in alert() in the following code:
var header = document.getElementById("header");
var navigationBar = document.getElementById("navigationBar");
var buttons = document.getElementsByClassName("button");
alert(header.innerWidth);
alert(navigationBar.innerWidth);
.header {
background-color: #263238;
border-bottom: solid 0.25em #37474F;
border-radius: 0;
padding: 0.5em;
display: block;
}
.navigationBar {
display: inline-block;
}
<div class="header" id="header" align="right">
<div class="navigationBar" id="navigationBar">
</div>
</div>
It's because DOM elements don't have an innerWidth and innerHeight. That's a window property.
Elements don't have innerWidth/innerHeight. You might have wanted offsetWidth/offsetHeight, or getComputedStyle(x).width/height (which will give you a string, almost certainly ending in px, for the outer width of the element).
Also note Kuldeep Singh's answer about clientWidth/clientHeight.
Example (without clientWidth/clientHeight):
var header = document.getElementById("header");
var navigationBar = document.getElementById("navigationBar");
var buttons = document.getElementsByClassName("button");
console.log(header.offsetWidth);
console.log(navigationBar.offsetWidth);
console.log(getComputedStyle(header).width);
console.log(getComputedStyle(navigationBar).width);
.header {
background-color: #263238;
border-bottom: solid 0.25em #37474F;
border-radius: 0;
padding: 0.5em;
display: block;
}
.navigationBar {
display: inline-block;
}
<div class="header" id="header" align="right">
<div class="navigationBar" id="navigationBar">
</div>
</div>
(On old IE, instead of getComputedStyle(x), you'd use x.currentStyle.)
try clientWidth instead of innerWidth .
There is no innerWidth on elements, that's a jQuery function. Instead, look for clientWidth:
document.addEventListener('DOMContentLoaded', function() {
var header = document.getElementById("header");
var navigationBar = document.getElementById("navigationBar");
var buttons = document.getElementsByClassName("button");
console.log(
header.clientWidth,
navigationBar.clientWidth
);
});
.header {
background-color: #263238;
border-bottom: solid 0.25em #37474F;
border-radius: 0;
padding: 0.5em;
display: block;
}
.navigationBar {
display: inline-block;
}
<div class="header" id="header" align="right">
<div class="navigationBar" id="navigationBar" ></div>
</div>

How to center all list's elements to parent div

I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.

Categories