My question is going to be pretty concise. I saw this Deezer page and I tried to zoom in and out to see that the image is "out of zoom" (see the image below)
Below is a structure we consider to be my page:
<body>
<div class="visual-header">
<div class="container">
SOME TEXT
</div>
</div>
PAGE CONTENT
</body>
How am I supposed to use image.png of a size of 2000x800 pixels to get this effect?
I am looking to output text from multiple fields to a single page so that I can just copy and paste it. I made a basic HTML document with fields and I just want to hit submit and have it output all of the information condensed into one page all together. This is what I have
<style>
form {
padding-top: 30px;
min-width: 458px;
> div,
> fieldset {
border: 0;
padding: 0;
margin: 0 0 8px 0;
clear: both;
}
label,
legend {
float: left;
width: 50px;
padding: 7px 10px;
&.radio-label {
float: none;
padding: 0;
}
}
.choice-group {
padding: 7px 10px 0 10px;
}
input[type=checkbox],
input[type=radio] {
margin-right: 20px;
}
input[type=text],
input[type=email],
input[type=password],
input[type=number],
textarea {
width: 200px;
border: 1px solid darken(tan, 20%);
padding: 7px 10px;
border-radius: 4px;
outline: 0;
&:focus {
border-color: black;
}
&.short {
width: 60px;
}
&.medium {
width: 150px;
}
&.very-short {
width: 40px;
}
&.long {
width: 300px;
}
}
}
.screen-reader {
position: absolute;
top: -9999px;
left: -9999px;
}
body {
background: #E27C37;
padding: 20px;
font-size: small;
}
</style>
<h1>Prefill Machine</h1>
<form action="#0" id="form">
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Digby Coyier" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="digby@digby.com" required>
</div>
<div>
<label for="name">Username</label>
<input type="text" name="username" id="username" placeholder="digby2007" required>
</div>
<div>
<label for="name">Password</label>
<input type="password" name="pw" id="pw" required>
</div>
<div>
<label for="name">Repeat</label>
<input type="password" name="pw-repeat" id="pw-repeat" required>
</div>
<fieldset>
<legend>Radio Choice</legend>
<div class="choice-group">
<label class="radio-label" for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
<label class="radio-label" for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
</div>
</fieldset>
<div>
<label for="select-choice">Select Choice</label>
<div class="choice-group">
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
</div>
<div>
<label for="message">Message</label>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<div>
<label for="cc">Credit Card #</label>
<input type="text" name="cc" id="cc" placeholder="4242 4242 4242 4242" required>
</div>
<div>
<label for="exp-1">Expiration <span class="screen-reader">Month</span></label>
<input class="very-short" type="number" name="exp-1" id="exp-1" placeholder="08" min="1" max="12">
<label for="exp-2" class="screen-reader">Expiration Year</label>
<input type="number" name="exp-2" class="very-short" id="exp-2" placeholder="16" min="14">
</div>
<div>
<label for="exp-1">CVV</label>
<input class="short" type="text" name="cvv" id="cvv" placeholder="123">
</div>
<div>
<label for="name">Address</label>
<input type="text" class="long" name="address" id="address" placeholder="123 Super Street">
</div>
<div>
<label for="city"> <span class="screen-reader">City<span></label>
<input type="text" name="city" id="city" class="medium" placeholder="Milwaukee">
<label for="state" class="screen-reader">State</label>
<input type="text" name="state" class="very-short" id="state" placeholder="WI">
<label for="zip" class="screen-reader">Zip</label>
<input type="text" name="zip" class="short" id="zip" placeholder="55555" pattern="(\d{5}([\-]\d{4})?)" required>
</div>
<div>
<label for="agree-terms">Agree?</label>
<div class="choice-group">
<input type="checkbox" name="agree-terms" id="agree-terms">
</div>
</div>
<div>
<input type="submit" value="Submit" id="submit-button">
</div>
</form>
I want the page to fill in everything when I click submit so I will look like the following:
Name: John Smith
Email: John.Smith@mail.com
USERNAME: JSMith
Password:123456
Choice 1
And so on
This way I can just copy and paste it all into an email or a text file.
I am trying to table print using by CSS @media print.I search this type of case every where, I found similar type of solution but it can't work.
Currently I am using Google chrome version 43.0 and FireFox 38.0.5, FireFox is repeat the thead in every pages and arranging tr lines automatically, but chorme not working on the same case.
Is it possible to print using by CSS @media print? I hope you understand what I mean and your kindly suggestion.
I am building a filter that is similar to isotope. The problem I am having is the smoothness when removing items. I translate the items (0,0) to get the effect of scaling out, while also removing their width (width: 0px) causing the items to shift over. I was wondering what I could do to make it not feel so rough?
I have tried using a .each() with a delay to ease the transition of all the items at the same time, but it gives it a very linear feel. I have also removed the items completely in a timeout that waits for the animation to complete.
Here is a working JSFiddle.
JS/JQuery
$(document).ready(function() {
var navItem = $("nav ul li"),
clear = $("nav li.clear"),
first = $("nav li.first"),
second = $("nav li.second"),
third = $("nav li.third"),
items = $(".items li"),
notItem1 = $(".items li:not([data-exhibit='first'])"),
notItem2 = $(".items li:not([data-exhibit='second'])"),
notItem3 = $(".items li:not([data-exhibit='third'])");
var active = "is-active",
hidden = "is-hidden";
navItem.on("click", function() {
navItem.removeClass(active);
$(this).addClass(active);
});
clear.on("click", function() {
items.removeClass(hidden);
});
first.on("click", function() {
items.removeClass(hidden);
notItem1.addClass(hidden);
});
second.on("click", function() {
items.removeClass(hidden);
notItem2.addClass(hidden);
});
third.on("click", function() {
items.removeClass(hidden);
notItem3.addClass(hidden);
});
});
HTML
<nav>
<ul>
<li class="clear">view all</li>
<li class="first">First</li>
<li class="second">Second</li>
<li class="third">Third</li>
</ul>
</nav>
<ul class="items">
<li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
<li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
<li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
<li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
<li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
<li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
<li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
<li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
<li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
<li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
<li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
<li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
</ul>
SCSS
nav {
width: 80%;
margin: 25px auto;
text-align: center;
li {
display: inline-block;
padding: 5px 15px;
background: #1abc9c;
color: white;
text-transform: uppercase;
cursor: pointer;
transition-property: background;
transition-duration: .3s;
&.clear { background: #7f8c8d; }
&.first { background: #1abc9c; }
&.second { background: #2ecc71; }
&.third { background: #3498db; }
&:hover, &.is-active { background: #333; }
}
}
.items {
width: 80%;
margin: 0 auto;
li {
display: block;
width: 25%;
height: 150px;
float: left;
overflow: hidden;
transition-property: transform, width;
transition-duration: .5s;
&.is-hidden {
transform: scale(0,0);
width: 0px;
margin: -2px;
}
img { width: 100%; }
}
}
Hi all,
I have created a gallery of pictures which you cannot see with Jfiddle but all the code is there. I am attempting to have it so each time you click on an image one paragraph disappears and another emerges. The way I coded it works with one problem. If i click anywhere on the screen other than another image the paragraph disappears and another will not appear until I click an image. How can I code it so that the paragraphs will hide only if I click on one of the images and not if I click elsewhere as well. Thank you for your help!
Java:
var request;
var $current;
var cache = {};
var $frame = $('#photo-viewer');
var $thumbs = $('.thumb');
function crossfade($img) {
if ($current) {
$current.stop().fadeOut('slow');
}
$img.css({
marginLeft: -$img.width() / 2,
marginTop: -$img.height() / 2
});
$img.stop().fadeTo('slow', 1);
$current = $img;
};
$(document).on('click', '.thumb', function(e){
var $img;
var src = this.href;
request = src;
e.preventDefault();
$thumbs.removeClass('active');
$(this).addClass('active');
if(cache.hasOwnProperty(src)) {
if (cache[src].isLoading === false) {
crossfade(cache[src].$img);
}
} else {
$img = $('<img/>');
cache[src] = {
$img: $img,
isLoading: true
};
$img.on('load', function() {
$img.hide();
$frame.removeClass('is-loading').append($img);
cache[src].isLoading = false;
if(request === src) {
crossfade($img);
}
});
$frame.addClass('is-loading');
$img.attr({
'src': src,
'alt': this.title || ' '
});
}
});
$(document).mouseup(function(e) {
var container = $("#mad");
jQuery("#para").hide();
//toggle the componenet with class msg_body
jQuery("#mad").click(function() {
$(this).next($("#para").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#ralph");
jQuery("#para2").hide();
//toggle the componenet with class msg_body
jQuery("#ralph").click(function() {
$(this).next($("#para2").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para2").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#julia");
jQuery("#para3").hide();
//toggle the componenet with class msg_body
jQuery("#julia").click(function() {
$(this).next($("#para3").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para3").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#sophie");
jQuery("#para4").hide();
//toggle the componenet with class msg_body
jQuery("#sophie").click(function() {
$(this).next($("#para4").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para4").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#may");
jQuery("#para5").hide();
//toggle the componenet with class msg_body
jQuery("#may").click(function() {
$(this).next($("#para5").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para5").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#kiss");
jQuery("#para6").hide();
//toggle the componenet with class msg_body
jQuery("#kiss").click(function() {
$(this).next($("#para6").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para6").hide();
}
})
});
$('.thumb').eq(0).click();
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Gallerystyle.css">
<ul class="navigation">
<p> Nicholas Clegg </p>
<li><a href="painthome.html">Home</a></li>
<li><a href=favart.html>Artists</a></li>
<li><a href="#">Sale</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</head>
<body>
<div id="photo-viewer">
<p id="para"> <em> "Maddy" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
niece. Her innocence and utter <br>
adorableness inspired Nick to <br>
draw this beautiful portrait <br>
of a young lady early in <br>
her life.</span></p>
<p id="para2"> <em> "Raplhie" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para3"> <em> "Julia" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para4"> <em> "Sophie" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para5"> <em> "Unknown" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para6"> <em> "Jo and Rich" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
</div>
<div id="thumbnails">
<a id ="mad" href="img/madeline.jpg" class ="thumb active" title="Madeline">
<img id ="mad" src="img/madelinethumb.jpg" alt="Madeline" /></a>
<a id="ralph" href="img/ralph.jpg" title="Ralph" class="thumb">
<img id="ralph" src="img/ralphthumb.jpg" alt="Ralph" /></a>
<a id="julia" href="img/julia.jpg" title="Julia" class="thumb">
<img id="julia" src="img/juliathumb.jpg" alt="Julia" /></a>
<a id="sophie" href="img/sophie.jpg" title="Julia" class="thumb">
<img id="sophie" src="img/sophiethumb.jpg" alt="Julia" /></a>
<a id="may" href="img/may.jpg" title="Julia" class="thumb">
<img id="may" src="img/maythumb.jpg" alt="May" /></a>
<a id="kiss" href="img/kiss.jpg" title="Julia" class="thumb">
<img id="kiss" src="img/kissthumb.jpg" alt="Joanna and Rich" /></a>
</div>
<script src='jquery-1.11.2.min.js'> </script>
<script src='photo-viewer2.js'> </script>
</body>
</html>
I have a very illogical jQuery code and I want to see if someone finds a better way to do the exact same thing:
jQuery:
$(".col-md-3 img").hover(function() {
$(this).parent().children(".search").show();
$(this).parent().children(".photo").css("opacity","0.4");
}, function(){
$(this).parent().children(".search").hide();
$(this).parent().children(".photo").css("opacity","1");
});
HTLM corresponding to this code:
<div class="col-md-3">
<img class="photo" src="img/1_small.jpg" alt="img" />
<img class="search hidden-xs" src="img/search.png" width="50px"/>
</div>
I have multiple similar divs.
Here's the underlying folder structure:
| ...
| Top.aspx
| ...
|
\---Include
...
ClientScriptGlobals.aspx
...
Here's a snippet of Top.aspx:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Top.aspx.vb" Inherits="Project.Top"%>
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"-->
<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<title>....</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<!--#include virtual="..."-->
<!--#include virtual="Include/ClientScriptGlobals.aspx" -->
<!--#include virtual="...." -->
....
</head>
</html>
And finally ClientScriptsGlobal.aspx:
<script language="javascript">
//Globals
...
var FullTextSearchStatus = "<%= FullTextSearchStatus %>"
...
</script>
To give some context, Top.aspx includes ClientScriptGlobals.aspx so that I can access its global variables, which are also being used throughout the application.
My issue arises when I use aspnet_compiler.exe to pre-compile my application. Once it reaches ClientScriptsGlobal.aspx, it returns a bunch of errors like this:
error BC30451: Name 'FullTextSearchStatus" is not declared.
So now my question is, how can I tell ClientScriptsGlobal.aspx the location of FullTextSearchStatus's definition?
Keep in mind that when I opt to not pre-compile the application, these errors do not occur because the Javascript is not being compiled beforehand and therefore, its references have already been established (if that's the correct way describe this).