<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden; ">
<div data-p="170.00" >
<img data-u="image" src="../../../Admin/Products and Services/images/<?php echo $img1 ;?>" />
</div>
<div>
In this Jssor slider how can I change sliders div max width to image width. Link to the jssor slider is given belowJssor Slider. Thank You!
Assuming you might have more sliders on the page and more images in each slider, this is the way to go:
document.querySelectorAll("[data-u=slides]").forEach(slider=>{
var maxWidth=0;
slider.querySelectorAll("img")
.forEach( image => {
maxWidth=Math.max(maxWidth,image.width)
});
slider.style.maxWidth=maxWidth+"px";
})
Here is a quick demo how you can do it:
var imageFrame = document.querySelector("div[data-u='slides']");
var imagediv= imageFrame.querySelector("div[data-p='170.00'] > img");
console.log("before: " + imageFrame.offsetWidth, imagediv.offsetWidth);
imageFrame.style.width = imagediv.offsetWidth+"px";
console.log("after: " + imageFrame.offsetWidth, imagediv.offsetWidth);
I assumed you wanna stretch the outer div holding the inner div to the size of the inner image of inner div. I also assumed no libs, vanilla only. I also assumed you want it compatible with older browsers so no fancy stuff like arrows.
If you got multiple photos you are gonna need to add their sizes up with possible margins, borders and paddings in between. That one would require me to see your entire HTML with CSS that styles it so I know what I need to take into account.
Here is a demo with photo off the internet:
fiddlejs
Ofc, remove the console logs, they are there in for demo only.
Related
If you take a look at https://jsfiddle.net/0spv56uk/1/
I am creating something on a website that has a container.
This container cannot get any wider (it may be able to get lightly taller - to fir the size of the screen)
Inside this container I will be setting images. They all vary in size.
These Images/SVGs have ability to rotate on click of a button (As shown in code).
I'm using 90 degrees at the moment but may need it at 45 degrees later.
The issue I have is that the image overflows the container when rotated.
I need it to scale inside the container when rotated. (The bottom of the container should be expandable but not the top).
I've looked over other threads here, and they either hard-code the scale(which only works if you have single image) or the code does not really apply to me so well.
Thank you all in advance.
This has been giving me nightmares for some time.
Here is my code
var myArray = ['0deg', '90deg', '45deg','180deg','270deg']; var myIndex = 1;
function nextRotation() { return 'rotate('+myArray[myIndex++%myArray.length];+')' };
$('#btn1').click(function(){
$('#testImg').css('transform', nextRotation() );
$('#testImg').css('-webkit-transform', nextRotation() );
$('#testImg').css('-moz-transform', nextRotation() );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg'>Img1</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/juanmontoya_lingerie.svg'>Img2</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/php.svg'>Img3</button>
<button type="button" id="btn1" >Rotate Div</button>
<DIV id="container" style=" wid th:60%;border-style:dotted;">
<DIV id="outer" width="100%">
<img id ="testImg" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg" style="width:100%;height:100%;">
</DIV>
</DIV>
You might be able to get it working by matching the height of the image to the width of the container. I also made container's position relative.
Note that you're also working with transparency in the image, so that is making it look like it's leaving a bunch of empty space.
I just added :
$('#testImg').css('height', $('#container').width() );
This looks to be working, but may stretch the image
I'm trying to create a site layout similar to this -
http://www.mondieu.nu/mishmash/fashion/
How can I get the divs in the "grid" to be of different sizes and to appear in a layout similar to that? So far I have this bit of jQuery:
$('.post-image img').each(function(){
$(this).css('width', (50+(Math.random()*700)))
})
Any help will be appreciated.
There is a little bit of built in order to the site you reference. The first two images look more fixed, both aligned to the top and taking up about half the page (centered). After that it looks like the images are in divs which are floated left and maybe have a random margin to offset them from where they should be. The images within the div then have a random width as you have attempted above.
So if I were you I would start with placing some images (say 10) in a container div and floating them left. I would then play around with adding random offsets to them (random margins or random top/bottom in px's (with position relative or absolute)). You can then try randomly changing the image size.
Finally, once you've got this working you can look at something more ordered at the top to make it look like it's shifting from ordered to random as you scroll down, rather than just starting off random.
One other thing to keep in mind is how this scales on smaller vs larger devices. Float left will just wrap images under each other as you scale down which is cool, if your images can be a % of the page width you could also scale those down to work on smaller pages.
Try this:
$('.post-image img').each(function(){
$(this).css('width', (50+(Math.random()*700)) + 'px');
});
Within .each()
the keyword this refers to the element
you could use this.width = 50 + (Math.random() * 700) to set <img> element width attribute
$(function() {
$(".post-image img").each(function() {
this.width = 50 + (Math.random() * 700)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="post-image">
<img src="http://lorempixel.com/100/100?=1" />
<img src="http://lorempixel.com/100/100?=2" />
<img src="http://lorempixel.com/100/100?=3" />
</div>
What would be the best way in Javascript/JQuery to determine the size in pixels a div would actually take to display it?
Let say I have a table with and the columns are fixed with the tag width="60px". Inside this column I add dynamically a div with a certain content, which will mostly be the following :
<div class="auto">
<img width="50px" src="/images/header-5123724.png">
<hr>
<span>Table1</span></div>
So, I know the size of the image which is 50px, but I do not know how long the text will be.
Another hint I have is that the element <span> will always be there, and the content should not be wrapped.
Is there a way to "render" the span and to get the size in pixels?
Any help is appreciated.
I found a way to accomplish what I wanted. I will post it here, maybe that can help somebody.
// add an extra span
$(this).parent().append('<span id="test" />');
//.. pick up the element to test into obj
// test the size
$('#test').html(obj.text()).css({
'font-family': obj.css('font-family'),
'font-size': obj.css('font-size'),
'font-weight': obj.css('font-weight')
});
//Width and adjustment
Width = $('#test').width() + 24;
//...If we want to check the max width, then we can loop through many columns of the table
//Finally adjust the width
obj.width(Width).css('min-width', Width);
//Cleanup
$('#test').remove();";
It is not very clean, but that worked for my case. For some reason the size of the columns were not set properly because it was resized by some plugin after the content was rendered by the browser.
Cheers.
Will the width be calculated on page load or on the fly?
If it is on page load then, #cont is the id of the content box.
$(document).ready(function() {
var dynWidth = $('#cont').width();
console.log('dynWidth: ' + dynWidth);
});
If it is on the fly then,
$(document).ready(function() {
$('#cont').bind('DOMSubtreeModified', function(){
var dynWidth = $('#cont').width();
console.log('changed dynWidth: ' + dynWidth);
});
});
Note: DOMSubtreeModified is not supported in IE8 (and below).
For any details refer this link.
I tried to make changing background effect append to the body when page scrolls within specific amount which scroll at 50%,20%,10% rate of page
Here is what i got so far Full Screen Fiddle
Below is the sample code :
HTML :
<div>
<p>...</p>
<!-- more <p> elements below -->
</div>
And the script :
jQuery(window).scroll(function () {
var JarakScroll = 200; // jarak scrol
var JumlahJarakPasScroll = jQuery(window).scrollTop();
if (JumlahJarakPasScroll > JarakScroll) {
jQuery('html').addClass('scrolled');
} else {
jQuery('html').removeClass('scrolled');
}
});
The background was changing but with no effect, anyone can help applying nice effect ?
If you want the background image to change with a nice effect it might be better if you have the background images applied to two divs that have 100% width and 100%height of the body and are placed correctly with z-index.
More specifically, place the first div on top of the second div and when you want the background image to change, fadeOut the first div. That'll be a neat effect. I'm assuming you can code this on your ownn.
My slideshow's working correctly in every aspect except the fact that it's a total failure when it comes to adjusting to different screen sizes.
It works like it should on my big screen, but on my other one it doesn't adapt and adds a horizontal scroller.
I added width 100% to it but as I've found out the right way to do this is by a javascript code that adjusts everything dynamically. The problem is, I've never had any prior experience doing this and don't know where to begin. My page has jQuery loaded by the way.
This is the sample structure of slideshow:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
I suppose a jQuery script to target '.featured-image img' dynamically and add the width and height to it would be the way to do this. Is there any way better than that or a simpler script? Any help is appreciated.
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
If you need it to adjust dynamically then you'll need to capture the resize event:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});