Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
What I am trying to do is fade out one box once the cross of that box is clicked but carn't seem to get it to work even by googling I got it to work when clicking the div it self by using $(this)but I want it to work when the cross is clicked.
<?php
require "global.php";
$select_staff = mysqli_query($database_connection,"SELECT * FROM staff_info");
if(!$select_staff) {
die("Database Error");
}
while($staff_info = mysqli_fetch_array($select_staff)) {
$div_id = $staff_info['div_id']; // assuming you have an id field in your DB
$account_name = $staff_info['account_name'];
$position = $staff_info['position'];
$description = $staff_info['description'];
echo "
<div class='staff_boxes' id='staff_boxes_$div_id'>
<a href='#' class='delete_button'> X </a>";
echo"
<h2>$account_name</h2>
$position
<p>$description</p>
</div> ";
}
?>
<script>
$( document ).ready(function() {
$('div').click(function() {
var myScript = document.getElementById('myScript');
$(this).removeAttr('id').fadeOut();
});
});
</script>
<style>
.staff_boxes {
width: 250px;
min-height: 150px;
border: 4px solid gold;
background:#C2DAD7;
/*to reduce float drop issues in IE*/
word-wrap: break-word;
}
.staff_boxes {
margin-left: 63px;
float: left;
}
/**Clear floats after the boxes**/
</style>
Thanks
Target the parent like so:
$('.delete_button').click(function() {
$(this).parent().fadeOut();
return false; //Without this the browser may scroll to the top of the page
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
Here is my HTML code:
const fps = 60
let score = 0
function GenerateAnswers() {
/*...*/
}
function UpdateTiles() {
/*...*/
}
function Correct() {
console.log("Correct")
score++
/*...*/
}
function Incorrect() {
console.log("Incorrect")
/*...*/
}
function MainLoop() {
// moving the tiles (does work)
// updating tile display (does work)
// updating score display (does work)
}
const mainLoop = setInterval(MainLoop, (1000 / fps))
div.AnswerBlack {
width: 100%;
height: 23.5%;
background-color: black;
color: red;
font-size: 10%
}
button {
width: 100%;
height: 100%;
transform: translateY(-11.2%)
}
<!--...-->
<table>
<!--...-->
<tr>
<!--...-->
<td id="Answer1">
<div class="AnswerBlack" id="tileID" style="transform: translateY(69%);">
ANSWER TEXT
<br>
<button onclick="Incorrect()"></button>
</div>
</td>
</tr>
</table>
The result of this is a moving tile (in which I control the movement of the tile by editing the translateY(x%)), and because there is a row a text in the div ("ANSWER TEXT"), I put "transform: translateY(-11.2%)" in the button style and after that the button does fill the div, but the problem is the Incorrect() function never got triggered despite having an Incorrect() function with a console.log function in the JavaScript file.
My goal is to make a moving black tile while the button in the div still works.
Note: I am not using jQuery and I do not want to use jQuery
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Hi I have a simple question.
Why is this not working?
let plus = "+" + '<h1>'+"This is a heading"+'</h1>';
I am getting this as output:
+<h1>This is a heading</h1>
Please see: https://www.screencast.com/t/3ljKFFMa, here is what I want to have with the + Done. So I want to add the + and Done text as a variable.
Thank you explaining.
E.
As noted - you have the plus in the code and the browser is rendering it as a string amnd the rest of the h1 is then a string as well - not a html element of <h1>. If I understand your needs - you are trying to make a string and then have that rendered.
That way you can create the elements dynamically, add icons and other html elements and then add it into the DOM using innerHTML().
let headingStr = '';
headingStr += '<h1>';
headingStr += '<span class="icon">~</span>';
headingStr += 'This is a heading';
headingStr += '<span class="icon">*</span>';
headingStr += '</h1>';
document.querySelector('#container').innerHTML = headingStr;
#container {
padding: 8px 16px;
border: solid 1px blue;
}
h1 {
font-size: 18px;
color: green;
margin: 0;
}
.icon {
color: red;
}
<div id="container"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to create a feature using either jQuery or vanilla JS. My feature should be able to show/hide content on click. The initial task is easy enough and I'm able to show my hidden div using jQuery toggle, but I would also like to be able to switch my FA icon as well as the link text from 'Show content' to 'Hide content'.
Use
.toggleClass(`.fa-check .fa-cross')
add one as the default.
Toggle text can be handled by either not using .toggle (using .show/.hide) instead or by including a span for each text and toggling those. Or by having 2 buttons and toggling those.
Example snippet (needs fa icons)
$(".toggle").click(function() {
$(this).toggleClass("collapsed expanded")
$(this).find("i").toggleClass("fa-chevron-up fa-chevron-down")
});
.wrapper { border: 1px solid #CCC; width: 200px; }
.wrapper .details { border-top: 1px solid #CCC; }
.wrapper .toggle.collapsed > div.details { display:none; }
.wrapper .toggle.expanded > .more { display:none; }
.wrapper .toggle.collapsed > .less { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class='toggle collapsed'><i class='fa fa-chevron-up'></i>
<div class='more'>more</div><div class='less'>less</div>
<div class='details'>details</div>
</div>
</div>
You can apply the same logic for the text to the icon as well if preferred (include 2 <i class='fa...) and then use css to show/hide them based on the class on the parent.
You can also add some css transition so it's less jumpy, or you can use $(this).find(".more,.less").slideToggle() instead of just toggle to add an effect.
There are dozens of ways to do it. Below is a step-by-step tutorial.
This should work, assuming you have already included jQuery.
<img id="imgtog" onclick="toggle()" src="someimg1.png">
<div id="content" hidden="">content</div>
<script>
var tog = false;
function toggle()
{
if(tog == false)
{
$('#content').removeAttr('hidden');
$('#imgtog').attr('src', 'otherimage2.png');
tog = true;
}
else
{
$('#content').attr('hidden', '');
$('#imgtog').attr('src', 'someimg1.png');
tog = false;
}
}
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
JS code:
function showCaption() {
var captionVis = $('.grey-box-caption-text').css('display');
if(captionVis = "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
} else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750,
function(){$(this).hide();});
}
};
$('.caption-container').click(function() {
showCaption();
return false;
}
);
HTML code:
<div class="one-half column home-three-img">
<div class="caption-container">
<div class="grey-box-caption">
</div>
<div class="grey-box-caption-text">This is a caption test - Hopefully this works
</div>
</div>
<img src="images/3.jpg">
</div>
This won't work and I'm a JS noob. Please help.
I'm trying to get the caption section to slide out from the left to the right. When i click on the parent container nothing happens. I'm expecting the caption to shoot out and hide when I click again.
I have Jquery loaded properly and have a document.ready function that works.
Link to the WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html
A big problem is that the value of this won't be set in your "showCaption" function. Add a return false; to the end of that function:
function showCaption(){
var captionVis = $('.grey-box-caption-text').css('display');
if (captionVis == "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
}
else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
$(this).hide();
});
}
};
and then change the handler assignment to:
$('.caption-container').click(showCaption);
Also note that your test in that if statement was incorrect: use == or === for comparison.
I modified the CodePen from Pointy a bit and it should do the same with less code.
Why the gray box increases the height here in the SO demo, I don't know. In this CodePen it works with-out this "bug".
function showCaption() {
var $graybox = $('.grey-box-caption-text');
$graybox.animate({
width: 'toggle',
opacity: 'toggle'
}, 'slow');
};
$(function(){
$("#wrapper").on("click", showCaption);
});
.grey-box-caption {
min-height: 3em;
min-width: 20px;
background-color: #bbb;
display: inline-block;
}
.grey-box-caption-text {
display: none;
padding: 1em;
font-family: sans-serif;
white-space: nowrap;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class=grey-box-caption>
<div class=grey-box-caption-text>
Hello World this is some text.
</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I wanted to make similar menu bar like this
But the logic stuff is kinda hard. >.<
I'm using jquery script
Here's my sample and it sucks lol..
demo
html:
<html>
<!--- to float menubar and stay on top animation XD --->
<script src="jquery.min.js"></script>
<script>
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
</script>
<style>
.menu {
background:#555555;
color:#FFF;
height:50px;
position:absolute;
top:200px;
border-bottom: 10px solid #e6e6ce;
width:1100px;
margin-left:100px;
margin-right:100px;
}
.fixed {
position:fixed;
top:0;
}
</style>
<div class="menu">
Home   about  
</div>
You might also would like to look at this. Personally I found this jQuery solution quite fancy
add style="display:none;" in menu class
Then just hide and show the menu with .hide() and .show() method.
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
$('.menu').show();
} else {
$('.menu').hide();
$('.menu').removeClass('fixed');
}
});
http://jsfiddle.net/dGVY8/