Develop Reference

Finding height of a div from inside iFrame

I have a searchbar on my index, that updates while I am searching and it add or remove results as you write more text and it narrows down.
The results are then listen inside a DIV located on another page that I access from the index by iFrame on my site.
My problem now is that I want to get the height of the result-div and send it back from "within" the iFrame to the page where the iFrame is located so I can change the height based on the content as it changes.
Ive looked all over and tried many ways. But it all boils down to that: I cant get the height of the result-div-page when I request it from my index page.

Okey. Here is the solution...
<script type="text/javascript">
$(document).ready(function() {
$( "#search-frame" ).on('load', function() {
var search_div = $(this).contents().find("#table-results");
var search_height = search_div.height();
$('#search-frame').css('height', search_height);
});
});
</script>

jQuery smooth scrolling on a different webpage

I have managed to get the smooth scrolling working on a single page using the following code.
Note the HTML link is stored in a header.php and used across multiple pages below is a code snippet:
HTML Script:
<a class="item" href="index.php#contact">
<a name="contact"></a>
JS Script:
$('a[href="index.php#contact"]').click(function (e) { // user clicks on html link
e.preventDefault(); // prevent the default behaviour that occurs in the browser
var targetOffset = $('a[name="contact"]').offset().top; // define a variable to point at a particular section & offset from the top of browser
$('body').animate( // create animation
{ scrollTop: targetOffset }, 1000); // scrollTop property = target variable
});
Problem:
When I go to a different webpage and click the contact link it does not link back to the index.php#contact and scroll down to the contact anchor point.
Any assistance or advice is much appreciated I'm sure its a simple tweak in the code somewhere.

Check your href it's supposed to be: index.php/#contact

Javascript - Click list element to load HTML page animation

Javascript novice here. I am working on a piece of code provided here - http://codepen.io/mariusbalaj/pen/beALH/
I'm trying to modify the behavior so that instead of just zooming in the list element when clicked, it should load a different html page within the animated frame.
$(document).ready(function() {
var $box = $('.box');
$('.metro li').each(function() {
var color = $(this).css('backgroundColor');
var content = $(this).html();
$(this).click(function() {
$box.css('backgroundColor', color);
$box.addClass('open');
$box.find('p').html(content);
});
$('.close').click(function() {
$box.removeClass('open');
$box.css('backgroundColor', 'transparent');
});
});
});
Can anyone point me to the right direction?
Update 1 :
I figured out that modifying the 'content' variable on the below line would change the content of the animated frame:
` $box.find('p').html(content);`
And if I change it to something like:
` $box.find('p').html('<h1>Test Page</h1>');`
It works as expected. However, I want the content to be different for each list element.
Is there an easy way of doing this per element? I am quite confused with the 'this' keyword.

You may be looking for this answer, if you want to open another HTML page:
how to change page from within javascript
If you're trying to open it WITHIN the animated frame, you should look into making some requests to the content of the new page/tile and filling that with content, which is answered here: How to get the response of XMLHttpRequest?
It all depends what you want to do, let us know :)

How to scroll to a specifc element when there is already an # anchor on the url

I have a web site on based on SkelJS that currently loads a different part of the webpage by appending an #anchor to the url like this:
Note that #blog loads the blog page, the scroll is at the top. Inside the Blog page I need to scroll to a certain article. How can I use two anchors so that something like #blog#article_x would work? I suppose I have to look for a workaround since anchoring 2 ids makes no sense, is there a work around?
Additional notes:
Note that if a change #blog to #article_x it actually goes to the desired article however if someone shares the link it won't go to the article because it will look for #article_x on the homepage, where it does not exists.
Here is a demo of the template I'm using (http://html5up.net/uploads/demos/astral/#) note how the #anchor loads the desired page.

You can use a hash that contains both page and element. Then split and then do your page load then scroll, i.e. #blog,someelement
//on page load or wherever you detect the hash
$(function(){
var hash = window.location.hash;
var ele = null;
//Detect if there is a splitable hash
if(hash.indexOf(",") != -1){
var parts = hash.split(",");
hash = parts[0];
ele = jQuery("#"+parts[1]);
}
//whatever function you do to load the blog page
loadPage(hash,ele);
});
function loadPage(page,ele){
//do page loading
$("#page").load("http://someurl.com",function(){
//if there was no second part to the hash
//this will be skipped
if(ele){
$("html,body").animate({
scrollTop: ele.offset().top
},1000);
}
});
}
JSfiddle Demo

Considering the ID of the element that you want to scroll to is myelement you can use below jquery code to smoothly scroll to it.
$("html,body").animate({scrollTop : $("#myelement").offset().top},1000);

We can scroll to specific div when it has id or class
var $id=window.location.href.split('#')[1];
$('html, body').scrollTop($("#"+$id).offset().top)

Tree View Open it's respective Div in the right side

I have downloaded a Tree View Code and it is working fine. The code is in this way :
d = new dTree('d');
d.add(0,-1,'StratApps');
d.add(1,0,'First Folder','example.html');
d.add(2,1,'Packages','example1.html');
d.add(3,2,'Pkg_Load_Dim','example2.html');
d.add(4,2,'Pkg_Write_to_File','#');
d.add(5,1,'Interfaces','#');
d.add(6,5,'Int_Load_Order_Dim','#');
d.add(7,5,'Int_Load_Channel_Dim','#');
d.add(8,1,'Procedures','#');
d.add(9,8,'Proc_Update_Order','#');
d.add(10,8,'Proc_Process_Errors','#');
document.write(d);
Now I want to give the links to open respective Divs in the right-side. Can anyone help me in this regard...

You could try something along these lines:
$('.dtree a.node').prop('onclick', '').click(function(e) {
var href = $(this).prop('href');
$('#divOnRightSide').load(href);
e.preventDefault();
});
Basically, what you say is: for every node (i.e. link) there is in every dtree on the page, remove the onClick-event directly from the HTML and add a click event handler.
In this handler, get the href-attr, and load the content of that link into the div with id="divOnRightSide".
Then, so no page navigation is triggered, use e.preventDefault().
Hope this helps.
EDIT:
Here is a jsFiddle to demonstrate the purpose: jsFiddle.