First off, here is the fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/
I thought I could run JS on fiddle but it's not working, either way all of my code is on there so I think we should be good.
So, I am trying to create my own custom image viewer which was working great until I tried to implement PREV and NEXT (in the fiddle they are text but they're actually images). I click next and it changes the picture in the viewer but then my overlay div disappears.
The reason I know it actually changes the picture is because if I put an alert at the end of prevImage() and/or nextImage() I see the changed picture, but once I click OK it all disappears.
I don't know what is going on. I am not sure if it's my JS or CSS causing the issue, I am fairly new to JS, CSS and HTML.
Can anyone tell me why my div disappears after this function is performed?
Here is the JS:
var images = Array();
var cursor = 0;
function showHide(obj) {
alert("Working");
var overlay = document.getElementById("ImgOverlay");
if (obj instanceof HTMLImageElement) {
// Get list of images in gallery
var gallery = document.getElementById("gallery");
images = gallery.getElementsByTagName("img");
cursor = -1;
while (images[++cursor].src != obj.src) {}
// Show the image
putImageInViewer(obj);
overlay.style.display = "block";
} else if (overlay.style.display !== "none" && overlay.style.display !== "") { // If it's the div that you clicked...
hideElement(overlay);
}
}
function hideElement(element) {
element.style.display = "none";
}
function putImageInViewer(obj) {
var img = new Image();
img.src = obj.src;
var size = 600;
var h = img.height;
var w = img.width;
// We want a max size of 600 but don't want to blow images up (bad graphics)
// Images should be their actual size but limited to 600px MAX
if (h <= 600 && w <= 600) {
if (h > w) {
size = h;
} else {
size = w;
}
}
if (h > w) {
document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" height=\"" + size + "\">";
} else {
document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" width=\"" + size + "\">";
}
}
function nextImage() {
// Check if we need to loop around
if (cursor < images.length) {
cursor++;
} else {
cursor = 0;
}
putImageInViewer(images[cursor]);
}
function prevImage() {
// Check if we need to loop around
if (cursor > 0) {
cursor--;
} else {
cursor = images.length;
}
putImageInViewer(images[cursor]);
}
Here is the CSS:
#wrap {
margin: 0 auto;
}
#wrap li {
float:left;
position:relative;
display:inline-block;
width:240px;
height:240px;
margin:10px;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0, 0, 0, .35);
overflow: hidden;
}
#wrap li div {
position:absolute;
height:0;
width:220px;
background:rgba(0, 0, 0, .45);
overflow:hidden;
bottom:10px;
left:10px;
padding: 0 10px;
line-height:50px;
color:#fff;
transition:height 1s;
}
#wrap li:hover div {
height:50px;
}
#wrap li img {
width: 240px;
height: 240px;
margin: 0px 0 0 0px;
cursor: pointer;
}
#ImgOverlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
/*fallback*/
background-color: rgba(0, 0, 0, 0.6);
/*background-image:none;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;*/
display: none;
}
#imgnav {
position: fixed;
top: 38%;
left: 50%;
margin: -15px 0 0 -363px;
width: 730px;
height: 60px;
}
#overlay-img {
position: fixed;
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
width: 600px;
height: 600px;
}
#overlay-img img {
border: 2px solid white;
display: block;
margin: auto;
}
And finally, the HTML:
<div id="wrap">
<h1>An Image Gallery</h1>
<ul id="gallery">
<li>
<img src="w" onclick="showHide(this);">
<div>Image 1</div>
</li>
<li>
<img src="w" onclick="showHide(this);">
<div>Image 2</div>
</li>
</ul>
<div id="clear"></div>
</div>
<!-- For Image Viewer -->
<div id="ImgOverlay" onclick="showHide(this);">
<div id="imgnav"> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">PREV</span>
<div id="overlay-img">
<!-- Image will go here -->
</div> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">NEXT</span>
</div>
</div>
<!-- End Image Viewer -->
You are probably running into JavaScript event propagation. In a nutshell, events that fire on DOM elements (such as the "click" event on your "PREV" and "NEXT" buttons), bubble up the DOM, firing again on each of the original element's parents. In your case, this means that when you click your "NEXT" button, it fires prevImage() and then when the event bubbles up to ImgOverlay, it fires showHide(this).
You need to modify your event handlers to tell the browser not to propagate the event. Change your button markup to something like the following:
<span id="nextButton" style="color: white; cursor: pointer; float: left" height="60px" width="60px">NEXT</span>
Then use the following to handle the click event:
var nextButton = document.getElementById('nextButton');
nextButton.onclick = function (ev) {
nextImage();
if (!ev) {
// Old versions of Internet Explorer do not pass the event to handlers.
ev = window.event;
}
ev.cancelBubble = true;
if (ev.stopPropagation) {
// W3C standard, works in Chrome, Firefox, Safari, etc.
ev.stopPropagation();
}
};
Related
I would like the "alt" to be displayed when hovering over the image. Everything works fine, except that although the photo has "alt" without the "-" and ".jpg" signs, the "alt" of the photo is displayed with these signs. When I edit these codes in "codepen" everything works ok but after uploading the codes to the page they don't work as they should.The CSS code is ok. It's about helping with JS.
<img class="img" src="https://photoooo777.com/Some-Photo.jpg" alt="Some Photo" width="200" height="300">
<p class="alt">Some-Photo.jpg</p>
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
$(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});
$(document).ready(function () {
$("img").each(function () {
var $img = $(this);
var filename = $img.attr("src");
if (typeof attr == typeof undefined || attr == false) {
var altText = filename.substring(
filename.lastIndexOf("/") + 1,
filename.lastIndexOf(".")
);
altText = altText.replace("-", " ").replace(".jpg", "");
$img.attr("alt", altText);
}
});
});
Please help me edit these codes so that the name is displayed on hover, e.g. "Some Photo" instead of "Some-Photo.jpg".
You can remove the line where you are setting the alt attribute of the image to the file name by removing this line:
$img.attr("alt", altText);
Also you don't need to wrap the images in a div with class alt-wrap and add a new p element with class alt after the image.
Instead, you can use the title attribute to show the text on hover over image. You can set the title attribute to the same value as the alt attribute on each image:
$("img").each(function () {
var $img = $(this);
var altText = $img.attr("alt");
$img.attr("title", altText);
});
This way you don't need to create any new elements and you can remove the wrapping and the p element.
My entire code looks like this:
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
$(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});
$(document).ready(function () {
$("img").each(function () {
var $img = $(this);
var filename = $img.attr("src");
if (typeof attr == typeof undefined || attr == false) {
var altText = filename.substring(
filename.lastIndexOf("/") + 1,
filename.lastIndexOf(".")
);
altText = altText.replace("-", " ").replace(".jpg", "");
$img.attr("alt", altText);
}
});
});
.img2 {
max-width: 100%;
height: 100%;
margin: 0;
padding: 0px;
column-count: max-width;
background-color: white;
}
.img-wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.img {
display: block;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 5px solid transparent;
border-image: linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: transparent;
transition: all 10ms linear;
transition-delay: 300ms;
text-align: center;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
text-align: center;
font-weight: 900;
color: white;
font-size: 150%;
border: 20px solid transparent;
margin-left: 1%;
margin-right: 1%;
text-shadow: 0 0 10px black;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="img2"><div class="img-fluid"><div class="img-wrap"><img class="img" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" alt="Some Photo" width="200" height="300">
The first script puts something like this into the html code:
<div class="img2"><img class="img" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" alt="Some Photo" width="200" height="300">
<p class="alt">Some-Photo.jpg</p></div>
I would like "alt" to be displayed after hovering the cursor, but without "-" and ".jpg"
Sorry, I'm new to programming :)
In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.
Edit - I mean the click listeners I apply using JavaScript are not working
CSS:
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
HTML:
<div class="thumb-bar"></div>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<button class="dark">Darken</button>
</div>
JavaScript:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for (var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', function(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'))
});
}
Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.
You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:
.thumb-bar {
overflow: hidden;
}
... or make the .full-img element itself clear them:
.full-img {
clear: both;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I try to make this effect using css.
This is the effect:
I try to make div that:
div {
height: 300px;
width: 10px;
position: absolute;
border-radius: 0px 500px 500px 0;
-moz-border-radius: 0px 500px 500px 0;
-webkit-border-radius: 0px 500px 500px 0;
background-color: grey;
opacity:0.1;
}
and then by css change the width of this effect.But it look very ugly it more square then circle and also I the change in the width dont make it become like the effect. it looks like the shape become bigger in width but not become more circle...
How can I make this effect by css/js ? everything that I tried with the div look very bad.
Thanks.
The effect is a little tricky because of its shape. The key is that the circle that you are creating with the div has to be moved mostly off screen to get a curve that aligns more with the example you gave.
.container .effect{
position:absolute;
width:200px;
height:80%;
top:10%;
right:-140px;
background-color:#fff;
border-radius:100% 100% 100% 100%;
transition:width 500ms ease-in-out, right 500ms ease-in-out, opacity 500ms ease-in-out;
opacity:.7;
}
Here is a fiddle with more details. Try turning the overflow:hidden off on the .container element to see more details of whats going on. The JavaScript is just to show the effect happening.
**Side note: the background image is not my own and was used for education purposes. Credit belongs with the original owner.
Just give it a try (Don't forget to emulate touch events in chrome):
var _div = document.getElementById('wrapper');
var _elem = document.getElementById('div');
_div.addEventListener('touchmove', function () {
_elem.style.width = '60px';
});
_div.addEventListener('touchend', function () {
_elem.style.width = '0';
});
*, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#div {
height: 95%;
width: 0;
top: 2.5%;
position: absolute;
border-radius: 0 500px 500px 0;
-moz-border-radius: 0 500px 500px 0;
-webkit-border-radius: 0 500px 500px 0;
background-color: gray;
opacity: 0.1;
-webkit-transition: width .2s; /* Safari */
transition: width .2s;
}
#wrapper {
width: 100%;
height: 100%;
background: darkgreen;
}
<div id="wrapper">
<div id='div'></div>
</div>
Here is another take using pseudo-elements and transforms. When scroll reaches end on both sides, the faux-rubber-banding effect will show up.
Works with mouse scroll to test on non-touch screen desktops. For Chrome, can emulate mouse events to test.
Demo Fiddle: http://jsfiddle.net/abhitalks/v4mLkttL/
Demo Snippet:
var $wrap = $('#wrap'), startX, isDrag = false;
$wrap.on('touchstart', function(e) {
startX = e.originalEvent.touches[0].clientX; isDrag = true;
});
$wrap.on('touchmove', function(e) {
var delta = e.originalEvent.changedTouches[0].clientX - startX,
pos = $(this).scrollLeft(), w = $(this).width(),
iw = $(this).innerWidth(), sh = this.scrollWidth
;
if (isDrag) {
if ((delta > 0) && (pos <= 0)) {
$wrap.addClass('rubberLeft');
isDrag = false; e.preventDefault();
}
if ((delta < 0) && (pos + iw >= sh)) {
$wrap.addClass('rubberRight');
isDrag = false; e.preventDefault();
}
}
});
$wrap.on('touchend', function(e) {
isDrag = false; clearRubber();
});
$wrap.on('mousewheel DOMMouseScroll', function(e) {
var start = e.originalEvent,
delta = start.wheelDelta || -start.detail,
pos = $(this).scrollLeft(), w = $(this).width(),
iw = $(this).innerWidth(), sh = this.scrollWidth
;
this.scrollLeft += delta * -1;
if (pos <= 0) { $wrap.addClass('rubberLeft'); setTimeout(clearRubber, 600); }
else if (pos + iw >= sh) { $wrap.addClass('rubberRight'); setTimeout(clearRubber, 600); }
else { clearRubber(); }
e.preventDefault();
});
function clearRubber() { $wrap.removeClass('rubberLeft').removeClass('rubberRight'); }
* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { height: 100vh; width: 100vw; overflow: hidden; }
#wrap {
min-width: 100vw; height: 100vh;
overflow-y: hidden; overflow-x: scroll;
background-color: #000; white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
#wrap img { display: inline-block; vertical-align: top; }
#wrap::before, #wrap::after {
content: ''; display: block;
position: absolute; top: 4%;
width: 100px; height: 90%;
background-color: rgba(255,255,255,0.6);
box-shadow: 0 0 10px 4px rgba(0,0,0,0.5);
border-radius: 50%; transform: translateX(0px);
transition: transform 0.5s;
}
#wrap::before { left: -105px; }
#wrap::after { right: -105px; }
#wrap.rubberLeft::before { transform: translateX(45px); }
#wrap.rubberRight::after { transform: translateX(-45px); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<img class="page" src='//lorempixel.com/240/320' />
<img class="page" src='//lorempixel.com/241/320' />
<img class="page" src='//lorempixel.com/239/320' />
<img class="page" src='//lorempixel.com/240/320' />
<img class="page" src='//lorempixel.com/241/320' />
<img class="page" src='//lorempixel.com/239/320' />
</div>
I'm following code which is showing the pop-up boxes at the bottom of screen when user clicks on a name of user (the user list is appearing on top right side of your screen.)
<!doctype html>
<html>
<head>
<title>Facebook Style Popup Design</title>
<style>
#media only screen and (max-width : 540px)
{
.chat-sidebar
{
display: none !important;
}
.chat-popup
{
display: none !important;
}
}
body
{
background-color: #e9eaed;
}
.chat-sidebar
{
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name
{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span
{
padding-left: 5px;
}
.sidebar-name a
{
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover
{
background-color:#e1e2e5;
}
.sidebar-name img
{
width: 32px;
height: 32px;
vertical-align:middle;
}
.popup-box
{
display: none;
position: fixed;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head
{
background-color: #6d84b4;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left
{
float: left;
}
.popup-box .popup-head .popup-head-right
{
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a
{
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 100%;
overflow-y: scroll;
}
#carbonads {
max-width: 300px;
background: #f8f8f8;
}
.carbon-text {
display: block;
width: 130px;
}
.carbon-poweredby {
float: right;
}
.carbon-text {
padding: 8px 0;
}
#carbonads {
padding: 15px;
border: 1px solid #ccc;
}
.carbon-text {
font-size: 12px;
color: #333333;
text-decoration: none;
}
.carbon-poweredby {
font-size: 75%;
text-decoration: none;
}
#carbonads {
position: fixed;
top: 5px;
left: 5px;
}
</style>
<script>
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
//this variable represents the total number of popups can be displayed according to the viewport width
var total_popups = 0;
//arrays of popups ids
var popups = [];
//this is used to close a popup
function close_popup(id)
{
for(var iii = 0; iii < popups.length; iii++)
{
if(id == popups[iii])
{
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
//creates markup for a new popup. Adds the id to popups array.
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups()
{
var width = window.innerWidth;
if(width < 540)
{
total_popups = 0;
}
else
{
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width/320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
</head>
<body>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=qnimate" id="_carbonads_js"></script>
<div class="chat-sidebar">
<div class="sidebar-name">
<!-- Pass username and display name to register popup -->
<a href="javascript:register_popup('narayan-prusty', 'Narayan Prusty');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>Narayan Prusty</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qnimate', 'QNimate');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QNimate</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qscutter', 'QScutter');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QScutter</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qidea', 'QIdea');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QIdea</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qazy', 'QAzy');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QAzy</span>
</a>
</div>
<div class="sidebar-name">
<a href="javascript:register_popup('qblock', 'QBlock');">
<img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
<span>QBlock</span>
</a>
</div>
</div>
</body>
</html>
Now my issue is I want to display one name and only one pop-up box for that name at right bottom corner. And the pop-up box should close if user clicks anywhere except the pop-up box.
How should I achieve this?
N.B.: I've not created a jsfiddle since I'm not aware of how to make it but if you just create one HTML file on your machine and copy-paste my code you will be able to run the code in your browser.
Bind the following events with the popup.
$(':selector').bind({
mouseover : function(){
mouseIn = 1;
},
mouseout : function(){
mouseIn = 0;
},
click : function(){
mouseIn = 1;
}
});
$(document).click(function(){
if($(":selector").is(":focus")){
mouseIn == 1;
};
if(mouseIn == 0){
$(':selector').slideUp();
}
});
I've been racking my brain trying to get two problems figured out. One is an image cropping and the other is and image resizing one. Here is a overview of the code I have:
HTML code:
<script src="main.js"></script>
<div class="mainDiv">
<div class="columnDiv1">
<!-- a div here a div there -->
</div>
<div class="columnDiv2">
<div class="iconDiv1">Icon 1</div>
<div class="iconDiv2"><img src="/images/div2Icon.png" id="div2IconImg" width="1" /></div>
</div>
<div class="columnDiv3">
<!-- a div here a div there -->
</div>
<div class="bottomRowDiv">
<!-- a div here a div there -->
</div>
</div>
CSS code:
<style type="text/css">
.mainDiv {
z-index: 2;
float: left;
width: 1112px;
position: relative;
overflow: hidden;
}
.columnDiv1 {
z-index: 20;
position: absolute;
width: 33.36%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv2 {
z-index: 20;
position: absolute;
width: 30.31%;
padding: 0px;
float: left;
border: 0px solid;
}
.columnDiv3 {
z-index: 20;
position: absolute;
width: 36.33%;
padding: 0px;
float: left;
border: 0px solid;
}
.bottomRowDiv {
z-index: 20;
position: absolute;
width: 100%;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv1 */
.iconDiv1 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 75px;
padding-right: 0px;
float: left;
border: 0px solid;
}
.iconDiv2 {
z-index: 20;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
padding: 0px;
float: left;
border: 0px solid;
}
/* stuff in here for columnDiv3 */
/* stuff in here for bottomRowDiv */
#iconDiv1_link {
display:block;
text-indent: -10000px;
background: url(/images/div1.png) no-repeat;
background-position: center top;
}
#iconDiv1_link:hover {
background-image: url(/images/div1hover.png);
}
</style>
JavaScript code:
_spBodyOnLoadFunctionNames.push('sizeImageMap()');
function sizeImageMap()
{
// get screen information
var currentScreenWidth = screen.width;
var currentScreenHeight = screen.height;
// get images' information
//define Image Icon Hash keys
var imgIconHash = {};
imgIconHash['image1_link'] = {};
...
...
imgIconHash['iconDiv1_link'] = {};
imgIconHash['div2IconImg'] = {};
...
...
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLinkStyle = imgLink.currentStyle || window.getComputedStyle(imgLink, false);
imgIconHash[imgLinkName]['src']=imgLinkStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
} else if (imgLink.nodeName === "IMG") {
imgIconHash[imgLinkName]['src']=imgLink.getAttribute('src');
} else {
// not A or IMG nodes
}
// get image width and height
var tmpImg = new Image();
imgIconHash[imgLinkName]['width']=tmpImg.width;
imgIconHash[imgLinkName]['height']=tmpImg.height;
}
// initialize scaling factors
var imgScale = 1;
//set scaling factors
if(currentScreenHeight >= /*given amount*/ ) // set scale
{
imgScale = 0.5676; // reset image scale
} else {
imgScale = 0.3784; // reset image scale
}
//resize images
for (var imgLinkName in imgIconHash){
var imgLink = document.getElementById(imgLinkName);
if (imgLink.nodeName === "A") {
imgLink.style.background.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.background.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
} else if (imgLink.nodeName === "IMG") {
imgLink.style.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
imgLink.style.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";
}
}
}
Note, this is a webpage content part in SharePoint, hence the "_spBodyOnLoadFunctionNames.push('sizeImageMap()');" to perform an operation similar to document.onload.
So, two problems I am having:
The image in the 'columnDiv2' of 'iconDiv1' seems to be being cropped. It's size is 322px width and 128px height. The left and top don't appear to be being cropped, but the bottom and right do appear, or more so, don't appear, as though they have been cropped. I have seven other images in my code that are handled the same way, and have no problems with them, but this one appears to have the problem. It's not noticeable on the first loaded image, but on the image that shows after a 'hover', you can see the cropping.
I can get the IMG's width and height, but not the a-href link's background width and height. Any direction for this would be helpful. Also, I am doing this so that the images can be resized. Note the links are id's and not class's, as I was unable to find an easy way to access the existing images width and height, before loading, and then how to resize the a-href link's size after getting it. As said, the IMG works fine, just the A doesn't want to cooperate.
Thank you in advance.