I have to get the boxes to do the following:
Along the left hand side of the page have a number of boxes with different font names in them. When you click on those boxes have the font of the text in the middle box change. Do similar sets of boxes with changes associated for the right hand side and bottom of the page.
This is the coding I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100;100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100;100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</div>
<div id="box_group2">
<div id="box4">
Fourth box
</div>
<div id="box5">
Fifth box
</div>
<div id="box6">
Sixth box
</div>
</div>
<div id="box_group3">
<div id="box7">
Seventh box
</div>
<div id="box8">
Eighth box
</div>
<div id="box9">
Ninth box
</div>
</div>
<div id="box_group4">
<div id="box10">
Tenth box
</div>
<div id="box11">
Eleven box
</div>
<div id="box12">
Twelve box
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>
I've done the task with jQuery which is more easier to maintain.Used functions to get desired data and manipulated them to create boxes dynamically.
HTML :
<div id="topDiv"></div>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
<div id="bottomDiv"></div>
CSS :
#topDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#leftDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#rightDiv div{
float : right;
padding:5px;
width:50px;
height:50px;
}
#bottomDiv div{
float : left;
padding:5px;
width:50px;
height:50px;
}
#topDiv{
padding-left : 33%;
}
#leftDiv{
padding-top : 30%;
}
#bottomDiv{
padding-top : 68%;
padding-left : 33%;
}
#rightDiv{
margin-top : -30%;
}
.changedFont{
font-size : 20px;
}
jQuery :
$(document).ready(function(){
//First declare an array of colors that will also indicate the number of boxes.
var colorArray = new Array("red", "green", "blue");
//Execute a loop to create the boxes styling them properly
for(var i = 1; i <= colorArray.length ; i++){
$("#topDiv").append("<div id=Box" + i + "></div>");
$("#Box"+ i).css("background-color", colorArray[i-1]);
$("#Box"+i).text("Box" + i);
$("#leftDiv").append("<div id=Box" + i+1 + "></div>");
$("#Box"+ i+1).css("background-color", colorArray[i-1]);
$("#Box"+ i+1).text("Box" + i+1);
$("#rightDiv").append("<div id=Box" + i+2 + "></div>");
$("#Box"+ i+2).css("background-color", colorArray[i-1]);
$("#Box"+ i+2).text("Box" + i+2);
$("#bottomDiv").append("<div id=Box" + i+3 + "></div>");
$("#Box"+ i+3).css("background-color", colorArray[i-1]);
$("#Box"+i+3).text("Box" + i+3);
}
//Define the handler for onclick events
$("#topDiv").children().click(function(){
$("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#topDiv").children().eq(1).addClass("changedFont");
});
$("#leftDiv").children().click(function(){
$("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#leftDiv").children().eq(1).addClass("changedFont");
});
$("#rightDiv").children().click(function(){
$("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#rightDiv").children().eq(1).addClass("changedFont");
});
$("#bottomDiv").children().click(function(){
$("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color"));
$("#bottomDiv").children().eq(1).addClass("changedFont");
});
});
jsFiddle Demo
Related
var val_tujuan = "test";
$('#d_tujuan').on('click', function(){
var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
.lbl_txt{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px; word-wrap: break-word;">
</div>
</div>
</div>
I have a script that add labels to a div. But, the problem is the labels pass through the div border? How to fix it? I've tried the solution here but nothing works for me. (or maybe I fail to implementing the solutions there)
My jQuery:
$('#sel_tujuan').on('change', function(){
var val_tujuan = $(this).val();
var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
My Div:
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px;word-wrap: break-word"></div>
</div>
</div>
Please check this and give this css word-wrap: break-word; to d_tujuan id. Add this css for label.
.label.lbl_txt {
display: inline-block;
}
var val_tujuan = "test";
$('#d_tujuan').on('click', function(){
var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
.lbl_txt{
background-color:green;
}
.label.lbl_txt {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px; display:block; word-wrap: break-word;">
</div>
</div>
</div>
The problem was it was not triggered in this way $('#sel_tujuan').on('change', function() because there was no such element with id #sej_tujuan so i just put to check its work on click on div.Click div its working. Also there was no such value in div you was trying to get value of div. If you trying to get text of div just use $('div selected').text();
$('#sel_tujuan').on('change', function(){
var val_tujuan = $(this).val();
like this way no just get value from input, options as far i know maybe you can get value of div probably but this way.
If you trying to get text of div just use $('div selected').text();
$(document).ready(function(){
$('#d_tujuan').click(function(){
var val_tujuan = $('input').val();
var txt_tujuan = "<label class='lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
$('#d_tujuan').append(txt_tujuan);
});
});
#d_tujuan {
border:#000 1px;
background-color:#DDD;
min-height:100px;
display:block;
word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div id='fdaftar' class="form-group">
<label>Daftar Tujuan</label>
<div id='d_tujuan'></div>
</div>
</div>
<input value='valued'>
Update
In your Div css word-wrap: break-word; will make your text inside div fit in div
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.
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>
Here is my code:
<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#F00;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#000;
}
#div3
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#ccc;
}
#div4
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#999;
}
#links
{
position:absolute;
left:0px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
<script>
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
</script>
</div>
</body>
</html>
So that works, when you click Link 2 button to display div2, it overrides the zindex of div1 just fine, as I'd like.
However, when you click Link 1 (which is supposed to display div1), it doesn't go back to div1. I'd like whichever button I click to display the div it is linked to.
you should reset all your divs to their original state... then mark your selected. do..upgrade your html to this version:
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
</div>
and add this JS functions:
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
and here comes the fiddle: http://jsfiddle.net/ymzrocks/5604wmtc/
you need to set the first one back to 0
<script>
var shown;
function show(){
if(shown) shown.style.zIndex = 0;
shown = this;
shown.style.zIndex = 1;
}
</script>
then
<input type="button" value="Link1" onclick="show()">
<input type="button" value="Link2" onclick="show()">
<input type="button" value="Link3" onclick="show()">
<input type="button" value="Link4" onclick="show()">
it is the correct behavior because step by step you are giving z-index=1 to all divs. Id div4 is visible with z-index=1 and you execute document.getElementById('div1').style.zIndex='1' the correct behavior is show div4. You should give an higher z-index to div1 or a lower z-index to other divs
I'm wanting to set a min and max value for scrolling that way it isn't possible to scroll beyond the content inside of the slider. Right now, the code allows for infinite scrolling. I'm fairly new to Javascript but I've been coding for several years at a University.
JSFiddle
JavaScript
$('#vcards').width(function(){
var width = 0;
$('.vcard').each(function(){
width += $(this).outerWidth(true);
});
return width;
}());
$('#next').on('click',function(){
$('#vcards').animate({left : "-=170"});
});
$('#prev').on('click',function(){
$('#vcards').animate({left : "+=170"});
});
CSS
#slider{
width:500px;
overflow:hidden;
position:relative;
border:1px solid black;
height:225px;
padding:10px;
}
.vcard{
width:150px;
margin: 0 10px;
height:200px;
float:left;
border:1px;
text-align:center;
font-weight:bold;
background-color:green;
}
#vcards{
position:absolute;
top:0;
left:-170px;
}
HTML
<div id="slider">
<div id="vcards">
<div class="vcard">1</div>
<div class="vcard">2</div>
<div class="vcard">3</div>
<div class="vcard">4</div>
<div class="vcard">5</div>
</div>
</div>
<div id="next">Next</div>
<div id="prev">Prev</div>
You could try this:
$('#next').on('click',function(){
var v_offset = $('#vcards').offset();
var v_width = $('#vcards').width();
var left = v_offset.left;
var total = v_width - Math.abs(left);
var cont_w = $('#slider').width();
if(total>=cont_w)
$('#vcards').animate({left : "-=170"});
});
$('#prev').on('click',function(){
var v_offset = $('#vcards').offset();
var left = v_offset.left;
if(left<=0)
$('#vcards').animate({left : "+=170"});
});