Develop Reference

only show modal scroll when a modal is open

Hi can someone tell me why my solution doesn't work, I would like to hide the scroll of my page when a modals is opened.
and allow the scroll on my modal too.
By the same time if a slide up & down effect could be added it will be awesome.
I used javascript but it doesn't work for me now:
$(function(){
$('.modal').click(function() {
$('body').css({'overflow': 'hidden'});
});
$('.close').click(function() {
$('body').css({'overflow': 'scroll'});
});
});
here is my code:
<a class="modal" href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
x
<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3. You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
</div>
</div>
<a class="modal" href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
X
<div class="middle">
Modal Box 2
Box 2
yadda yadda
</div>
</div>
.modalDialog:target > body { overflow:hidden; }
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > .middle {
width: 80%;
position: relative;
margin: 10% auto;
padding: 10px 20px;
background: #fff;
overflow:scroll;
}
.close {
background: #fff;
color: #000;
line-height: 0px;
text-align: center;
position: absolute;
right: 10px;
top: 20px;
width: 24px;
text-decoration: none;
}
here is a jsfiddle
http://jsfiddle.net/kodjoe/3Vykc/641/

You are trying to use jQuery, but you never included it. Check out the code below. My approach is a little different from yours. I add and remove class instead of changing css property.
$(function(){
$('.modal').click(function() {
$('body').addClass('scroll');
});
$('.close').click(function() {
$('body').removeClass('scroll');
});
});
.scroll {
overflow: hidden;
}
.modalDialog:target > body { overflow:hidden; }
.modalDialog {
overflow:scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > .middle {
width: 80%;
position: relative;
margin: 10% auto;
padding: 10px 20px;
background: #fff;
}
.close {
background: #fff;
color: #000;
line-height: 0px;
text-align: center;
position: absolute;
right: 10px;
top: 20px;
width: 24px;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<a class="modal" href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
x
<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3.
You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>
<a class="modal" href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
X
<div class="middle">
Modal Box 2 Box 2 yadda yadda
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>
<div style="background:#ccc;height:1500px;"></div>

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?

Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle

Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>

I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps

Prevent event handlers in an iframe from affecting the parent window/page (jump/scroll to top)

I would like to prevent a toggle event inside an iframe from causing the parent page to jump up to the top when clicked.
The child page does not do that by itself thanks to the following code below. However, when I interact with it while inside an iframe; the same child page causes the parent with the iframe to jumps up to the top when I click on the toggle button in the child page.
I used:
return false;
evt.preventDefault();
evt.stopPropagation();
And they work fine if I was looking at the child page by itself. However, the code has no effect in preventing the parent page from jumping to the top.
Child page code (Application Matrix PHP):
.documentBody
{
color: #808080;
padding: 0px 20px 0px 20px;
vertical-align: top;
}
.documentBody a
{
color: #0075a0;
text-decoration: none;
}
.documentBody a:hover
{
color: #0092c8;
}
.boxBodyArticulatedTrucks {
display: block;
height: 208px;
margin: auto;
background: url( "../assets/user-interface/articles/box/body/background/articulated-trucks.png" ) no-repeat center center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.boxBodyArticulatedTrucks:hover
{
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.questionForm
{
/*width: 587px;*/
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
}
.questionFormBody
{
/*background-color: #fbfbfb;
border: solid 1px #eeeeee;*/
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
display: none;
}
.btnAccordion
{
border: solid 1px #eeeeee;
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
padding-top: 20px;
background: url( "../assets/user-interface/articles/accordion/icons/down-arrow.png" ) no-repeat center right 20px #fbfbfb;
}
<div id="articulatedTruck">
<div class="documentBody">
<div class="btnAccordion">
Articulated Truck
</div>
</div>
<div class="questionForm">
<div id="questionFormBody0" class="questionFormBody">
<div style="padding-top: 26px; padding-bottom: 10px;">
1. What is the application(s)?
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#chkArticulatedTruck').change(function () {
$('#articulatedTruck').toggle(this.checked);
parent.setArticleSize();
return false; // Prevent page from jumping to the top
}).change(); // Ensure visible state matches initially
});
</script>
Parent page code:
<iframe id="article" src="./applications/application-matrix.php" width="627px" height="500px" frameborder="0" scrolling="no"></iframe>

