I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.
How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.
DEMO - js fiddle
html:
<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>
javascript:
function bigImg() {
$("#test1").show();
}
function normalImg() {
$("#test1").hide();
}
It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.
You can achieve what you want several ways, here is one using absolute positioning for the big image:
$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.enlarge {
position: relative;
}
.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>
Also on Fiddle.
Try putting the img tag outside of the column1 div and then it will no longer be restricted.
If the img is not showing ontop of the text try add css value z-index.
img {
z-index:2;
}
use :
$("#test" ).hover(function() {
$("#test1").show();
},function(){
$("#test1").hide();
});
https://jsfiddle.net/2rt836co/4/
Related
I have a scrolling a gallery that looks like this, I need to add an option that on click on one of the pictures, the clicked picture will cover 100% height and width of the screen, and the scrollbar will still appear under the picture in order to move to the next or the previous pictures that also will be in size of 100% of the screen.
It should look like this.
This is the gallery that on the first example:
$('.imageWrapper img').click(function() {
$('.scrolls img').css({
'width': '100%',
'height': '100%'
});
$('.footerclass').css({
'display': 'none'
});
});
.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.scrolls img {
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}
.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
.imageWrapper img {
display: block;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="column">
<div class="scrolls">
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<?php include 'footer.php';?>
</div>
</div>
</body>
I tried to add a JS that will change the size of all pictures to 100% height and width on click on one the picture. You could see that in the snippet.
My problem is how to display the specific picture that the user clicked on in 100% and still to have an option to scroll to previous or next pictures.
If you want to display the specific picture that the user clicked then I would suggest using $(this).css() selector instead of $(.scrolls img).css() to point more accurately to the image you're looking to render 100%.
Related: Use CSS to reorder DIVs
In my case, my HTML looks more like this:
<div class="container">
<div class="gallery">
<div class="image-wrap"> stuff </div>
<div class="thumbnails"> stuff </div>
</div>
<div class="info"> stuff </div>
</div>
I want .thumbnails and .info to switch places visually, but without affecting the styles or position of anything else. The all the html (and most of the css) inside .gallery is generated by a plugin that I can't edit.
This is what you can assume about the styling:
.thumbnails {
width: 100%;
height: 100px;
}
.info {
width: 100%;
min-height: 125px;
}
I considered using absolute positioning, but .info has a variable height because it has variable content length.
I'd prefer pure a CSS solution, but I'm open to jQuery/JS solutions if necessary.
If .info has a known height, then you can trick this using the float properties and behavior:
.thumbnails {
float:left;
clear:left;
width:100%;
}
.gallery:before {
content:'';
float:left;
height:130px;/* this should be the height and margins used by .info .... but js do not access pseudo element */
}
.info {
height:100px;
display:flex;
border:solid tomato;
justify-content:center;
align-items:center;
background:turquoise;
color:white;
font-size:2em;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
codepen to play with
You can use flexbox to reorder flex items, and display: contents to make all the elements participate in the same flex formatting context.
.container {
display: flex;
flex-direction: column;
}
.gallery {
display: contents;
}
.thumbnails {
height: 100px;
order: 1;
}
.info {
min-height: 125px;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
Currently, display: contents is only supported by Firefox.
Right, so I don't think you'll be able to achieve this just with css, because you want to actually change the structure... Javascript definitely will be required here:
(function($) {
$(function() {
$(".container").each(function() {
var container = $(this);
var gallery = container.children(".gallery");
container.children(".info").appendTo(gallery);
gallery.children(".thumbnails").appendTo(container);
});
});
})(jQuery);
Hope this helps!
Could somebody please take a look at this livelink of my web page? I have a caption in the top right hand side of each of the divs in my layout div, however I have one horizontal box (the first one) where the caption extends to the bottom of the div instead of only having a height of 20px. I have been searching through this code but I can not see why.
Thanks in advance
HTML
<div class="col">
<div class="trigger vertical img1">
<div tabindex="0" class="maincontent">
<div class="slider static">
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide1.png" height="400" width="200" />
</div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide2.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide3.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide4.png" height="400" width="200" /></div>
</div>
</div>
</div>
</div>
CSS
.caption-box {
position: absolute;
right: 0;
height: 20px;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
Add !important to your height, this will fix it...
.caption-box {
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
You've a
.trigger.vertical * {
height: 400px;
}
in your CSS, that force the heigh of the caption to 400px.
It happens only to the first caption because only the first caption is a child of a .trigger.vertical
Inspecting the element with Chrome shows that the height of 20px is overridden by this CSS class:
.trigger.vertical * {
height: 400px;
}
I noticed that there are quite a few differences in the layout between IE11 and Chrome 41.0.2272.118 so there are likely other issues with the layout.
I am trying to create a toggle button using the following, but its not working.
i have included CSS, HTML and javascript snippets I am using. If I am not doing something right, kindly advice.
CSS:
.toggle-button {
margin-bottom: 15px;
}
.toggle-button img {
display: inline-block;
height: 30px;
width: 60px;
background: url(../images/on-button.png) no-repeat center center;
}
.toggle-button img.down {
background: url(../images/off-button.png) no-repeat center center;
}
HTML:
<head>
<script Language="JavaScript">
function toggle (img) {
$(img).toggleClass("down");
}
</script>
</head>
<div class="right-form">
<h2>Email Settings</h2>
<div class="toggle-button">
<label>Stock Require Scanning:</label>
<img ondblclick="toggle(this);" border="0 id="stock_require_scanning"/>
</div>
<div value="OFF" class="toggle-button">
<label>Head Office Alerts:</label>
<img ondblclick="toggle(this);" class="down" border="0" id="head_office_alerts"/>
</div>
</div>
Is there anything I am not doing right?
Here you have a running demo: http://jsfiddle.net/L9nHY/ (I used the color green for "on" and red for "down"). Your made an error here:
<img ondblclick="toggle(this);" border="0" id="stock_require_scanning"/>
You have to replace this with '#stock_require_scanning':
<img ondblclick="toggle('#stock_require_scanning');" border="0" id="stock_require_scanning"/>
The same you have to do for the other button.
Edited: Sree: See this also: http://jsfiddle.net/L9nHY/1/
I am making a menu which has three parts to it:
Menu links left
Images
Menu links right
I need the menu links on the left and right to expand the full width of the screen and the image to be in a div with a fixed width and centered.
So I have the following setup
<div class="menuLinks">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks">Some links</div>
And the css
.menuLinks{width:100%;float:left;}
.menuImage{width:400px;float:left;}
Any help with this is much appreciated.
Thanks
This is a solution which is Fully CSS and HTML.
CSS
#wrapper{
width:100%;
text-align:center;
overflow: auto;
}
#block-images{
background-color: silver;
width: 400px;
margin:0 auto;
position:absolute;
left: 50%;
margin-left: -200px;
}
.wrapper-menu-left{
float:left;
width:50%;
}
.wrapper-menu-right{
float:right;
width:50%;
}
.menuBlock{
text-align: left;
}
#mLeft{
background-color: green;
margin-right:200px;
}
#mRight{
background-color: navy;
margin-left:200px;
}
HTML
<div id="wrapper">
<div class="wrapper-menu-left">
<div class="menuBlock" id="mLeft">left</div>
</div>
<div class="wrapper-menu-right">
<div class="menuBlock" id="mRight">right</div>
</div>
<div id="block-images">images</div>
</div>
Here is your html menu :
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
Just use css to size menuImages :
<style>
.menuImage{width:400px;float:left;}
</style>
Use javascript on load to find screen resolution and find each link div size :
<script language="javascript">
function resizeMenu()
{
var linksList = document.getElementsByName('links');
for(var i = 0; i < linksList.length; i++)
{
linksList[i].style.width = (screen.availWidth
- 2 * (400) //size of total images)
/ linksList.length; // total number of linksCount
}
}
resizeMenu();
</script>