When building my website, I decided I wanted to add a show/hide (spoiler) section in order to conserve space. Here is my "working" code:
JQuery:
$(document).ready(function(){ //Waits for page load
$("a.spoilerButton, a.spoilerButtonDark").click(function () { //Attaches listeners
$($(this).attr('href')).slideToggle(1000, null); //Open/closes spoiler
});
});
CSS:
a.spoilerButton,
a.spoilerButtonDark {
text-decoration:none;
color:white;
}
a.spoilerButton:hover,
a.spoilerButtonDark:hover {
color:grey;
cursor: pointer;
}
a.spoiler {
display:none;
}
HTML:
<div id="spoiler1" class="spoiler">Content</div> <!--Spoiler-->
<div class="contentBoxFooter">
Show/Hide <!--Button-->
</div>
What I would like:
Support for multiple buttons
A way to link the buttons to its appropriate spoiler at any place in the HTML
Problems I am facing:
Don't exactly know the proper way to link the button to its appropriate spoiler, or if I'm
doing it completely wrong
Current method uses href in anchor tag which shifts the page scroll location whenever clicked on
Main Question:
I thought about using the ID tag in the anchor tag to tell the script what the spoiler ID was, although I don't think ID tags were intended for that. Is that how I should go about doing this, or is it not the proper way to do it?
I dont know if i understand your question correctly.
On this page there are four links that open the respective spoiler tags.
This is just a simple example, I hope it can help you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="a1" class="spoiler">Content</div>
<div id="a2" class="spoiler">Content</div>
<div id="a3" class="spoiler">Content</div>
<div id="a4" class="spoiler">Content</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$('#'+foo).slideToggle(1000);
});
});
</script>
</body>
</html>
Related
I am trying to pass a circle made with CSS from one HTML page to another. First the circle is green. After clicking a button the circle becomes red. I want the same green circle of the other html page to becomes red like in the first page.
Here is the code of the first HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
<script>
function passvalues(){
const first=document.getElementById("first");
localStorage.setItem("firstvalues",first);
return false;
}
</script>
</head>
<body>
<div id="first"></div>
<input type="button" value="click here" onclick="doSomeThing()">
<script>
function doSomeThing(){
document.getElementById("first").style.backgroundColor='red';
}
</script>
<form action="second-page.html">
<input type="submit" value="Click" onclick="passvalues()"/>
</form>
</body>
That's the code of the second HTML page (Second-page.html):
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
</head>
<body>
<div id="first"></div>
<span id="first"></span>
<script>
document.getElementById("first").innerHTML=localStorage.getItem("firstvalues");
</script>
</body>
</html>
When I run this code I get on the second page a green circle and [object HTMLDivElement] inside of it. I think something is wrong with the function innerHTML.
You can avoid to use JavaScript including one single class in your index.css that use :active to change the color of the circle when clicked.
That's a simple example that you can arrange to your needs:
<html>
<body>
<button class="btn">Click me</button>
<style>
.btn{
background:black;
color:white;
border:0;
margin:1rem;
}
.btn:active{
background:red;
}
</style>
</body>
</html>
One good idea is to activate the styling after a button is clicked with JavaScript so you don't have to pass the function to the other page, instead you can activate this class with onother button placed on second page.
In this example I've changed the background of the button,
instead of changing button's style you can apply the class directly to the circle.
I hope this answer is usefull for you, if not, please tell me I would give you mnore help!
Your best.
What you are trying to store here is the div as an object.
Instead try storing the Html itself of that div. Use:
localStorage.setItem("firstvalues", first.outerHTML)
Note:
Ids should be unique to the page. When you put the content of the first page's #first in the second page's #first, you create two elements of the same id. Have different ids in both to avoid conflicts.
You are submitting a form to another page. So why not use the standard method of passing data in a GET parameter?
I am trying to identify elements by their tag name, but have trouble executing the toggle property using javascript. Perhaps I am not using toggle() correctly, please explain what I am doing wrong.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
position: relative;
float:left
}
</style>
<script>
var x=document.getElementsByTagName("button");
var hello=document.getElementsByTagName("h1");
x.onclick=function(){
hello.toggle(
function(){hello.style.visibility:visible};
function(){hello.style.visibility:hidden};
)
}
</script>
</head>
<body>
<h1>hello</h1>
<button>Toggle between hide() and show()</button>
</body>
</html>
toggle() is a jquery function that shows hidden elements and vice versa.
To use it you need to add jquery in your html
e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and then with jquery you can add an event listener to the button:
$('button').click(function() {
$('h1').toggle();
});
I have a WordPress based site with good visitor. I want when anyone click on my site a new link open in a new tab. I am not expert on coding. So, which code i use and where i put it?
Find your anchors links into your WP template, should look like this
Link
add target="_blank" so it looks like :
<a target="_blank" href="http://your_url_here.html">Link</a>
Inside your <a> tags, you can add target="_blank" to do this.
In question title he mention Anywhere, which derived to following solution
<!doctype html>
<html>
<head>
<title>This is the title</title>
<script type="text/javascript">
function mainWindowLoaded()
{
console.log("Main windwo is loaded");
document.getElementById('wholebody').addEventListener('click', clickedInBody);
}
function clickedInBody()
{
console.log("log added");
window.open('https://www.google.com', '_blank');
}
window.addEventListener('load', mainWindowLoaded);
</script>
</head>
<body >
<div
id='wholebody'
style="background-color:rgba(255, 0, 255, 0.3); position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1">
</div>
<h1> Your website content goes here </h1>
</body>
The key idea here is to add an overlay div of which z-index is higher than the whole page content. a click action is added to this div, which silently catch all the click events.
I've recently been asked to work on a few websites. One of these websites wants to be "more interactive" and they showed me a site they would like to emulate.
I'm not very good with writing my own scripts, especially with regards to DHTML, so I use MooTools to deal with the more interface-y changes.
In my HTML code I have two Div tags, and I want for it to happen that when you mouseover one, it shrinks the other one and expands the one you're looking at, but no events that I try to attach are firing at all (nothing happens, and nothing appears in the console).
Here is my HTML, I am just using the stock mootools downloaded from their website.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cnergi - Splash </title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
document.addEvent('domready',function(){
$('employee').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="employee" id="employee">
Employee test
</div>
<div class="client" id="client">
Client Test
</div>
</div>
</body>
</html>
Further Description of Problem
Basically, if I call the morph straight from the 'domready' function, it works, but the event calls that are supposed to come from the mouseenter (also tried mouseover, and even click. none work) never happen. No errors are being thrown. I am honestly befuddled, I've never had this problem before.
Any ideas?
EDIT
Currently attempting this code, still nothing shows up.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<div id="wrapper">
<div id="employee" class="employee">
Something
</div>
</div>
<script type="text/javascript">
document.addEvent('domready',function(){
var s = $('employee');
s.addEvent('click',function(){
alert('I was clicked!');
});
});//End document.addEvent domready
</script>
</body>
</html>
EDIT 2
Has something to do with my stylesheet declaration; if I remove it, the events fire as they should.
It's actually appears to be any styling at all. The moment I put a tag into the file it stopped working.
"Wut." is my only response.
Edit 3
I changed my CSS to this, and it works. I haven't gone through my previous CSS file to figure out why it doesn't work with it, just thought I would update everyone. I posted 2 JS fiddle links, one with my base CSS (please remember this was a work in progress, and that I am partially colorblind so the bright colors help me see the differences), and the other with the CSS below, which runs fine.
In summary: Today I learned that CSS can keep javascript events from firing.
html, body, body>div{
height:100%;
}
body > div{
width:900px;
text-align:left;
margin:0 auto 0 auto;
background-color:white;
}
body{
text-align:center;
background-color:grey;
padding:0;
}
#wrapper{
position:relative;
width:inherit;
height:inherit;
}
#footer{
position:absolute;
bottom:0px;
text-align:center;
width:inherit;
}
I think you have a syntax error in background: color
this.morph({
opacity: 0.5,
backgroundColor: color // is color defined?
});
The MooTools domready event is only available on the window object - here's your example in working order: http://jsbin.com/rucaz/1/edit
For reference: http://mootools.net/docs/core/Utilities/DOMReady
I have a web page with 3 links. 1 of the links is hidden by a parent div that has display:none. When I hover over another div however, the hidden div will be shown thereby revealing the link. How can I tab through all 3 links and get link 3 to display automatically when i tab to it?
<html>
<head>
<title>Skype Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style>
a,.hoverMe{
display:block;
width:50px;
height:50px;
margin-bottom:10px;
background-color:#CCC;
}
.hoverMe{
background-color:pink;
width:100px;
height:50px;
}
.hiddenDiv{
visibility:hidden;
}
.hiddenDiv.shown{
visibility:visible;
}
</style>
<script>
$(document).ready(
function(){
$(".hoverMe").hover(
function(){
$(".hiddenDiv").addClass("shown");
},
function(){
$(".hiddenDiv").removeClass("shown");
}
)
}
);
</script>
</head>
<body>
Link 1
Link 2
<div class="hoverMe">hover me to open Link 3</div>
<div class="hiddenDiv">
Link 3
</div>
</body>
</html>
Use JavaScript.
Add an onfocus and onblur handler to the anchor that toggle a class on the parent div. Edit your stylesheet to reveal it when the class is set.
Also add a flag to indicate JS is present, e.g.
<body>
<script type="text/javascript">
document.body.className += " js";
</script>
… and protect the rule that hides the div in the first place with body.js followed by a descendent selector (so non-JS users will still be able to access the content).