We Keep Coding

How to animate containers using JS

I have a container that holds images of work. How do I use JS to bring up a button and some extra info on the image when I hover over it.
I tried using CSS and the hover tag but it would apply the effect I needed below the image, Not on top of it. The page is HTML, with CSS and the only JS code will be for this effect. The site is for my portfolio so each image is different but the class is all the same. The code below is what the original code is without the effect. If you could show me how to correctly do this I would really appreciate it, thanks.
I don't have the code I tried using before as I tried that many it felt pointless. I'll edit the question when I attempt another solution and post either the failed attempt or the successful attempt.
Here is a JSFiddle link

Welcome to StackOverflow!
So it seems like you only wanted to use the JavaScript as a fallback since you couldn't get the CSS to work. I would recommend against this as you may run into various compatibility issues between browsers and browser versions if you're not using a Polyfill.
To do this in CSS, I would recommend creating a container for each work item. In my example, I created a .item class and used that to contain the image and text. Once that was created, we can now look for a :hover on each .item and use that to modify the elements inside of our .item.
Let me know if you need me to clarify any part of my explanation or if I misunderstood any parts of your question.
.item {
width: 50%;
margin: 0 auto;
}
.wrapper {
text-align: center;
}
.work_container {
display: inline-block;
position: relative;
/* width: 1200px; Removed for testing */
height: 100%;
text-align: center;
}
.work_title {
display: inline-block;
width: 100%; /* Changed for testing */
height: 30px;
position: relative;
top: 30px;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 500;
color: black; /* Changed for testing */
/* Used for the animation */
opacity: 0;
transition: 0.3s;
}
.work-hub {
width: 100%; /* Added for testing */
position: relative;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
-webkit-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
}
/* Run the hover on the container */
.item:hover .work_title {
opacity: 1;
}
<main>
<div class="wrapper">
<div class="work_container">
<div class="item">
<h1 class="work_title">Logo Visualisation</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Rock Banner</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Forest Fire</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Beach Body</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
</div>
</div>
</main>

Make expandable div start closed

I have this code which, when the 'A' is clicked, extra content comes down. But, I want the extra content to start hidden. How would I do this?
Here is the code:
HTML:
<section class="box2">
<header class="box-head">
<div class="box-title fr"> <span class="box-icon"></span>
</div> <a class="box-toggle fl active" href="#">A</a>
</header>
<div class="box-content active">
Content</div>
</section>
Javascript:
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
CSS:
.widget-toggle {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 18px;
height: 9px;
margin-top: 15px;
margin-left: 13px;
background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}

Set the .box-content elements to display: none in CSS by default:
.box-content {
display: none;
}
Updated fiddle

Use this way. Replace your code:
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
With the following:
$('div.box-content').hide();
$("a.box-toggle").on('click', function () {
$(this).closest(".box-head").next('div.box-content').slideToggle(200).toggleClass('active');
});
The reason for change is, if you have multiple .box-head, then it will trigger the slide on everything and not just one.

Trying to use iosTouch js for hover

