Get size of an unknown image and change class - javascript

On my Tumblr Theme I want to use a different CSS class for portrait images.
Images, by default, come in via img-tag and get's the class bilder. But if it's an portrait image, I would like to replace the builder class with the hhcoch class.
HTML:
<img src="{..}" />
JavaScript:
var someImg = $("img");
if (someImg.height() > someImg.width()){
$( "img" ).addClass( "hhoch" );
}
CSS:
.bilder {
height: auto; /*override the width below*/
min-width: 100%;
max-width: 100%;
display: inline;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.hhoch {
min-height: 800px;
max-height: 800px;
width: auto;
}
Sum up:
The image should get a different class if it's portrait.

You've got the right idea, however that specific jQuery selector you're using is going to return an array of ALL the image tags in your document.
This means you'll want to loop over the array of image DOM nodes and apply your class that way.
var $images = $('.bilder');
$images.each(function(index, img){
if(img.height > img.width){ // is it a portrait-image?
$(img).removeClass('bilder'); // Remove default class
$(img).addClass('hhoch'); // Add the portrait class
}
});

Have you tried condensing the solution to this:
$("img.bilder").each(function(){
if (this.height > this.width) {
$(this).removeClass("bilder").addClass("hhoch");
}
});
Because I don't think all those extra lines of code are needed and might be your problem. As others were saying, it will return an array of objects so you need to loop through them all.

Related

Change css class attribute values using javascript

I want to change the value of one of the attributes of css class dynamically
Here's my scenario:
I've many elements using one class, instead of getting them all and looping them over and applying style, I want to change the value of one of the attributes of class, which is alredy applied on them. for example
.prodName {
max-width: 270px;
display: block;
}
above class is being used by many elements, and I want to alter one of the attributes of that class like
.prodName {
max-width: 350px <---
display: block;
}
is there any simple method for this in javascript.
Before I post this question, I already searched but didn't find anything easy and useful.
thanks in advance to helping hands.
You can use CSS variables for this case.
const root = document.querySelector(':root');
function play() {
root.style.setProperty('--size', '300px');
}
:root {
--size: 100px;
}
.container {
background-color: red;
width: var(--size);
height: var(--size);
cursor: pointer;
}
<div class="container" onclick="play()"></div>
The only problem with the above approach is support in older browsers. If you have to support IE, and older browsers where CSS variable support is not present, you can handle this problem by adding a class to the body/parent container.
function play() {
document.body.classList.add('large')
}
.container {
background-color: red;
width: 100px;
height: 100px;
cursor: pointer;
}
.large .container {
width: 300px;
height: 300px;
}
<div class="container" onclick="play()"></div>
Add new class to CSS:
.mw350 {
max-width: 350px;
}
Then add new class to the element in JS:
document.querySelector('.prodName').className += ' mw350'; // <-- better to select using unique IDs, like '#prodNameElement'
If you are going to control the css class/attribute change from ts, maybe with a function or var change, you might want to use ngClass: https://www.freecodecamp.org/news/angular-ngclass-example/ and have all the logic where you want it, easily accessible.

How to change image element class with JavaScript based on window width?

I am trying to adjust the size of a background image based on the width of the window. I have been testing this, and I can get the alerts to show up in chrome when I 'inspect element' and change the width size, and the alerts show up as they should. But I cannot get the class of the image to change.
Any ideas?
This is my basefunctions.js file
window.onload = function changeClass(){
if( window.innerWidth < 770 ) {
document.getElementById("bg_img").setAttribute("class", "imgMobile");
alert("On Mobile");
}else{
alert("Not on Mobile");
}
}
This is my HTML/CSS
<script language="JavaScript" type="text/javascript" src="js/basefunctions.js"></script>
<style>
#bg_img {
width: 100%;
z-index: 1;
border: 1px #000 solid;
height:80%;
}
.imgMobile {
display: none;
width: 100%;
z-index: 1;
margin-left: -100;
}
</style>
<img src="img/gavel.png" alt="" id="bg_img" class="">
You should use className rather than using setAttribute.
document.getElementById("bg_img").className = "imgMobile";
Here is another SO about changing an dom object's class.
I also put together a jsfiddle to demonstrate.
You can set the class using
document.getElementById("bg_img").className = "imgMobile";
If you want to add the class without overriding other classes, then use
document.getElementById("bg_img").className += " imgMobile";

jQuery - set calculated div width

I tried to set on my page posts as cards to one div with id="content" (like on G+).
#content {
margin-top: 120px;
margin-bottom: 70px;
margin-left: auto ;
margin-right: auto ;
height: auto;
}
.card {
height: 250px;
width: 500px;
margin: 10px;
float: left;
}
and I want to calculate how much .card I can fit into the screen.
So I tried this:
$(document).ready(function () {
"use strict";
var cardAmount = (Math.floor($(window).width/520))*520;
$("#content").css("width", cardAmount);
});
but the problem is(I think) the second parameter of .css must by string and it's not.
The problem is most likely that you need to add a unit to this number so the CSS engine knows what to do with it.
Also, there's another problem with your code - your not calling width function here: $(window).width. Please remember that width is a function from jQuery API, not DOM API parameter that you can simply get like this. So the whole fix is quite simple:
var cardAmount = Math.floor($(window).width() / 520);
$("#content").css("width", cardAmount + "px");
Here - see how it works in this fiddle
I guess you are missing the syntax with the px or % in the css .
$("#content").css("width", cardAmount+"%");#or
$("#content").css("width", cardAmount+"px");#or
$("#content").css("width", cardAmount+"em");

