Hey guys i have maded an outerbox which contains an innerbox .The code is
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<div id="boxed">
<div id="anotherbox"> </div>
</div>
</body>
</html>
the css file
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
This works fine..
But what i need is that i want to display a simple button inside the inner box.I have tried some javascript code but it dint worked out.
Hope you guys can help me ..P:S ..i dont need a jquery solution..Thanks
Is this what you are looking for?
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
<div id="boxed">
<div id="anotherbox">
<input type="button" value="inside" />
</div>
</div>
You can achieve this using a button, as follows:
The HTML:
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
#boxed:hover #anotherbox > button {
width: 16px;
padding: 30px;
border: 5px solid gray;
margin: 0;
visibility: visible;
cursor:pointer;
}
<div id="boxed">
<div id="anotherbox">
<button>Button</button>
</div>
</div>
Related
I want to move div after another div, if outer div's width is less then 800
$(function() {
if ($('.main').width() < "800 px") {
$(".one").insertBefore($(".two"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" style="overflow: hidden; border:solid 1px red; text-align: right; ">
<div class="two" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:500px;">buttons</div>
<div class="one" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:300px;">dropdown</div>
</div>
jQuery doesn't understand the string "800 px", it requires just the number 800.
Also, like others mentioned, try to keep your styles in css and not inline if you're using classes, it's easier to follow along with the code and edit the code in the future.
$(function() {
if ($('.main').outerWidth(true) < 800) {
$(".one").insertBefore($(".two"));
}
});
.main {
overflow: hidden;
border: solid 1px red;
text-align: right;
}
.two {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 500px;
}
.one {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="two">buttons</div>
<div class="one">dropdown</div>
</div>
I am trying to fit two divs around the header-title, but I can't seem to get it to work. I'm not sure that the calc() works well with the javascript. Here is the code so far:
document.getElementByClass('Header').clientWidth;
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
background-color: var(--main-bg-color);
width: 100%;
height: 100px;
top: 0;
margin: 0;
position: fixed;
text-align: center;
z-index: 10;
border-bottom: 5px solid var(--main-accent-color);
}
.header-title {
box-sizing: content-box;
background-color: var(--main-bg-color);
height: 85px;
width: 500px;
margin: auto;
vertical-align: middle;
padding-top: 50px;
padding-top: 20px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
z-index: 11
}
.header-info {
width: calc((clientWidth - 500) / 2);
height: 100px;
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
}
#right-info {
right: calc(((clientWidth - 500) / 2) + 500);
}
#left-info {
right: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Webpage</title>
<script>
document.getElementByClass('header').clientWidth;
</script>
</head>
<body>
<!--Header-->
<div class="header">
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info" id="left-info">
<p>
Hi
</p>
</div>
<div class="header-info" id="right-info">
<p>
Hi
</p>
</div>
</div>
</body>
</html>
If there is another method that I can use, that would be great. Also, I am learning CSS right now, so I am not confident with JavaScript at all, I only used it because that's how other people did it.
I think you are making it too complicated. I removed a lot of code and added flexbox for the header. Both divs at the side are allowed to grow as much as space allows.
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
width: 100%;
height: 100px;
top: 0;
position: fixed;
border-bottom: 5px solid var(--main-accent-color);
display: flex;
align-items: center; /* Vertical alignment */
}
.header-title {
width: 500px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
text-align: center;
}
.header-info {
flex-grow: 1;
}
<div class="header">
<div class="header-info">
<p>
Hi
</p>
</div>
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info">
<p>
Hi
</p>
</div>
</div>
I'm using jQuery to filter the display of divs, when i click on the name of a color i want it to display only the div that is coresponding to that color, for the "red" example, it works fine, but not the blue and the green one, first of all i want to know the problem that is occuring, then the best way to fix it.
Thank you very much.
/* jQuery function*/
$(document).ready(function(){
$("#button_red").click(function(){
$("#green").fadeOut(200);
$("#blue").fadeOut(200);
$("#red").fadeIn(500);
});
$("#button_blue").click(function(){
$("#red").fadeOut(200);
$("#green").fadeOut(200);
$("#blue").fadeIn(500);
});
$("#button_green").click(function(){
$("#red").fadeOut(200);
$("#blue").fadeOut(200);
$("#green").fadeIn(500);
});
});
#colors_container{
background-color: white;
width: 100%;
height: 900px;
}
#colors_container #colors_buttons{
width: 450px;
height: 50px;
margin: 20px auto 10px auto;
background-color: purple;
}
#colors_container #colors_buttons a {
text-decoration: none;
float: left;
margin-right: 30px;
border : solid 2px red;
padding: 10px 10px 10px 10px ;
color: white;
}
#colors_container #colors{
width: 1060px;
height: 800px;
margin: 10px auto 10px auto;
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#red , #blue , #green {
width: 250px;
height: 300px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="colors_container">
<div id="colors_buttons">
ALL
<a id="button_red" href="#">Red</a>
<a id="button_blue" href="#">Blue</a>
<a id="button_green" href="#">Green</a>
</div>
<div id="colors">
<div id="red"></div>
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
</div>
</div>
Because you have duplicated IDs (refer to id="red") I suggest to transform your IDs to class. Moreover I suggest a reduced event handler because the anchor text and your class names are similar:
$('#colors_buttons a').on('click', function(e) {
// get the button text (ALL, Red, Blue, Green), remove spaces and transform in lower case
var currColor = this.textContent.trim().toLocaleLowerCase();
// now in currColor variable we have a string like red or blue or green
// but this string corresponds to the class name of the divs....
if (currColor == 'all') {
$("#colors div").fadeIn(500);
} else {
// fade out all #colors divs not having such a class
$('#colors :not(.' + currColor + '').fadeOut(200);
// fade in the only one...
$("#colors ." + currColor).fadeIn(500);
}
})
#colors_container{
background-color: white;
width: 100%;
height: 900px;
}
#colors_container #colors_buttons{
width: 450px;
height: 50px;
margin: 20px auto 10px auto;
background-color: purple;
}
#colors_container #colors_buttons a {
text-decoration: none;
float: left;
margin-right: 30px;
border : solid 2px red;
padding: 10px 10px 10px 10px ;
color: white;
}
#colors_container #colors{
width: 1060px;
height: 800px;
margin: 10px auto 10px auto;
background-color: yellow;
padding: 10px 10px 10px 10px;
}
.red , .blue , .green {
width: 250px;
height: 300px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors_container">
<div id="colors_buttons">
ALL
<a id="button_red" href="#">Red</a>
<a id="button_blue" href="#">Blue</a>
<a id="button_green" href="#">Green</a>
</div>
<div id="colors">
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
</div>
</div>
I am trying to make an iframe which shows text putted in the textarea.
How can I do that? Am I missing something here?
<html>
<head>
<title>Code Player</title>
<script type="text/javascript" src="jquery.min.js"></script>
<!--i am using the latest jquery-->
<style type="text/css">
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
#header{
width: 100%;
background-color: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo{
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer{
width: 240px;
margin: 0 auto;
}
.toggleButton{
float: left;
border: 1px solid gray;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid gray;
}
.active{
background-color: #E8F2FF;
}
.highlightedButton{
background-color: gray;
}
textarea{
resize: none;
border-top: none;
border-color: gray;
}
.panel{
float: left;
width: 49%;
border-left: none;
}
iframe{
border: none;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<!--I want to get iframe data from the textarea section-->
<textarea id="htmlPanel" class="panel">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
$(".toggleButton").hover(function () {
$(this).addClass("highlightedButton");
}, function () {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function () {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width($((window).width() / 2));
$("iframe").contents().find("html").html($("#htmlPanel").val());
$("textarea").on('change keyup paste', function() {
$("iframe").contents().find("html").html($("#htmlPanel").val());
});
</script>
</body>
</html>
Everything in this code works expect the iframe. I can't get the data from textarea.
You have a syntax error, otherwise it works fine. Demo
$(".panel").width($((window).width() / 2));
should be
$(".panel").width($(window).width() / 2);
I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here