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.
Related
I'm trying to change the text on this website when the screen size is less than 650, but it's not working. I've tried the answers from Do something if screen width is less than 960 px and Resizing images when screen is less than 1024 pixels width, which did not work. Here is the link to the replit, and the code snippet is also below.
if ($(window).width() < 650) { // I've also tried (window).width() and window.width
var words = $('.words');
words.text("Hello! This is the new text!");
}
else {
}
<div class="intro">
<div>
<h1 class="ele">Hey there!</h1>
<p class="ele words">Hi! This is the old text."</p>
</div>
<img class="ele me" src="me.png" alt="A picture of myself.">
</div>
I tried your code on CodePen and it seems to work fine, maybe your script is being loaded in the wrong place or the elements you're trying to change where not created yet, maybe some more code could help
see the example
<div class="intro">
<div>
<h1 class="ele">Hey there!</h1>
<p class="ele words">Hi! This is the old text."</p>
</div>
<img class="ele me" src="me.png" alt="A picture of myself.">
</div>
$(window).resize(function() {
if ($(window).width() < 650) {
var words = $('.words');
words.text("Hello! This is the new text!");
}
else {
var words = $('.words');
words.text("Hello! This is the old text.");
}
})
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
I am trying to make a small div that will be used to scroll between pictures in a jquery image zoom plugin for an eCommerce website.
Here is what I have so far.
<div style="width:125px;height:300px;overflow:auto;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>
Here is a jsfiddle https://jsfiddle.net/2o482ofp/
I need to hide the scrolls bars and instead have fixed arrow buttons to move up and down within the div.
I am trying to mimic the functionality that can be found on https://www.daraz.pk/ca-sports-black-pu-running-shoes-for-men-6605753.html
I did a lot of googling but could not find any tutorial, guide, plugin or anything regarding what I am trying to do so if anyone can please help much appreciated.
var blockHeight = 75;
var marginTop = 10;
$('.up').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
console.log('currentOffset', currentOffset);
var result = currentOffset - blockHeight - marginTop;
$elem.css("margin-top", result + "px");
});
$('.down').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
var result = currentOffset + blockHeight + marginTop;
console.log('.currentOffset', currentOffset)
$elem.css("margin-top", result + "px");
})
div > div {
transition: margin 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive"data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>
I am showing the image using data URLs, but how can I get the current height and width in pixel to resize it proportionally in angular js?
I have some algorithm to resize it independently
I'm not sure what data imageDataUrl has in it but you can get the image dimensions in JavaScript easily:
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'http://lorempixel.com/400/200/';
as pointed by mvermand comment, you can just add CSS to your class or directly height/width attributes.
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/2000px-SNice.svg.png" width="300"/>
</div>
</div>
If using only height or width, the other attribute is calculated to respect the image proportions.
Now, regarding the size you want, you can also use percents - like width="100%" to use the full width.
Cheers
If your goal is to resize proportionally, why not resize using CSS percentages?
CSS:
.smaller {
width: 80%;
}
Your Code:
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive smaller" data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>
you can get/set the height and width properties with angular.element("selector").height or width.
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.