How to resize a div to clients viewport height?

Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):
var viewportHeight = "height:" + document.documentElement.clientHeight;
getElementById('section-1').setAttribute('style', viewportHeight);
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
edit:
ah i should be more clear, im attempting to have all three divs take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.
If you haven't already tried it, you'll want to look at parent:child inheritance of elements within the DOM by way of using CSS.
What I want to STRESS is that everyone giving you JS hacks to accomplish this is not only providing you with overkill (YOU did ask for a JavaScript solution, so they gave it to you!), but it's also a deviation from standards. HTML is for structure, CSS is for presentation, and JavaScript is for behavioral aspects... setting a div to the width of the viewport on load is a PRESENTATION aspect and should be done in CSS... not JavaScript. If you were trying to change the width based on events or user interaction, then yes JavaScript is your friend... but stick with just HTML and CSS for now.
The trick is that most elements have an undefined height - and height is later defined by the content that the element holds.
If you want to 'trick' an element into having a height other than what it wants to default to, you'll have to explicitly define it. Since you want to inherit your height from the viewport, you'll have to define the height at the top and bring it down...
You might be in luck and can avoid JavaScript altogether (unnecessary). Just use CSS.
Try something like:
html, body {
height: 100%;
width: 100%;
}
Now, when you try to set your div's later on, specify width: 100% and the height gets inherited from the html --> body --> div.
Try that and see if that solves your problem - if not, point us to a website, a pastebin, or a SOMETHING with code in it that we can just show you how to do it (whereas what you posted for code was an attempt in JavaScript which is only 1 part of the code - post the full thing either to a server or temp site like pastebin).
Here is some sample code I wrote (tested in Chromium):
The HTML:
<html>
<head>
<title>Test Divs at 100%</title>
<link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>
The CSS:
html, body {
width: 100%;
height: 100%;
background-color: #793434;
padding: 0;
margin: 0;
}
div {
height: 100%;
width: 100%;
}
.test1 {
background-color: #E3C42E;
}
.test2 {
background-color: #B42626;
}
.test3 {
background-color: #19D443
}
try this
div#welcome {
height: 100vh;
background: black;
color: white;
}
div#projects {
height: 100vh;
background: yellow;
}
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
it should work for you, but little support in IE
A bit of jQuery should do it:
$(document).ready(function() {
var window_height = $(window).height();
$('#section-1").height(window_height);
});
And if you want to keep 100% height on window resize:
$(document).ready(function() {
function viewport_height() {
var window_height = $(window).height();
$('#section-1").height(window_height);
}
viewport_height();
$(window).resize(function() {
viewport_height();
});
});
try this
window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;";
document.getElementById('section-1').setAttribute('style', viewportHeight);
}
Here is a script free solution, just CSS. This assumes that the divs are directly in the body element or a parent with position absolute and the parent has no padding.
#section-1 {
position: absolute;
height: 100%;
width: 100%;
background: #ff0000;
}
#section-2 {
position: absolute;
width: 100%;
top: 100%;
height: 100%;
background: #00ff00;
}
#section-3 {
position: absolute;
width: 100%;
top: 200%;
height: 100%;
background: #0000ff;
}
See fiddle: http://jsfiddle.net/QtvU5/1/

How do I include an element's margin in the hot-spot for jQuery's hover() event?

jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { width: 100px; height: 100px; margin: 50px; }
The code above doesn't react to mouse over of margin (margin isn't a part of element?) - how can I change that?
You could use a 50px transparent border instead - the margin isn't really supposed to be mouseable...
Include a pseudo element, e.g.
.my_container:before {
content:'';
position:absolute;
top:-50px;
bottom:-50px;
left:-50px;
right:-50px;
}
This adds an extra 50px to the existing element's clickable area.
If you only want to add this on touch screen devices, you could do this:
.touchevents .my_container:before {
...
}
This requires something like Modernizer to insert the appropriate feature-based CSS class.
Update
As per #Jaladh's comments, you may also need to apply position:relative to the container element, since position:absolute above will be relative to the first ancestor with a position attribute:
.my_container {
position:relative;
}
Perhaps use a 2nd wrapper element with padding on the outer element and existing background and padding styles on the inner element:
<div class="my_container">
<div class="my_container_inner">
<!-- etc. -->
</div>
</div>
jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { padding: 50px; }
.my_container_inner { width: 100px; height: 100px; /* etc. */ }
Building upon #Dunc's solution, you can alternatively use pseudo element to mimic your container and let actual container behave like margins. This will look like:
.my_container {
width: calc(100px + (2 * 50px));
height: calc(100px + (2* 50px));
position: relative;
}
.my_container::before {
content: '';
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
Also make sure to move all other properties (like background color, border, etc.) you had in my_container to my_container::before because before is acting like our container here.
This is essentially helpful if your containers are grid items and you want gaps in-between them to be hoverable, because otherwise using psuedo element to add margins won't work appropriately in that case.
Change the margin to padding and it'll be hoverable.

Categories