We Keep Coding

save scroll position inside div after reload

My goal is to save the scroll position inside a div ,so that after reload it will load in the same position.
In my project im using this plugin to scroll to element inside a div by its title. the current way i'm using this plugin is this:
$("#wrapper").scrollTo($(".active>.placementWrapper>.placementName[title='" + placementName + "']"));
var scrollToPos = placementName;
localStorage.setItem("scrollToPos", scrollToPos);
but as you can see, i use element's title to get the position i need to scroll to, so when im scrolling with the mouse for example, the position won't update.
this is the code of the plugin:
$.fn.scrollTo = function( target, options, callback ){
if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }
var settings = $.extend({
scrollTarget : target,
offsetTop : 50,
duration : 500,
easing : 'swing'
}, options);
return this.each(function(){
var scrollPane = $(this);
var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop);
scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){
if (typeof callback == 'function') { callback.call(this); }
});
});
}
bottom line, any idea how can i save the last position inside the #wrapper ? thx

Try using just this to store.:
<div id="test" style="height:460px;"></div>
<script>
localStorage.hval=(document).getElementById("test").style.height;
</script>
To get the value again,
localStorage.getItem("hval");
You can replace hval with pretty much anything you want.To check the LocalStorage, go to the Dev tools>Resources>Local Storage

Change element display none back to default style value JS

I have a function in JS that hides the element parsed:
function hide(id){
document.getElementById(id).style.display = "none";
}
How can I create a function that brings back the element to the default style value. For instance a div display property is "block" as for an image is "inline-block", other elements are "inline" or lists are "list-item" How can I bring them back their default state?
function show(id){
document.getElementById(id).style.display = "?????";
}
I know how to do it in Jquery but it is not an option.
In CSS there might be styles for the elements including style:none, which need to be overwritten to the default value.
Since there is CSS in my example making style.display = '' eliminates the style added with JS but gets back to whatever style is added in CSS, I want to bring it back to its default value even before assigning styles with CSS.
I tried this as it was suggested in a link in one of the comments:
elem = document.getElementById(id);
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display");
but in this case 'theCSSprop' returns "none" for a div, when I expect "block"
Any ideas?
Thanks.

You need just assign it to empty value:
document.getElementById(id).style.display = "";
Or using removeProperty method:
document.getElementById(id).style.removeProperty( 'display' );
But note that removeProperty will not work on IE<9.
If you want to get original CSS value you will need probably to get it from empty <iframe> element. I created example on jsFiddle how to get current value using getComputedStyle and iframe value on jsFiddle.
Please note that getComputedStyle not support old versions of IE. It support IE9+.
For IE8 you should use Element.currentStyle