I have hover effects I am using that work great for desktop but need them to work on mobile devices as well. I tried to follow a Youtube video on adding iosTouch with mootools to allow a hover like effect for ios devices. I am doing something wrong in my code and can't get it to work. I added the mootools to my head. Here is the rest of my code.
<div class="page" id="resume">
<div class="container-fluid">
<h2>Resume</h2>
<div class="row">
<blockquote class="col-sm-6" id="qualifications">
<div class="quote">
<span class="intro" id="iosTouch">Qualifications</span>
<span class="more">
<ul>
<li>Excellent communication skills, both oral and written</li>
<li>Ability to quickly learn and apply new technologies</li>
<li>8 years of experience developing curriculum for instructor-led, web-based and blended modalities</li>
<li>2 years of experience creating HTML web pages including the testing and debugging of code</li>
</ul>
</span>
</div>
</blockquote>
</div><!--row-->
</div><!--content container-->
</div><!-- resume page -->
The JS I added is:
//fix hover events for ios
$("iosTouch").addEvents({
touchstart: function() {
$("iosTouch").addClass('more');
},
touchend: function() {
$("iosTouch").removeClass('more');
}
});
My CSS is:
#resume {
padding: 0;
border-top: 40px solid transparent;
}
#resume blockquote {
margin: 0;
padding: 0;
border-left: none;
min-height: 500px;
position: relative;
}
#resume blockquote .quote {
background-color: rgba(255,255,255,.8);
padding: 20px 5%;
position: absolute;
bottom: 0;
width: 75%;
font-weight: 400;
border-radius: 0 50px 0 0;
}
#resume blockquote .quote:hover {
background-color: rgba(255,199,96,.9);
}
#resume #qualifications {
background:url(../images/resume_qualifications.jpg) no-repeat center center;
background-size: cover;
}
#resume .quote .more {
opacity: 0;
font-size: 0;
line-height: 0;
padding-top: 10px;
}
#resume .quote:hover .more {
font-family: "Open Sans", sans-serif;
font-weight: 100;
display: block;
opacity: 1;
font-size: .8em;
line-height: 120%;
}
#resume .quote .intro::after {
content: '...';
}
#resume .quote:hover .intro::after {
content: '';
}
Any help you can provide is greatly appreciated

You're simply using the jQuery ($) function wrong. Replace $("iosTouch") with $("#iosTouch").
This is because jQuery attempts to emulate css selectors for getting DOM objects, and in CSS, # targets divs.
Without the # it implies that you want to perform the function on a tag called iosTouch.

how to add this jquery script in to wordpress website

i liked this countdown script from http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html and want to use this one to my wordpress website , i read some tutorials about how to put any script in wordpress but i could not understand exactly cause i am newbie , can you help me to do this step by step
now i will show the script author instructions to use this script on normal html page
i want to do these steps also but in wordpress .
Include the necessary javascript files at the end of the page.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="../jquery.final-countdown.js"></script>
Include the required bootstrap 3 CSS in the head of the page.
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Create a countdown timer using the html structure like this:
<div class="countdown-container container">
<div class="clock row">
<!-- days -->
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
</div>
</div>
</div>
<!-- hours -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
</div>
</div>
</div>
<!-- minutes -->
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
</div>
</div>
</div>
<!-- seconds -->
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
</div>
</div>
</div>
</div>
</div>
Add the following CSS snippet to your CSS file.
html, body {
height: 100%;
}
html {
background-image: url('../img/sample.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/pattern.png');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
}
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media (min-width: 768px) and (max-width: 991px) {
.clock-item {
margin-bottom: 30px;
}
}
#media (max-width: 767px) {
.clock-item {
margin: 0px 30px 30px 30px;
}
}
Initialize the countdown timer and set the start time, end time and current time in the javascript.
<script type="text/javascript">
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319'
});
</script>
All the default options.
$(document).ready(function() {
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319',
selectors: {
value_seconds: '.clock-seconds .val',
canvas_seconds: 'canvas_seconds',
value_minutes: '.clock-minutes .val',
canvas_minutes: 'canvas_minutes',
value_hours: '.clock-hours .val',
canvas_hours: 'canvas_hours',
value_days: '.clock-days .val',
canvas_days: 'canvas_days'
},
seconds: {
borderColor: '#7995D5',
borderWidth: '6'
},
minutes: {
borderColor: '#ACC742',
borderWidth: '6'
},
hours: {
borderColor: '#ECEFCB',
borderWidth: '6'
},
days: {
borderColor: '#FF9900',
borderWidth: '6'
}}, function() {
// Finish callback
});
});

