I've a panel with a copy link inside, when I click to open my panel a display:none is added automatically
to solve that i added this line on my jquery part: showme.style.display = "none"; now we can open the panel perfectly but it's impossible to close it after
someone have a solution ?
here is my link WITHOUT showme.style.display = "none";:
here is my link and here is my code WITH showme.style.display = "none";:
<!DOCTYPE HTML><!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head><meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
div#panel1 {
display: block;
background-color:#eee;
visibility: hidden;
}
.flip1 {
display: block;
background-color:#eee;
}
#check {
visibility: hidden;
width:12px; height:12px;
}
span#copy-callbacks, span#copy-callbacks2 {
float: none; cursor:pointer;
}
.zclip {
border:1px solid red;
position:relative;
display:inherit;
}
div#zclip-ZeroClipboardMovie_1.zclip {
position: relative;
margin-top:-18px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("span#copy-callbacks").zclip({
path:"ZeroClipboard.swf",
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#copy-callbacks').css('display','none');
},
afterCopy:function(){
$('#copy-callbacks').css('display','block');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function () {
$(this).css({"color":"#e0ccb4"});
},
function () {
$(this).css({"color":"#000"});
}
);
$(".flip1").click(function(){
$("#panel1").slideToggle("fast");
});
});
function newwindow() {
var showme = document.getElementById("panel1");
showme.style.visibility = "visible";
showme.style.display = "none";
}
</script>
</head>
<body>
<div style="margin-top:150px;" onclick="newwindow()" class="flip1">Click to slide the first panel down or up</div>
<div style="display: block; padding-bottom:80px;" id="panel1">
<span id="copy-callbacks"> Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
You don't need newwindow()
For #panel1 : in document-level style, remove visibility and display.
For #panel1 : in inline style, make display : none
I am talking about the first link.
Related
The problem is when I click the Option (button) that appears on every div after I fetch the data using the While loop it only appears the top div but not the current div that I am viewing. This is the picture when I click the Option it only appears the one place:
<?php
$connect = mysqli_connect('localhost','root','','users_data_allocation');
$feeder = "SELECT * FROM `trade_feed_post`";
$runfeed = mysqli_query($connect,$feeder);
while ($showfeed = mysqli_fetch_assoc($runfeed)) {
# code...
$feedAcc = $showfeed['OwnerACC'];
$feedDate = $showfeed['Date and time'];
$feedQuote = $showfeed['quote'];
$feedBuys = $showfeed['No.of buys'];
echo "
<div class=\"border\">
<p>".$feedAcc."</p>
<button onclick=\"showOpt()\">Option</button>
<div class=\"menu\">
This is menu.
</div>
</div>
";
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShowData</title>
<style>
.border{
background-color: black;
color: white;
border: 2px solid red;
height: 220px;
width: 400px;
font-family: ebrima;
font-size: 25px;
padding-left: 10px;
}
.menu{
display: none;
}
</style>
<script>
function showOpt() {
document.querySelector('.menu').style.display = 'block';
}
</script>
</head>
<body>
</body>
</html>
I would add this element parameter to <button onclick=\"showOpt(this)\">Option</button>.
Then change function so that will find correct .menu for button (using common parent .border)
function showOpt(elem) {
elem.closest(".border").querySelector(".menu").style.display = 'block';
}
Hi I made this simple animation, when you click on the animate button, the function does not work the first time but it works the second time, how can it be? And what is the solution?
const fadeInOut = () => {
const divElement = document.getElementById('demo');
if (divElement.style.opacity == 0) {
divElement.style.opacity = 1;
} else {
divElement.style.opacity = 0;
}
};
#demo {
width: 300px;
height: 300px;
background: burlywood;
opacity: 1;
display: block;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="function.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="demo"></div>
<button onclick="fadeInOut()">Animate</button>
</body>
</html>
It is because .style checks for an inline style, not the one you set in an external CSS file. You can go around this by setting an initial inline style to your element:
const fadeInOut = () => {
const divElement = document.getElementById('demo');
if (divElement.style.opacity == 0) {
divElement.style.opacity = 1;
} else {
divElement.style.opacity = 0;
}
};
#demo {
width: 300px;
height: 300px;
background: burlywood;
display: block;
transition: all 1s;
}
<div id="demo" style="opacity: 1"></div>
<button onclick="fadeInOut()">Animate</button>
I am trying to create my onepager site and I am not able to click my header
And i want that the is on the right side not under the logo
$(function () {
$('a[href*=#]').stop().click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var UD_HASH = this.hash;
var UD_ZIEL = $(this.hash);
if (UD_ZIEL.length) {
var UD_ABSTAND_TOP = UD_ZIEL.offset().top;
$('html,body').animate({
scrollTop: UD_ABSTAND_TOP
}, 1000, function () {
window.location.hash = UD_HASH;
});
return false;
}
}
});
});
body,html {
width:100%;
height:100%;
margin:0;
padding:0;
}
.ud_scroll {
width:100%;
height:100%;
float:right;
position:relative;
}
div#header {
position: fixed;
left:20px;
top: 10px;
width: 100%;
}
a {
color:black;
opacity:0.5;
text-decoration:none;
text-align:center;
vertical-align:top;
line-height: 100px;
}
a:hover {
opacity:1;
}
nav {
}
nav ul {
margin:0;
padding:0;
font-family: 'Roboto Slab', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrumplex - Home</title>
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="files/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="files/scroll.js"></script>
</head>
<div id="header">
<a href="#">
<img src="files/img/logo.png" alt="Scrumplex">
Scrumplex
</a>
<nav>
<ul>
Hello!
Who am I?
Downloads
Copyright
About
</ul>
</nav>
</div>
<section id="Hello" class="ud_scroll"><h2>Hi</h2></section>
<section id="WhoAmI" class="ud_scroll"><h2>WhoAmI</h2></section>
<section id="dl" class="ud_scroll"><h2>dl</h2></section>
<section id="cc" class="ud_scroll"><h2>cc</h2></section>
<section id="about" class="ud_scroll"><h2>About!</h2></section>
</body>
</html>
My Header is not clickable i dont know why
ps: i'm new to css and html
The problem you have there is that the <section id="hello"> is over all the links because the class .ud_scroll has height:100%. So instead of clicking the links, you are clicking the section. Try making it smaller, or removing the height value.
Next time you can use one of the firefox developer features: The inspector. You can open your page, and click ctrl + shift + I, and try to click on the link. You will see something like this:
Thats telling you that the section, with id hello, with class ud_scroll is over everything else. Since the "Hi" is inside that section, you can click and select it, but anything that is below it is unclicable.
I'm looking to make a program that will basically change color when each element is clicked individually. I've got it to work to the point where I can click on just an the page and both of the elements can change color but I need them to be independent of each other. How would I do something like this?
document.onload = function()
{
document.onclick = changeTest("box0", "green");
};
function changeTest(id, color)
{
var element;
element = document.getElementById(id);
element.style.backgroundColor = color;
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="onclick.js" type="text/javascript"></script>
<style type="text/css">
{
border: 0;
margin:0;
paddig: 0;
}
body
{
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
height: 10em;
width: 10em;
margin: 2px;
}
#box0
{
background-color: yellow;
}
#box1
{
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box0"></div>
<div class="box" id="box1"></div>
</body>
</html>
var box0 = document.getElementById("box0");
var box1 = document.getElementById("box1");
var color = "green";
function changeColor(box, color) {
box.style.backgroundColor = color;
}
box0.onclick = function() {
changeColor(this, color);
};
box1.onclick = function() {
changeColor(this, color);
};
<!DOCTYPE html>
<html>
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="onclick.js" type="text/javascript"></script>
<style type="text/css">
* {
border: 0;
margin:0;
padding: 0;
}
body {
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
height: 10em;
width: 10em;
margin: 2px;
}
#box0 {
background-color: yellow;
}
#box1 {
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box0"></div>
<div class="box" id="box1"></div>
</body>
</html>
Knowing you can also perfom this with addEventListener() method.
You will have to bind the event listeners to the individual boxes. It's as simple as that. Something like this (not tested):
document.getElementById("box0").onclick = changeTest("box0", "green");
document.getElementById("box1").onclick = changeTest("box1", "green");
I would use jquery for that:
html:
<body>
<div class="box" id="box0">box0</div>
<div class="box" id="box1">box1</div>
</body>
and Script:
$( "#box0" ).click(function() {
changeTest("box0", "green");
});
$( "#box1" ).click(function() {
changeTest("box1", "red");
});
Here's an jsfiddle:
http://jsfiddle.net/o8c8y23x/
Ok, without jquery:
<body>
<div class="box" id="box0" onclick = "changeTest('box0', 'red');">box0</div>
<div class="box" id="box1" onclick = "changeTest('box1', 'green');">box1</div>
</body>
jsfiddle:
http://jsfiddle.net/o8c8y23x/2/
I have some code to get the size of the body on screen during a window resize event and use this elsewhere, however for some reason the size that is determined is always the size before the resizing:
$(document).on('ready', function () {
initResize();
});
function initResize() {
$(window).on('resize', doResize).trigger('resize');
};
function doResize() {
var wh = $('.game').height();
var ww = $('.game').width();
console.log("game " + ww +"x" +wh);
}
and the console output always returns the same data, yet if I change the selector to $(window) it changes as the window resizes. Can someone help please?
the html is very simple:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/myStyle.css" /
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/init.js"></script>
</head>
<body>
<section class="game">
</section>
</body>
</html>
and the css:
#charset "utf-8";
* {
padding: 0;
margin: 0;
border: none;
outline: none;
}
html {
font-size: 62.5%;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}