Response title
This is preview!
Images resizing in an unwanted way
in Using jQuery
•
7 years ago
I have the following web page linked to a script file as shown
below:
Every timeI scroll the page down the screen the nav does
stay fixed but all the images inside the nav become larger. I think it
has something to do with the width being inherited from somewhere else
but I can't figure out how not to get the images changing size
when scrolling but still retaining the ability to scale the images if
the page changes size.
<!doctype html>
<html>
<head>
<meta
charset="utf-8">
<title>Gardening
in the West</title>
<script
src="scripts/jquery-1.11.1.min.js"></script>
<script
src="scripts/jquery-migrate-1.2.1.min.js"></script>
<script
src="scripts/jquery-ui-1.11.1.custom/jquery-ui-1.11.1.custom/jquery-ui.js"></script>
<!--<script src="http://malsup.github.io/jquery.cycle2.js"></script>-->
<script
src="scripts/scroller.js"></script>
<style type="text/css">
</style>
<!--The
following script tag downloads a font from the Adobe Edge Web
Fonts server for use within the web page. We recommend that you do
not modify it.--><script>var
__adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/aladin:n4:default.js"
type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext'
rel='stylesheet' type='text/css'>
<link href="css/main_styles.css"
rel="stylesheet" type="text/css">
</head>
<body>
<!--<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script>$.fn.cycle.defaults.autoSelector =
'.slideshow';</script>-->
<section class = "wrapper">
<header> <a href="index.html"><img
class="scale-image" src="images/Header1.png"
height="150" alt=""/></a>
</header>
<nav
id="navigation">
<ul>
<li><a
href="index.html"><img
class="scale-image" src="images/Home-Icon.png"
alt="Home Icon" width="120"
height="120"></a>
<p><a
href="index.html">Home</a></p>
</li>
<li><a
href="#"><img class="scale-image"
src="images/gardening-equipment-408.png"
alt="growing flowers and shrubs icon"
width="120" height="120"></a>
<p><a href="#">Flowers and
Shrubs</a></p>
</li>
<li><a
href="#"><img class="scale-image"
src="images/natural-herbs.png" alt="growing herbs
icon" width="120"
height="120"></a>
<p><a
href="#">Herbs</a></p>
</li>
<li><a
href="vegetables.html"><img
class="scale-image"
src="images/vegetables_for_nav.png" alt="growing
vegetables icon" width="120"
height="120"></a>
<p><a
href="vegetables.html">Vegetables</a></p>
</li>
</ul>
</nav>
<section
class="main_content">
<h2>Welcome to Gardening in West Auckland</h2>
<p>A warm greeting to all the keen gardeners and
especially those who live as I do in the West of Auckland. The
purpose of this site will be to share some information about how
to best grow a variety of flowering plants, shrubs and herbs in
the challenging soils of the West.</p>
<p>Gardening is a relaxing hobby but also one that requires
some hardwork at times. For those that have experienced the joy of
seeing things you have planted grow and bloom you know the
satisfaction that this brings. So I would encourage any of you
reading this who have neever tried it to "give it a go".
Start small, perhaps with a couple of containers or pot plants.
Ask your local gardening store about what would look attractive if
you are into flowers or what can poroduce a good crop if you asre
trying to grow something for eating in a
container.</p>
<h2>Starting a new
Garden</h2>
<p>Many West Auckland
gardeners will find that the soil your are working in will have a
thin layer of reasonable soil and then quickly you will hit clay.
The notes that follow are some suggestions for preparing a new
garden in clay soils.</p>
<p>If your
garden has heavy clay soil, you know what a challenge it can pose
to plants, not to mention gardeners. Heavy clay drains slowly,
meaning it stays saturated longer after rain or irrigation. Then,
when the sun finally comes out and the soil dries, it forms a
hard, cracked surface.</p>
<div
class="rightfloat">
<img
src="images/spreading-lime.png" alt="Spreading
fertiser on the garden as part of preparation process."
width="230" height="312"
class="scale-image" />
<p
class="caption">The spreading of lime can help
<br/>reduce the acidity of soil</p>
</div>
<p>On the bright
side, clay soils are usually richer in nutrients than sandy soils
are. And clay's tendency to hold water tightly can be an
advantage. Here are some tips for making clay soil more manageable
and easier to work.</p>
<h3>Tools and
Materials</h3>
<ul>
<li>Soil test kit or commercial test</li>
<li>Organic mulches: compost and aged manure,
straw</li>
<li>Wheelbarrow or
cart</li>
<li>Shovel</li>
<li>Rake</li>
<li>Cover
crop</li>
</ul>
<h4>Test soil pH, and adjust as
necessary.</h4>
<p>Clay soils are rich in
nutrients, but if the soil is too acidic or too alkaline, those
nutrients won't be available to the plants. Use a home test
kit or send a sample to a soil testing lab, then follow the
recommendations for adjusting pH. For most garden plants, a pH of
6.3 to 6.8 is ideal. Find a lab near you by checking in your
telephone directory, or by calling your local cooperative
extension office.<p>
<h4>Add organic
matter.</h4>
<p>This helps improve
drainage and lighten heavy soil. It also provides nutrients for
beneficial soil microorganisms which will, in turn, also help
improve the soil. Before planting in spring, add compost and aged
manure. A 10 cm layer worked into the soil to shovel depth is a
good amount. Throughout the growing season, mulch with organic
materials like grass clippings, shredded leaves, or additional
compost. Since soil microorganisms literally "eat"
organic matter, make a habit of continually adding it to your
soil.</p>
<h4>Build raised
beds.</h4>
<p>Because clay soils hold
water, creating raised beds can help improve drainage by
encouraging water to run off. Raised beds can be a simple mound of
soil, or can be constructed out of wood, brick, or stone. To
lessen compaction, size the beds so you can reach the middle
without stepping in the bed.</p>
<h4>Mulch beds over the winter.</h4>
<p>Driving rain can really pack down bare soil, so keep
beds mulched with organic matter both during the growing season
and over the winter. A layer of straw over the beds will protect
the soil from compaction and reduce erosion; it can also help
minimize weed growth. In the spring, transfer the mulch to the
garden paths.</p>
<h4>Plant a cover
crop.</h4>
<p>A cover crop is like a
living mulch. Different cover crops are appropriate for different
regions. In the north, winter wheat and winter rye are popular
choices; in warmer regions, crimson clover and oats are commonly
used. For a winter cover crop, sow after the last crops have been
harvested. The following spring, simply till the plants into the
soil, adding yet more precious organic matter.</p>
<div class="wrap">
<div
class="slideshow1 scale-image">
<img class="show scale-image"
src="images/slideshow
images/10-attractive-container-gardening-ideas-fine-gardening-min.jpg">
<img class="show" src="images/slideshow
images/barrow-and-gumboots-min.jpg">
<img class="show" src="images/slideshow
images/container-garden-wheelbarrow-flowers-min.jpg">
<img src="images/slideshow
images/flowers-and-fork-min.jpg">
<img
src="images/slideshow
images/gardening_campers-min.jpg">
<img
src="images/slideshow
images/grandma-and-child-min.jpg">
<img
src="images/slideshow images/tulips-min.jpg">
</div>
</div><!-- end of wrap
-->
</section>
</section><!-- end of section wrapper
-->
</body>
</html>
and the scroller.js file is
$(document).ready(function() {
var $window = $(window),
$navigation =
$("#navigation")
$window.scroll(function() {
if
(!$navigation.hasClass("fixed") &&
($window.scrollTop() > $navigation.offset().top)) {
$navigation.addClass("fixed").data("top",
$navigation.offset().top);
}
else if ($navigation.hasClass("fixed") &&
($window.scrollTop() < $navigation.data("top")))
{
//$("#navigation ul li a
img").addClass("scale-image");
$navigation.removeClass("fixed");
}
});
var slideshow =
$('.slideshow1')
setInterval(function() {
slideshow.animate({
left:
-300
}, 2000,
"easeOutCubic", function() {
slideshow.css({
left:
0
}).children().first().appendTo(slideshow)
});
}, 4000);
});
main-styles.css
@charset "utf-8";
/* CSS Document
*/
* {
margin: 0px;
padding: 0px;
}
h1,h2,h3,h4,h5,h6,p {
margin-bottom:6px;
}
html,body {
font-size: 100%;
background-repeat: no-repeat;
background-position: center center fixed;
background-attachment: fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
background-color: rgba(225,245,199,1.00);
font-family: 'Open Sans','myfont', Times,
sans-serif;
}
@media screen and
(max-width:800px){
body {
font-size: 85%;
}
}
.wrapper {
max-width: 1200px;
min-width: 500px;
margin-top: 25px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
border:
1px solid rgba(192,192,192,0.9);
border-radius: 20px;
background-color: rgba(217,236,203,0.9);
overflow:hidden;
}
header {
/* [disabled]border-bottom-right-radius: 20px; */
border-top-right-radius: 20px;
border-top-left-radius: 20px;
overflow:
hidden;
}
.scale-image {
display: block;
height:
100%;
width: 100%;
}
nav {
float: left;
}
#navigation {
width: 15%;
position: relative;
}
#navigation.fixed {
position:
fixed;
top: 0;
}
.wrapper
nav ul {
text-align: center;
list-style-type: none;
}
.wrapper
ul li p a {
font-family: aladin;
font-style: normal;
font-weight: 400;
text-decoration: none;
color:
#000000;
font-size: 120%;
text-align: center;
}
.wrapper .main_content {
width:
75%;
margin-top: 20px;
margin-right: 5%;
margin-left:1%;
margin-bottom:20px;
float:right;
}
.wrapper .main_content
ul {
margin-left: 2%;
margin-bottom: 1%;
}
.leftfloat
{
float: left;
margin-right: 1%;
margin-bottom: 1%;
}
.rightfloat
{
width: 30%;
float: right;
margin-left: 1%;
margin-bottom: 1%;
}
.caption
{
font-size: 10px;
font-style: italic;
color:
#666;
text-align: center;
}
.slideshow img {
width:
300px;
height: 200px;
padding-top: 2px;
padding-bottom: 2px;
}
.wrap
{
width:900px;
overflow:hidden;
position:
relative;
}
.slideshow1
{
width:3500px;
position: relative;
}
.slideshow1 img {
width:
300px;
height: 200px;
padding-top: 2px;
padding-bottom: 2px;
float:
left;
}
.highlight {
color:
#282828;
font-style: italic;
font-size: 115%;
}
.clearfloat
{
clear: both;
}
#accordion {
width:200px;
}
#accordion li{
cursor: pointer;
background:url(accordion_bg.png) repeat-x;
font-weight:bold;
color:#015287;
border:1px solid #b2b2b2;
margin-bottom:2px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding:
4px 8px;
}
#accordion li.active{
color:#D15600
}
#accordion li
ul{
padding:0;
margin:10px 0 0 0;
}
#accordion li.active li{
text-indent:0;
}
#accordion li
li{
font-weight: normal;
background:none;
border:0;
}
1