Zoom on image inside div after resizing the image - javascript

Im trying to put an image with high resolution into div.
to do that, i used the property max-width / max-height on the image and it fit perfectly.
right now i want to add button - when clicking on button, I would like to zoom in the image without getting out of div's borders - in other words, I would like that the picture dimension will grow up inside the div with scrolles.
the problem is that the zoom property doesnt work so good - I guess its because the max-width I used on the image in order to resize it.
How can I get those 2 demands together?
Here is the code:
<div id="maps-content" class="maps-content">
<div id="map-frame">
<img src="images/empty_diagram.png" />
</div>
<div id="img-buttons">
<asp:Button ID="zoom_in_btn" runat="server" Text="Zoom In" OnClientClick="ZoomIn();return false;" />
<asp:Button ID="zoom_out_btn" runat="server" Text="Zoom Out" OnClientClick="ZoomOut();return false;" />
</div>
</div>
div#maps-content {
height: 90%;
background-color: blue;
}
div#map-frame {
/*position: relative;
height: 90%;*/
background-color:darkgoldenrod;
}
div#img-buttons {
/*position: relative;
height: 10%;*/
background-color:red;
}
div#map-frame img {
max-width: 100%;
max-height:100%;
}
Thank you

For example, If you use a div within id="div1" and the image is inside it,
and you dont want to get out the border of the div,
simply use the overflow code, for ex.
#div1{
overflow:hidden;
}
This will hide all the content outside the div1.
Please provide a code, or screen snap so we can help.

Related

HTML div formatting: three images that dynamically match viewport size (image slider)

I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click

Working with interactive-background.js

I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})

Change slider for horizontal scroll?

i've done a horizontal picture gallery from the here: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
and i was wondering if there is anyway to change the slider at the bottom to something like a nano slider? Something like this:
I'd really appreciate some help
Use overflow-x: auto; on your container (section in your example)
<section>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</section>​
CSS:
body {
overflow: hidden;
}
section {
/* The width of your document, I suppose */
width:600px;
margin: 0 auto;
white-space:nowrap;
overflow-x: auto;
}
.pic-container {
/* As large as it needs to be */
width: 1500px;
}​
If i understand correctly, you want to change the styling for the scroll bar. If I'm correct, that isn't difficult. you should use Webkit Scrollbars for this. Here's a pretty good article on it.
you would probably want something like this:
::-webkit-scrollbar-track:horizontal {
height: 3px;
background: gray;
}
::-webkit-scrollbar:horozontal {
background: white;
}
I'm not completely sure about it, thought. It's been a while since I've needed to style scroll bars.
note: since this is webkit it won't work in firefox (or maybe explorer, not sure) as far as I know, the only way to do this would be with javascript.

Css or javascript scroll transition?

I have two divs with:
width:100%; height:100%
so my whole document has an height of 200%;
both div`s have an link to each other,
now when i click on the link, i want that the site smoothly slides to the other div,
I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!
I tried to achive it with translateY, but it didnt worked!
Here is an exemplary code:
http://jsfiddle.net/hSU7R/
The HTML
<div class="full" id="one">
<span style="width:100%; background-color:blue">
<a href="#two" >Scroll to 2</a>
</span>
</div>
<div class="full" id="two">
<span style="width:100%; background-color:blue">
<a href="#one" >Scroll to 1</a></span>
</div>
The CSS
html,body {
width:100%;
height:100%;}
.full {
height:100%;
width:100%;}
#one {background-color:green}
#two {background-color:red}
Is this what you're looking for? A fork of your jsFiddle.
There has to be a smarter way to do this, but that's why we have jQuery right? My basic idea was to grab each anchor and turn off the default click response. Then, replace it with one that starts a setInterval chain. Each time the interval transpires, the window will incrementally scroll based on a frame rate and an estimated total run time. The actual run-time seems to take longer than the input time, but it at least gives you a way to get started.
What is the main disadvantage to using jQuery? I would think you'd get better performance from their implementation, since the jQuery people work on this stuff all the time.
You can control the scroll (speed, direction, position(?)) behavior with css.
CSS3 transitions enables to specify the way an element will go from a state to another while scroling is not an element. But you can position the body.
There is 'scroll-snap-points' wich might relate.
A CSS technique that allows customizable scrolling experiences like
pagination of carousels by setting defined snap points.
jsfiddled example
CSS
.gallery {
font-size: 0;
margin: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-points-x: repeat(1000px);
scroll-snap-type: mandatory;
white-space: nowrap;
width: 1000px;
}
img {
width: 100%;
}
HTML
<div class="gallery">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>

Can't align vertically a .swf file to the middle

I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?
Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>
Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}

Categories