So I've got this simple setup of images and divs. On click of the div, the website should scroll down to another div. Everything seems alright but for some reason, it doesn't work. I've attached a jsfiddle to the bottom of the code.
Here's the code:
<div class="block-2">
<h4>Choose your coffee!</h4>
<div class="row row-centered">
<div class="col-xs-12 col-md-4 col-centered" >
<div class="scrollcezve">
<img src="img/cezve-2.png" class="hvr-grow img-round">
</div>
</div>
<div class="col-xs-12 col-md-4 col-centered" >
<img src="img/coffee-pot-heart.png" class="hvr-grow img-round" >
</div>
<div class="col-xs-12 col-md-4 col-centered">
<img src="img/espresso-cappuccino-machine.png" class="hvr-grow img-round" >
</div>
</div>
</div>
<div id="cezve">
<div class="row row-centered">
<div class="col-xs-6 col-lg-6" >
<img src="img/cezve.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-6" >
<h4>Cezve</h4>
<p>A cezve is a pot designed specifically to make Turkish coffee. The body and handle are traditionally made of brass or copper, occasionally also silver or gold. Though, recently, cezveler are also made from stainless steel, aluminium, or ceramics. The long handle is particularly useful to avoid burning one's hands, and the brim is designed to serve the coffee. <br>
The name cezve is of Turkish origin, where it is a borrowing from Arabic: جذوة "ember".
Other regional variations of the word cezve are jezve and čezve. In Ukrainian and Russian, the word is spelled джезва (where it exists alongside турка, IPA: [ˈturkə]). In Bosnia and Herzegovina, Serbia, Croatia, Slovenia and Czech Republic it is a long-necked coffee pot, spelled "džezva".</p>
</div>
</div>
.block-2 {
height: auto;
background-color: #795548;
text-align: center;
}
.block-2 img {
height: 250px;
width: 250px;
padding: 20px;
}
.block-2 h4 {
color: #fff;
font-family: 'Lily Script One', cursive;
font-size: 30px;
margin: 0;
padding: 10px 10px;
text-align: center;
}
#cezve {
height: auto;
background-color: #C59989;
}
#cezve img {
padding: 20px 20px;
height: 400px;
width: 550px;
}
#cezve p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
padding: 10px 50px 0px 0px;
}
#cezve h4 {
color: #fff;
font-family: 'Lily Script One', cursive;
font-size: 50px;
margin: 0;
padding-top: 20px;
}
$(".scrollcezve").click(function() {
$('html, body').animate({
scrollTop: $("#cezve").offset().top
}, 2000);
});
https://jsfiddle.net/qpr0vd4y/1/
By clicking on the div scrollcezve ( or the image cezve-2png ) it should scroll down to #cezve, but it isn't working.
Be sure you are including jQuery in the <head> of your document. The fiddle you provided had it included in the HTML window. If you move it into the external resources section, everything works.
Related
I am trying to add a listener to a small button like div so I can eventually change the color once clicked without having to use an actual button for different reasons. I have seen multiple people on here say that it works or should work. Is there something I am missing or is it just not possible? Just looking for answers!
It's pretty simple and I have verified the button works with the same function.
//this is the entire js page at the moment
var WorkingOutManager = (function () {
this.setCounter = 1;
this.workoutCounter = 1;
this.workoutID = "workout" + workoutCounter + "_set" + setCounter;
this.changeState = () => {
//I will eventually add the code to change the state of the div
console.log(this.workoutID);
}
this.currentSetButton = document.getElementById(this.workoutID).
this.currentSetButton.addEventListener("click", this.changeState);
return {
changeState: changeState
}
})();
<body>
<div id="banner">
<a id="banner_text_link" href="../content/home.html">Work It Out</a>
</div>
<div id="wrapper">
<div>
<img id="page_image"
onclick="window.location.href='../content/home.html'"
src="../images/work_it_out_logo_workouts.png" alt="Work It
Out logo">
</div>
<!--Eventually, Display a Timer after pressing start -->
<div id="current_workout">
<div class="workout_exercise">
<div class="set_name">Pushups</div>
<div onclick="WorkingOutManager.changeState()"
class="set_exercise" id="workout1_set1">15</div>
<div class="set_exercise" id="workout1_set2">15</div>
<div class="set_exercise" id="workout1_set3">15</div>
<div class="set_exercise" id="workout1_set4">15</div>
</div>
<div class="workout_exercise">
<div class="set_name">Situps</div>
<div class="set_exercise" id="workout2_set1">TF</div>
<div class="set_exercise" id="workout2_set2">TF</div>
<div class="set_exercise" id="workout2_set3">TF</div>
<div class="set_exercise" id="workout2_set4">TF</div>
</div>
<div class="workout_exercise">
<div class="set_name">Pullups</div>
<div class="set_exercise" id="workout3_set1">TF</div>
<div class="set_exercise" id="workout3_set2">TF</div>
<div class="set_exercise" id="workout3_set3">TF</div>
<div class="set_exercise" id="workout3_set4">TF</div>
</div>
<button onclick="WorkingOutManager.changeState()"
id="add_exercise">COMPLETE WORKOUT</button>
</div>
</div>
<script src="../scripts/working_out.js"></script>
</body>
#current_workout {
color: rgb(48, 48, 48);
width: 100%;
height: auto;
}
.workout_exercise {
background-color: #c4c4c4;
height: 3rem;
width: auto;
align-content: center;
}
.set_name {
color: #fafafa;
float: left;
height: 100%;
padding: 0 0.2rem;
width: calc(30% - 0.4rem);
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #c4c4c4;
font-size: 1.6rem;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.set_exercise {
float: right;
width: calc(calc(70% / 4) - 0.2rem);
height: 100%;
padding: 0 0.1rem;
margin: 0 0.1rem;
border-radius: 50%;
/* transform: rotate(-25deg);
text-transform: rotate(25deg); */
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #fafafa;
}
I am not receiving any error messages when I click on the div with the onClick listener. Nothing happens at all, in fact. The button at the bottom of the "current_workout" div works properly and logs the correctly formatted "workoutID."
It works for me if I change the '.' at the end of this line to a semicolon:
this.currentSetButton = document.getElementById(this.workoutID).
Because you're using float: right on .set_exercise, the items are listed from right to left instead of left to right. The clickable item, workout1_set1 is at the right end of the row, not the left. My guess is that you've been clicking the wrong item. I've tweaked your css to highlight the clickable item in the snippet below.
(The handler is firing twice because you've also got an onclick attribute on the div.)
FWIW—I'm not going to tell you how to do your thing—but I see no good reason to use float here (or anywhere at all, ever, really). You could achieve this layout with flexbox, grid, or a table and avoid all of the headaches that come with floats. (I don't usually advocate for tables, but one could argue that this is a table.)
var WorkingOutManager = (function () {
this.setCounter = 1;
this.workoutCounter = 1;
this.workoutID = "workout" + workoutCounter + "_set" + setCounter;
this.changeState = () => {
//I will eventually add the code to change the state of the div
console.log(this.workoutID);
}
this.currentSetButton = document.getElementById(this.workoutID);
this.currentSetButton.addEventListener("click", this.changeState);
return {
changeState: changeState
}
})();
#current_workout {
color: rgb(48, 48, 48);
width: 100%;
height: auto;
}
.workout_exercise {
background-color: #c4c4c4;
height: 3rem;
width: auto;
align-content: center;
}
.set_name {
color: #fafafa;
float: left;
height: 100%;
padding: 0 0.2rem;
width: calc(30% - 0.4rem);
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #c4c4c4;
font-size: 1.6rem;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.set_exercise {
float: right;
width: calc(calc(70% / 4) - 0.2rem);
height: 100%;
padding: 0 0.1rem;
margin: 0 0.1rem;
border-radius: 50%;
/* transform: rotate(-25deg);
text-transform: rotate(25deg); */
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #fafafa;
}
#workout1_set1 {
background: red;
color: white;
font-weight: bold;
}
<div id="banner">
<a id="banner_text_link" href="../content/home.html">Work It Out</a>
</div>
<div id="wrapper">
<div>
<img id="page_image"
onclick="window.location.href='../content/home.html'"
src="../images/work_it_out_logo_workouts.png" alt="Work It
Out logo">
</div>
<!--Eventually, Display a Timer after pressing start -->
<div id="current_workout">
<div class="workout_exercise">
<div class="set_name">Pushups</div>
<div onclick="WorkingOutManager.changeState()"
class="set_exercise" id="workout1_set1">15</div>
<div class="set_exercise" id="workout1_set2">15</div>
<div class="set_exercise" id="workout1_set3">15</div>
<div class="set_exercise" id="workout1_set4">15</div>
</div>
<div class="workout_exercise">
<div class="set_name">Situps</div>
<div class="set_exercise" id="workout2_set1">TF</div>
<div class="set_exercise" id="workout2_set2">TF</div>
<div class="set_exercise" id="workout2_set3">TF</div>
<div class="set_exercise" id="workout2_set4">TF</div>
</div>
<div class="workout_exercise">
<div class="set_name">Pullups</div>
<div class="set_exercise" id="workout3_set1">TF</div>
<div class="set_exercise" id="workout3_set2">TF</div>
<div class="set_exercise" id="workout3_set3">TF</div>
<div class="set_exercise" id="workout3_set4">TF</div>
</div>
<button onclick="WorkingOutManager.changeState()"
id="add_exercise">COMPLETE WORKOUT</button>
</div>
</div>
What I am trying to figure out is how to have two things that are shown in desktop disappear in mobile. What is happening right now is that I have two aspects of my code the classes with images and the class titles in desktop and what is hidden (what the user has to click to get to) is the description of the project. My desktop version is perfect and how I want it, but the only issue I am having is that in mobile I ONLY want to show the descriptions of the projects and not the two clickable steps before. I know that this has something to do with display:none; or a combination of display properties but what I have been trying does not seem to work.
I was not sure how to put this in a snippet or in a fiddle because there are multiple html pages as well as a JSON file. So in that case I will link a url to it so that it is accessible.
If this does not make any sense or you need me to clarify I would be more than happy to! I could really use some help with this so if anyone out there has an idea on how to fix this it would be greatly appreciated! Thanks.
http://sws.mnstate.edu/ry6750sm/data-proj/education2.html
Here is the education.html:
<body>
<hr class="hr2">
<section id="content">
<div id="container">
<h2 >Class Projects</h2>
<div id="movecontainer">
<div id="move">
<div class="third ">
<div id="classes"><!--was event -->
<a id="GDES203" href="GDES203.html" ><img src="img/circlecircle.png" alt="GDES203" />GDES203</a>
<a id="gcom355" href="gcom355.html" ><img src="img/circlecircle.png" alt="GCOM355" />GCOM355</a>
<a id="COM230" href="COM230.html" ><img src="img/circlecircle.png" alt="COM230" />COM230</a>
</div>
</div>
<div class="third ">
<div id="projects"><!--was sessions -->
<p>Select a class</p>
</div>
</div>
<div class="third">
<div id="details"></div>
</div>
</div>
</div>
</div><!-- #container -->
</section><!-- #content -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/gcomclasses.js"></script>
</body>
Here is the description html:
<body>
<header>
</header>
<div id="Fender-Guitar" class="flex-item">
<h3>Fender Stratocaster Electric Guitar</h3>
<img alt="company logo" src="three-projects/int-com-graph/guitar2.png" height="150"/>
<p>The guitar is a Fender Stratocaster Electric Guitar that I replicated in Adobe Illustrator. I used shadows and highlights to create depth for the piece as well as added gradient detail. </p>
</div>
<div id="Fancy-Fishes" class="flex-item">
<h3>Fancy Fishes</h3>
<a href="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" ><img alt="company logo" src="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" height="150"/></a>
<p>Fancy Fishes is a clothing line that features the underwater style and I created this piece by using many gradient meshes, a scaling pattern for the fish, and layered meshes for the realistic pearl effect. </p>
</div>
<div id="Dragon-Tracks" class="flex-item">
<h3>Dragon Tracks</h3>
<img alt="company logo" src="three-projects/int-com-graph/covercover.jpg" height="150"/>
<p>This CD cover was inspired by icycles. The way I captured this look was by using photos of melted crayon wax and putting it into Adobe Photoshop and changing the hue to get the desired color. The smoke was created in Adobe Illustrator as a brush to try and create a unique smoked icycle style. </p>
</div>
<div id="Gelato-Company" class="flex-item">
<h3>L'Airone Gelato</h3>
<img alt="company logo" src="three-projects/graphic-design/gelato.jpg" height="150"/>
<p>This design was for a gelato company that served all its ice cream as coffee flavors. Thus, I tried to create a coffee-oriented design with a logo centered around coffee in an ice cream cone. </p>
</div>
<div id="Company-Logo" class="flex-item">
<h3>Company Logo</h3>
<img alt="company logo" src="three-projects/graphic-design/abstract.jpg" height="150"/>
<p>This piece was inspired by the idea of creating a logo for a company with an abstract panda logo. This company's logo is made up of pieces that unify the panda and thus the company. </p>
</div>
<div id="Band-Logo" class="flex-item">
<h3>Band Logo</h3>
<img alt="company logo" src="three-projects/graphic-design/abpanC.jpg" height="150"/>
<p>This logo was inspired by the band KISS. If KISS was to have a panda as their mascot then this is the type of logo that they would have. This was made with the crystallize tool in Adobe Illustrator to get the spiky feel. </p>
</div>
<div id="Photo-1" class="flex-item">
<h3>Flower</h3>
<img alt="company logo" src="three-projects/Photography_pics/flower.jpg" height="150"/>
<p>This photo was created with a painting with light technique where the camera captures a light pattern through long exposure. The more the light is moved in the shot and the longer the exposure, the lighter and movement of light is captured. This photo was captured with a thirty second exposure and edited in Adobe Photoshop. </p>
</div>
<div id="Photo-2" class="flex-item">
<h3>Graffiti</h3>
<img alt="company logo" src="three-projects/Photography_pics/IMG_0441.jpg" height="150"/>
<p>This photo was captured in the heart of downtown Fargo. The graffiti was on a random building from an anonymous artist. So the origins of the art is unknown, however the piece is beautifully painted and was edited in Adobe Photoshop. </p>
</div>
<div id="Photo-3" class="flex-item">
<h3>Grains of Sand</h3>
<img alt="company logo" src="three-projects/Photography_pics/IMG_0505.jpg" height="150"/>
<p>This photo was captured of a building’s wall in downtown Fargo that was eroding. The intent of the photo was to try and capture the details of the wall so that the viewer could see the grains of sand. </p>
</div>
</body>
Here is the Javascript:
// NOTE: This example will not work locally in all browsers.
// Please try it out on the website for the book http://javascriptbook.com/code/c08/
// or run it on your own server.
$(function() { // When the DOM is ready
var projectList; // Declare global variable
$.ajax({
beforeSend: function(xhr) { // Before requesting data
if (xhr.overrideMimeType) { // If supported
xhr.overrideMimeType("application/json"); // set MIME to prevent errors
}
}
});
// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
function loadClassProjects() { // Declare function
$.getJSON('data/projects.json') // Try to collect JSON data
.done( function(data){ // If successful
projectList = data; // Store it in a variable
}).fail( function() { // If a problem: show message
$('#classes').html('Sorry! We could not load the Class Projects at the moment');
});
}
loadClassProjects(); // Call the function
// CLICK ON THE EVENT TO LOAD A ClassProjects
$('#content').on('click', '#classes a', function(e) { // User clicks on event
e.preventDefault(); // Prevent loading page
var loc = this.id.toUpperCase(); // Get value of id attr
var newContent = ''; // Build up ClassProjects by
for (var i = 0; i < projectList[loc].length; i++) { // looping through events
newContent += '<li><span class="software">' + projectList[loc][i].software + '</span>';
newContent += '<a href="descriptions.html#';
newContent += projectList[loc][i].title.replace(/ /g, '-') + '">';
newContent += projectList[loc][i].title + '</a></li>';
}
$('#projects').html('<ul>' + newContent + '</ul>'); // Display projectList on page
$('#classes a.current').removeClass('current'); // Update selected item
$(this).addClass('current');
$('#details').text(''); // Clear third column
});
// CLICK ON A SESSION TO LOAD THE DESCRIPTION
$('#content').on('click', '#projects li a', function(e) { // Click on session
e.preventDefault(); // Prevent loading
var fragment = this.href; // Title is in href
fragment = fragment.replace('#', ' #'); // Add space after#
$('#details').load(fragment); // To load info
$('#projects a.current').removeClass('current'); // Update selected
$(this).addClass('current');
});
});
Here is the JSON:
{
"GDES203": [
{
"software": "Illustrator",
"title": "Gelato Company"
},
{
"software": "Illustrator",
"title": "Company Logo"
},
{
"software": "Illustrator",
"title": "Band Logo"
}
],
"GCOM355": [
{
"software": "Illustrator",
"title": "Fender Guitar"
},
{
"software": "Illustrator",
"title": "Fancy Fishes"
},
{
"software": "Indesign Illustrator Photoshop",
"title": "Dragon Tracks"
}
],
"COM230": [
{
"software": "Photoshop",
"title": "Photo 1"
},
{
"software": "Photoshop",
"title": "Photo 2"
},
{
"software": "Photoshop",
"title": "Photo 3"
}
]
}
Here is the CSS:
#attended{
margin-left: 20px;
margin-right:20px;
font-size:25px;
margin-top:80px;
}
body {
background-color: #fff;
height:100%;
font-family: 'Open Sans', arial, sans-serif;
width: 960px;
margin: 0 auto 0 auto;
color: white;
}
.all{
margin-left: auto;
margin-right: auto;
display:block;
}
h1 {
font-weight: normal;
margin: 28px 0 0 0;
float: left;
width: 225px;
height: 90px;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
h2 {
font-size: 40px;
text-align: center;
padding: 0;
color: white;
line-height: 1em;
letter-spacing: -.06em;}
h3 {
margin: 0;
font-size: 1.4em;
color: #29BCCA;
font-family: 'Philosopher', sans-serif;
padding-bottom: 15px;
}
a {text-decoration: none; color: white;}
.third, .classes {
width: 320px;
float: left;
text-align: center;
}
.hr2{
border: none;
border-bottom: 1px solid #999;
width: 70%;
color:#485A5F;
height: 2px;
}
.classes p {border-right: 1px solid #999 ;
}
#content .classes:last-child p {border-right: none;}
.third p {
padding: 0 20px 0 20px;
margin: 40px 0 20px 0;
text-align: left;
line-height: 1.4em;}
/* Projects */
#classes a {
font-family: 'Philosopher', sans-serif;
font-size: 120%;
text-transform: uppercase;
text-align: left;
line-height: 2.5em;
display: block;
height: 120px; width: 100%;}
#classes img {
width: 30px;
height: 30px;
float: left;
margin-right: 10px;
padding: 10px;
}
#classes a:hover, #projects a:hover {color: #1DA0A3;}
#projects a {
font-family: 'Sahitya', serif;
font-size: 120%;}
#projects p {
margin-top: 2em;}
#projects ul {
border-left: 1px solid #999;
border-right: 1px solid #999;
height: 350px;
padding: 0 20px 0 20px;
margin: 0 0 40px 0;}
#projects li {
list-style-type: none;
padding: 40px 0px 40px 0px;
border-top: 1px solid #d6d6d6;
text-align: left;
}
#projects li:first-child {
border-top: none;
padding-top: 1.8em;}
#projects li .software {
display: inline-block;
width: 110px;
}
#details div {
padding: 1.8em 0 0em 1;}
#details p {
padding: 10px;
margin: 0.8em 0 0 2em;}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.third:nth-child(1) a img, .third:nth-child(2) p {
display: none;
}
}
So I've got this:
http://i.imgur.com/EkmIEOx.jpg?1
I want the espresso machine to be centered inside the column, not next to the next, not attached to the left, but right in the middle.
This is the code I've got ( for some reason the jsfiddle doesn't work so I'm posting it here just for the code ).
#espresso-machine {
height: auto;
background-color: #C59989;
padding: 68px 0 0;
}
#espresso-machine p {
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
font-family: 'Indie Flower', cursive;
font-size: 25px;
color: #000;
padding: 10px 50px 0px 0px;
}
#espresso-machine h4 {
color: #000;
font-family: 'Lily Script One', cursive;
font-size: 50px;
margin: 0;
padding-top: 20px;
padding-left: 0;
}
<div id="espresso-machine">
<div class="row row-centered">
<div class="col-xs-6 col-lg-6">
<img src="https://dummyimage.com/300x100/000/fff" class="hvr-grow">
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<h4>Espresso machine</h4>
<p>An espresso machine brews coffee by forcing pressurized water near boiling point through a "puck" of ground coffee and a filter in order to produce a thick, concentrated coffee called espresso. The first machine for making espresso was built and patented in 1884 by Angelo Moriondo of Turin, Italy. An improved design was patented in 1901, which was bought by the founder of the "La Pavoni" company which from 1905 produced espresso machines commercially on a small scale in Milan. <br><br>
Multiple machine designs have been created to produce espresso. Several machines share some common elements, such as a grouphead and a portafilter. An espresso machine[1] may also have a steam wand which is used to steam and froth liquids, to include milk, for coffee drinks such as cappuccino and caffe latte. Espresso machines may be steam-driven, piston-driven, pump-driven, or air-pump-driven. Machines may be manual or automatic.</p>
</div>
</div>
</div>
https://jsfiddle.net/jok2c383/
Try like this. updated your fiddle too https://jsfiddle.net/jok2c383/7/
<div class="col-xs-6 col-lg-6">
<div class="col-md-6 col-md-offsset-3">
<img src="img/espresso-cappuccino-machine.png" class="hvr-grow">
</div>
</div>
You may want to use flexbox here fiddle
94% coverage http://caniuse.com/flexbox
.is-centered {
display: flex;
align-items: center;
justify-content: center;
}
Images are inline elements, so if you give the parent element the bootstrap class of "text-centre" you are centering any inline elements. This would include text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
As an alternate option to the text-center class, you could add the class "center-block" to the actual image. This makes the image a block element, and centers it with "margin-left:auto, margin-right:auto". Using center-block also means you can also use "img-responsive" and center the image.
Have a look at the bootstrap helper classes for more information:
http://getbootstrap.com/css/#helper-classes
Try like this https://jsfiddle.net/jok2c383/17/
i just add new div image inside image and add this css:
.image {
width:100%;
text-align: center;
display:flex;
align-items: center;
justify-content: center;
height:100vh;
flex-flow: column;
}
i have some issue i'm new in javascript and can't handle with multilevel nested blocks: I need to open nested block using toogle and mootools. I found some examples like accorodion, but i need toogle effect on nested blocks.
Can you help me?
Thanks.
1) here example that i found on jquery, i need the same but on mootools
$('.nested-accordion').find('.comment').slideUp();
$('.nested-accordion').find('h3').click(function(){
$(this).next('.comment').slideToggle(100);
$(this).toggleClass('selected');
});
* {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 1em;
font-family: Calibri, Arial, sans-serif;
}
.container {
margin: 0 auto;
width: 80%;
}
.nested-accordion {
margin-top: 0.5em;
cursor: pointer;
}
.nested-accordion h3 {
padding: 0 0.5em;
}
.nested-accordion .comment {
line-height: 1.5;
padding: 0.5em;
}
.nested-accordion h3 {
color: #47a3da;
}
.nested-accordion h3:before {
content: "+";
padding-right: 0.25em;
color: #becbd2;
font-size: 1.5em;
font-weight: 500;
font-family: "Lucida Console", Monaco, monospace;
position: relative;
right: 0;
}
.nested-accordion h3.selected {
background: #47a3da;
color: #fff;
}
.nested-accordion h3.selected:before {
content: "-";
}
.nested-accordion .comment {
color: #768e9d;
border: 0.063em solid #47a3da;
border-top: none;
}
.nested-accordion a {
text-decoration: none;
color: #47a3da;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a comment
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a another content which is really long and pointless but keeps on going and it technically a run-on sentence but here is a link to google to distract you -> <a href='http://google.com' target='_blank'>link</a>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
One Mootools function I like is Reveal.
This can reveal up/down or left/right.
element.toggle() will snap to the opposite state (if open, will close without animating, etc). Otherwise, element.reveal() or element.dissolve() will open / close.
In your case, you would want something like:
var container = document.getElement('.container');
Array.each(container.getElements('.comment'), function(comment){
comment.set('reveal', {duration: 250}).toggle();
if(comment.getPrevious('h3')){
comment.getPrevious('h3').addEvent('click', function(e){
var comment = e.target.getNext('.comment');
if(comment.getStyle('display')==='block'){
e.target.getNext('.comment').dissolve();
}else{
e.target.getNext('.comment').reveal();
}
});
}
});
I am using Mootools long hand methods here (avoiding dollar) so that you can play nice with other frameworks (like jQuery).
The Mootools docs are pretty good, but may take some trial and error ;)
Mootools Reveal
Here is an example with your HTML / CSS:
JSFiddle Example
I hope this helps!
I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.
I have provided the HTML, CSS and JS code for my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<style>
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat', Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display: inline-block;
height: 500px;
width: 650px;
}
#twitter {
display: inline-block;
height: 300px;
width: 300px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</head>
<body>
<div class="mainlogo">
<div>Muhammed's
<br>Webpage
</div>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
#applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"><u>Basic Information</u></h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"><u>Curriculum Vitae</u></h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service
environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"><u>Portfolio</u></h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"><u>Report</u></h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</div>
</body>
</html>
Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.
- EDIT 1 -
Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:
.twitter-timeline {
height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}
- END EDIT 1 -
You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.
To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:
.photo {
height:200px;
}
.photo:hover {
height:400px;
}
That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.
- EDIT 2 -
So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:
.photo {
background-color: white;
padding: 1%;
margin-left: 5%;
margin-bottom: 2%;
-webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
float: left;
width: 25%;
transition: all 0.25s ease-out;
}
According to this code I wrote for you, now the formula is:
(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%
6 times 1% because the padding will be added to both left and right of the picture.
- END EDIT 2 -
The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:
html {
background-color:red;
}
With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.
Try this codes.
twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.
MAKE IT COOL,WE LOVE OUR CODING.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>
</head>
<div class="mainlogo">
<body>Muhammed's
<br>Webpage</body>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by #applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio" style="height:250px">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
<ul class="portfolioimg" style="">
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
</ul>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</body>
</html>
<style>
body{
background-color:gray;
}
.portfolioimg {
clear: both;
display: block;
margin: 30px auto 0;
padding: 0;
position: static !important;
text-align: center;
width: 1000px;
background-color:transparent;
}
.portfolioimg > li {
background-color: transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none;
margin-right: 40px;
text-align: center;
}
.portfolioimg > li img{
width:200px;
}
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat' , Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display:inline-block;
height: 500px;
width: 650px;
}
#twitter {
display:inline-block;
height: 300px;
width: 520px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>