This is the code to my carousel (image slider). I would like to know how to reposition the whole slider on my webpage. I basically want to move it a bit to the left as a whole. The website if link to this slider is http://www.menucool.com/javascript-image-slider and i also made a jsfiddle here http://jsfiddle.net/lasquish/cynar4ug/. Website code fiddle http://jsfiddle.net/lasquish/Low0emf1/
-Thanks for the help!
<div class="div1">
</div>
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
your fiddle isn't loading for me, but based in this code it would be like this:
#sliderFrame {
position: relative;
width: 960px;
margin: 0px auto;
left: -30px;
}
where -30px is the amount of pixels to the left you want to move the slider. An even better option would be to add the slider inside a container like
<div class="slide_contain">
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
</div>
Now in your CSS, you add this:
.slide_contain {
position:relative;
width:960px;
height:auto;
min-height:300px
}
#sliderFrame {
position: absolute;
width: 960px;
margin: 0px auto;
left: -30px;
}
This method will allow you to have better control and avoid problems when moving the sliderFrame div
Related
I have an image in my div.Image is nothing looking like box.Now i want to insert bar chart(highchart library dynamic content) over the image.I mean inside that box image.How to do that?
What i have tried
<div class="" style="position:relative">
<div style="position:absolute; top:0; left:0">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
</div>
here card1.png is box image.There are three cards,i need to insert 3 charts inside the 3 boxes individually.
Code you sent is really ugly and isn't using CSS the right way.
You want to separate CSS in another file and include it to your html with LINK tag. You want to use cascading style sheets, so you don't have to repeat same code so many times.
But if you want to stick to this type of code you can do it this way:
<div class="" style="position:relative; width: 400px; height: 750px;">
<div style="position:absolute; top:0; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:0; left:0; z-index: 2;">
Your first chart goes here
</div>
<div style="position:absolute; top:250px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px; left:0; z-index: 2;">
Your second chart goes here
</div>
<div style="position:absolute; top:500px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px; left:0; z-index: 2;">
Your third chart goes here
</div>
</div>
Do something like this:
<div style="background-image: url(); background-size: ; background-repeat: no-repeat;">
<p>whatever you want to put inside</p>
</div>
I suggest making the div have a class and doing all the css code in a .css document
I'm having some issues trying to make an overflowed container I've created in Divi draggable.
After researching I found a few templates that related to what I was looking for. However, wouldn't work due to the way the container has to be created within the theme.
I've added a link to the website development below so you are able to see the way the container has been set-up. Any advise on how I can achieve my desired outcome would be appreciated.
Example of what I'm trying to achieve
https://codepen.io/toddwebdev/pen/yExKoj
Development website
https://snapstaging.co.uk/thesnapagency/about/
Container layout
<div class="section">
<div class="row">
<div class="column">
<div class="module">
<div class="container">
<div class="items">
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Should be fine if you changed the styling a bit.
give the container (div with draggable on your webpage )
overflow-x: auto;
width: 100%;
and set the width of it's child (row)
width: 2500px;
Then whenever you use that codepen you should be good.
<div class="et_pb_row et_pb_row_7 draggable" style="
overflow-x: auto;
width: 100%;
">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_17 et_pb_css_mix_blend_mode_passthrough et-last-child" style="
width: 2500px;
">
Items here
</div>
</div>
I use slick-slider at my website to show the 6 newest posts. Normally, on slick-slider content, there are image, post title, category, share and so on (I refer to iflscience homepage).
The problem is, if the image is put exact after slick-slider, the image size will responsive to window size.
I am using 2 slideToShow Setting that will reponsive to 1 slideToShow after below certain width at slick-slider
<div class="container-body">
<div class="slider your-class">
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
</div>
But if I create a container to warp the post newest post content, the image size wouldn't responsive to window size.
<div class="container-body">
<div class="slider your-class">
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
</div>
</div>
I want the image inside the "div" is dynamically changed like when I didn't use "div".
I have tried to create a script to dynamically change the image width with height: auto, but sometime it doesn't work and depend on how fast we are resizing.
I understand, the div size will depend on image size, so the slick slider height won't change at all. But I haven't any clues to solve it.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Div's default display is block, img default position is inline we can resolve this by setting the container to inline or inline block and setting the width to 100%
I've got a loop that sets the width of the img-con and the width of the img container.
document.querySelectorAll('.con').forEach(el => {
el.style.width = `${el.children.length * 100}%`;
Array.from(el.children).forEach(img => {
img.style.width = `${100 / el.children.length}%`
})
})
.slider {
overflow: hidden;
padding: 0 10px;
width: 50%;
}
.img-con {
width: 100%;
display: inline-block;
position: relative;
float: left;
}
.con {
display: inline-block;
height: auto;
}
.img-con>img {
width: 100%;
position: absolute;
top: 0;
}
.img-con:before {
content: '';
width: 100%;
padding-bottom: 64%;
display: block;
}
.container-body {
display: flex;
flex-direction: row;
}
<div class="container-body">
<div class="slider your-class active">
<div class="con">
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
</div>
</div>
<div class="slider your-class active">
<div class="con">
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
</div>
</div>
</div>
I want do to something like background-size: cover but I don't care about the centering of the image, I just want it to fit the whole container.
I decided to do that by centering the image in a container and checking if the image has margin. If the image has margin-right then it needs width:100% and height:auto otherwise height:100% and width:auto;
It all worked fine until I tested it under Firefox. The problem is $(this).css("margin-top") returns a number in all browsers except Firefox. Firefox returns "auto". I tried replacing margin-top with .offset.top but that returns the offset of the element regarding the whole page, not it's closest relative parent.
Here is my code:
$("aside .img-container").each(function() {
if ($(this).find("img").offset().top >= 0) {
// if image has margin-top make it height 100%
$(this).addClass("full_height");
} else {
$(this).removeClass("full_height");
}
if ($(this).find("img").offset().left > 0) {
$(this).removeClass("full_height");
}
})
aside .img-container {
position: relative;
width: 25%;
height: 0;
padding-bottom: 25%;
display: inline-block;
float: left;
}
aside .img-container img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
}
aside .full_height img {
width: auto !important;
height: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
</aside>
My question is: Is there a function similar to .offset().top that returns the actual length between the image and the container because there are quite a lot of pictures and if I have to calculate it manually I am afraid it'll become too laggy.
I am open to other suggestions too.
Edit: Added the html.
Is there a function similar to .offset().top that returns the actual length between the image and the container
.offset gets coordinates in respect to the whole document; .position however gets you the position in relation to the element’s “offset parent”.
The offset parent is the first ancestor element that itself is positioned in some way (so has a CSS position value different from the default static.) Since your img-container elements are relatively positioned, they constitute the offset parent for your images inside them.
I work with jasny upload image preview plugin for bootstrap 3 But this does not work when preview image is empty. I need to show only no+image and select image button not empty div and change / remove button.
HTML:
<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">
<input type="hidden" name="myimage" value="1" />
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileinput-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
<div> <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" />
</span> Remove
</div>
</div>
How to fix this Problem?
DEMO : http://jsfiddle.net/Sambora/Y7hGh/2/
If I understood correclty your issue, I think this is because you used fileupload-exists instead of fileinput-exists. So the mark-up for the preview container should be like this:
<div class="fileinput-preview fileinput-exists thumbnail"
style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
You need to change: fileinput-exists in your top line of code to fileinput-new in case of no preview image is provided.
<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">
To:
<div class="fileinput fileinput-new" data-provides="fileinput" data-name="myimage">