I have a floating layer that activates through this link:
BUTTON
This is the floating layer:
<div id="FloatingLayer">
<div id="closeX"> x
</div>
The script:
<script language="JavaScript1.2">
function ToggleFloatingLayer(DivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[DivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(DivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[DivID].style.visibility = iState ? "visible" : "hidden";
}
}
</script>
I want the "BUTTON" to open and also close this floating layer. So it opens and closes in the same link. But right now I can only close it through that "closeX" x. How can I do it?
jQuery is standard cross-browser and feature-rich JavaScript library
Learning and Using jQuery in your applications is the best across all business apps
Here are links for api and leaning sites
http://api.jquery.com/
http://learn.jquery.com/about-jquery/how-jquery-works/
Snippet is below for you
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function toggleFloatingLayer(divID) {
$("#" + divID).toggle();//its only single line to manage toggling for all browsers
}
</script>
</head>
<body>
BUTTON
<div id="FloatingLayer" style="display:none;border:solid 2px silver;">
<div id="closeX" style="background:#efefef"> x
</div>
<div>
Test content of Floating layer
</div>
</div>
</body>
</html>
Related
I'm using the navigo vanilla javascript router library to make a single page application and I'm trying to implement this part.
router
.on('/products/list', function () {
// display all the products... here i need to hide and show
})
.resolve();
I thought the thing I need to do is hide and show some divs so how do i set all divs as invisible or make everything on the page invisible.
<body>
<div id="homepage">
<h1>home</h1>
</div>
<div id="ad">
<h1>advert</h1>
</div>
<div id="errorpage">
<h1>error</h1>
</div>
<div class="state">
<span class="users">?</span> online
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/navigo#7.1.2/lib/navigo.min.js"></script>
<script src="script.js"></script>
</body>
Hide DIV using id
<div id="homepage">
<h1>home</h1>
</div>
using JQuery
$('#homepage').hide();//hide
$('#homepage').show();//Show
Using Javascript
document.getElementById('homepage').style.display = 'none'; //hide
document.getElementById('homepage').style.visibility = 'hidden'; // hide
document.getElementById('homepage').style.display = 'block'; // Show
document.getElementById('homepage').style.display = 'inline'; // Show
document.getElementById('homepage').style.display = 'inline-block'; // Show
document.getElementById('homepage').style.visibility = 'visible'; // Show
If you want to hide all the div in page
Using JQuery
$('div').hide();//hide
Using Javascript
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = 'none';
}
The easiest and most efficient way would be putting the products in a container (i.e. div) and set its display (to none and block) or it's visibility, or opacity (whichever floats your boat):
<div id="products">
....
</div>
JS:
to hide:
document.GetElementById("products").style.display = "none";
to show:
document.GetElementById("products").style.display = "block";
function swapstylesheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet)
}
<!--style.css-->
body{
background-color:#ffffff;
}
li{
color:#000000;
}
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<li type="button" onclick="swapstylesheet('stylenight.css')">Night Mode</li>
<li type="button" onclick="swapstylesheet('style.css')">Day Mode</li>
</body>
I am trying to implement a button on my HTML website that toggles the CSS for the current website and all of the other pages on my site using JavaScript. The problem is that when I change to the other CSS file and then switch the page, it goes back to the original CSS file (keep in mind that I am new to JavaScript). If it's any help, this will be toggling day/night mode.
<!--stylenight.css-->
body{
background-color:#000000;
}
li{
color:#ffffff;
}
You will have to set cookies in the browser when the user clicks the Day/Night Mode Button.
and read the cookie value to set the Mode when user comes back to your original page.
You can read more about setting and reading cookies in javascript here:
https://www.w3schools.com/Js/js_cookies.asp
You are looking are something like this on clicking the button:
document.cookie = "mode=Day;";
Also you will need a function to read the cookies when the page loads:
(From How do I call a JavaScript function on page load?)
window.onload = function() {
readCookieAndSetMode();
};
And on readCookieAndSetMode() you should read the cookie using
var x = document.cookie;
and depending on x swap the CSS (I leave that part to you).
All the above answers is not right, i will write here some code for bloggers to apply dark mode on own blogs..and remains until button pressed... check this on my blog Hindi Tutor working well.. 100% working, and dark mode is not going to off when you refresh the page..
<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
var cc = document.body.className;
if (cc.indexOf("darktheme") > -1) {
document.body.className = cc.replace("darktheme", "");
if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
localStorage.setItem("preferredmode", "light");
} else {
document.body.className += " darktheme";
if (opener) {opener.document.body.className += " darktheme";}
localStorage.setItem("preferredmode", "dark");
}
}
(
function setThemeMode() {
var x = localStorage.getItem("preferredmode");
if (x == "dark") {
document.body.className += " darktheme";
}
})();
//]]>
</script>
<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}
<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
</div>
I basically would like to disable the Rollout and rollover function after I clicked. I tried an if argument but I can't get it to work. Sorry I am a real beginner in this.
I already achieved to change a text with the click in mother div but still can't disable other functions.
<!DOCTYPE html>
<html>
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<script>
var Enabled = true;
function down()
{
document.getElementById("button").src = "images/click.png"; }
var Enabled = true;
function rollover()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/on.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
var Enabled = true;
function rollout()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/off.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
<script/>
<body>
<h1>My Web Page</h1>
<div class="test1">
<button type="button" onclick="myFunction()">Try it</button>
</div>
<div class="row">
<div class="col"><p id="demo">A Paragraph</p></div>
<div class="col"><img src="images/off.png" id="button"
onMouseOver="rollover ()" onMouseOut="rollout ()"
onMouseDown="down()"
onClick="myFunction()"
onClick="this.innerHTML=down()
onMouseUp="rollover ()";/></div>
<div class="col">col3</div>
</div>
</body>
</html>
Check this out solution, When clicked it calls down() which sets Enabledto false and chages the image, now when you rollover and rollout it checks if Enabled is true, if it isn't it wont change the image.
function down(ele)
{
ele.src = "//placekitten.com/50/30"; //Clicked
Enabled = false; }
I found the hoooooly grail:)
Its a little tricky solution but works:)
I change the div instead of disabling the functions of the button states.
So here it is:
function showDiv() {
document.getElementById('button2').style.display = "block";
document.getElementById("button").style.display = "none";
}
Button2 is now the clicked button state, button is the div where all the other states are in. This way it stays in the clicked state after clicking and I get rid of the other button states after clicking:)
Hy,
i've got verry strange behavior (at least, i think it's strange...)
I've got a page where users can pick a color for background and a color for the text.
I've found a color picker on the internet, and that's working all just fine...
But every time i open the popup, the page reload. To test this i added a alert in script tags, and i got the alert when i acces the page and when i open the popup...
This is verry annoying, because the changes that users made will be lost ever time they open the popup...
Here is the button that fires the popup:
<button onclick="PopUp(\'background\')">gebruik de color picker</button>
note that this is part of a php string, so that's why the single quotes are escaped....
and this is the function PopUp:
function PopUp(keuze){
if(keuze == 'background'){
$('#clicked_one').val('background');
var de_waarde = $('#background_keuze').val();
$('#clicked_value').val(de_waarde);
}
else if(keuze == 'text'){
$('#clicked_one').val('text');
var de_waarde = $('#text_keuze').val();
$('#clicked_value').val(de_waarde);
}
window.open( './popup_color_picker.php', '_blank', 'width=500,height=500');
}
The popup page:
<?php
include '../config.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Color Picker</title>
<script src="<?php echo $root_off_page; ?>javascript/color_picker.js"></script>
</head>
<body>
<input type="text" class="color" id="color" value="">
<button onclick="klaar()">deze kleur wordt het</button>
</body>
</html>
<script>
var wat_is_geklikt = opener.document.getElementById('clicked_one').value;
var de_juiste_waarde = opener.document.getElementById('clicked_value').value;
function klaar(){
var de_gekozen_kleur = document.getElementById('color').value;
if(wat_is_geklikt == 'background'){
opener.document.getElementById('background_keuze').value = de_gekozen_kleur;
}
else if(wat_is_geklikt == 'text'){
opener.document.getElementById('text_keuze').value = de_gekozen_kleur;
}
self.close()
}
</script>
So does anybody see the problem why the main page (the opener) reloads???
Thanks
The default type of a button (if omitted) is submit which causes the reload of your page. Just change the type to button
<button type="button" onclick="PopUp(\'background\')">gebruik de color picker</button>
I was having the same issue with an < a > tag, I added type="button" to that and it fixed my issue, thanks for the help!
I want to make a textbook where it starts out as a given width/height. Then if users type more then the given amount of space, the textbox expands downward. How do I go about doing this? Do I use CSS?
The basic textbox just displays a scroll bar when users pass the number of rows allow. How do I make it so the textbox expands the rows by say 5 more?
<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>
How do I use the example that Robert Harvey mentioned? I never used JavaScript before..
jQuery AutoResize Plugin
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Steps to use:
You need jQuery. To add it to your page:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
Then, download the plugin and put it in the same folder as your web page. To reference it, add this to your web page:
<script type="text/javascript"
src="autoresize.jquery.js"></script>
Next, add a textbox to your page:
<textarea id="comment" style="width: 400px; padding: 10px; height: 50px;
display: block; font-family:Sans-serif; font-size:1.2em;">
Type something in here, when you get close to the end the box will expand!
</textarea>
Finally, in a script block, add the code that hooks up the plugin to the textbox:
<script type="text/javascript">
$('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
You can add a library if you care to, or just keep track of the textarea's scrollTop property.
If scrollTop is not zero, add your rows.
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title>Expand textarea </title>
<style>
textarea{overflow-y:scroll}
</style>
<script>
onload=function(){
var who=document.getElementsByName('comments')[0];
who.onkeyup=function(){
if(who.scrollTop)who.rows=parseInt(who.rows)+5;
}
}
</script>
</head>
<body>
<textarea name="comments" cols="50" rows="5"></textarea>
</body>
</html>
Here is my solution using only vanilla javascript.
Tested to work in Chrome, Firefox & IE8 and up.
On load, or whack it in a function:
var element = document.getElementById('comments');
var retractsAutomatically = false;
var sizeOfOne = element.clientHeight;
element.rows = 2;
var sizeOfExtra = element.clientHeight - sizeOfOne;
element.rows = 1;
var resize = function() {
var length = element.scrollHeight;
if (retractsAutomatically) {
if (element.clientHeight == length)
return;
}
else {
element.rows = 1;
length = element.scrollHeight;
}
element.rows = 1 + (length - sizeOfOne) / sizeOfExtra;
};
//modern
if (element.addEventListener)
element.addEventListener('input', resize, false);
//IE8
else {
element.attachEvent('onpropertychange', resize)
retractsAutomaticaly = true;
}
CSS & HTML:
textarea#comments { overflow:hidden; }
<textarea id="comments" cols="50" rows="1"></textarea>