Note:
If you define display:none; for a class or tag (either in a separate css file or in the head section), the above methods won't work.
Then you will have to determine which type of tag + class it is and manually assign the value specific to it.
These are examples of what may not work:
// In many cases this won't work:
function ShowHide_WillRarelyWork(id, bDisplay) {
// Note: This will fail if parent is of other tag than element.
var o = document.getElementById(id);
if (o == null) return;
//
if (bDisplay) {
o.style.display = 'inherit';
o.style.visibility = true;
}
else {
o.style.display = 'none';
}
} // ShowHide_WillRarelyWork(...)
// This will work in most, but not all, cases:
function ShowHide_MayWork(id, bDisplay) {
// Note: This will fail if element is declared as 'none' in css.
var o = document.getElementById(id);
if (o == null) return;
//
if (bDisplay) {
o.style.display = null;
o.style.visibility = true;
}
else {
o.style.display = 'none';
}
} // ShowHide_MayWork(...)
This is long but will most probably work:
function getDefaultDisplayByTag(sTag) {
// This is not fully implemented, as that would be very long...
// See http://www.w3.org/TR/CSS21/sample.html for full list.
switch (sTag) {
case 'div':
case 'ul':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6': return 'block';
//
case 'li': return 'list-item';
//
case 'table': return 'table';
//
case 'td':
case 'th': return 'table-cell';
}
// Fallback:
return 'block';
} // getDefaultDisplayByTag(...)
//
function computeDisplay(o) {
var oFunction = window.getComputedStyle;
if (oFunction) {
var oStyle = window.getComputedStyle(o)
if ((oStyle) && (oStyle.getPropertyValue)) {
return oStyle.getPropertyValue('display');
}
}
if (window.currentStyle) {
return window.currentStyle.display;
}
return null; // <-- This is going to be a bad day...
} // computeStyle(...)
//
// This will most probably work:
function ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive) {
if ((o == null) || (o == undefined) || (o == document) || (o.tagName == undefined)) return;
//
if (bDisplay == null) bDisplay = true
if (!bDisplay) {
o.style.display = 'none';
}
else {
// First remove any directly set display:none;
if ((o.style.display == 'none') || (o.style.display == '')) {
o.style.display = null;
}
//
var sDisplay = null;
var sDisplayCurrent = computeDisplay(o);
var oParent = o.parentNode;
// Was this element hidden via css?
if ((sDisplayCurrent == null) || (sDisplayCurrent == 'none')) {
// We must determing a sensible display value:
var sTag = o.tagName;
sDisplay = getDefaultDisplayByTag(sTag);
} // else: if ((sDisplayCurrent != null) && (sDisplayCurrent != 'none'))
//
// Make sure visibility is also on:
if (sDisplay != null) o.style.display = sDisplay;
o.style.visibility = true;
//
if (bMaybeRecursive) {
// We should travel up the tree and make sure parent are also displayed:
ShowHideObject_WillProbablyWork(oParent, true, true);
}
} // else: if (!bDisplay) ...
//
} // ShowHideObject_WillProbablyWork(...)
//
// ... and finally:
function ShowHideId_WillProbablyWork(id, bDisplay, bMaybeRecursive)
var o = document.getElementById(id);
ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive)
} // ShowHideId_WillProbablyWork(...)
Of course this could be shortened a bit; but that's how it looks in my source.

Here is one more solution for retrieving any property default value of any element. Idea is following:
Get nodeName of specific element
Append a fake element of the same node name to body
Get any property value of the fake element.
Remove fake element.
function getDefaultValue(element, property) {
var elDefault = document.createElement(element.nodeName);
document.body.appendChild(elDefault);
propertyValue = window.getComputedStyle(elDefault,null).getPropertyValue(property);
document.body.removeChild(elDefault);
return propertyValue;
}
function resetPropertyValue (element,propertyName) {
var propertyDefaultValue = getDefaultValue(element, propertyName);
if (element.style.setProperty) {
element.style.setProperty (propertyName, propertyDefaultValue, null);
}
else {
element.style.setAttribute (propertyName, propertyDefaultValue);
}
}
#d {
background: teal;
display: inline;
}
<button onclick="resetPropertyValue(document.getElementById('d'), 'display')">Try it</button>
<div id="d">test</div>

You can use custom attributes
function hide(id){
var elem = document.getElementById(id);
//Store prev value
elem.setAttribute('custom-attr', elem.style.display);
elem.style.display = "none";
}
function show(id){
var elem = document.getElementById(id);
//Set prev value
elem.style.display = elem.getAttribute('custom-attr');
}

Filling in an empty value removes the inline override, so the original value is active again.
function show(id){
document.getElementById(id).style.display = "";
}

Since what you want is the default value for the element and not what's in the style sheet, you simply want to set the value to auto.
document.getElementById(id).style.display="auto"
This tells the browser to calculate what the normal display for this type of element is and to use that.

reallyvisible selector

The jquery :visible and :hidden selectors are a little misleading, they select elements that consume space in the document, therefore something with visibility:hidden is classed as :visible even though it's not o_O
I need to be able to select only elements that are :reallyvisible, that I can see with my eyes eg, not opacity:0 or visibility:hidden
Obviously for an element to be visually visible all it's ancestors must also be visible so I assume a recursive look up the tree would be necessary.
Is this just too expensive?
Can anyone suggest a reliable efficient way to achieve this?

