Having a slight issue with some code I've written for a simple sliding div on a clients site.
The code should find the height of the div (as the length differs per page), and then set the div to a height of 100px. The issue at the moment is that the full length of the div is visible for half a second before javascript resizes it. Can anyone help me modify my code so that the div's full length is not visible to the user without clicking more info?
Here is the JS:
function heightGet(){
var moreinfoHeight = document.getElementById("moreinfo").clientHeight;
var moreinfo = document.getElementById("moreinfo");
moreinfo.style.height = moreinfoHeight + "px";
moreinfo.style.visibility = "visible";
document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
heightLess(moreinfoHeight);
}
function heightMore(val){
var moreinfo = document.getElementById("moreinfo");
document.getElementById("moreinfo_button").href="javascript:heightLess(" + val + ");";
document.getElementById("moreinfo_button").innerHTML="Less Info";
moreinfo.style.height = val + "px";
alert(div.height);
/*setTimeout( function() {
// here add the code (or call a function) to be executed after pause
moreinfo.style.height = "100%";
}, 500 );*/
}
function heightLess(val){
var moreinfo = document.getElementById("moreinfo");
document.getElementById("moreinfo_button").href="javascript:heightMore(" + val + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
moreinfo.style.height = "100px";
}
heightGet is triggered on page load, heightMore is triggered on a button press for more info, and the opposite for heightLess
If I was you, I would add class with {height: 100px} or style to the container "moreinfo", and remove it in the heightMore function and add in the heightLess function. you don't have to search real height of the container if I understood you right.
function heightGet(){
document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
}
function heightMore(val){
var moreinfo = document.getElementById("moreinfo");
moreinfo.className = '';
}
function heightLess(val){
var moreinfo = document.getElementById("moreinfo");
moreinfo.className = 'shortview';
}
and here is css part
.shortview{
height: 100px;
}
hope it helps
Related
I have this strange... error? Unwanted behaviour.
I add some div elements via script. If you've never visited the site before, it will not load any of those divs. I see that because all of those divs have a background-image property set. I also know I actualy add them well because when I refresh the page, I see the result that I want to see. So, the problem is that when someone comes to that website firs time, he'll see nothing. No "buttons" (those are the divs I was talking about), and he doesn't know he needs to refresh the page to see them like I do.
HTML
<body>
<div id="outter">
<script> CreateButton('outter','','','right', 'kolica'); </script>
<div id="menu"></div>
<script>
CreateButton('menu','','','left', 'menuBtnNovo');
CreateButton('menu','','','left', 'menuBtnDzidzabidze');
CreateButton('menu','','','left', 'menuBtnUskoro');
CreateButton('menu','','','left', 'menuBtnPredlozi');
</script>
</div>
</body>
SCRIPT (edit)
<script>
function CreateButton(parentElementID, width, height, floating, id){
// create div
var div = document.createElement("div");
div.Id = id;
div.style.float = floating;
div.style.padding = "0";
div.style.margin = "0";
div.style.backgroundSize = "100% 100%";
div.style.backgroundImage = "url(images/mo/" + id + ".png)";
div.style.backgroundImage = "url(images/def/" + id + ".png)";
var imageSrc = div.style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
var image = new Image();
image.src = imageSrc;
if(width == '') width = image.width + "px";
if(height == '') height = image.height + "px";
div.style.width = width ;
div.style.height = height;
div.onmouseover = function(){ div.style.backgroundImage = "url(images/mo/" + id + ".png)"; };
div.onmouseout = function(){ div.style.backgroundImage = "url(images/def/" + id + ".png)"; };
// append
if(parentElementID != '') document.getElementById(parentElementID).appendChild(div);
else document.body.appendChild(div);
}
</script>
The script for CreateButton is included in the head, and it works fine, just not the first time you go on site. Why is the page not loading them on time? In script, I do append the div to the parent via parentID, and I do all the formating and image loading for that button that I want. I admit that I'm pretty new in HTML and JavaScript.
Question: Why don't the divs load on time? How do I overcome this?
I need to change an image in a div and then immediately centre it on the screen by calculating its height and width and then setting its left and top values. But when I change the img src and then try to get the div's offsetHeight and clientHeight, both the values are wrong. Strangely the offsetWidth and clientWidth values are correct.
Is there a way to refresh the div and get the correct value?
Edit: It appears that changing the image src makes everything after that not work. The change to the onclick event imageObj.onclick = function() {contractImageView(imageId);}; isn't working now either. If I comment out the if statement it all starts working again.
Below is the code...
// Get the page dimensions
var pageBody = document.getElementById(currentBody);
// If you couldn't get the page body, abort.
if (!pageBody) {
return;
}
var pageBodyHeight = window.innerHeight;
var pageBodyWidth = pageBody.offsetWidth;
var imageDiv = document.getElementById(imageId);
var imageObj = imageDiv.children[0];
var paraObj = imageDiv.children[1];
// If you can't get the div or its image, then abort.
if (!imageDiv || !imageObj) {
return;
}
// Check whether the image has been loaded yet, and load if needed
if (imageObj.src.indexOf('lazy_placeholder.gif') !== -1) {
for (item in photoLazyData) {
if (item === imageDiv.parentElement.id) {
imageObj.src = photoLazyData[item][imageDiv.id];
}
}
}
// Change the images class.
imageDiv.className = 'active_design_div';
imageDiv.style.visibility = 'visible';
imageDiv.style.opacity = 1;
// Set the objects new onclick method to collapse the image
imageObj.onclick = function() {contractImageView(imageId);};
// Calculate the right size
imageDiv.style.maxHeight = pageBodyHeight + 'px';
imageDiv.style.maxWidth = pageBodyWidth + 'px';
imageObj.style.maxHeight = pageBodyHeight + 'px';
imageObj.style.maxWidth = pageBodyWidth + 'px';
// Calculate the margins.
var imageDivWidth = imageDiv.offsetWidth || imageDiv.clientWidth;
// ## THIS IS WRONG IF THE ABOVE IF STATEMENT CHANGES THE SRC ##
var imageDivHeight = imageDiv.offsetHeight || imageDiv.clientHeight;
console.log(imageDiv.offsetHeight + ' : ' + imageDiv.clientHeight);
console.log(imageDiv.offsetWidth + ' : ' + imageDiv.clientWidth);
var leftOffset = (pageBodyWidth - imageDivWidth) / 2;
var topOffset = (pageBodyHeight - imageDivHeight) /2;
// Adjust styling to make the div visible and centred.
imageDiv.style.left = String(leftOffset) + 'px';
imageDiv.style.top = String(topOffset) + 'px';
currentId = imageId;
toggleBlackDiv();
Edit: I got this working in the end using Joonas89's answer. I basically moved the if statement that changes the src value to another function that is called prior to the one above. This solved the onclick problem mentioned above. I then changed the divs left/top from calculated values to 50% as detailed by Joonas89 (but on the container div rather than the img element), along with the new transform property. The div and img already had a position value of fixed so didn't need to change that.
Are you sure u want to calculate top and left positions? Wouldent it be better to add a class like this, that always centers it
.parentDiv{
position: relative;
}
.imageElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Using JQGrid 4.5.4
I have a requirement to have both vertical scrollbar on my JQGrid on both the left and right.
Sample mockup:
Is this possible? I have searched extensively and found an example of two horizontal scrollbars, but I was unable to find an example of two vertical scrollbars on both left and right sides of the JQGrid.
I solved it with a small function added on loadComplete event.
This function creates a new div for the left scrollbar and then it sycronices both scrollbars.
loadComplete: function(){
var jqgridHeader = $(".ui-state-default.ui-jqgrid-hdiv");
// Add a new div with another div inside for the left scrollbar
jqgridHeader.after(
'<div id="leftScroll" style="z-index:1000; position:absolute; height:150px; overflow:scroll; width:17px;">'+
'<div id="leftScrollContent" style=" width:17px;"></div>' +
'</div>'
);
// Set to the new new div the sice of the jqgrid body
$("#leftScrollContent").css("height",($("#sortrows").height()));
var jqgridBody = $(".ui-jqgrid-bdiv");
// Syncronice both scrollbars
jqgridBody.scroll(function () {
$("#leftScroll").scrollTop(jqgridBody.scrollTop());
});
$("#leftScroll").scroll(function () {
jqgridBody.scrollTop($("#leftScroll").scrollTop());
});
}
*The left scrollbar overlaps the first grid column
I made some modifications based on hect0r90's answer. This function is called whenever the grid is initialized, in case content changes. There WILL be a problem with this solution if a horizontal scrollbar is present. I did not fix it because this is not an issue for me.
function FormatLeftVerticalScrollbar() {
var leftScrollID = 'leftScroll';
var leftScrollContainerID = 'leftScrollContainer';
//Get the body and header
var jqgridBody = $(".ui-jqgrid-bdiv");
var jqgridHeader = $(".ui-state-default.ui-jqgrid-hdiv");
//See if the scrollbar and container already exist
var leftScroll = $("#" + leftScrollID);
var leftScrollContainer = $("#" + leftScrollContainerID);
//Add a new div with another div inside for the left scrollbar
if(leftScroll == null ||
leftScroll.length == 0)
{
jqgridHeader.after(
'<div id="' + leftScrollID + '" style="z-index:1000; position:absolute; height:' + jqgridBody.height() + 'px; overflow:scroll; width:17px;">' +
'<div id="' + leftScrollContainerID + '" style=" width:30px;"></div>' +
'</div>');
leftScroll = $("#" + leftScrollID);
leftScrollContainer = $("#" + leftScrollContainerID);
}
//Set scroll content height to the height of the content
var contentHeight = jqgridBody[0].scrollHeight;
$("#" + leftScrollContainerID).height(contentHeight);
//Syncronize both scrollbars
jqgridBody.scroll(function () {
$("#" + leftScrollID).scrollTop(jqgridBody.scrollTop());
});
$("#" + leftScrollID).scroll(function () {
jqgridBody.scrollTop($("#" + leftScrollID).scrollTop());
});
}
This is the best I could come up with until Oleg shows up with a better solution.
Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.
Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.
I am using jQuery to
dynamically create an iframe,
hide the page content,
append the iframe to a hidden div,
calculate the height of the iframe,
set the hidden div to have a height which matches the height of the iframe,
show the hidden div ($("#products_container").slideDown()).
And this all works fine.
And then if you close that product, the iframe is removed and the original page contents come back. All is perfect!
And then if you open a second iframe, it has a height of 0. (This works fine in Chromium; but in Firefox, second and subsequent iframes always have a height of zero.)
The height of the iframe will depend on its content. They have quite simple HTML and reasonably complicated CSS, with min-heights and lots of padding.
I put sleep(5) at the top of the PHP code which generates the iframe, just to help me to double-check what’s going on. As expected, the console.log('URI: ' + uri) fires immediately, and console.log('src: ' + this.src); console.log('height: ' + infr_height) happens after the five-second delay. This means that the iframe is indeed loaded before we try to calculate the height.
I’ve tried using $(infr).load() instead of infr.onload. That makes no difference. I’ve made sure that the onload event is set before the src is set, and before the iframe is appended to the HTML, to ensure that it is fired correctly. I added $("iframe").remove() when the iframe is closed, to ensure that the previous iframe wasn’t hanging around confusing matters.
Nothing I can think of has any effect.
page_href = document.location.href;
function open_product(uri, hist) {
console.log('URI: ' + uri);console.log('URI: ' + uri);
$('p').slideUp();
$("#products_container").slideUp();
var infr = document.createElement('iframe');
infr.style.border = 'none';
var infr_height;
infr.onload = function() {
var $pc = $("#product_content");
$pc.css('width', '100%');
infr_height = $(this).contents().height();
console.log('src: ' + this.src);
console.log('height: ' + infr_height); // always zero on second and subsequent loads
$(this).css('width', '100%');
$(this).css('height', '100%');
$pc.height(infr_height);
$pc.slideDown();
if (hist) {
var uri = $(this).contents().find('#canonical').attr('href');
// I can't get the state to work the way I want it to, so I'll do this
// with the pathname. Bah!
history.pushState(null, null, uri);
}
var close = document.createElement('img');
close.src = '/custom/public/styles/gallery/fancybox/button_close.png';
close.onclick = close_product;
app.get("product_content").appendChild(close);
close.style.position = 'absolute';
close.style.right = '50px';
close.style.top = '10px';
};
infr.src = uri;
var pc = app.get("product_content");
pc.appendChild(infr);
pc.style.position = 'relative';
}
function show_all_prds() {
var $pc = $("#product_content")
$pc.slideUp();
$("iframe").remove();
$pc.empty();
$pc.attr('style', '');
$('p').slideDown();
$("#products_container").slideDown();
}
function close_product() {
show_all_prds();
history.pushState(null, null, page_href);
}
$("a.inlineframe").click(function(e) {
e.preventDefault();
open_product(this.href, true);
});
window.onpopstate = function(e) {
var uri = document.location.toString().split('/');
var section = uri[3];
if (section === 'products') {
var prd = uri[4];
console.log(prd);
var open = '/custom/api/product.output.php?name=' + prd;
open_product(open, false);
} else {
show_all_prds();
}
};