Can anyone provide me with a straightforward code sample to dynamically resize a logo to specific dimensions? I want it to be 30px by 30px when scrolling down and then return to its original size of 60px by 60px when scrolling up or refreshing the page, with a fading effect.
Appreciate the help!
Here is an illustrative demonstration, FIDDLE
<header>
<img src="http://precision-software.com/wp-content/uploads/2014/04/jQuery.gif" class="logo">
</header>
header {
background: violet;
position: fixed;
width: 100%;
height: 80px;
}
.logo {
margin: 10px 20px;
width: 60px;
height: 60px;
}
(function($) {
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
$('header').stop().animate({ height: '50px' }, 400, 'linear');
$('.logo').stop().animate({ width: '30px', height: '30px' }, 400, 'linear');
}
else {
$('header').stop().animate({ height: '80px' }, 400, 'linear');
$('.logo').stop().animate({ width: '60px', height: '60px' }, 400, 'linear');
}
});
})(jQuery);
If you're looking for a similar effect, check out this Demo
To achieve this, you can utilize jQuery like so:
$(window).scroll(function(){
if ($(this).scrollTop() > 10){
// Adjust x to set the distance from the top where the action triggers //
// Apply CSS changes here
$('.header').addClass("test");
$('.logo').addClass("test");
}
else{
// Revert to default styles
$('.header').removeClass("test");
$('.logo').removeClass("test");
}
});
HTML
<header class="header">
<img class="logo" src="http://www.skrenta.com/images/stackoverflow.jpg" />
</header>
CSS
* { margin: 0; padding: 0; }
body {
height: 2000px;
}
.header {
width: 100%;
height: 60px;
background: red;
position: relative;
-webkit-transition: linear .3s;
-moz-transition: linear .3s;
-ms-transition: linear .3s;
-o-transition: linear .3s;
transition: linear .3s;
}
.logo {
height: 60px;
width: auto;
position: relative;
}
.test {
height: 30px;
position: fixed;
}
I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support f ...
Recently, I completed building a simple website for uploading files to the server and storing their names in a database for search functionality. The site was created following a tutorial available at www.formget.com. However, I encountered an issue when ...
If I have n different elements to be placed in the same horizontal space, each taking up 100% of the screen width, for example: <table style="width:100%;text-align:center;table-layout:fixed"> <tr> <td><input/></td ...
As I work on developing my own website, I have opted to use XAMPP for hosting. After making modifications to the CSS, HTML files, and replacing the existing images with new ones in the designated folder, I encountered an issue. Despite restarting and re-i ...
I am working on a page that allows users to select colors from a list using checkboxes. When the user submits their selections, I want all the chosen colors to be displayed with their corresponding color as their font color. Below is the code I have so fa ...
My understanding is that IE 8 doesn't support placeholder attributes. However, I recently noticed that when I visit www.skydrive.com, it displays a placeholder text for email and password input fields. The text is shown as "[email protected] & ...
Greetings, I'm encountering a peculiar issue in my recent Django project. Currently, I am experimenting with the NameForm example provided in the Django Documentation on Working with Forms. On the surface, it appears to be a straightforward exercise. ...
I am curious about which framework, if any, would be most effective for capturing keystrokes and adding them to an HTML element such as a "p" element. My goal is to allow the client to type something on the keyboard and have it immediately displayed in the ...
Currently, I am in the process of constructing a video component and finding a way to obtain the dimensions of the source video (either the source file or the container) so that I can pass it to another component. I have incorporated the following code: / ...
I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...
A project I was working on involved creating a blog using PHP. Here is the code I used to submit posts into the database: <form method="POST" action="makePost.php"> <input autocomplete="off" type="text" name="title"> <textarea name= ...
I've searched through numerous similar questions without success, so I'm reaching out for help. My folder structure looks like this: Source Code Frontend Graphs.html Graphs.css Temperature.js Server_Backend server.js I aim ...
I am facing an issue with assigning widths to my divisions using the CSS calc property. Despite setting the width for the first and last divisions, I am unable to allocate any width to the middle division. HTML: <div style="width:400px;"> <div ...
I'm currently working on creating an HTML table to use as the formatting for a banner and menu links on my website. However, no matter how much I adjust the size and margins, the menu link tags just won't seem to stay at an even size. <table ...
My goal is to use jQuery to toggle the required attribute on fields. Initially, on page load, I add the required attribute to the necessary elements like this: $("[data-required]").attr("required", ""); Then, I have a toggle ...
I have a dropdownlist and I am looking to hide a specific option based on a condition The code I have written is as follows: $scope.sqs.qs6_PropertyType.answer = _.findWhere($scope.propertyType, { id: '2' }); // This code sets the selected va ...
I need the first column of a table to stay fixed while the rest of the columns scroll horizontally. Here's the code I have: <div id="outerDiv"> <div id="innerDIv"> <table> <tr><td>1</td><t ...
In the process of creating a search field with an input field and an svg icon, I encountered different browser behaviors in Chrome, Firefox, and IE11. Chrome – the preferred version https://i.sstatic.net/ikBgD.png Firefox https://i.sstatic.net/9lcqQ.pn ...
My website features a vibrant backgroundImage Slideshow that functions seamlessly. However, I am looking to reload the images of the slideshow after a specific time interval. The issue is that the website keeps loading endlessly. Once the website has com ...
I'm currently working on an HTML form that includes a multiple select box. I am looking to create a "select all" option within the multiple select box so that when a user clicks on that option, all other options in the select box are automatically sel ...