How about:
$.expr[':'].reallyVisible = function(node, idx){
while(true){
// should be faster than $(node).css()
var css = document.defaultView.getComputedStyle(node, null);
if(css.opacity == 0 || css.visibility == 'hidden')
return false;
node = node.parentNode;
if(!node || node === document)
break;
}
return true;
}
http://jsfiddle.net/jxEFk/

Try this code :
function isVisible(el){
if (el.css('opacity') != '0' && el.css('visibility') != 'hidden') {
return true
}
return false
}
$('myelement').filter(function () {
visible = true
if (isVisible($(this)) == false)
visible = false
$(this).parents().each(function(){
if (isVisible($(this)) == false)
visible = false
})
return visible == true
}).html("I'm really visible !")

Can't Change CSS Bottom with jQuery

I'm having trouble getting the "else" bit of this working. Anyone know what the problem is?
var navOpen = false;
if (navOpen == false) {
$("nav").click(function() {
$(this).css("bottom","0");
navOpen = true;
});
} else {
$("nav").click(function() {
$(this).css("bottom","-84");
navOpen = false;
});
}

The condition is in the wrong place.
var navOpen = false;
$("nav").click(function() {
if (navOpen == false) {
$(this).css("bottom","0");
navOpen = true;
} else {
$(this).css("bottom","-84px");
navOpen = false;
}
});

You are binding several handlers to the same element, you can use css method:
$("nav").click(function() {
$(this).css("bottom", function(i, bottom) {
return bottom === '0px' ? '-84px' : '0px';
// return navOpen ? '-84px' : '0px';
});
})

Try with
$(this).css("bottom","-84px");

You need to define metering (e.g px, %). CSS doesn't support just numering parameters like HTML attribute does.

Basic Js function to scale two DIV's heights

I want #result to being scaled to #sidebar height if set. If not, leaving #result at its original height.
My code:
window.onload = setDiv;
function setDiv() {
var e = document.getElementById('sidebar'); // Get the sidebar infos
var eh = e.offsetHeight // div height
if ( typeof(eh) == "undefined" || typeof(eh) == null) { // if sidebar isnt in the page
alert(eh);
return true;
} else {
var eh = e.offsetHeight // div height
var d = document.getElementById('result') // Get the result div height
var dh = d.offsetHeight // div height
d.style.height = eh + 65 + 'px'; // Set result div height to sidebar height
alert(d);
document.write(dh);
return false;
}
}
I don't think HTML/CSS is needed.
Thank you.

This line seems wrong:
if ( typeof(eh) == "undefined" || "null") { // if sidebar isnt in the page
try this:
if ( typeof(eh) == "undefined" || typeof(eh) == null) { // if sidebar isnt in the page
Also, I would add in a try catch block. If there is a throw you won't even know your code did not execute.

This causes an error because e does not exist (yet):
var e = document.getElementById('sidebar'); // <<< This is what doesn't work
This is because your window.onload is not done right. Take the parentheses off:
window.onload = setDiv;
http://jsfiddle.net/userdude/u8DZx/3/
I want to demonstrate how easy this is to do in a library like jQuery. window.onload does not always work the way you think either; it's often better to use onDomReady, or $(document).ready() in jQuery. You can also add multiple handlers at different points in the page load, which is more difficult just using the window.onload method.
$(document).ready(function(){
setTimeout(function(){setDiv();},2000); // So you can see the transition
});
function setDiv() {
var $sidebar = $('#sidebar');
if ($sidebar.size() === 0) {
return true;
} else {
$('#result').animate({
height : $('#sidebar').height()
}, 5000);
return false;
}
}
http://jsfiddle.net/userdude/u8DZx/1/
If you don't want the effect, just do:
$('#result').height($('#sidebar').height());
And if you actually meant to use offsetHeight, which it doesn't sound like that's what you want (height instead), you could do this:
$(document).ready(function(){
setTimeout(function(){setDiv();},2000); // So you can see the transition
});
function setDiv() {
var $sidebar = $('#sidebar');
if ($sidebar.size() === 0) {
return true;
} else {
$('#result').offset($('#sidebar').offset());
return false;
}
}
http://jsfiddle.net/userdude/u8DZx/2/