Scripted image won't wrap with text

just trying to align some text with an image on the right, the image is using javascript to transition between 2 images. I need the transitional effects to stay but also be able to have text wrap to the left of it in the same container. Can anyone help please?
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kawasaki Motorcycle Club UK</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<nav>
<ul class="navbar">
<li>BIKES</li>
<li>NEWS</li>
<li>EVENTS</li>
<li>JOIN</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div class="contentbox">
<div id="maincontent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
<img name = "slides" id="slides" src="images/mybike.jpg"/>
<img name = "slides" id ="slides" src="images/racergreen.jpg"/>
<script> //adapted from https://www.youtube.com/watch?v=e1AYSgA57h8
var interval = 4 * 20; // seconds between change
var images = document.getElementsByName("slides");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</div>
</div>
<br>
<div>
<div class="socialcontainer">
<img id="facebookbutton"/>
<img id="twitterbutton"/>
<img id="googlebutton"/>
</div>
</div>
</body>
CSS
body {
font-family: 'Arial', sans-serif;
background-color: #000;
}
#wrapper {
max-width: 1000px;
margin: 0 auto;
background-color: #fff
padding: 32px;
}
#header {
height: 110px;
background: url(images/header.png);
}
header h1 { //NOT NEEDED
text-align: center;
color: #FFF;
}
header h2 { //NOT NEEDED
font-variant: small-caps;
text-align: center;
color: #fff;
}
.navbar {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background: url(images/navbar.png);
background-size: contain;
}
ul.navbar {
margin-top: 15px;
}
.navbar li {
display: inline;
padding: 0 40px 0 40px;
font-size: 30px;
font-weight: 800;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
background: #60bf19;
color: #FFF;
text-shadow:
-5px -5px 0 #000;
}
a:hover {
color:dimgrey;
text-shadow:
-5px -5px 0 #000;
}
a:active {
color: #FFF
text-shadow:
-5px -5px 0 #000;
}
.contentbox {
width: 1000px;
position: relative;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
height: 1000px;
}
#maincontent {
color: #FFF;
position: relative;
float: left;
}
#slides{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
right: 0
}
#slides.fade-out {
opacity:0;
}
#slides.fade-in {
opacity:1;
}
.socialcontainer {
width: auto;
height: auto;
text-align: center;
}
#facebookbutton {
background-image: url(images/facebook-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#facebookbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#twitterbutton {
background-image: url(images/twitter-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#twitterbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#googlebutton {
background-image: url(images/google-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#googlebutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Assuming I understand what you are trying to do..
you could place the text and images inside the #maincontent element within seperate div tags respectively and then align them side-by-side with their own css. Technically they aren't within the SAME container like you said you wanted but they are still both within the #maincontent container.
here is my JSFiddle that hopefully helps. note that I included random images inplace of your ones for the fade effect.
<div id="maincontent">
<div id="content-box">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
</div>
<div id="image-box">
<img name="slides" width="500px" id="slides" src="images/mybike.jpg" />
<img name="slides" width="500px" id="slides" src="images/racergreen.jpg" />
</div>
</div>
added css:
#content-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;
}
#image-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;
}

Expand input field width smoothly on click

I want to display an input field .search when clicking on .icon class. I have managed to do that with following code. However instead of show/hide, I want to display the input field by smoothly expanding its width.
How that can be done?
JSFiddle Demo:
http://jsfiddle.net/9nPW9/
HTML:
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon"></div>
</div>
CSS:
.box{
position: relative;
width: 220px;
}
.search {
width: 200px;
padding: 5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
float: left;
}
.icon{
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
JS:
$('.icon').click(function() {
$('.search').toggle();
});

Why not change your code to toggle a class, thus keeping a clear separation between functionality (JS) and style (CSS)
Below is some sample code, you will likely want to edit for your precise needs.
Demo Fiddle
JS
$('.icon').click(function() {
$('.search').toggleClass('expanded');
});
CSS
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width:0;
padding: 5px;
transition: all .5s ease;
position:absolute;
right:20px;
box-sizing:border-box;
opacity:0;
}
.search.expanded {
max-width:200px;
opacity:1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}

You should use .slideToggle() or fadeToggle()
$('.icon').click(function() {
$('.search').slideToggle(500);
});