We Keep Coding

HTML CSS - How to fit the iframe content to the iframe

I have an issue when I change the size of the frame frame gets bigger but not the content. I need to fit the content inside the Iframe to the frame.
My css is:
#IDNAME {
-moz-transform: scale(0.90, 0.90);
-moz-transform-origin:
top left;
}

You need to explicitly define the width and height of the iframe in order for it to scale the content. Also see this.
#IDNAME {
-moz-transform: scale(0.90, 0.90);
-moz-transform-origin:
top left;
width: 1024px;
height: 576px;
}

How to clear opaque affixed divs height?

Using Bootstrap and a bunch of custom CSS for social media icons (located here), I created a pen to demo (and test) my code. The goal was to create icons that would automatically fit there parent div (horizontal or vertical, etc), and I have everything working except for one small problem. I have both of the divs affixed (one horizontal, one vertical), and 100% opaque before the affix is triggered. However, and I know why, the view is still being rendered with what basically looks like a giant margin between the top of the document and the page title. How can I clear this, while still using display:inline-block?
Here is the CSS for the related divs & classes, but I'd recommend checking out the pen first because visually seeing it expalins the issue much better.:
.snav {
top:50%;
margin-left:-15px;
background: rgb(0, 0, 0);
width:5rem;
height:25rem;
display:inline-block;
z-index:99;
transition: 1s all ease-in;
transform: translate(0, -50%);
opacity:0;
}
.horiz{
top:0;
margin-left: auto;
margin-right:auto;
z-index:99;
left:50%;
transition: 1s all ease;
transform: translate(-50%, 0);
opacity:0;
display:inline-block;
}
#horiz{
background: rgb(0,0,0);
width:26.6rem;
height:5rem;
}
.affix{
opacity:.5;
}
.affix:hover{
opacity:.9;
}

The gap between the top of the page and the title is because the social icons widget is still within content flow.
Try adding position: fixed; to the .snav style rule to take it out of content flow and the title will go to the expected position.

Automatically scale (resize) image in an iframe

In Firefox, when loading an image into an iframe, the image will automatically be scaled down to fit (if it's too big). (This is a Firefox feature that can be disabled via the Firefox setting browser.enable_automatic_image_resizing.)
I'd like to set up my pages so that they have the same behavior when viewed with other browsers such as Chrome and Internet Explorer.
Here's an example, take a look at it with Chrome or IE and compare it with Firefox: http://codepen.io/anon/pen/KddKQX
Here's the code:
<iframe frameborder='0' scrolling='no' src='http://ibin.co/2F6DxpSecv9h' height='600px' width='400px'>
</iframe>

Okay so the following code pen should be a good jumping off point:
http://codepen.io/anon/pen/OyRgmw
I am running short on time, otherwise, I would perfect the scaling/sizing.
Anyways, as you can see, I wrapped the iframe in a div:
<div class="wrap">
This version works on FF 26, Chrome 32, Opera 18, and IE 9-11.
<iframe class="frame" src="http://ibin.co/2F6DxpSecv9h"></iframe>
</div>
Then you set the div to the desired width and height - once you have this, you set your iframe to "Transform: scale" which will shrink the iframe, which is why you need to set the Width and Height to a multiple of the Scale. For example, you set the Width and the Height to 400px by 600px - since the image is being scaled(.25), you are going to want to multiply your frame dimensions by 4 - the following CSS will achieve the desired effect:
.wrap {
width: 400px;
height: 600px;
padding: 0;
overflow: hidden;
}
.frame {
width: 1200px;
height: 1800px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.25);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
So like I said, it isn't 100% complete but you should be able to tweak the numbers to achieve what you want. Let me know if you need any clarification or further information.
Here is the codepen link again: http://codepen.io/anon/pen/OyRgmw

Javascript - Center div horizontal and vertical with pure javascript

I'm trying to center a div horizontally and verticlaly without knowing the height/width. I've achieved it within jquery but am struggling to convert it to pure js as I don't want dependancy.. any ideas?
<script>
$(document).ready(mt);
$(window).resize(mt);
function mt(){
var contentLocked = $('.lockerPopup').outerHeight();
marginTop = ( $(document).height() - contentLocked ) / 2;
$('.lockerPopup').css({'top': marginTop});}
</script>

Use .offsetWidth and .offsetHeight to get the dimensions of your element and window.innerWidth and window.innerHeight for the dimensions of the window. The rest of the logic is pretty straight forward to center it using .style.top and .style.left.
See http://codepen.io/anon/pen/JYjqWZ
Alternatively, if you want to center multiple things or you don't need it to be positioned absolutely, I would suggest looking into flexbox or use
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
in your CSS to stay away from JS entirely.

you can center by using left 50%; top 50% and -webkit-transform: translate(-50%,50%); (obviously add all of the other versions of webkit transform for cross-browser compatibility.
This will always center the div no matter what its width/height and parent container size.

You don't need javascript for that,
you can do it only using CSS: http://jsfiddle.net/leojavier/gjah19y7/
<div class="container">
<div class="element"><p>test</p></div>
</div>
CSS
html,body{
height:100%;
width:100%;
}
.container {
display:table;
height:100%;
width:100%;
background:#CCC;
}
.element {
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:100px;
color:#222;
}

how to add arrows to Slick slider

I am putting together a slide presentation using a jquery plugin called 'slick' (http://kenwheeler.github.io/slick/) using django and a bootstrap 3 template. I've got a basic carousel working using a django template that looks like:
<div class="your-class">
<div>your content</div>
<div><IMG src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>
<div>your content</div>
</div>
I have a fiddle at http://jsfiddle.net/kc11/20a90mdm/1/
I'm wondering if there is a way to add arrows to the left and right of the slide, like in the first example (Single Item) on http://kenwheeler.github.io/slick/ . I can only see the prev and next buttons below the slides

Your arrows are already there, they are the Previous and Next buttons at the bottom of the page. You would need to include slick-theme.css or style them by yourself via css.

Here I try css code...
.slick-prev{
background:#000;
width:50px;
height:50px;
position:absolute;
left:0;
top:50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Safari */
transform: translateY(-50%);
}
.slick-next{
background:#000;
width:50px;
height:50px;
position:absolute;
right:0;
top:50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Safari */
transform: translateY(-50%);
}
NOTE
Give their parent class
position:relative
Also you can set left & right position as your need.

The color of the buttons in slick-theme.css is white, so not visible on a white background.
Change the color of the buttons there or overwrite in your own style sheet like this:
.slick-prev:before, .slick-next:before {
color: #000000;
}