I'm trying to set the min-height of each of these sections to the the height of the window. This is the current code...
HTML
<section id="hero">
</section>
<section id="services">
</section>
<section id="work">
</section>
jQuery
jQuery(document).ready(function() {
$("#hero").css('min-height':($(window).height())+'px');
$(window).resize(function() {
$("#hero").css('min-height':($(window).height())+'px');
});
$("#services").css('min-height':($(window).height())+'px');
$(window).resize(function() {
$("#services").css('min-height':($(window).height())+'px');
});
$("#work").css('min-height':($(window).height())+'px');
$(window).resize(function() {
$("#work").css('min-height':($(window).height())+'px');
})
});
Here's a FIDDLE
$(function() {
$("#hero").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#hero").css({ minHeight: $(window).innerHeight() + 'px' });
});
$("#services").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#services").css({ minHeight: $(window).innerHeight() + 'px' });
});
$("#work").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#work").css({ minHeight: $(window).innerHeight() + 'px' });
});
});
or shorter version
$(function() {
$("#hero, #services, #work").css({ minHeight: $(window).innerHeight() + 'px' });
$(window).resize(function() {
$("#hero, #services, #work").css({ minHeight: $(window).innerHeight() + 'px' });
});
});
for jQuery CSS you can use e.g
$("#element").css( minHeight, $(window).innerHeight() + 'px' ); // When you target single property
or
$("#element").css({ minHeight: $(window).innerHeight() + 'px' }); // When you target single or multiple properties comma delmited
also you can use 'min-height' or minHeight
Changed : to ,
Try this:
jQuery(document).ready(function () {
$("#hero").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
$('#hero').css("min-height", $(window).height() + "px");
});
$("#services").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
$('#services').css("min-height", $(window).height() + "px");
});
$("#work").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
$('#work').css("min-height", $(window).height() + "px");
})
});
Hi You don't need for that jquery, just css please see here : http://jsbin.com/filoru/3
CSS:
section {
width:33%%;
float:left;
display:block;
height:100%
}
html, body {
height:100%;
padding : 0;
margin:0;
}
#hero {
background-color:red;
}
#services {
background-color:green;
}
#work {
background-color:orange;
}
html:
<body>
<section id="hero">
hero
</section>
<section id="services">
service
</section>
<section id="work">
work
</section>
</body>
</html>
Related
I have been tring to set img at same position as another using jquery .position() and .css()
Here is the code:
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
$('#img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
Any thoughts?
You can overlap images this way. I set the position to fixed then set the left and top values for both other images. I'm not entirely sure why'd you want this; so, if it's not the desired result, just comment.
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2, #img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
img {
width:100px;
height:100px;
border:1px solid black;
}
#img1, #img2, #img3 {
position:fixed;
}
#img1 {
left:50px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img1" src="http://neil.computer/stack/bg.jpg" />
<img id="img2" src="http://neil.computer/stack/bg2.jpg" />
<img id="img3" src="http://neil.computer/stack/bg3.jpg" />
For the translation of an element to work in this way
position: relative;
left: 20px;
I dont exactly know what ur upto but i just corrected your code.
$(function(){
var position = $('#img1').position();
var x = $("#img2").position();
$("#pos").text("top: "+x.top+" "+"left: "+x.left);
$('#img3').css({ 'left': x.left + 'px', 'top': x.top + 'px' });
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.w3schools.com/css/img_fjords.jpg" id="img1" style="height:100px;width:100px;"/>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" id="img2" style="height:100px;width:100px;"/>
<p id="pos"></p>
</body>
</html>
I have a bootstrap text input and with jquery I would like to:
Expand textform on hover and retract on hover out. ✓ (already done in this jsfiddle)
When textform is focused/selected (insertion point is inside text box), the form is expanded and does not retract on cursor hover out. ✗ (to be compelted)
Html
<div class="col-md-3 col-sm-3">
<div class="input-group">
<input class="form-control" placeholder="Search"></input>
</div>
</div>
Javascript
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": "+=" + form.width() * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": '100%'}, "slow");
});
});
try this
$(function(){
var form = $('.input-group');
var start_width = form.width();
form.find('#input-target').mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).focus(function(){
$(this).unbind('mouseout');
$(this).unbind('mouseenter');
}).blur(function(){
form.animate({ "width": start_width+'px'}, "slow");
$(this).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
});
});
});
see at this
http://jsfiddle.net/ZQ3nZ/
Solved http://jsfiddle.net/mY8uU/6/
$(function(){
var form = $('.input-group'), w = form.width();
form.mouseenter(function(){
form.animate({'width': '100%'}, 'slow');
}).mouseout(function(){
if(!$('.form-control:focus').length) form.animate({'width': w}, 'slow');
})
$('.form-control').on('blur', function(){
form.animate({'width': w}, 'slow');
});
});
Is CSS3 out of the question?
In that case you can do without Javascript and use
.textbox{
width: 200px;
transition: width 1S;
}
.textbox:hover
{
width:250px;
transition: width 1S;
}
This is just an example, but you can change it to your liking.
You could always employ some CSS3:
input#search {
transition: width .5s;
-webkit-transition: width .5s;
}
input#search:hover, input#search:focus { width:300px; }
this one worked for me:
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": form.width() * 1.8}, "slow");
}).mouseout(function(){
form.animate({ "width": form.width() / 1.8}, "slow");
});
});
jsfiddle: http://jsfiddle.net/mY8uU/2/
I have the following code which serves to open an image in an overlay div. For some reason whenever I try to add a border to the image object it doesn't work. It only comes out the raw image with no border. How can I implement a border on this and also a close button on top right?
This is my code.
$(document).ready(function(){
$('a.lightbox').click(function(e){
$('body').css('overflow-y',' hidden');
$('<div id="overlay"></div>')
.css('top', $(document).scrollTop())
.css('opacity', '0')
.animate({'opacity': '0.6'}, 'slow')
.appendTo('body');
$('<div id= "lightbox"></div>')
.hide()
.appendTo('body');
$('<img>', {
src: $(this).attr('href'),
load: function() {
positionLightboxImage();
},
click : function() {
removeLightbox();
}
}).appendTo('#lightbox');
return false;
});
});
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
}
function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut('slow', function() {
$(this).remove();
$('body').css('overflow-y', 'auto'); // show scrollbars!
});
}
<a class="lightbox" href="<?php echo $row_searchHH['imageURL']; ?>"><img src="<?php echo $row_searchHH['imageURL']; ?>" width="90" height="90" style="margin-left:10px" /></a>
Add your border to this chunk:
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
For example:
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left,
'border': '2px solid white'
})
Check this fiddle for demo
If you have the img inside the div
then probably you can set the style of the image
CSS
.imageclass{
width:98%;
height:98%;
position:absolute;
left:1%;
top:1%;
}
.parentdivclass{
background:rgba(15, 15, 15, .5);
width:200px;
height:200px;
position:absolute;
}
.closebuttonclass
{
left:95%;
top:0.2%;
width:5%;
height:5%;
position:absolute;
}
You can position your close button image on the top right of your div !!
so the final div structure should be something like this
HTML
<div class='parentdivclass'>
<img class='imageclass' src='' />
<img class='closebuttonclass' src='' />
</div>
Try to see the following jsFiddle
http://jsfiddle.net/TtSub/1/
When i drag the "splitter" element it does not stay in place.
What am I missing here?
Html
<div id="start"></div>
<div id="stop"></div>
<div id="container">
<div id="index" class="float"></div>
<div id="splitter" class="float"> </div>
<div id="content" class="float"></div>
</div>
Css
#container
{
width:600px;
height:400px;
}
#index
{
width:200px;
height:400px;
background-color:#dedede;
}
#splitter
{
width:5px;
height:400px;
cursor:w-resize;
background-color:#fff;
}
#content
{
width:395px;
height:400px;
background-color:#d1d1d1;
}
.float
{
float:left;
}
Javascript
jQuery(document).ready(function () {
$("#splitter").draggable({
axis: "x",
start: function (event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
var startLeft = (Startpos.left - $("#container").position().left);
var startRight = (startLeft + $("#splitter").outerWidth());
$("#start").text("START: \nLeft: " + startLeft + "\nTop: " + startRight);
},
stop: function (event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var stopLeft = (Stoppos.left - $("#container").position().left);
var stopRight = (stopLeft + $("#splitter").outerWidth());
$("#stop").text("STOP: \nLeft: " + stopLeft + "\nTop: " + stopRight);
$("#index").css({ "width": stopLeft });
$("#content").css({ "width": ($("#container").outerWidth() - stopRight) });
}
});
});
I found a solution, by changing css to absolute position and change html and javascript a little
Javascript
<script type="text/javascript">
jQuery(document).ready(function () {
$("#splitter").draggable({
axis: "x",
containment: "parent",
start: function (event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
var startLeft = ($("#container").position().left - Startpos.left);
var startRight = (startLeft + $("#splitter").outerWidth());
$("#start").text("START: \nLeft: " + startLeft + "\nTop: " + startRight);
},
stop: function (event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var stopLeft = (Stoppos.left);
var stopRight = (stopLeft + $("#splitter").outerWidth());
$("#stop").text("STOP: \nLeft: " + stopLeft + "\nTop: " + stopRight);
$("#index").css({ "width": stopLeft });
$("#splitter").css({ "left": stopLeft });
$("#content").css({ "width": ($("#container").outerWidth() - stopRight), "left": stopRight });
}
});
});
</script>
Css
<style>
#container
{
width:1200px;
height:600px;
position:relative;
}
#index
{
width:200px;
height:600px;
position:absolute;
left:0;
background-color:#dedede;
}
#splitter
{
width:5px;
height:600px;
cursor:w-resize;
position:absolute;
left:200px;
background-color:#fff;
z-index:1;
}
#content
{
width:995px;
height:600px;
position:absolute;
left:205px;
background-color:#d1d1d1;
}
</style>
Html
<div id="start"></div>
<div id="stop"></div>
<div id="container">
<div id="index"></div>
<div id="splitter"></div>
<div id="content"></div>
</div>
I want to just click a button create my object which is a form but when the button fires it loads the form. My constructor could all be wrong so if you find any faults or suggestions they would be appreciated. I've commented my code where Im having trouble
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
current = jQuery('.wikiform .wizard :first');
var width = 0;
function positionForm() {
jQuery('.wikiform .wizard .view').each(function () { width += jQuery(this).width() });
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height() + 10)
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width() + 10)
.css('left', -jQuery('.wikiform').width())
.css('overflow', 'hidden')
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('width', width)
.css('height', jQuery('.wikiform .wizard .view:first').height());
}
if (this.Mode == "Wizard") {
return this.each(function () {
/* <-- this function here not binding */
jQuery(this).bind('load', function (){
positionForm();
});
jQuery('.wikiform .navigation input[name^=Next]').click(function () {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '-=' + current.width() + "px" }, 750, null, function () {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function () {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '+=' + current.prev().width() + 'px' }, 750, null, function () {
current = current.prev();
});
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
/*
jQuery(window).bind("load", function () {
});
*/
jQuery('button[name=button1]').bind('click', function (e) {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed: 750, ease: "expoinout" });
/* problem here initalizing the load */
e.preventDefault();
});
});
</script>
<style type="text/css">
* { margin: 0; padding: 0 }
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute; display:block;
}
.wizard
{
overflow:hidden;
}
.wizard .panel
{
}
.view
{
float:left;
}
.wizard .panel .view
{
float:left;
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:400px;
height:400px;
}
#view3
{
background-color:Lime;
width:300px;
height:300px;
}
</style><form action="" method="">
<div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
<button id="button1" name="button1" value="1"> Click Me! </button>
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
<div id="view3" class="view">
<div class="form">
Content 3
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div>
Could you just place the call to positionForm() at the end of the initialization code? Something like this:
if (this.Mode == "Wizard") {
return this.each(function() {
jQuery('.wikiform .navigation input[name^=Next]').click(function() {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '-=' + current.width() + "px"
}, 750, null, function() {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function() {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '+=' + current.prev().width() + 'px'
}, 750, null, function() {
current = current.prev();
});
});
positionForm();
});
}
I updated your code in a fiddle here: http://jsfiddle.net/andrewwhitaker/vztcq/
Edit: To center your modal dialog vertically, use $(window).height() instead of window.screen.availHeight when calculating the vertical position. See jQuery's documentation for height for more info. Updated fiddle here: http://jsfiddle.net/andrewwhitaker/bBCeq/
A few other things I noticed:
You could be using $ instead of jQuery inside of your plugin code. The anonymous function that sets up the plugin takes a parameter called $ and takes jQuery in as a parameter. This will make your code a little more readable, in my opinion.
When you're setting multiple CSS rules with jQuery, you can use an object that defines multiple properties: $(..).css({'width': '10px', 'height': '10px'}); for example.
Make sure your <form> has an ending </form>. In the code you posted the closing tag was missing.
Cache commonly used queries (e.g. var $wikiForm = $(".wikiform"))
Use id selectors rather than class selectors whenever possible.