Develop Reference

random divs horizontally javascript

New here. I am a sys-admin with medium experience with html/css/php. I've worked on modX, Wordpress and Joomla in the past, and now my boss wants something that requires javascript or jquery knowledge (less than basic in my case).
Problem description: .x-container is with fluid height and .x-column also, .ult-new has fixed height 230px with margin set in css (20px) and position relative. x-column has width: 22% and position relative and margin-right: 4%. And i need to display randomly each ult-new inside each x-column (inside each x-container). Those elements are created dynamically with php and shortcodes. So i need to vertically position them in random places in those columns and relative to each other (with 20px margin top and bottom).
As i understand i need to count the height of each x-column and than count the number of .ult-new elements in each of those columns. And than i need to posiotion those elements as absolute and do some math (first will be 0px from the top plus 20px margin, and then second element needs to be 230px from the top plus 20px margin top etc).
How do i translate this to javascript? Is there something else i don't see? :)
<div class"x-container">
<div class="x-column">
<div class="ult-new">
<!--some code here (text, hyperllinks etc)-->
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<!--some code here (text, hyperllinks etc)-->
</div>
<div class="x-column">
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
</div>
<!--and many more x-column-->
</div>
<div class"x-container">
<div class="x-column">
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
</div>
<div class="x-column">
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
</div>
</div>
<!--and many more x-container-->

I may not fully understand what your doing but the best information i can give you is this jquery. now your gonna have to do some of the work to configure it but i believe in you!
var x; // move horizontal
var y; // move vertical
$('.YOURCLASS').css({"width":"50px","margin","50px","position":"absolute","transform":`translateX(${x})`,"transform":`translateY(${Y})`}) //sets styles
$('.YOURCLASS').css("width") // gives the width of element
var randomnum = Math.floor((Math.random() * 10) + 1); // random number 1-10
y = randomnum
x = randomnum
// use position:absolute then pass x,y in

How to execute javascript for each individual nested div displaying images?

I am trying to get a JS script to execute solo within each nested div. I have class conflicts, and I am unable to figure out how to basically iterate the script through each div without conflicts.
I have tried using .each, running different loops, classing the divs, and more. I have tried numerous things unsuccessfully. I wish I had kept track of all the different methods, but I've been at this for hours and have been unsuccessful in finding the correct syntax. It's quite obvious, I need serious work when it comes to programming. I have HTML, CSS, and bootstrap down pretty well, but Javascript and jQuery, I have just begun learning.
<link href="Styles/StyleSheet.css" rel="stylesheet" />
<script src="Scripts/thumbs.js"></script>
<div class="container-fluid maxW opaque padtop">
<!-- Jumbotron -->
<div class="jumbotron container-fluid">
<div>
<img src="jumbo.jpg" alt="" /></a>
</div>
</div>
<!--First Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 1</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumpic.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
<!--Second Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 2</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumotherpic1.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic2.jpg" alt="" onmouseover="preview(this)" />
<img id="3" class="thumb normal" src="sumotherpic3.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
</div>
Here's the CSS:
.preview {
width: Auto;
max-height: 600px;
}
.thumb {
width: 205px;
margin-right: 3px;
}
.normal {
border: 3px solid #000000;
}
.selected {
border: 3px solid #ff0000;
}
And the JavaScript code:
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
I think that's everything.
So what I'm aiming for is each div block to have the thumbs underneath and the mouse-dover image displayed above as the large displayed image. It works great so long as there is one single div. As soon as I add 2+ I run into what I'm assuming is class conflicts where only the first div displays the large image. It will display the large image that was last moused over in any of the divs. It is empty in all divs, except the first. The thumbs have no issues being displayed in each div. Thank you in advance for any help, and thank you for understanding I'm new to this and trying to learn.

Well, your using pure Javascript, no jQuery. That's ok of course
The obvious error I'm seeing is id = 0 instead of "0"
Another thing is "className" youre using instead of set attribute class
I would recommend in general 2 things:
Using example cases, and F11 and opening the console
As per you code, I made small fixes to get you going, and to understand the next step. I think that you should define object vars for lastimg, "0" and img then make the code more readable and scalable
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById("0").src = document.getElementById(lastImg).src;
document.getElementById(lastImg).setAttribute("class", "thumb selected");
function preview(img) {
document.getElementById(lastImg).setAttribute("class", "thumb normal");
document.getElementById(img).setAttribute("class", "thumb selected");
document.getElementById("0").getAttribute("src") = document.getElementById("img").getAttribute("src");
lastImg = img;
}

