Develop Reference

Can`t change the height on a image in javascript

I want to create a function for for my header when its changing his size.
I have a logo img inside the header.I want when i change the headers height to be for example 80px the image to be 80 px as well.
I initialized a function in Javascript but doesnt work( i`m a beginner at Javascript). Please tell me what i m doing wrong in js and maybe show me the right way to do it.
<header class="header">
<div class="container">
<div class="header-content">
<img src='http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg' class="logo" alt="logo">
<div class="menu-links">
<ul class="links-list">
<li>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</li>
<li>Store</li>
<li>Contacts</li>
</ul>
</div>
</div>
</div>
</header>
.header {
background: blue;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 20;
height: 80px;}
.header-content{
display:flex;
}
.menu-links{
display:flex;
}
.links-list{
display:flex;
color:white;
}
const mainNav = document.querySelector('.header');
const img = document.querySelector('.logo');
if (mainNav.style.height == '80px') {
img.style.height = '80px';
} else {
img.style.height = '100px';
}

The .style property can only return style information that has been set directly into the HTML element, either statically in the HTML as in: <p style="something here"> or via the .style being set in JavaScript as in: element.style = something;. Your code is based on an if condition that checks mainNav.style.height, but the style property hasn't been set in HTML or JavaScript at that point.
Instead, use .getComputedStyle(), which returns the final value for the provided style after all computations (regardless of where they were applied) are taken into account.
I've added a red border to your image in the code below to show that it is expanding the height to be the same size as the header.
const mainNav = document.querySelector('.header');
const img = document.querySelector('.logo');
// You can't check the .style property if the element
// hasn't had that attribute or property set yet.
if (getComputedStyle(mainNav).height == '80px') {
img.style.height = '80px';
} else {
img.style.height = '100px';
}
.logo { border:1px dashed red; }
.header {
background: blue;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 20;
height: 80px;}
.header-content{
display:flex;
}
.menu-links{
display:flex;
}
.links-list {
display:flex;
color:white;
}
.links-list a { color: white; }
<header class="header">
<div class="container">
<div class="header-content">
<img src=
'http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg'
class="logo" alt="logo">
<div class="menu-links">
<ul class="links-list">
<li>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</li>
<li>Store</li>
<li>Contacts</li>
</ul>
</div>
</div>
</div>
</header>

The style property in Javascript only gives you the element's inline styles - those defined directly in a style attribute on it.
You need getComputedStyle to access the actual properties used, taking into account all CSS rules.

Multiple images depending on mouse location when hovering over div