To add Javascript and CSS files inside Wordpress, you need to use wp_register_script and wp_register_style functions inside your functions.php theme file.
So let's translate every step:
Include the necessary javascript files at the end of the page.
You don't need to include jquery as it is already included by Wordpress. Download kinetic.js and jquery.final-countdown.js, and add them into your theme folder in a js directory.
Then in your functions.php add the following:
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
wp_enqueue_script('kinetic', get_stylesheet_directory_uri() . '/js/kinetic.js', array('jquery'), '', true);
wp_enqueue_script('countdown', get_stylesheet_directory_uri() . '/js/jquery.final-countdown.js', array('jquery'), '', true);
}
Include the required bootstrap 3 CSS in the head of the page.
In the same function, add the following line:
wp_enqueue_style('bootstrap_css', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
Create a countdown timer using the html structure like this
See where you want to include it. If you want this on all the pages inside header, add this inside header.php in your theme folder.
Add the following CSS snippet to your CSS file.
Just add the code inside your actual stylesheet.
Initialize the countdown timer and set the start time, end time and current time in the javascript.
You could do this in your own js file. Add a countdown.js file in your js folder, and enqueue it like before:
wp_enqueue_script('countdown_script', get_stylesheet_directory_uri() . '/js/countdown.js', array('jquery'), '', true);
And in your countdown.js file:
jQuery(document).ready(function($) {
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319'
});
});
That way it will prevent any conflict.

How to wrap more than one div around a div

I have a div (Slideshow) and I want to wrap around it small divs (Items). The Slideshow div will be static and the Items will be rendered automatically using a Repeater Control.
I made this image to better illustrate what I need to achieve.
I saw this Question and I thought I could use the same logic, let the Repeater items get rendered normally and then change the markup using JavaScript and use some sort of a CSS Grid layout to style the first 4 items for example on the left and the right and the rest will be beneath them but I'm not sure how to do it plus if there's a more simple solution I thought it could be cleaner than using the concept I saw in the question I referred.
Update1: Changed the picture to show the exact desired output

You could generate a Masonary layout. This plug in may be helpful, https://github.com/desandro/masonry
You could do this with bootstrap columns as well. For the first row, with the slideshow, you have 3 columns. The outer left and right columns will have 2 nested rows. http://getbootstrap.com/examples/grid/. This is what Im most familiar with so I'll show you how I would implement a solution for the first row and how to implement a second row with 4 columns.
<div class="row">
<!-- Outer Left Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
<div class="col-xs-12">
Slide Show
</div>
<!-- Outer Right Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
</div>
<!-- Row With Four Items -->
<div class="row">
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
</div>
Checkout the angular material layout system as well. This will be harder to implement though because it requires Angular. https://material.angularjs.org/latest/#/layout/grid

Check this solution out and see if you can adopt it to your project: http://jsfiddle.net/1b0hoked/.
HTML:
<div id = "wrapper">
<div id = "slideshow"></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
#wrapper {
counter-reset: item-counter;
text-align: right;
margin: 0 auto;
display: table;
outline: 1px solid gray;
position: relative;
}
#slideshow {
width: 210px;
height: 210px;
line-height: 210px;
text-align: center;
border: 2px solid red;
position: absolute;
top: 5px;
left: 50%;
margin-left: -105px;
}
#slideshow:before {
content: "Slide Show";
vertical-align: middle;
font: bold 16px/1 Sans-Serif;
color: red;
}
.item {
height: 100px;
width: 100px;
text-align: center;
line-height: 96px;
border: 2px solid #aaa;
}
.item:before {
counter-increment: item-counter;
content: "item " counter(item-counter);
vertical-align: middle;
font: bold 12px/1 Sans-Serif;
color: #aaa;
}
.item {
float: left;
margin: 5px;
}
.item:nth-of-type(4n + 1) {
clear: left;
}
.item:nth-of-type(3) {
float: right;
margin-top: -105px;
}
.item:nth-of-type(4) {
float: right;
clear: right;
margin-left: -105px;
}
.item:nth-of-type(2) {
clear: left;
}
JS/jQuery:
$(function() {
var numToAdd = 50;
while(--numToAdd >= 0) {
$("</p>").addClass("item").appendTo("#wrapper");
}
});