Each not encapsulating blocks

I'm building a site that dynamically positions content in the middle of a group of sections.
Div with image background (Full width image - FWI)
Div with image background (of different height)
My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic
Jquery
jQuery(window).on("resize", function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
}).resize();
jQuery(".fwi-image img").load(function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
});
HTML
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1080" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
my content which is dynamically positioned in the center vertically in my div
</div>
</div>
</div>
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1200" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
will take height from previous image-outer not its parent - it should be 1200
</div>
</div>
</div>

Place this in you document.
function adjustImageOuterHeight () {
var fwiImage = jQuery(this).parent(".fwi-image");
var imageOuter = fwiImage.next(".image-outer");
imageOuter.height(fwiImage.height());
}
jQuery(document).ready(function () {
jQuery(".fwi-image img")
.load(adjustImageOuterHeight)
.each(function () {
if (this.complete) adjustImageOuterHeight.call(this);
});
});
jQuery(window).resize(function () {
jQuery(".fwi-image img").each(adjustImageOuterHeight);
});
Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.

Store browser width value into translateZ using jquery

I am basically trying to build a 3D Cube and having trouble with the translateZ property. I want to get the width of the browser and store it into the translateZ for a particular element. This will create the 3D cube responsive even when the browser is being re-sized. I want it to store the value as it works with the .auto-size
resizeDiv();
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.auto-size').css({'height': vph + 'px', 'width': vpw + 'px'});
$('.full-z').css({'transform': 'translateZ' ( vpw + 'px' ); });
}
The translateZ value is given to a css class so i can use that multiple times for different divs. My markup is as follows
<div class="viewport">
<div class="cube">
<div class="cube-side1 auto-size cube-face" id="front">
</div>
<div class="cube-side2 auto-size cube-face full-z" id="back">
</div>
<div class="cube-side3 auto-size cube-face" id="left">
</div>
<div class="cube-side4 auto-size cube-face" id="right">
</div>
<div class="cube-side5 auto-size cube-face" id="top">
</div>
<div class="cube-side6 auto-size cube-face" id="bottom">
</div>
</div>
</div>
It works with the widths and heights but not with the transform property. I have very little knowledge of jQuery.

Need to reduce height of an image using javascript

This is my code
<div data-role="page" id="callAjaxPage">
<img id="logo" src="images/logo.JPG" alt="logo" />
<div data-role="header">
<h1>Login</h1>
</div>
<div data-role="content">
<form id="callAjaxForm" data-ajax="false">
<div data-role="fieldcontain">
<label for="userName" id="userNameLabel">Username</label> <input
type="text" name="userName_r" id="userName" value="" /> <label
for="password" id="passwordLabel">Password</label> <input
type="password" name="password_r" id="password" value="" /> <br />
<button data-theme="b" id="submit" type="button">Submit</button>
</div>
</form>
</div>
</div>
In this code i have an image which is the logo. I Just need to reduce the height of the image. What i have tried is manually setting the height to say 150px but what happens is that the height gets reduced but my width also reduces. Even if i hardcoded my width, still it reduces. The problem maybe the image is small.I also tried placing it in a div and i manually set the corresponding height and width but the div concept cuts the image. I dont want the image to be cut or something.I just want it to shrink in height. I dont care about the quality. How to do it?

Reducing the height is doing what almost anyone wants - keeping the aspect-ratio when you change the height. If you need to keep the width, change the width AND the height to the height it was with the desired width
for example DEMO
$(document).ready(function() {
var img = $("#logo");
var width = img.width();
alert(width);
img = $('<img height="250" width="'+width+'" alt="'+img.attr("alt")+'" src="'+img.attr("src")+'"/>')
$("#logo").replaceWith(img);
});

You can either do this in CSS.
#logo {
width: 80px;
height: 30px;
}
Or if you want to resize the image dynamically with javascript.
$("#logo").attr("width", $("#logo").width());
$("#logo").attr("height", 30);

You can set separately width and height using the style attribute.
For example :
<img style="height:40px;width:300px;" src=0NfSJ.jpg>

You just specify the width and height attributes, and the image will be displayed in that size:
<img id="logo" src="images/logo.JPG" alt="logo" width="300" height="20" />
Here is a demo of a 5x5 image displayed as 300x20: http://jsfiddle.net/Guffa/A9pAP/