We Keep Coding

Faded text not reappearing

I'm working on a random wiki viewer, and its been a slog, but i'm finally at the point where i think that at least the UI's functionality is done. The only problem is that after i fade some text on the "random" button, and replace it with an iframe which is then removed when the button is clicked again, the text doesn't seem to fade back in. Any ideas?
https://codepen.io/EpicTriffid/pen/WOYrzg
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").animate({opacity:0});
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$("#cross1").fadeOut('fast');
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
};
};
});

You are emptying the HTML of .button1 when you do:
$(".button1").html(....
In order to get it back, you need to add:
$(".button1").html('<div class="b1text">Random</div>');
after
$('.randframe').remove();

Your button is missing the text Random
When you call:
$(".button1").html(...
you are replacing the inside html of the object with the iframe.
When you remove .randframe you need then re-add the text for your button.
Instead of:
$('.randframe').remove()
you can call this which will accomplish both:
$('.button1').html('random');
Efficiency tip: You did a good job of saving references to your jquery variables but and cross, why not use them?
but.html(...
cross.click(function (){...

This line effectively replaces whatever you have in the button 1 div
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
Your cross1.click function does not re-populate the button1 div, I would recommend
$("#cross1").click(function() {
$('.button1').removeAttr('style');
$('.button1').html('Random');
$("#cross1").fadeOut('fast');
$(".b1text").animate({opacity:"1"});
});

Here you go with the solution https://codepen.io/Shiladitya/pen/WOLNpw
$(document).ready(function() {
//Random Button
var but1status = "closed"
var randFrame = ("#randframe")
$(".button1").on("click",function () {
var but = $(".button1");
var cross = $("#cross1");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
$(".b1text").fadeOut();
cross.delay(1000).fadeIn();
but1status = "open"
if (but1status == "open") {
setTimeout(randFrame,1000)
function randFrame (){
$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
$("#cross1").click(function() {
but.removeAttr('style');
cross.fadeOut('fast');
$('.randframe').remove();
but.html('<div class="b1text">Random</div>');
});
};
};
});
//Search Button
var but2 = "closed"
$(".button2").click(function () {
var but = $(".button2");
var btext = $(".b2text");
var cross = $("#cross2");
but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
btext.fadeOut();
cross.delay(2000).fadeIn()
but2 = "open"
$("#cross2").click(function() {
$('.button2').removeAttr('style');
$('.b2text').fadeIn(1500);
$("#cross2").fadeOut('fast');
})
})
});
#spacer {
margin:0;
padding:0;
height:50px;
}
body {
min-height: 100%;
min-width: 1024px;
width:100%;
margin-top:4em;
padding:0;
background-color: teal;
}
h1 {
color:white;
font-family:"cabin";
text-align:center;
}
#cross1 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: left;
display:none;
}
#cross2 {
position:relative;
font-size:3em;
color:white;
margin-top:6px;
float: right;
display:none;
}
#randframe {
display:none;
}
.button1 {
position:absolute;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
.button2 {
position:absolute;
right:0;
height:2.6em;
width:5em;
font-size:1.5em;
text-align:center;
color: white;
font-family:"cabin";
border:solid;
border-radius:25px;
padding:10px;
box-sizing:border-box;
transition: all 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Wiki Viewer</h1>
</div>
</div>
</div>
<div id="spacer"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="button1">
<div class="b1text">Random</div>
</div>
<div class="button2">
<div class="b2text">Search</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<i id="cross1" class="glyphicon glyphicon-remove"></i>
</div>
</div>
<div class="col-xs-12">
<div class="text-center">
<i id="cross2" class="glyphicon glyphicon-remove"></i>
</div>
</div>
You need to keep the content inside the ".button1" to reuse after the iframe is removed.

Try using callbacks. So change your #cross1 fadout to
$("#cross1").fadeOut('fast',function(){
$('.randframe').remove();
$(".b1text").animate({opacity:"1"});
});
Also, this may not be affecting your code, but you're missing some semi colons after some variable declarations.
Not all methods have callbacks in JQuery, but when available, they are useful because basically it means that your code is not fired until the other thing is completely done. This happens a lot with fading and opacity.

how can I append divs with seperative classes on click dynamically?

I have a div with a link inside of it. as you see in snippet when the link is clicked it appends a new div beside. it is working!
but what i want is when every time link is clicked a new seperative class should be dynamically adding to 'project-list'.
$(".click").click(function () {
$(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
if it is not clear ask me below.

var i=0;
$(".click").click(function () {
i++;
var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
$(".container").append(toAppend);
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>

drag and drop not working properly

I am new to javascript . Below is my html for drag and drop. revert not working properly. Please help me why its not working properly.
Revert works properly before drop but not return to original position
<!DOCTYPE html>
<html ng-app="first22">
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/jquery-ui.js"></script>
<title>
Html5 All in One
</title>
<style>
*{padding:0;margin:0}
#interactive
{
position:absolute;
width:895px;
height:695px;
margin:auto;
left:0;
right:0;
background:#f3f3f3;
}
.dragbg,.drop
{
position:absolute;
width:171px;
height:52px;
background:#c0c0c0;
font-size:20px;
border-radius:25px;
text-align:center;
}
.drag
{
width:160px;
height:40px;
background:#c2c2c2;
border:1px solid;
font-size:20px;
border-radius:25px;
text-align:center;
position:absolute;
margin-top:5px;
margin-left:5px;
line-height:40px;
cursor:pointer;
}
.drag:hover
{
background:#fff;
}
.drop1
{
width:160px;
height:40px;
background:#c2c2c2;
border:1px solid;
font-size:20px;
border-radius:25px;
text-align:center;
position:absolute;
top:5px;
left:5px;
line-height:40px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="interactive">
<div style="position:absolute;left:0px;top:50px;width:100%;text-align:center;font-size:28px;font-weight:bold">Common Drag and Drop</div>
<div class="dragbg" style="left:120px;top:150px;">
<div class="drag" >Meter</div>
</div>
<div class="dragbg" style="left:120px;top:220px;">
<div class="drag">MilliMeter</div>
</div>
<div class="dragbg" style="left:120px;top:290px;">
<div class="drag">CentiMeter</div>
</div>
<div class="dragbg" style="left:120px;top:360px;">
<div class="drag">Gram</div>
</div>
<div class="dragbg" style="left:120px;top:430px;">
<div class="drag">MilliGram</div>
</div>
<div class="dragbg" style="left:120px;top:500px;">
<div class="drag">KiloGram</div>
</div>
<div class="drop" style="left:320px;top:150px;">
</div>
<div class="drop" style="left:320px;top:220px;">
</div>
<div class="drop" style="left:320px;top:290px;">
</div>
<div class="drop" style="left:320px;top:360px;">
</div>
<div class="drop" style="left:320px;top:430px;">
</div>
<div class="drop" style="left:320px;top:500px;">
</div>
</div>
</body>
<script>
$("document").ready(function()
{
$(".drag").draggable(
{
containment:"#interactive",
revert:function(event,ui)
{
$(this).data("uiDraggable").originalPosition=
{
left:0,
top:0
};
return !event;
},
zindex:1000,
drag:function(event,ui)
{
$(this).css("z-index",2000);
}
});
$(".drop").droppable(
{
drop:function(event,ui)
{
$(this).append(ui.draggable)
$(this).find(".drag").each(function()
{
$(this).css("position","absolute");
$(this).css({"top":"0px","left":"0px"});
});
}
});
})
</script>
</html>

You are appending the drag to its place holder which changes the parent of the drag object. So it changes it relation to the new container. You just have to move the position of the drag keeping it to its parent container. Also you have to position the div relative to its container.
$(".drop").droppable(
{
drop:function(event,ui)
{
var pos = $(this).offset();
var ppos = $(ui.draggable).parent().offset();
var left = pos.left - ppos.left;
var top = pos.top - ppos.top;
$(ui.draggable).css({"left" : left, "top": top})
$(this).find(".drag").each(function()
{
$(this).css("position","absolute");
$(this).css({"top":"0px","left":"0px"});
});
}
});
Your fiddle updated http://jsfiddle.net/XSXA6/18/

I think this behaviour is because you are appending the draggable in the droppable and hence changing the position coordinates. You don't need to do anything in the droppable initialisation and it will work.
Demo: http://jsfiddle.net/XSXA6/15/
JS:
$(document).ready(function () {
$(".drag").draggable({
containment: "#interactive",
revert: function (event, ui) {
$(this).data("uiDraggable").originalPosition = {
left: 0,
top: 0
};
return !event;
},
zindex: 1000,
drag: function (event, ui) {
$(this).css("z-index", 2000);
}
});
$(".drop").droppable({
drop: function (event, ui) {
console.log(ui.draggable, $(this));
var d = $(this)
$(ui.draggable).position({
my: "center",
at: "center",
of: d
});
}
});
});

Animated DropDown Div Panel with Javascript

Thanks in advance for any possible help.
Basically I was looking to create drop down div panels that are activated by a function toggleSlider, where the panels are hidden when the page is initially loaded. The first two links "resume" and "work" function like I had hoped, where you click on one and the corresponding div drops in, and when you click on the same link again or one of the other links the content is retracted. The third link is not working like the others, when you click on it the corresponding div drops in covering the other contents, and can only be retracted on by clicking on the same link again. Here's what it looks like....
http://www.visuallypersuasive.com/jason/test.html#
And here is the javascript
function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
else {
$("#panelThatSlides").slideDown(600, function(){
$("#contentThatFades").fadeIn();
});
}
}
function toggleSlider2() {
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides2").slideDown(600, function(){
$("#contentThatFades2").fadeIn();
});
}
}
function toggleSlider3() {
if ($("#panelThatSlides3").is(":visible")) {
$("#contentThatFades3").fadeOut(600, function(){
$("#panelThatSlides3").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides3").slideDown(600, function(){
$("#contentThatFades3").fadeIn();
});
}
}
And here is the html
<div id="resume"><a class="nav" href="#" onclick="toggleSlider();">resume</a>
<div id="panelThatSlides" style="position:relative; left:250px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work"><a class="nav" href="#" onclick="toggleSlider2();">work</a>
<div id="panelThatSlides2" style="position:relative; left:-420px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades2" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact"><a class="nav" href="#" onclick="toggleSlider3();">contact</a>
<div id="panelThatSlides3" style="position:relative;left:-550px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades3" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
While I feel I have a solid basic to intermediate understanding html and css, javascript is pretty much Greek to me. Ideally I would like use this technique to nest another drop down div within the work link/div with more than three links if I could get this to work.
Thanks again to anyone who can help.

Test It I make a little change on Your Code
HTML:
<div class="navbar">
<div id="resume" class="navmenu"><a class="nav" href="#" >resume</a>
<div class="panelThatSlides" style="position:relative; left:250px; display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work" class="navmenu"><a class="nav" href="#" >work</a>
<div class="panelThatSlides" style="position:relative; left:-420px;display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact" class="navmenu"><a class="nav" href="#" >contact</a>
<div class="panelThatSlides" style="position:relative;left:-550px;display:none;background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
</div>
js That Must Put it After Html code
$(".navbar").find(".nav").bind("click",function(e){
if($(e.target.parentNode).find(".panelThatSlides").is(":visible")){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
}
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
$(e.target.parentNode).find(".panelThatSlides").slideDown(600, function(){
$(e.target.parentNode).find(".panelThatSlides").find(".contentThatFades").fadeIn();
});
return false;
});
now You Can Add Nav Without Problem

Adding Next and Prev Button for Thumbnails Gallery and Larger Image Gallery

I am trying to add the next and prev button for both thumbnail and larger image gallery. And that next and prev button should support the keyboard event listeners too.
This is the link which I have tried.
http://jsfiddle.net/L7yKp/36/
I need some help.

Here i have done complete solution for above issue for adding next and previous buttons.
Demo: http://codebins.com/bin/4ldqp7y
HTML
<div id="panel">
<div class="controls">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Thumbnail Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="thumbs">
<div class="thumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" />
</div>
</div>
<div class="controls" align="center" width="400px">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Large Image Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="large">
<div class="bigthumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" />
</div>
<div class="bigthumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" />
</div>
<div class="bigthumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" />
</div>
<div class="bigthumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" />
</div>
<div class="bigthumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" />
</div>
</div>
</div>
CSS:
#thumbs{
text-align:center;
background:#77a5c6;
padding:5px;
}
.thumb{
display:inline-block;
margin:0px;
padding:0px;
cursor:pointer;
}
#thumbs .active{
border:3px solid #333;
}
.controls{
margin-left:10px;
}
.controls img{
cursor:pointer;
margin:0px;
}
.controls span{
font-size:13px;
display:inline-block;
vertical-align:top;
margin-top:5px;
}
#large{
text-align:center;
}
#large .bigthumb{
display:none;
}
#large .active{
display:block;
}
#large .active img{
border:2px solid #333;
}
jQuery:
$(function() {
$("#thumbs").find(".thumb:first").addClass("active");
$("#large").find(".bigthumb:first").addClass("active");
var getIndex = $("#thumbs").find(".active").index();
$(".controls").each(function() {
$(this).find(".next").click(function() {
getIndex = $("#thumbs").find(".active").index();
getIndex += 1;
if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
getIndex = 0;
}
setActiveImage(getIndex);
});
$(this).find(".prev").click(function() {
getIndex -= 1;
if (getIndex < 0) {
getIndex = $("#thumbs").find(".thumb").length - 1;
}
setActiveImage(getIndex); //Set/Show Active Image
});
});
});
function setActiveImage(index) {
if (typeof(index) == "undefined" || index == "" || index == null) index = 0;
$("#thumbs").find(".thumb").removeClass("active");
$("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
$("#large").find(".bigthumb").removeClass("active");
$("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
}
Demo: http://codebins.com/bin/4ldqp7y

See http://jsfiddle.net/L7yKp/37/
The problem is
$(['next','prev']).each(function(){
var that=this;
$('#'+that).click(function(){
$('#thumbs img.clicked')[that]().click();
});
});
because now you have
Next
Prev
and
Next
Prev
So the solution is;
$(['next','prev']).each(function(){
var that=this;
$('.'+that).click(function(){
$('#thumbs .clicked')[that]().click();
});
});
and
Next
Prev