I am trying to do an overview page on my website so that when I hover over a div on the overview page different sections of that div show different images. Essentially a slideshow but the image changes depending on where the cursor is.
I have managed to find some code that does what I want but it uses an a href to pull in the images which means if you click it, it goes to the link of the image.
Currently I just have placeholder images in but when finished each one will have specific project images in. As each div will just be one project the whole div should go to one html link and not just a specific image link of the image the user is hovering over.
All I want is the user to click and it go to a html link and not an img link.
Here is the code I am using:
The coding savvy people out there will probably have a much better solution for what I would like to achieve, I am interested to see any better solutions.
HTML
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="imgcontent">
<ul class="rotator-icons fifth">
<span class="img1 active"></span>
<span class="img2"></span>
<span class="img3"></span>
<span class="img4"></span>
<span class="img5"></span>
</ul>
<img src="/img/FoI.jpg" class="currentimg">
</div>
</div>
CSS
.multi {
display: block;
float:left;
position: relative;
width: 30.8%;
height: 20%;
padding: 0px;
margin:0% 1% 2% 1%;
overflow: hidden;
}
.multi .imgcontent {
display: block;
position: absolute;
top: 0px;
}
.imgcontent img {
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.rotator-nav {
display: block;
position: relative;
width: 100%;
height: 100%;
z-index: 9;
}
.rotator-nav li {
display: block;
float: left;
height: 100%;
}
.rotator-nav.fourth li {
width: 25%;
}
.rotator-nav.fifth li {
width: 20%;
}
.rotator-nav li a {
display: block;
float: left;
width: 100%;
height: 100%;
border-bottom:0px solid #fff
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
JS
$(function(){
var $rotators = $('.multi');
var $imglinks = $('.rotator-nav a');
$imglinks.on('mouseenter', function(e){
var imgclass = '.'+$(this).attr('class');
var imglink = $(this).attr('href');
// update main image src
$(this).parent().parent().parent().find('.currentimg').attr('src',imglink);
// update current rotator icon
var $rotators = $(this).parent().parent().parent().find('.rotator-icons');
if($rotators.children(imgclass).hasClass('active')) {
// already active icon -- do nothing
} else {
// remove active class then add to new icon
$rotators.children('span').removeClass('active');
$rotators.children(imgclass).addClass('active');
}
});
});
Any help would be greatly appreciated!
Thanks,
Mark

I think you could best use a data attribute for this instead (if I understand the intention correctly) :
var imglink = $(this).data('image');
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li>
<a data-image="/img/FoI.jpg" href="#" class="img1"></a>
</li>
<li>
<a data-image="/images/card.jpg" href="#" class="img2"></a>
</li>
<li>
<a data-image="/images/amareal.jpg" href="#" class="img3"></a>
</li>
<li>
<a data-image="/images/edeva.jpg" href="#" class="img4"></a>
</li>
<li>
<a data-image="/images/amacover2.gif" href="#" class="img5"></a>
</li>
</ul>
...
If you'd still like to see the image over the original div, a pseudo element could be used. Advantage there is that they are not actual DOM elements and will not register clicks :
Demo
Now it would be great if the data attribute could be directly used for the content of the pseudo element as well but that doesn't seem possible. And you can't target them with JavaScript so each image would have to be defined with nth-of-type() in the stylesheet additionally.

You don't need to use .parent().parent()
Just use the parent's class to find the item.
Your $(this).parent() * 3 is the $(".multi")
So your $rotators can't find .rotator-icons,
you need to use one more parent or use siblings
And I suggest do not use class if there are no need to do one thing to lots of items.

How to stick two unrelated elements together?

I'm working on an interface and I require something that would stick two unrelated elements together. Well, the most important element will be the "boss" and the other element called "employee" will follow the "boss" around and will change it's position accordingly.
This is the markup:
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
This is the jQuery I wrote:
$('.boss').each(function( i, obj ){
var Pos = $(this).position();
var ModuleWidth = $(this).outerWidth();
$(this).next('.employee').position({
my: 'right top',
at: 'right top',
of: $(this)
});
});
So I'm iterating through all the .boss classes and aligning all .employees to the right top of boss. They are supposed to always stick. But if I edit the html from the boss within chrome Developer Tools the .boss element will become smaller and larger and the .employee will not re-position its self accordingly. I would like to make .employee always reposition its self.
Later Update:
This http://screencast.com/t/F0RO7ODF is the kind of behavior i'm looking for. The gray box is the BOSS and the orange box is the EMPLOYEE. These 2 element's have a wrapper and i'm actually moving the wrapper. But i'd like a solution without a wrapper. Note: The organge box's position is irelevant.

I know this has been answered already, but here is an alternative which does not use any hierarchy between the two elements (even though that might not be the best practice):
HTML:
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
JS:
$.fn.invisible = function() {
return this.css("visibility", "hidden");
};
$.fn.visible = function() {
return this.css("visibility", "visible");
};
$(".boss").draggable({
stop:function(e) {
var employee_horizontal_position= $(this).offset().left+$(this).width();
var employee_vertical_position= $(this).offset().top-$(this).height();
$(this).next().visible();
$(this).next().offset({top: employee_vertical_position, left: employee_horizontal_position});
}
});
$(".boss").on("drag", function(e){
$(this).next().invisible();
});
CSS:
.boss{
height: 100px;
width: 300px;
background-color: grey;
float:left;
margin-top:100px;
}
.boss:hover{
cursor:pointer;
}
.employee{
height: 300px;
width: 100px;
background-color: orange;
float:left;
}
JSFIDDLE EXAMPLE: http://jsfiddle.net/ktxo4f6s/2/
I tried to make the employee hidden while the boss is being dragged as shown in your screencast.

n general when wanting elements to be in relation with each other they should be grouped together within an element.
To represent hierarchies it is best to also develop your html to honor the hierarchy you wish to represent.
This will force the behavior as you displayed in the video when moving the boss element.
For this particular example it may also be expanded upon with departments or roles.
See JSFiddle for example: http://jsfiddle.net/9dw5dvqw/
Updated: http://jsfiddle.net/en85bm9h/
HTML
<ul class="bosses">
<li class="boss">
<span class="boss-name"></span>
<ul class="employees">
<li class="employee">
<span class="employee-name"></span>
</li>
<li class="employee">
<span class="employee-name"></span>
</li>
</ul>
</li>
<li class="boss">
<span class="boss-name"></span>
<ul class="employees">
<li class="employee">
<span class="employee-name"></span>
</li>
<li class="employee">
<span class="employee-name"></span>
</li>
</ul>
</li>
</ul>
CSS
*{ margin: 0; padding: 0; }
body,
html{ height: 100%; }
ul{ list-style: none; overflow: hidden; float: left; }
li{ overflow: hidden; }
.bosses{ width: 100%; height: 100%; }
.boss{ margin: 20px 5px 20px 0; float: left; }
.boss-name{ display: block; background-color: #eee; float: left; width: 120px; height: 80px; cursor: move; }
.employees{ float: left; width: 50px; height: 120px; background-color: red; }

uislider padding not working

I am using uislider and it works great, but it sends the image across the entire width of the page. I attempted to change the javascript with no help. Finally I was able to get the right side of the page to pad properly using max-width: size of the image;
I've tried using min-width for the left side of the page, but it just doesn't seem to work.
CSS:
.banner {
float: center;
padding-top: 70px;
padding-left: 160px;
width: 100%;
max-width: 895px;}
.banner ul li {
float: left;}
.banner li {
list-style: none;}
Site is: mydiscountman.com if you want to see it functioning broken. I tried posting an image, but I do not have a reputation of 10 yet.
Thanks!
Banner code:
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//mydiscountman.com/mdm-content/themes/clipper/js/unslider.js"></script>
<div class="banner">
<ul>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest.png" width="895" height="294" title alt="social-facebook-color">
</li>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest2.png" width="895" height="294" title alt="social-facebook-color">
</li>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest3.png" width="895" height="294" title alt="social-facebook-color">
</li>
</ul>
<script>
$(function() {
$('.banner').unslider();
});
</script>

float: center; is not a valid css property
padding is also considered as the width
eg if width is 100% and padding is 10% so the total width will be 110%
if you want to add some space to the left use margin which will give space without effecting the width

Change Element Content But Not The Size

I have a page that displays images at a set width. The height is variable so the image keeps it's aspect ratio. On mouse over, the image changes, but so does the height. How can I keep the height and width the same and just have the new image use a max-height / max-width of the last image so the container is not resized.
See Here - http://jsfiddle.net/z3sxc/11/
<style>
li {
width: 190px;
border: 1px solid black;
list-style: none;
}
li img{
width: 100%;
}
</style>
<body>
<ul>
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
</li>
<li onmouseover="clip_2.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_2.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_2">
</li>
</ul>​
</body>

You can try this - DEMO
$("li")
.on("mouseover", function() {
var h = $(this).height();
$(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
$(this).height( h );
})
.on("mouseout", function() {
$(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});

No JavaScript/jQuery is needed to achieve this effect.
Simply define the background image of a block element (e.g. <div />, <span style="display: inline-block" />, etc.) in a css class, then change the background image on :hover.
See here: http://jsfiddle.net/adamb/z3sxc/15/
HTML:
<div class="picture" />
CSS:
.picture {
background: url(http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg) no-repeat;
background-size: 190px;
width: 190px;
height: 190px;
border: 1px solid black;
}
.picture:hover {
background: url(http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg) no-repeat;
background-size: 190px;
}

You could add a Javascript function to change the CSS on the element:
function changeImage() {
clip_1.style.maxWidth = clip_1.width + 'px';
clip_1.style.maxHeight = clip_1.height + 'px';
clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg';
}​
<li onmouseover="changeImage()" ... />
(Live here)

Here's something that might get you started.
The first adjustment I made was to wrap your image in a <div> with a generic CSS class name:
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<div class="clip">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
<div>
</li>​
And then you can give that class some style which will help with the sizing:
.clip {
overflow: hidden;
}
And then with a little jQuery on top:
$(function() {
$('.clip img').load(function() {
$(this).parent('.clip').css({
width: $(this).width(),
height: $(this).height()
});
$(this).unbind('load'); // only do this once
});
});​
​DEMO